:root {
  color-scheme: light;
  /* UI density is applied to individual CSS lengths. It deliberately does
     not use browser zoom or a transformed application shell: layout, text,
     controls, layers and their hit targets keep native CSS geometry. */
  --ui-density: 0.8;
  --home-rail-desktop-width: clamp(calc(312px * var(--ui-density)), 17vw, calc(353px * var(--ui-density)));
  --home-info-rail-desktop-width: clamp(calc(260px * var(--ui-density)), 14.2vw, calc(294px * var(--ui-density)));
  --app-shell-sidebar-width: var(--home-rail-desktop-width);
  --collapsed-rail-layout-width: calc(59px * var(--ui-density));
  --app-shell-gap: calc(13px * var(--ui-density));
  --app-shell-padding: calc(13px * var(--ui-density));
  --layer-main-width: 100vw;
  --layer-dialog-width: calc(64vw * var(--ui-density));
  --layer-wide-dialog-width: calc(72vw * var(--ui-density));
  --layer-work-item-dialog-width: calc(80vw * var(--ui-density));
  --layer-drawer-width: calc(56vw * var(--ui-density));
  --layer-work-item-drawer-width: calc(68vw * var(--ui-density));
  --app-shell-sidebar-top: calc(13px * var(--ui-density));
  --app-shell-sidebar-height-offset: calc(25px * var(--ui-density));
  --font-family-base: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "Alibaba Sans", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-offset: calc(1px * var(--ui-density));
  --font-size-table-offset: 1px;
  /* At 100% browser zoom, the default 14px UI type renders at the same 80%
     density as all other component lengths. Each user type-size step is 0.8px. */
  --font-size-title: calc(13px * var(--ui-density) + var(--font-size-offset));
  --font-size-body: calc(13px * var(--ui-density) + var(--font-size-offset));
  --font-size-hint: calc(13px * var(--ui-density) + var(--font-size-offset));
  /* Tables are dense data surfaces, but their text must retain its authored
     base size and type-size steps. Do not apply the UI-density multiplier. */
  --font-size-table: calc(11px + var(--font-size-table-offset));
  --font-size-tooltip: calc(9px * var(--ui-density) + var(--font-size-offset));
  --bg: #f5f8ff;
  --bg-gradient:
    radial-gradient(calc(900px * var(--ui-density)) calc(560px * var(--ui-density)) at 72% 56%, rgb(205 250 244 / 78%), #00000000 68%),
    radial-gradient(calc(780px * var(--ui-density)) calc(520px * var(--ui-density)) at 22% 20%, rgb(203 195 235), transparent 66%),
    linear-gradient(135deg, #f8fbff 0%, #d9e6fe 44%, #c3a6f7 100%);
  --bg-wash:
    linear-gradient(120deg, rgba(255, 255, 255, 0.58), transparent 48%),
    linear-gradient(320deg, rgba(178, 224, 255, 0.22), transparent 62%);
  --auth-gradient:
    linear-gradient(120deg, rgba(182, 223, 214, 0.52), transparent 46%),
    linear-gradient(320deg, rgba(213, 195, 232, 0.36), transparent 50%),
    var(--bg);
  --panel: rgba(255, 255, 255, 0.52);
  --panel-2: rgba(255, 255, 255, 0.40);
  --panel-strong: rgba(255, 255, 255, 0.68);
  /* Opaque surface for data summaries that must stay distinct from the
     translucent application shell. */
  --surface-solid: #ffffff;
  --surface-solid-text: #111827;
  --layer-surface: rgba(255, 255, 255, 0.38);
  --layer-field: rgba(255, 255, 255, 0.76);
  --layer-line: rgba(255, 255, 255, 0.56);
  --layer-shadow: 0 calc(38px * var(--ui-density)) calc(104px * var(--ui-density)) rgba(72, 86, 128, 0.18), 0 calc(12px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(108, 121, 170, 0.12);
  --layer-soft-shadow: 0 calc(18px * var(--ui-density)) calc(48px * var(--ui-density)) rgba(105, 121, 170, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.54);
  --control: rgba(255, 255, 255, 0.56);
  --control-hover: rgba(255, 255, 255, 0.78);
  --text: #1d2938;
  --heading: #162333;
  --muted: #7b8798;
  --muted-strong: #64728a;
  --line: rgba(255, 255, 255, 0.82);
  --line-strong: rgba(147, 165, 190, 0.15);
  --accent: #5f7cff;
  --accent-2: #8270f7;
  --accent-3: #d99bf5;
  --accent-gradient: linear-gradient(90deg, #5d78ff 0%, #756dff 54%, #9864f6 100%);
  --menu-active-gradient: linear-gradient(90deg, #5d78ff 0%, #756dff 54%, #9864f6 100%);
  --menu-active-text: #ffffff;
  --menu-active-icon: #ffffff;
  --menu-hover-border: rgba(90, 118, 245, 0.50);
  --menu-hover-shadow:
    0 0 0 1px rgba(90, 118, 245, 0.16),
    0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(90, 118, 245, 0.10);
  --warn: #946a27;
  --danger: #b25764;
  --ok: #3f8d60;
  --warn-bg: rgba(255, 235, 184, 0.72);
  --danger-bg: rgba(255, 221, 229, 0.72);
  --ok-bg: rgba(211, 247, 224, 0.72);
  --work-item-type-epic: #7387ff;
  --work-item-type-feature: #65b5f6;
  --work-item-type-story: #42cda8;
  --work-item-type-task: #95cf72;
  --work-item-type-bug: #ef6f89;
  /* V5-T-UX-02: shared chart theme tokens. The categorical series palette is
     decorative (distinct from the semantic --ok/--warn/--danger); the chart
     adapter reads these via getComputedStyle and never hardcodes colors. */
  --chart-series-1: #5f7cff;
  --chart-series-2: #8270f7;
  --chart-series-3: #2bb3d9;
  --chart-series-4: #3fc2a3;
  --chart-series-5: #f0a53c;
  --chart-series-6: #ef7ba0;
  --chart-series-7: #b48cf0;
  --chart-series-8: #8a97b0;
  --chart-axis: rgba(147, 165, 190, 0.46);
  --chart-split: rgba(147, 165, 190, 0.18);
  --chart-tooltip-bg: rgba(255, 255, 255, 0.96);
  --chart-tooltip-border: rgba(147, 165, 190, 0.26);
  --chart-area-opacity: 0.18;
  --growth-agent-product: #00c8ff;
  --growth-agent-development: #685cff;
  --growth-agent-test: #00c982;
  --growth-energy-track-opacity: 0.28;
  --growth-energy-track-focus-opacity: 0.48;
  --growth-energy-track-halo-opacity: 0.10;
  --growth-energy-track-focus-halo-opacity: 0.24;
  --glass: saturate(165%) blur(calc(28px * var(--ui-density)));
  --radius: calc(30px * var(--ui-density));
  --radius-sm: calc(18px * var(--ui-density));
  --shadow: none;
  --soft-shadow: none;
  --accent-shadow: none;
  --progress-track: rgba(218, 226, 234, 0.62);
  --table-head: rgba(255, 255, 255, 0.34);
  --active-surface: var(--menu-active-gradient);
  --overlay: rgba(83, 96, 112, 0.28);
  --icon-blue: #5c7df2;
  --icon-blue-bg: rgba(225, 231, 255, 0.78);
  --icon-pink: #ef5d92;
  --icon-pink-bg: rgba(255, 223, 238, 0.74);
  --icon-green: #42c48a;
  --icon-green-bg: rgba(218, 248, 234, 0.76);
  --icon-orange: #ff8442;
  --icon-orange-bg: rgba(255, 229, 211, 0.76);
  --toolbar-popover-bg:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98)),
    #fff;
  --toolbar-popover-border: rgba(145, 158, 255, 0.26);
  --toolbar-popover-shadow: 0 calc(28px * var(--ui-density)) calc(80px * var(--ui-density)) rgba(83, 98, 155, 0.18), 0 calc(10px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(83, 98, 155, 0.12);
  --layer-input-border: rgba(125, 99, 244, 0.24);
  --layer-input-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  --layer-input-focus-border: rgba(125, 99, 244, 0.58);
  --layer-input-focus-shadow:
    0 0 0 calc(4px * var(--ui-density)) rgba(125, 99, 244, 0.14),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.14);
  --layer-accent-shadow:
    0 calc(28px * var(--ui-density)) calc(80px * var(--ui-density)) rgba(83, 98, 155, 0.18),
    0 calc(10px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(83, 98, 155, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.42),
    0 0 calc(34px * var(--ui-density)) rgba(136, 108, 255, 0.20);
  --z-toast: 320;
}

/* M66 效能报表：报表中心、指标库、报表设计器共享同一主题化视觉语言。 */
.efficiency-center,
.efficiency-library,
.efficiency-dashboard {
  display: grid;
  gap: 20px;
}

/* M66.2 报表中心：桌面端严格主从 1:4，URL 只选择当前条目，
   运行时筛选和报表内容始终留在右侧。 */
.efficiency-center-workbench {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 4fr);
  align-items: start;
  gap: calc(16px * var(--ui-density));
}
.efficiency-center-master,
.efficiency-center-detail { min-width: 0; background: var(--panel-strong); border-color: var(--line); }
.efficiency-center-master { display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: start; gap: calc(16px * var(--ui-density)); max-block-size: calc(100dvh - 120px); min-block-size: 0; padding: calc(18px * var(--ui-density)); }
.efficiency-center-master > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.efficiency-center-master > header span,
.efficiency-report-toolbar__identity > span { color: var(--accent); font-size: var(--font-size-small); font-weight: 750; letter-spacing: .1em; }
.efficiency-center-master h2 { margin: 5px 0; color: var(--heading); font-size: var(--font-size-subtitle); }
.efficiency-center-master p { margin: 0; color: var(--muted); font-size: var(--font-size-hint); line-height: 1.55; }
.efficiency-center-master__list { display: grid; align-content: start; gap: calc(12px * var(--ui-density)); min-block-size: 0; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.efficiency-center-master__group { display: grid; gap: 5px; min-width: 0; }
.efficiency-center-master__group-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; width: 100%; min-height: calc(40px * var(--ui-density)); padding: 0 calc(10px * var(--ui-density)); color: var(--heading); font-size: var(--font-size-small); font-weight: 750; text-align: left; background: var(--control); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.efficiency-center-master__group-toggle:hover { color: var(--text); background: var(--control-hover); border-color: var(--line-strong); }
.efficiency-center-master__group-toggle:focus-visible { color: var(--text); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.efficiency-center-master__group-count { color: var(--muted); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.efficiency-center-master__group-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease; }
.efficiency-center-master__group-toggle[aria-expanded="false"] .efficiency-center-master__group-caret { transform: rotate(-45deg) translate(-2px, 2px); }
.efficiency-center-master__group-panel { display: grid; gap: 2px; margin-left: calc(8px * var(--ui-density)); padding: calc(3px * var(--ui-density)) 0 calc(3px * var(--ui-density)) calc(8px * var(--ui-density)); border-left: 1px solid var(--line); }
.efficiency-center-master__item { display: block; width: 100%; min-width: 0; min-height: calc(32px * var(--ui-density)); padding: calc(6px * var(--ui-density)) calc(10px * var(--ui-density)); text-align: left; color: var(--text); appearance: none; background: transparent !important; border: 0; border-radius: calc(var(--radius) * .58); box-shadow: none; backdrop-filter: none; transform: none; }
.efficiency-center-master__item strong { overflow: hidden; color: var(--muted-strong); font-size: var(--font-size-small); font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.efficiency-center-master__item:hover { background: var(--control-hover) !important; border: 1px solid var(--line-strong); transform: none; }
.efficiency-center-master__item:focus-visible { background: transparent !important; outline: 2px solid var(--accent); outline-offset: 2px; }
.efficiency-center-master__item.is-selected { background: var(--control) !important; border: 1px solid var(--accent); box-shadow: none; }
.efficiency-center-master__item.is-selected:hover { background: var(--control-hover) !important; }
.efficiency-center-master__item:is(:hover, :focus-visible, .is-selected) strong { color: var(--heading); }
.efficiency-center-master__empty { padding: 8px 12px; }
.efficiency-center-detail { display: grid; align-content: start; gap: calc(16px * var(--ui-density)); min-height: min(720px, 72vh); padding: calc(22px * var(--ui-density)); }
.efficiency-report-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding-bottom: calc(16px * var(--ui-density)); border-bottom: 1px solid var(--line); }
.efficiency-report-toolbar__identity h2 { margin: 6px 0; color: var(--heading); font-size: var(--font-size-page-title); }
.efficiency-report-toolbar__identity p { max-width: 62ch; margin: 0; color: var(--muted); line-height: 1.6; }
.efficiency-report-toolbar__actions { align-self: start; display: flex; justify-content: flex-end; gap: 8px; }
.efficiency-runtime-filterbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.efficiency-runtime-filterbar__controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 10px; }
.efficiency-runtime-control { display: grid; flex: 1 1 150px; gap: 6px; min-width: 0; }
.efficiency-runtime-control > span { color: var(--muted-strong); font-size: var(--font-size-small); }
.efficiency-runtime-filterbar__actions { display: flex; gap: 8px; }
.efficiency-runtime-filterbar > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--font-size-small); }
.efficiency-runtime-filterbar__empty { margin: 0; padding: 14px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.efficiency-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.efficiency-runtime-card { display: grid; gap: 12px; min-width: 0; padding: 18px; }
.efficiency-runtime-card--full { grid-column: 1 / -1; }
.efficiency-runtime-card > header,
.efficiency-runtime-card > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.efficiency-runtime-card header > div { min-width: 0; }
.efficiency-runtime-card header > div > span { color: var(--muted); font-size: var(--font-size-small); }
.efficiency-runtime-card h3 { margin: 5px 0 3px; color: var(--heading); }
.efficiency-runtime-card header p { margin: 0; color: var(--muted); font-size: var(--font-size-hint); }
.efficiency-runtime-card__chart { min-width: 0; }
.efficiency-runtime-card > footer { align-items: center; color: var(--muted); font-size: var(--font-size-small); }
.efficiency-center-empty { display: grid; min-height: 300px; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--muted); text-align: center; background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.efficiency-center-empty strong { color: var(--heading); }
.efficiency-center-empty p { max-width: 48ch; margin: 0; line-height: 1.6; }

.efficiency-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  overflow: hidden;
  background: var(--panel-strong);
  border-color: var(--line);
}

.efficiency-hero > div {
  max-width: 780px;
}

.efficiency-hero span,
.efficiency-designer__canvas > header > div > span,
.efficiency-editor > header span {
  color: var(--accent);
  font-size: var(--font-size-small);
  font-weight: 750;
  letter-spacing: .12em;
}

.efficiency-hero h2,
.efficiency-dashboard__heading h2,
.efficiency-editor h2,
.efficiency-designer h2 {
  margin: 7px 0 8px;
  color: var(--heading);
}

.efficiency-hero p,
.efficiency-dashboard__heading p,
.efficiency-editor header p,
.efficiency-designer header p,
.efficiency-section > header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.efficiency-section {
  display: grid;
  gap: 12px;
}

.efficiency-section > header,
.efficiency-panel > header,
.efficiency-editor > header,
.efficiency-editor__section > header,
.efficiency-canvas-filter > header,
.efficiency-canvas-metrics > header,
.efficiency-designer__rail > header,
.efficiency-designer__canvas > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.efficiency-section > header h2,
.efficiency-panel h3,
.efficiency-editor__section h3,
.efficiency-canvas-filter h3,
.efficiency-canvas-metrics h3 {
  margin: 0 0 3px;
}

.efficiency-section > header > span {
  color: var(--muted);
  font-size: var(--font-size-small);
}

.efficiency-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.efficiency-report-card,
.efficiency-metric-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 18px;
  background: var(--panel-strong);
  border-color: var(--line);
}

.efficiency-report-card > header,
.efficiency-report-card > footer,
.efficiency-metric-card > header,
.efficiency-metric-card > footer,
.efficiency-canvas-card > header,
.efficiency-canvas-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.efficiency-report-card__group,
.efficiency-metric-card > header > span:first-child,
.efficiency-canvas-card > header > span {
  color: var(--muted-strong);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.efficiency-report-card h3,
.efficiency-metric-card h3 {
  margin: 14px 0 7px;
  color: var(--heading);
  font-size: 19px;
}
.efficiency-metric-card__preview { min-width: 0; min-height: calc(172px * var(--ui-density)); margin-top: 12px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(var(--radius) * .72); }
.efficiency-metric-card__preview .chart-stat { min-height: calc(158px * var(--ui-density)); padding: 14px; border: 0; background: transparent; }
.efficiency-metric-card__preview .chart-state { min-height: calc(158px * var(--ui-density)); }

.efficiency-report-card p,
.efficiency-metric-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.efficiency-report-card > footer,
.efficiency-metric-card > footer {
  margin-top: auto;
}

.efficiency-report-card > footer > span {
  color: var(--muted);
  font-size: var(--font-size-small);
}

.efficiency-report-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.efficiency-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.efficiency-state--ready { color: var(--ok); background: var(--ok-bg); }
.efficiency-state--unavailable { color: var(--warn); background: var(--warn-bg); }
.efficiency-state--source_unavailable { color: var(--warn); background: var(--warn-bg); }
.efficiency-state--error { color: var(--danger); background: var(--danger-bg); }
.efficiency-state--empty { color: var(--muted-strong); background: var(--panel-2); }
.efficiency-state--unchecked { color: var(--muted-strong); background: var(--control); }
.efficiency-state--builtin { color: var(--accent); background: var(--control); }

.efficiency-notice,
.efficiency-definition-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: var(--muted-strong);
  background: var(--warn-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  text-align: center;
}

.efficiency-empty p { margin: 5px 0 14px; color: var(--muted); }

.efficiency-filterbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-filterbar__content {
  display: contents;
}

.efficiency-filterbar__toggle { display: none; }
.efficiency-filterbar__content[hidden],
.efficiency-canvas-filter [data-filter-content][hidden] { display: none; }

.efficiency-filterbar label,
.efficiency-form-grid label,
.efficiency-library__toolbar label {
  display: grid;
  gap: 6px;
}

.efficiency-filterbar label > span,
.efficiency-form-grid label > span {
  color: var(--muted-strong);
  font-size: var(--font-size-small);
  font-weight: 650;
}

.efficiency-filterbar p {
  margin: 0 0 9px auto;
  color: var(--muted);
  font-size: var(--font-size-small);
}

.efficiency-filterbar__saved {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.efficiency-dashboard__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.efficiency-dashboard__heading .ghost { margin-bottom: 4px; }

.efficiency-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.efficiency-report-component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.efficiency-report-component-grid > .efficiency-kpi { align-self: start; min-height: 180px; }
.efficiency-report-visual { min-width: 0; padding: 18px; }
.efficiency-report-visual--full { grid-column: 1 / -1; }
.efficiency-report-visual > header,
.efficiency-report-visual > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.efficiency-report-visual h3 { margin: 0; color: var(--heading); }
.efficiency-report-visual header p { margin: 4px 0 0; color: var(--muted); }
.efficiency-report-visual > footer { margin-top: 10px; color: var(--muted); font-size: var(--font-size-small); }

.efficiency-kpi {
  display: grid;
  gap: 7px;
  min-height: 138px;
  padding: 18px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-kpi > span,
.efficiency-kpi small { color: var(--muted); }
.efficiency-kpi strong { color: var(--heading); font-size: 30px; line-height: 1; }
.efficiency-kpi--unavailable { background: var(--panel-2); }
.efficiency-kpi--empty { background: var(--control); border-style: dashed; }

.efficiency-dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 12px;
}

.efficiency-panel { padding: 18px; }
.efficiency-panel > header { margin-bottom: 14px; }
.efficiency-panel > header p { margin: 3px 0 0; color: var(--muted); }

.efficiency-gap-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.efficiency-gap-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.efficiency-gap-list li:last-child { border-bottom: 0; }

.efficiency-library__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.efficiency-library__toolbar label { flex: 0 1 150px; }
.efficiency-library__toolbar .efficiency-library__search { flex: 1 1 210px; }

.efficiency-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.efficiency-library__pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--font-size-small); }

.efficiency-metric-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 16px;
}

.efficiency-metric-card dl div { min-width: 0; }
.efficiency-metric-card dt { color: var(--muted); font-size: var(--font-size-small); }
.efficiency-metric-card dd { overflow: hidden; margin: 3px 0 0; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }

.efficiency-metric-detail section,
.efficiency-metric-detail dl {
  padding: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-metric-detail h4,
.efficiency-metric-detail p { margin: 0; }
.efficiency-metric-detail section p { margin-top: 8px; color: var(--muted-strong); line-height: 1.7; }
.efficiency-metric-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.efficiency-metric-detail dt { color: var(--muted); font-size: var(--font-size-small); }
.efficiency-metric-detail dd { margin: 4px 0 0; color: var(--text); overflow-wrap: anywhere; }

.efficiency-editor {
  display: grid;
  gap: 20px;
  padding: 22px;
  scroll-margin-top: 20px;
}

.efficiency-modal[hidden] { display: none; }
.efficiency-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 240);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
}
.efficiency-modal .efficiency-editor {
  width: min(var(--layer-wide-dialog-width), calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--panel-strong);
  box-shadow: var(--layer-shadow);
}
.efficiency-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.efficiency-form-grid .wide { grid-column: 1 / -1; }
.efficiency-form-grid textarea { min-height: 78px; resize: vertical; }

.efficiency-editor__section {
  display: grid;
  gap: 12px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.efficiency-condition {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1fr) minmax(130px, 1fr) minmax(160px, 1.5fr) 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.efficiency-condition > span { color: var(--muted); text-align: center; }

.efficiency-editor form > footer,
.efficiency-designer__canvas > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.efficiency-editor form > footer p,
.efficiency-designer__canvas > footer p { margin: 0; color: var(--muted); }

.efficiency-metric-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.efficiency-metric-steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  color: var(--muted-strong);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: left;
}

.efficiency-metric-steps button[aria-current="step"] {
  color: var(--heading);
  background: var(--control-hover);
  border-color: var(--brand);
}

.efficiency-metric-steps button > span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--font-size-small);
}

.efficiency-metric-step { min-height: 300px; }
.efficiency-metric-step[hidden] { display: none; }
.efficiency-metric-step-actions { display: flex; align-items: center; gap: 8px; }
.efficiency-metric-preview { display: grid; gap: 16px; }
.efficiency-metric-preview h3 { margin: 4px 0; }
.efficiency-metric-preview p { margin: 0; color: var(--muted); }
.efficiency-metric-preview .chart-state { min-height: 150px; }

.efficiency-designer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  min-height: 660px;
}

.efficiency-designer__rail,
.efficiency-designer__canvas { padding: 18px; }
.efficiency-designer__rail > header { align-items: center; }
.efficiency-designer__rail nav { display: grid; gap: 6px; margin-top: 14px; }
.efficiency-designer__rail nav button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; text-align: left; }

.efficiency-designer__canvas {
  display: grid;
  align-content: start;
  gap: 18px;
}

.efficiency-canvas-filter,
.efficiency-canvas-metrics {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-canvas-filter__actions { display: flex; align-items: center; gap: 8px; }
.efficiency-runtime-field-editor { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.efficiency-runtime-field-editor > label { min-width: 0; }
.efficiency-runtime-field-editor input,
.efficiency-runtime-field-editor select { width: 100%; }
.efficiency-runtime-field-editor .inline-check { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; color: var(--muted-strong); font-size: var(--font-size-small); white-space: nowrap; }
.efficiency-legacy-filter-note { display: grid; gap: 6px; margin-top: 10px; padding: 12px; color: var(--muted-strong); background: var(--warn-bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.efficiency-legacy-filter-note p { margin: 0; color: var(--muted); font-size: var(--font-size-small); line-height: 1.5; }

.efficiency-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 6px 6px 0;
  padding: 7px 10px;
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.efficiency-filter-chip button { padding: 0; color: var(--muted); background: none; border: 0; }

.efficiency-filter-editor {
  display: grid;
  grid-template-columns: 30px minmax(120px, 1fr) minmax(120px, 1fr) minmax(150px, 1.5fr) 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.efficiency-filter-editor > span { color: var(--muted); text-align: center; }
.efficiency-filter-editor--runtime { flex: 1 1 360px; grid-template-columns: minmax(80px, auto) minmax(120px, 0.7fr) minmax(160px, 1.3fr); margin: 0; }
.efficiency-filter-editor--runtime > span { text-align: left; }

.efficiency-canvas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.efficiency-canvas-placeholder {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.efficiency-canvas-placeholder p { margin: 5px 0 0; }

.efficiency-canvas-card {
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 15px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.efficiency-canvas-card:has(select option[value="full"]:checked) { grid-column: 1 / -1; }

.efficiency-canvas-card h4 { margin: 8px 0 0; color: var(--heading); font-size: 17px; }
.efficiency-canvas-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.efficiency-canvas-card > footer { align-self: end; }
.efficiency-canvas-card > footer span { color: var(--muted); font-size: var(--font-size-small); }
.efficiency-canvas-card__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

@media (max-width: 1180px) {
  .efficiency-center-workbench { grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); }
  .efficiency-report-toolbar { grid-template-columns: 1fr; }
  .efficiency-report-toolbar__actions { justify-content: flex-start; }
  .efficiency-report-grid,
  .efficiency-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efficiency-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efficiency-designer { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .efficiency-center-workbench { grid-template-columns: 1fr; }
  .efficiency-center-master { max-block-size: none; padding: 12px; }
  .efficiency-center-master > header { align-items: center; }
  .efficiency-center-master > header p { display: none; }
  .efficiency-center-master__list { max-block-size: min(46dvh, 420px); }
  .efficiency-center-detail { min-height: 0; }
}

@media (max-width: 760px) {
  .efficiency-hero,
  .efficiency-filterbar,
  .efficiency-library__toolbar,
  .efficiency-dashboard__heading,
  .efficiency-editor > header,
  .efficiency-designer__canvas > header { align-items: stretch; flex-direction: column; }
  .efficiency-report-grid,
  .efficiency-metric-grid,
  .efficiency-kpi-grid,
  .efficiency-dashboard__grid,
  .efficiency-report-component-grid,
  .efficiency-runtime-grid,
  .efficiency-form-grid,
  .efficiency-canvas-grid { grid-template-columns: 1fr; }
  .efficiency-filterbar p { margin: 0; }
  .efficiency-runtime-filterbar { grid-template-columns: 1fr; align-items: stretch; }
  .efficiency-runtime-filterbar__actions { justify-content: flex-end; }
  .efficiency-filterbar__toggle { display: inline-flex; align-self: flex-start; }
  .efficiency-filterbar__content { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .efficiency-filterbar__saved { width: 100%; }
  .efficiency-designer { grid-template-columns: 1fr; }
  .efficiency-designer__rail nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efficiency-condition { grid-template-columns: 30px 1fr 1fr 34px; }
  .efficiency-condition input { grid-column: 2 / 4; }
  .efficiency-filter-editor { grid-template-columns: 30px 1fr 1fr 34px; }
  .efficiency-filter-editor input { grid-column: 2 / 4; }
  .efficiency-filter-editor--runtime { grid-template-columns: minmax(80px, auto) 1fr; }
  .efficiency-filter-editor--runtime input { grid-column: 1 / -1; }
  .efficiency-runtime-field-editor { grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto 36px; }
  .efficiency-library__toolbar { flex-wrap: nowrap; width: 100%; }
  .efficiency-library__toolbar .segmented { max-width: 100%; overflow-x: auto; }
  .efficiency-library__toolbar label,
  .efficiency-library__toolbar .efficiency-library__search { flex: 0 0 auto; width: 100%; }
  .efficiency-library__toolbar > .primary { align-self: stretch; }
  .efficiency-metric-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efficiency-metric-step { min-height: 0; }
  .efficiency-editor form > footer { align-items: stretch; flex-direction: column; }
  .efficiency-metric-step-actions { justify-content: flex-end; }
  .efficiency-metric-detail dl { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .efficiency-modal { padding: 10px; }
  .efficiency-modal .efficiency-editor { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .efficiency-hero,
  .efficiency-report-card,
  .efficiency-metric-card,
  .efficiency-editor,
  .efficiency-designer__rail,
  .efficiency-designer__canvas { padding: 15px; }
  .efficiency-designer__rail nav { grid-template-columns: 1fr; }
  .efficiency-center-master > header { align-items: flex-start; }
  .efficiency-center-detail { padding: 15px; }
  .efficiency-report-toolbar__actions,
  .efficiency-runtime-filterbar__actions { align-items: stretch; flex-direction: column; }
  .efficiency-report-toolbar__actions button,
  .efficiency-runtime-filterbar__actions button { width: 100%; }
  .efficiency-condition { grid-template-columns: 28px 1fr 34px; }
  .efficiency-condition select:nth-of-type(2),
  .efficiency-condition input { grid-column: 2 / 3; }
  .efficiency-filter-editor { grid-template-columns: 28px 1fr 34px; }
  .efficiency-filter-editor select:nth-of-type(2),
  .efficiency-filter-editor input { grid-column: 2 / 3; }
  .efficiency-filter-editor--runtime { grid-template-columns: 1fr; }
  .efficiency-filter-editor--runtime input { grid-column: auto; }
  .efficiency-runtime-field-editor { grid-template-columns: 1fr 36px; }
  .efficiency-runtime-field-editor > label { grid-column: 1 / 2; }
  .efficiency-runtime-field-editor .inline-check { grid-column: 1 / 2; }
  .efficiency-metric-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efficiency-metric-steps button { padding: 8px 10px; }
  .efficiency-metric-step-actions { width: 100%; }
  .efficiency-metric-step-actions button { flex: 1; }
  .efficiency-canvas-filter > header { align-items: stretch; flex-direction: column; }
  .efficiency-canvas-filter__actions { justify-content: space-between; }
  .efficiency-canvas-filter .efficiency-filterbar__toggle { display: inline-flex; }
  .efficiency-canvas-card__actions { justify-content: flex-start; }
}

/* M61 研发看板：固定 4×2、共享主题表面与系统用户简易表格层。 */
.development-dashboard { display: grid; gap: calc(16px * var(--ui-density)); min-width: 0; }
.development-dashboard__toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: calc(12px * var(--ui-density)); padding: calc(14px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.development-dashboard__toolbar label { display: grid; gap: calc(6px * var(--ui-density)); min-width: calc(188px * var(--ui-density)); color: var(--muted); font-size: var(--font-size-caption); }
.development-dashboard__toolbar select { width: 100%; min-height: calc(42px * var(--ui-density)); background: var(--control); border-color: var(--line); color: var(--text); }
.development-dashboard__quality { flex: 1 1 100%; margin: 0; color: var(--warn); font-size: var(--font-size-caption); }
.development-dashboard__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(16px * var(--ui-density)); align-items: stretch; min-width: 0; }
.development-dashboard__panel { min-width: 0; min-height: calc(340px * var(--ui-density)); padding: calc(18px * var(--ui-density)); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.development-dashboard__panel > header { display: flex; align-items: start; justify-content: space-between; gap: calc(12px * var(--ui-density)); margin-bottom: calc(10px * var(--ui-density)); }
.development-dashboard__panel h3 { margin: 0; font-size: var(--font-size-body); }
.development-dashboard__panel header p { margin: calc(4px * var(--ui-density)) 0 0; color: var(--muted); font-size: var(--font-size-caption); }
.development-dashboard__panel-body,.development-dashboard__chart { min-width: 0; min-height: 0; }
.development-dashboard__chart .chart-canvas { width: 100%; }
.dashboard-chart-basis { flex: 0 0 auto; color: var(--accent); font-size: var(--font-size-caption); }
.dashboard-chart-type { flex: 0 0 auto; min-width: calc(112px * var(--ui-density)); }
.dashboard-chart-type select { width: 100%; min-height: calc(36px * var(--ui-density)); padding: 0 calc(12px * var(--ui-density)); border: 1px solid var(--layer-input-border); border-radius: calc(var(--radius) * .62); background: var(--control); color: var(--text); box-shadow: var(--layer-input-shadow); font: inherit; font-size: var(--font-size-caption); }
.dashboard-chart-type select:focus { border-color: var(--layer-input-focus-border); box-shadow: var(--layer-input-focus-shadow); outline: none; }
.dashboard-health-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(10px * var(--ui-density)); height: 100%; }
.dashboard-health-card { display: grid; align-content: center; gap: calc(7px * var(--ui-density)); width: 100%; min-width: 0; padding: calc(14px * var(--ui-density)); border: 1px solid var(--line); border-radius: calc(var(--radius) * .72); background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dashboard-health-card:hover,.dashboard-health-card:focus-visible { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); outline: none; }
.dashboard-health-card span,.dashboard-health-card small { color: var(--muted); font-size: var(--font-size-caption); }
.dashboard-health-card strong { color: var(--text); font-size: 18px; line-height: 1; }
.dashboard-health-card--ok strong { color: var(--ok); }.dashboard-health-card--accent strong { color: var(--accent); }.dashboard-health-card--warn strong { color: var(--warn); }.dashboard-health-card--danger strong { color: var(--danger); }
.dashboard-status-rings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(12px * var(--ui-density)); min-width: 0; min-height: 0; }
.dashboard-status-ring { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; min-height: 0; }
.dashboard-status-ring h4 { margin: 0; text-align: center; color: var(--muted-strong); font-size: var(--font-size-caption); }
.dashboard-status-ring .development-dashboard__chart { min-height: calc(200px * var(--ui-density)); overflow: visible; }
.development-dashboard__risk-scroll { height: 100%; min-height: 0; border-radius: calc(var(--radius) * .72); }
.development-dashboard__risk-table { width: 100%; table-layout: fixed; }
.development-dashboard__risk-table th,.development-dashboard__risk-table td { text-align: center; }
.development-dashboard__risk-table th:nth-child(1){width:18%}.development-dashboard__risk-table th:nth-child(2){width:25%}.development-dashboard__risk-table th:nth-child(3){width:22%}.development-dashboard__risk-table th:nth-child(4){width:12%}.development-dashboard__risk-table th:nth-child(5){width:15%}.development-dashboard__risk-table th:nth-child(6){width:8%}
.development-dashboard__risk-table td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dashboard-risk-badge { display: inline-flex; width: auto; margin: 1px; }
.dashboard-empty-row td { height: calc(64px * var(--ui-density)); color: var(--muted); }
@media (max-width:980px){.development-dashboard__grid{grid-template-columns:1fr}.development-dashboard__panel{min-height:calc(330px * var(--ui-density))}}
@media (max-width:600px){.development-dashboard__toolbar label{min-width:100%}.dashboard-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-status-rings{grid-template-columns:1fr}.dashboard-status-ring .development-dashboard__chart{min-height:calc(170px * var(--ui-density))}.development-dashboard__panel{padding:calc(12px * var(--ui-density))}.dashboard-chart-type{min-width:calc(96px * var(--ui-density))}.development-dashboard__risk-scroll{overflow-x:auto}.development-dashboard__risk-table{min-width:760px}}

/* M56 测试管理三菜单中心：卡片计划、工作项同源复杂表格、报告上下文。 */
.quality-plan-center,
.quality-case-workbench {
  min-width: 0;
  overflow: visible;
}

.quality-plan-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.quality-plan-center__toolbar,
.quality-case-toolbar {
  align-items: center;
}

/* 测试计划沿用消息管理的紧凑下拉与搜索栏，只保留一行高价值条件。 */
.quality-plan-center__toolbar .quality-plan-toolbar-form {
  flex-wrap: nowrap;
  justify-content: center;
  max-width: none;
  max-height: none;
}

.quality-plan-center__toolbar .quality-plan-toolbar-form select {
  flex-basis: calc(136px * var(--ui-density));
  min-width: calc(124px * var(--ui-density));
}

.quality-plan-center__toolbar .quality-plan-toolbar-form .system-users-toolbar-search {
  flex-basis: calc(280px * var(--ui-density));
  min-width: calc(220px * var(--ui-density));
  max-width: calc(360px * var(--ui-density));
}

:root:not([data-theme="dark"]) .quality-plan-center__toolbar {
  --message-field-border: rgba(125, 99, 244, 0.32);
  --message-field-focus-border: rgba(125, 99, 244, 0.50);
  --message-field-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  --message-field-focus-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.13);
}

:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar select,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar input,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .custom-select-trigger {
  border-color: var(--message-field-border, var(--layer-input-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--layer-field) 88%, white 12%), color-mix(in srgb, var(--control) 82%, white 18%));
  box-shadow: var(--message-field-shadow, var(--layer-input-shadow));
}

:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar select:focus,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar select:focus-visible,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar input:focus,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .toolbar input:focus-visible,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .custom-select.open .custom-select-trigger,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .custom-select-trigger:focus,
:root:not([data-theme="dark"]) .quality-plan-center__toolbar .custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--message-field-focus-border, var(--layer-input-focus-border));
  box-shadow: var(--message-field-focus-shadow, var(--layer-input-focus-shadow));
}

.quality-inline-state {
  margin: 0 calc(24px * var(--ui-density)) calc(12px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--ui-density));
  background: var(--control);
  color: var(--muted-strong);
}

.quality-inline-state.warn {
  border-color: color-mix(in srgb, var(--warn) 36%, var(--line));
  background: var(--warn-bg);
  color: var(--warn);
}

.quality-center-filter {
  left: 0;
  right: auto;
  width: min(calc(380px * var(--ui-density)), calc(100vw - 48px));
}

.quality-plan-groups {
  display: grid;
  gap: calc(24px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density)) calc(20px * var(--ui-density));
}

.quality-plan-list-scroll {
  min-height: 0;
  height: calc(100dvh - calc(306px * var(--ui-density)));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-top: calc(2px * var(--ui-density));
}

.quality-plan-version-context {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(16px * var(--ui-density));
  min-height: calc(32px * var(--ui-density));
  margin: calc(16px * var(--ui-density)) 0 0;
  padding: 0;
  background: transparent;
}

.quality-plan-version-context label {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 750;
  white-space: nowrap;
}

.quality-plan-version-context label > span,
.quality-plan-version-context > strong {
  display: inline-flex;
  align-items: center;
  min-height: calc(32px * var(--ui-density));
}

.quality-plan-version-context select {
  width: min(calc(240px * var(--ui-density)), 50vw);
  height: calc(32px * var(--ui-density));
  min-height: calc(32px * var(--ui-density));
  padding-block: 0;
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 750;
}

/* The native select is enhanced after render; size the visible trigger too. */
.quality-plan-version-context .custom-select-trigger {
  height: calc(32px * var(--ui-density));
  min-height: calc(32px * var(--ui-density));
  padding-block: 0;
  font-size: var(--font-size-body);
  font-weight: 750;
  line-height: 1;
}

.quality-plan-version-context > strong {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.quality-plan-group {
  min-width: 0;
  padding: calc(8px * var(--ui-density)) 0 calc(18px * var(--ui-density));
}

.quality-plan-group__head,
.quality-plan-card__head,
.quality-plan-card__foot,
.quality-story-picker > header,
.quality-case-directory > header,
.quality-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
}

.quality-plan-group__head {
  margin-bottom: calc(16px * var(--ui-density));
}

.quality-plan-group__head h2,
.quality-plan-card__head h3,
.quality-case-directory h2,
.quality-story-picker h3 {
  margin: calc(3px * var(--ui-density)) 0 0;
  color: var(--heading);
}

.quality-context-kicker {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 750;
}

.quality-baseline-summary {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-density));
  padding: calc(9px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
}

.quality-baseline-summary strong { color: var(--heading); }

.quality-plan-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(24px * var(--ui-density));
}

.quality-plan-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
  min-height: calc(260px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border: 0;
  border-radius: calc(16px * var(--ui-density));
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
}

.quality-plan-card__title {
  display: grid;
  min-width: 0;
  gap: calc(2px * var(--ui-density));
}

.quality-plan-card__title > .link-like {
  overflow: hidden;
  max-width: 100%;
  padding: 0;
  color: var(--heading);
  font-size: var(--font-size-heading);
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-plan-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * var(--ui-density));
}

.quality-plan-badge {
  width: fit-content;
  padding: calc(2px * var(--ui-density)) calc(7px * var(--ui-density));
  border: 0;
  border-radius: 999px;
  background: var(--control);
  color: var(--muted-strong);
  font-size: var(--font-size-small);
  font-weight: 750;
}

.quality-plan-badge.is-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.quality-plan-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.quality-plan-badge.is-agent {
  background: color-mix(in srgb, var(--accent) 10%, var(--control));
  color: var(--accent-strong);
}

.quality-plan-card.is-overdue { box-shadow: 0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--danger) 16%, transparent); }
.quality-plan-card.requires-retest { box-shadow: 0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--warn) 16%, transparent); }

.quality-plan-card__head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-plan-card__order {
  display: flex;
  gap: calc(6px * var(--ui-density));
}

.quality-plan-card__order button {
  width: calc(36px * var(--ui-density));
  min-width: 0;
  padding: 0;
  border-radius: calc(12px * var(--ui-density));
}

.quality-plan-workflow {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.quality-plan-workflow__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, calc(540px * var(--ui-density)));
  margin: 0 auto;
}

.quality-plan-workflow__stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.quality-plan-workflow__stage:not(:last-child)::after {
  position: absolute;
  top: calc(37px * var(--ui-density));
  right: calc(-50% + calc(38px * var(--ui-density)));
  left: calc(50% + calc(38px * var(--ui-density)));
  z-index: 0;
  height: calc(3px * var(--ui-density));
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 62%, transparent));
  content: "";
}

.quality-plan-workflow__stage:not(:last-child)::before {
  position: absolute;
  top: calc(32px * var(--ui-density));
  right: calc(-50% + calc(38px * var(--ui-density)));
  z-index: 0;
  width: 0;
  height: 0;
  border-top: calc(6px * var(--ui-density)) solid transparent;
  border-bottom: calc(6px * var(--ui-density)) solid transparent;
  border-left: calc(9px * var(--ui-density)) solid color-mix(in srgb, var(--accent) 62%, transparent);
  content: "";
}

.quality-plan-node {
  display: grid;
  flex: 0 0 auto;
  z-index: 1;
  place-items: center;
  width: calc(76px * var(--ui-density));
  height: calc(76px * var(--ui-density));
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.quality-plan-node__ring {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--plan-node-color) 20%, transparent);
}

.quality-plan-node__circle {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(2px * var(--ui-density));
  width: calc(60px * var(--ui-density));
  height: calc(60px * var(--ui-density));
  border-radius: 50%;
  color: #fff;
  transition: transform 160ms ease, filter 160ms ease;
}

.quality-plan-node:hover .quality-plan-node__circle,
.quality-plan-node:focus-visible .quality-plan-node__circle {
  filter: brightness(1.06);
  transform: translateY(calc(-2px * var(--ui-density)));
}

.quality-plan-node--not-started { --plan-node-color: var(--muted); }
.quality-plan-node--in-progress { --plan-node-color: var(--work-item-type-feature); }
.quality-plan-node--completed { --plan-node-color: var(--work-item-type-task); }
.quality-plan-node--overdue { --plan-node-color: var(--warn); }
.quality-plan-node--risk { --plan-node-color: var(--danger); }
.quality-plan-node .quality-plan-node__circle { background: var(--plan-node-color); }

.quality-plan-node strong { width: 90%; color: inherit; text-align: center; white-space: nowrap; font-size: var(--font-size-title); }

.quality-plan-workflow__metric {
  min-width: 0;
  margin: 0;
  color: var(--heading);
  font-size: var(--font-size-small);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.quality-plan-card__facts,
.quality-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density));
}

.quality-plan-card__facts > span,
.quality-detail-grid > div {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
  padding: calc(10px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  background: var(--control);
}

.quality-plan-card__facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8px * var(--ui-density));
  margin: 0;
}

.quality-plan-card__facts > span {
  gap: calc(1px * var(--ui-density));
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.quality-plan-card__facts small,
.quality-detail-grid span { color: var(--muted); }
.quality-plan-card__facts strong,
.quality-detail-grid strong { overflow: hidden; color: var(--heading); text-overflow: ellipsis; white-space: nowrap; }

.quality-plan-card__foot {
  margin-top: 0;
  padding-top: calc(12px * var(--ui-density));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-small);
}

.quality-plan-card__foot > span { min-width: 0; flex: 1; }
.quality-plan-card__foot time { white-space: nowrap; }

.quality-empty-state {
  display: grid;
  place-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(260px * var(--ui-density));
  padding: calc(36px * var(--ui-density));
  border: 1px dashed var(--line-strong);
  border-radius: calc(22px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
  text-align: center;
}

.quality-empty-state strong { color: var(--heading); font-size: var(--font-size-heading); }
.quality-empty-state p { margin: 0; }

.quality-wizard-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
  margin: 0 0 calc(22px * var(--ui-density));
  padding: 0;
  list-style: none;
}

.quality-wizard-steps li {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-density));
  padding: calc(12px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
}

.quality-wizard-steps li.active { color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent); }
.quality-wizard-steps span { display: grid; place-items: center; width: calc(26px * var(--ui-density)); height: calc(26px * var(--ui-density)); border-radius: 50%; background: var(--panel-strong); }
.quality-wizard-steps li.active span { background: var(--accent-gradient); color: var(--menu-active-text); }
.quality-wizard-panel { display: none; }
.quality-wizard-panel.active { display: block; }

.quality-method-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  margin: 0 0 calc(18px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--ui-density));
  background: var(--control);
}

.quality-execution-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8px * var(--ui-density));
  margin: 0 0 calc(18px * var(--ui-density));
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel) 68%, var(--control));
}
.quality-execution-mode legend { grid-column: 1 / -1; padding: 0; color: var(--heading); font-size: var(--font-size-body); font-weight: 800; }
.quality-execution-mode__option { display: flex; align-items: center; gap: calc(9px * var(--ui-density)); min-width: 0; min-height: calc(60px * var(--ui-density)); padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density)); border: 1px solid transparent; border-radius: calc(14px * var(--ui-density)); background: var(--panel-strong); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.quality-execution-mode__option:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--panel-strong)); }
.quality-execution-mode__option.selected { border-color: var(--layer-input-focus-border); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), var(--layer-input-shadow); background: color-mix(in srgb, var(--accent) 9%, var(--panel-strong)); }
.quality-execution-mode__option.disabled { cursor: not-allowed; opacity: .62; }
.quality-execution-mode__option.disabled:hover { border-color: transparent; background: var(--panel-strong); }
.quality-execution-mode input[type="radio"] { appearance: auto; flex: 0 0 calc(18px * var(--ui-density)); width: calc(18px * var(--ui-density)); height: calc(18px * var(--ui-density)); min-width: calc(18px * var(--ui-density)); min-height: calc(18px * var(--ui-density)); margin: 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
.quality-execution-mode__content { display: grid; gap: calc(2px * var(--ui-density)); min-width: 0; }
.quality-execution-mode__content strong { color: var(--heading); font-size: var(--font-size-body); }
.quality-execution-mode__content small { overflow: hidden; color: var(--muted); font-size: var(--font-size-hint); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

.quality-method-fieldset label {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  background: var(--panel-strong);
  color: var(--heading);
}
.quality-method-fieldset label.disabled { opacity: .56; }
.quality-method-fieldset small { color: var(--muted); }

.quality-requirement-picker { min-width: 0; }
/* 新建计划的需求范围直接沿用消息管理 ordinary-list 母版，仅扩展多选列。 */
.quality-requirement-picker .quality-requirement-list-shell { display: block; height: auto; min-height: 0; }
.quality-requirement-picker .quality-requirement-list-card { display: block; height: auto; min-height: 0; padding: calc(12px * var(--ui-density)) calc(12px * var(--ui-density)) 0; border-color: var(--line); border-radius: calc(18px * var(--ui-density)); box-shadow: none; }
.quality-requirement-picker .list-table-toolbar { margin-bottom: calc(10px * var(--ui-density)); }
.quality-requirement-picker .quality-requirement-list-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: calc(44px * var(--ui-density)); }
.quality-requirement-picker .quality-requirement-list-toolbar .list-toolbar-section { display: flex !important; width: auto; min-width: 0; align-items: center; }
.quality-requirement-picker .quality-requirement-list-toolbar .list-toolbar-section.left { justify-content: flex-start; }
.quality-requirement-picker .quality-requirement-list-toolbar .list-toolbar-section.center { justify-content: center; }
.quality-requirement-picker .quality-requirement-list-toolbar .list-toolbar-section.right { justify-content: flex-end; }
.quality-requirement-picker .quality-requirement-toolbar-form { display: flex; width: auto !important; align-items: center; flex-wrap: nowrap; gap: calc(8px * var(--ui-density)); }
.quality-requirement-picker__title { margin: 0; color: var(--heading); font-size: var(--font-size-body); font-weight: 800; white-space: nowrap; }
.quality-requirement-picker .quality-requirement-toolbar-form select,
.quality-requirement-picker .quality-requirement-toolbar-form .list-search-field,
.quality-requirement-picker .quality-requirement-toolbar-form .list-search-field input { box-sizing: border-box; height: calc(40px * var(--ui-density)) !important; min-height: calc(40px * var(--ui-density)) !important; }
.quality-requirement-picker .quality-requirement-toolbar-form select { width: calc(150px * var(--ui-density)); padding-block: 0; }
.quality-requirement-picker .quality-requirement-toolbar-form .list-search-field { flex: 0 1 calc(280px * var(--ui-density)); min-width: calc(240px * var(--ui-density)); }
.quality-requirement-picker .quality-story-table-scroll { height: min(calc(340px * var(--ui-density)), 35dvh); min-height: 0; overflow: hidden; }
.quality-requirement-picker .quality-story-table-scroll .table-scroll-viewport { overflow: auto; }
.quality-requirement-picker .quality-requirement-picker__table { width: 100%; min-width: calc(920px * var(--ui-density)); }
.quality-requirement-picker .quality-requirement-picker__table th,
.quality-requirement-picker .quality-requirement-picker__table td { padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density)); }
.quality-requirement-picker .quality-requirement-choice-cell { width: calc(48px * var(--ui-density)); min-width: calc(48px * var(--ui-density)); text-align: center; }
.quality-requirement-picker input[type="checkbox"] { appearance: auto; width: calc(16px * var(--ui-density)); height: calc(16px * var(--ui-density)); min-width: calc(16px * var(--ui-density)); min-height: calc(16px * var(--ui-density)); margin: 0; padding: 0; accent-color: var(--accent); box-shadow: none; vertical-align: middle; }
.quality-requirement-picker .quality-story-pagination { position: relative; z-index: 1; margin-top: 0; padding-top: calc(2px * var(--ui-density)); }
.quality-plan-date-input { box-sizing: border-box; height: calc(52px * var(--ui-density)); min-height: calc(52px * var(--ui-density)); line-height: 1.2; }
@media (max-width: 760px) {
  .modal.work-item-modal:has(.quality-plan-wizard) { width: calc(100vw - calc(28px * var(--ui-density))); max-height: calc(100dvh - calc(20px * var(--ui-density))); padding: calc(16px * var(--ui-density)); }
  .modal.work-item-modal:has(.quality-plan-wizard) .modal-head { margin-bottom: calc(14px * var(--ui-density)); }
  .modal.work-item-modal:has(.quality-plan-wizard) .modal-footer { gap: calc(8px * var(--ui-density)); }
  .quality-execution-mode { grid-template-columns: 1fr; }
  .quality-execution-mode__content small { white-space: normal; }
  .quality-requirement-picker .quality-requirement-list-card { padding: calc(10px * var(--ui-density)) calc(10px * var(--ui-density)) 0; }
  .quality-requirement-picker .quality-requirement-list-toolbar { grid-template-columns: 1fr; gap: calc(8px * var(--ui-density)); }
  .quality-requirement-picker .quality-requirement-list-toolbar .list-toolbar-section.center { justify-content: stretch; }
  .quality-requirement-picker .quality-requirement-toolbar-form { width: 100% !important; align-items: stretch; flex-wrap: wrap; }
  .quality-requirement-picker .quality-requirement-toolbar-form select { flex: 1 1 calc(140px * var(--ui-density)); }
  .quality-requirement-picker .quality-requirement-toolbar-form .list-search-field { flex: 1 1 100%; min-width: 0; }
  .quality-requirement-picker .quality-story-table-scroll { height: min(calc(300px * var(--ui-density)), 38dvh); }
  .quality-requirement-picker .quality-story-pagination .list-pagination-center,
  .quality-requirement-picker .quality-story-pagination .list-pagination-meta { justify-self: center; justify-content: center; flex-wrap: wrap; }
}

/* M65 delivery acceptance: one list or timeline surface with progressive detail. */
.delivery-version-context {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  white-space: nowrap;
}

.delivery-version-context select {
  min-width: calc(154px * var(--ui-density));
  max-width: calc(220px * var(--ui-density));
}

.delivery-scope-views {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-density));
  padding: calc(3px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--ui-density));
  background: color-mix(in srgb, var(--control) 86%, transparent);
}

.delivery-scope-views button {
  min-height: calc(32px * var(--ui-density));
  padding-inline: calc(12px * var(--ui-density));
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.delivery-scope-views button.active {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--text);
}

/* 交付范围固定为 Tab、工具栏、列表三段；Tab 到工具栏的节奏与工具栏到列表一致。 */
.delivery-scope-list-page {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.delivery-scope-list-page .delivery-scope-subnav {
  margin-bottom: 0;
}

/* 交付范围让当前标签页的工具栏和列表共用与标签栏同源的承载面。 */
.delivery-scope-content-layer {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  border-radius: calc(24px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.76)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(92, 108, 156, 0.08);
}

.delivery-scope-content-layer > .list-table-card {
  min-height: 0;
}

:root[data-theme="dark"] .delivery-scope-content-layer {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(14, 21, 31, 0.88), rgba(10, 16, 25, 0.74)),
    rgba(10, 15, 24, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

/* 交付验收列表：搜索框置于最后一个下拉筛选后，并以两倍标准控件宽度承载关键词。 */
.delivery-list-shell-card .toolbar input.delivery-search-field {
  flex: 0 1 calc(360px * var(--ui-density));
  width: calc(360px * var(--ui-density));
}

.delivery-list-shell-card > .delivery-list-section,
.delivery-list-shell-card > .table-scroll {
  min-height: calc(320px * var(--ui-density));
}

.delivery-list-shell-card .ordinary-list-table td strong + small {
  display: block;
  margin-top: calc(3px * var(--ui-density));
}

.delivery-detail-groups {
  gap: calc(12px * var(--ui-density));
}

.delivery-detail-groups > .field-shell-section,
.drawer .form-section-title {
  margin: 0;
}

/* Keep an expanded select above the following drawer section. */
.field-shell-section:has(.custom-select.open) {
  z-index: 80;
}

.delivery-channel-field-slot {
  display: contents;
}

#acceptanceCreateForm {
  align-content: start;
}

.delivery-version-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(16px * var(--ui-density));
}

.delivery-version-checklist label {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-density));
  min-width: 0;
  min-height: calc(40px * var(--ui-density));
  padding-block: calc(8px * var(--ui-density));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--text);
  cursor: pointer;
}

.delivery-version-checklist input[type="checkbox"] {
  appearance: auto;
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  min-width: calc(16px * var(--ui-density));
  min-height: calc(16px * var(--ui-density));
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  box-shadow: none;
}

.delivery-scope-node-picker,
.release-readiness-list {
  display: grid;
  gap: calc(8px * var(--ui-density));
  max-height: min(calc(360px * var(--ui-density)), 38vh);
  margin: 0;
  padding: calc(8px * var(--ui-density));
  overflow: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
}

.delivery-scope-node-picker label,
.release-readiness-list label {
  display: grid;
  grid-template-columns: calc(20px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(8px * var(--ui-density));
  align-items: start;
  padding: calc(8px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.delivery-scope-node-picker span,
.release-readiness-list span {
  display: grid;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
}

.delivery-scope-node-picker small,
.release-readiness-list small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.drawer .form-section-title {
  color: var(--text);
  font-size: calc(14px * var(--ui-density));
}

.compact-list,
.compact-timeline {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-list li,
.compact-timeline li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding-block: calc(7px * var(--ui-density));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.compact-list li:last-child,
.compact-timeline li:last-child {
  border-bottom: 0;
}

.milestone-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(18px * var(--ui-density)) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  min-height: calc(68px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.milestone-timeline-item:last-child { border-bottom: 0; }
.milestone-timeline-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.milestone-timeline-item:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }

.milestone-timeline-marker {
  width: calc(11px * var(--ui-density));
  height: calc(11px * var(--ui-density));
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 calc(4px * var(--ui-density)) color-mix(in srgb, var(--accent) 12%, transparent);
}

.milestone-timeline-copy {
  display: grid;
  min-width: 0;
  gap: calc(4px * var(--ui-density));
}

.milestone-timeline-copy strong,
.milestone-timeline-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-timeline-copy span { color: var(--muted); }
.milestone-timeline-state { display: flex; align-items: center; gap: calc(6px * var(--ui-density)); }

@media (max-width: 1440px) {
  .delivery-list-shell-card .ordinary-list-table th:nth-child(5),
  .delivery-list-shell-card .ordinary-list-table td:nth-child(5) { display: none; }
  .delivery-version-context select { min-width: calc(132px * var(--ui-density)); }
}

@media (max-width: 980px) {
  .delivery-list-shell-card .list-toolbar,
  .delivery-list-shell-card .list-toolbar.no-center {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .delivery-list-shell-card .list-toolbar-section,
  .delivery-list-shell-card .list-toolbar-section.right { justify-content: flex-start; }
  .delivery-list-shell-card .toolbar { width: 100%; flex-wrap: wrap; }
  .delivery-list-shell-card .toolbar input { flex: 1 1 calc(180px * var(--ui-density)); min-width: 0; }
  .delivery-list-shell-card .toolbar input.delivery-search-field { flex-basis: min(100%, calc(360px * var(--ui-density))); }
  .milestone-timeline-item { grid-template-columns: calc(18px * var(--ui-density)) minmax(0, 1fr) auto; }
  .milestone-timeline-item > button { display: none; }
}

@media (max-width: 480px) {
  .delivery-scope-views { width: 100%; overflow-x: auto; }
  .delivery-scope-views button { flex: 1 0 auto; }
  .delivery-version-context { width: 100%; justify-content: space-between; }
  .delivery-version-context select { flex: 1 1 auto; min-width: 0; max-width: none; }
  .milestone-timeline-item { grid-template-columns: calc(16px * var(--ui-density)) minmax(0, 1fr); }
  .milestone-timeline-state { grid-column: 2; justify-content: flex-start; }
  .drawer { width: 100vw; max-width: 100vw; }
  .delivery-version-checklist { grid-template-columns: 1fr; }
  .compact-list li,
  .compact-timeline li { flex-direction: column; gap: calc(4px * var(--ui-density)); }
}

/* M60-10 · test-case right workbench actions */
body:has(.quality-case-action-modal) .mobile-navigation-toggle { display: none; }

.quality-case-planning-shell .quality-case-toolbar > *,
.quality-case-planning-shell .quality-case-toolbar button,
.quality-case-planning-shell .quality-case-toolbar input,
.quality-case-planning-shell .quality-case-toolbar select,
.quality-case-planning-shell .quality-case-toolbar .custom-select,
.quality-case-planning-shell .quality-case-toolbar .custom-select-trigger {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

body:has(.quality-case-action-modal) .modal.work-item-modal {
  width: min(calc(1180px * var(--ui-density)), calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
}

body:has(.quality-case-action-modal) .modal-body {
  min-height: 0;
  overflow: auto;
}

.quality-case-action-modal,
.quality-case-action-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
  font-size: calc(12px * var(--ui-density));
}

.quality-case-action-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.quality-case-action-context > div {
  display: grid;
  gap: calc(5px * var(--ui-density));
  min-width: 0;
}

.quality-case-action-context span { color: var(--muted); }
.quality-case-action-context strong {
  overflow: hidden;
  color: var(--heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-case-action-toolbar {
  display: grid;
  grid-template-columns: minmax(calc(260px * var(--ui-density)), 1fr) calc(180px * var(--ui-density));
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.quality-case-action-toolbar.defect {
  grid-template-columns: minmax(calc(230px * var(--ui-density)), 1fr) repeat(2, calc(160px * var(--ui-density))) calc(170px * var(--ui-density));
}

.quality-case-action-toolbar > input,
.quality-case-action-toolbar > select,
.quality-case-action-toolbar > .custom-select,
.quality-case-action-toolbar .custom-select-trigger,
.quality-case-action-fields input,
.quality-case-action-fields select,
.quality-case-action-fields .custom-select-trigger {
  width: 100%;
  height: calc(44px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
}

.quality-simple-table {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.quality-simple-table-head,
.quality-simple-table-row {
  display: grid;
  gap: calc(10px * var(--ui-density));
  align-items: center;
  min-width: calc(840px * var(--ui-density));
  padding: calc(11px * var(--ui-density)) calc(14px * var(--ui-density));
}

.quality-requirement-link-grid {
  grid-template-columns: calc(54px * var(--ui-density)) calc(138px * var(--ui-density)) minmax(calc(260px * var(--ui-density)), 1fr) calc(126px * var(--ui-density)) calc(148px * var(--ui-density));
}

.quality-defect-link-grid {
  grid-template-columns: calc(54px * var(--ui-density)) calc(130px * var(--ui-density)) minmax(calc(260px * var(--ui-density)), 1fr) calc(116px * var(--ui-density)) calc(138px * var(--ui-density)) calc(124px * var(--ui-density));
}

.quality-simple-table-head {
  color: var(--muted-strong);
  font-weight: 700;
  text-align: center;
  background: var(--table-head);
}

.quality-simple-table-head > span { justify-self: center; }
.quality-simple-table-body {
  max-height: calc(360px * var(--ui-density));
  overflow: auto;
}

.quality-simple-table-row {
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.quality-simple-table-row:hover { background: var(--control-hover); }
.quality-simple-table-row[hidden] { display: none; }
.quality-simple-table-empty {
  padding: calc(40px * var(--ui-density));
  color: var(--muted);
  text-align: center;
}

.quality-case-action-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14px * var(--ui-density));
}

.quality-case-action-fields > label {
  display: grid;
  gap: calc(7px * var(--ui-density));
  color: var(--muted-strong);
}

.quality-case-action-fields .full { grid-column: 1 / -1; }
.quality-case-action-fields textarea {
  width: 100%;
  min-height: calc(92px * var(--ui-density));
  resize: vertical;
}

.quality-case-execution-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(11px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.quality-case-execution-summary span { color: var(--muted); }
.quality-case-execution-summary strong { color: var(--ok); }
.quality-case-execution-summary strong[data-result="failed"] { color: var(--danger); }
.quality-case-execution-summary strong[data-result="blocked"] { color: var(--warn); }
.quality-case-execution-summary strong[data-result="skipped"] { color: var(--muted-strong); }
.quality-action-table-scroll { max-height: calc(350px * var(--ui-density)); }
.quality-attempt-step-table th { text-align: center; }
.quality-attempt-step-table textarea { min-width: calc(190px * var(--ui-density)); }

@media (max-width: 980px) {
  .quality-case-action-toolbar.defect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-case-action-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body:has(.quality-case-action-modal) .modal.work-item-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
  }
  .quality-case-action-context,
  .quality-case-action-toolbar,
  .quality-case-action-toolbar.defect,
  .quality-case-action-fields { grid-template-columns: 1fr; }
  .quality-case-action-fields .full { grid-column: auto; }
}
.quality-selected-story-summary {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
  min-height: calc(32px * var(--ui-density));
  margin-top: calc(10px * var(--ui-density));
  color: var(--muted-strong);
}
.quality-selected-story-summary > strong { flex: 0 0 auto; color: var(--heading); }
.quality-form-message { margin: calc(12px * var(--ui-density)) 0 0; color: var(--muted); }

.quality-context-bar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto minmax(180px, 1.35fr);
  align-items: end;
  gap: calc(10px * var(--ui-density));
  margin: calc(20px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--ui-density));
  background: var(--panel-strong);
}

.quality-context-bar label { min-width: 0; }
.quality-context-arrow { align-self: center; color: var(--muted); font-size: calc(24px * var(--ui-density)); }

.quality-case-layout {
  display: grid;
  grid-template-columns: calc(250px * var(--ui-density)) minmax(0, 1fr);
  min-width: 0;
  border-top: 1px solid var(--line);
}

.quality-case-layout.directory-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.quality-case-layout.directory-collapsed .quality-case-directory { overflow: hidden; padding-inline: 0; opacity: 0; pointer-events: none; }

.quality-case-directory {
  min-width: 0;
  padding: calc(18px * var(--ui-density));
  border-right: 1px solid var(--line);
  background: var(--panel);
  transition: opacity .16s ease;
}

.quality-case-directory > header { align-items: flex-start; }
.quality-case-directory > header button { min-width: 0; padding-inline: calc(10px * var(--ui-density)); }

.quality-directory-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6px * var(--ui-density));
  margin: calc(16px * var(--ui-density)) 0 calc(10px * var(--ui-density));
  padding: calc(5px * var(--ui-density));
  border-radius: calc(15px * var(--ui-density));
  background: var(--control);
}
.quality-directory-tabs button { min-width: 0; padding-inline: calc(8px * var(--ui-density)); border: 0; box-shadow: none; }
.quality-directory-tabs button.active { background: var(--active-surface); color: var(--heading); }

.quality-directory-tree { display: grid; gap: calc(5px * var(--ui-density)); max-height: calc(560px * var(--ui-density)); overflow: auto; }
.quality-directory-tree button { display: flex; justify-content: space-between; min-width: 0; padding: calc(10px * var(--ui-density)); border: 0; background: transparent; box-shadow: none; color: var(--muted-strong); text-align: left; }
.quality-directory-tree button.active { background: var(--active-surface); color: var(--heading); }
.quality-directory-tree button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-directory-tree em { font-style: normal; color: var(--muted); }

.quality-directory-search { margin-bottom: calc(10px * var(--ui-density)); }
.quality-directory-search input { width: 100%; }

.quality-case-main { display: flex; flex-direction: column; min-width: 0; }
.quality-case-toolbar { padding-inline: calc(18px * var(--ui-density)); }
.quality-case-heading { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--ui-density)); padding: calc(18px * var(--ui-density)) calc(18px * var(--ui-density)) calc(10px * var(--ui-density)); }
.quality-case-heading h2 { margin: 3px 0 0; font-size: calc(20px * var(--ui-density)); }
.quality-function-node { display: grid; gap: calc(3px * var(--ui-density)); }
.quality-function-node > span { padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density)); color: var(--muted-strong); font-weight: 650; }
.quality-function-node.depth-1 { margin-left: calc(12px * var(--ui-density)); }
.quality-function-node.depth-2 { margin-left: calc(24px * var(--ui-density)); }
.quality-function-node.depth-3 { margin-left: calc(36px * var(--ui-density)); }
.story-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-case-statistics { margin: 0 calc(18px * var(--ui-density)) calc(12px * var(--ui-density)); padding: calc(14px * var(--ui-density)); border: 1px solid var(--line); border-radius: calc(16px * var(--ui-density)); background: var(--panel); }
.quality-stat-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.2fr); gap: calc(24px * var(--ui-density)); }
.quality-stat-grid h3 { margin: 0 0 calc(8px * var(--ui-density)); font-size: calc(14px * var(--ui-density)); }
.quality-stat-grid p { margin: calc(8px * var(--ui-density)) 0 0; color: var(--muted); font-size: calc(12px * var(--ui-density)); }
.quality-status-pie { width: calc(88px * var(--ui-density)); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ok) 0 var(--passed), var(--danger) var(--passed) calc(var(--passed) + var(--failed)), var(--warn) calc(var(--passed) + var(--failed)) calc(var(--passed) + var(--failed) + var(--blocked)), var(--control) 0); }
.quality-curve-list { display: flex; align-items: end; min-height: calc(88px * var(--ui-density)); gap: 2px; padding: calc(8px * var(--ui-density)); border-radius: calc(10px * var(--ui-density)); background: var(--control); }
.quality-curve-list span { display: block; flex: 1; min-width: 6px; height: 100%; position: relative; border-bottom: 2px solid var(--line-strong); }
.quality-curve-list i { display: block; width: 100%; height: var(--actual); align-self: end; background: var(--ok); border-top: 2px solid var(--accent); }
.quality-curve-list i::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--plan); border-top: 2px solid var(--accent); }
.quality-directory-mobile-trigger { display: none; }
.quality-stage-guidance {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  margin: 0 calc(18px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
}
.quality-stage-guidance strong { color: var(--heading); }

.quality-cases-table-wrap {
  flex: 1 1 auto;
  min-height: calc(420px * var(--ui-density));
  margin: 0 calc(18px * var(--ui-density));
}

.quality-case-grid {
  display: grid;
  min-width: max-content;
}

.quality-case-grid > * { min-width: 0; }
.quality-case-grid .col-head-cell,
.quality-case-grid .case-cell {
  display: flex;
  align-items: center;
  min-height: calc(58px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quality-case-grid .col-head-cell { min-height: calc(52px * var(--ui-density)); color: var(--muted-strong); font-weight: 750; background: var(--table-head); }
.quality-case-grid .col-head-cell { justify-content: center; text-align: center; }
.quality-case-row:hover .quality-case-grid { background: var(--control-hover); }
.quality-case-grid .title-cell { display: grid; align-content: center; }
.quality-case-grid .title-cell small { color: var(--muted); }
.quality-cases-table-wrap .work-items-fields-head .col-head-cell[data-col-key="title"],
.quality-cases-table-wrap .gantt-fields > .title-cell {
  position: static;
  box-shadow: none;
}
.quality-case-actions { gap: calc(12px * var(--ui-density)); white-space: nowrap; }
.quality-case-actions .link-like { padding: 0; border: 0; background: transparent; box-shadow: none; }
.quality-case-ellipsis {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quality-case-row .case-cell:nth-child(5),
.quality-case-row .case-cell:nth-child(6),
.quality-case-row .case-cell:nth-child(7),
.quality-case-row .case-cell:nth-child(9),
.quality-case-row .case-cell:nth-child(10) { justify-content: center; text-align: center; }
.quality-case-empty { color: var(--muted); }
.quality-case-empty__message {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: calc(64px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  text-align: center;
}

.work-items-fields-head .col-head-sort,
.work-items-fields-head .col-head-filter {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.quality-drawer-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: calc(6px * var(--ui-density));
  overflow-x: auto;
  padding: calc(6px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  background: var(--control);
}
.quality-drawer-tabs button { flex: 0 0 auto; border: 0; box-shadow: none; background: transparent; }
.quality-drawer-tabs button.active { background: var(--active-surface); color: var(--heading); }
.quality-drawer-panel { display: none; gap: calc(16px * var(--ui-density)); }
.quality-drawer-panel.active { display: grid; }

.quality-attempt-form,
.quality-review-inline {
  display: grid;
  gap: calc(12px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--ui-density));
  background: var(--control);
}
.quality-review-inline { grid-template-columns: minmax(120px, .7fr) minmax(220px, 1.4fr) auto; align-items: end; }
.quality-attempt-result-bar { display: flex; align-items: end; gap: calc(10px * var(--ui-density)); flex-wrap: wrap; }
.quality-attempt-result-bar label { min-width: calc(150px * var(--ui-density)); }
.quality-result-choice.passed.active { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); color: var(--ok); background: var(--ok-bg); }
.quality-result-choice.failed.active { border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); color: var(--danger); background: var(--danger-bg); }
.quality-attempt-step-table { min-width: calc(880px * var(--ui-density)); }
.quality-attempt-step-table textarea { min-width: calc(220px * var(--ui-density)); resize: vertical; }
.quality-agent-guide { display: grid; gap: calc(12px * var(--ui-density)); color: var(--muted-strong); }
.quality-agent-guide p { margin: 0; }
.drawer-footer-spacer { flex: 1 1 auto; }
.quality-plan-drawer-list { display: grid; gap: calc(8px * var(--ui-density)); }
.quality-plan-drawer-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(10px * var(--ui-density)); align-items: start; padding: calc(12px * var(--ui-density)); border: 1px solid var(--line); border-radius: calc(14px * var(--ui-density)); background: var(--control); }
.quality-plan-drawer-list article > span { display: grid; place-items: center; width: calc(26px * var(--ui-density)); height: calc(26px * var(--ui-density)); border-radius: 50%; background: var(--active-surface); color: var(--menu-active-text); }
.quality-plan-drawer-list article div { display: grid; min-width: 0; gap: calc(3px * var(--ui-density)); }
.quality-plan-drawer-list article small { color: var(--muted); }

.quality-report-context {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  width: auto !important;
  flex: 0 1 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.quality-report-context-field { display: grid; gap: calc(5px * var(--ui-density)); min-width: 0; color: var(--muted); font-size: var(--font-size-small); }
.quality-report-context-field:first-child { width: clamp(calc(190px * var(--ui-density)), 15vw, calc(230px * var(--ui-density))); }
.quality-report-context-field:nth-child(2) { width: clamp(calc(220px * var(--ui-density)), 18vw, calc(280px * var(--ui-density))); }
.quality-report-context .custom-select { min-width: 0; width: 100%; }
.quality-report-context > button { min-height: calc(48px * var(--ui-density)); white-space: nowrap; }
.quality-report-control-shell { position: sticky; top: 0; z-index: 8; overflow: visible; }
.quality-report-pending-state,
.quality-report-generating-state {
  display: grid;
  min-height: calc(290px * var(--ui-density));
  place-items: center;
  align-content: center;
  gap: calc(10px * var(--ui-density));
  text-align: center;
}
.quality-report-pending-state { border-style: dashed; color: var(--heading); }
.quality-report-pending-state p,
.quality-report-generating-state p { max-width: calc(540px * var(--ui-density)); margin: 0; }
.quality-report-pending-mark { display: grid; place-items: center; width: calc(42px * var(--ui-density)); height: calc(42px * var(--ui-density)); border-radius: 50%; color: var(--menu-active-text); background: var(--active-surface); font-size: calc(20px * var(--ui-density)); }
.quality-report-loading-orbit { display: grid; place-items: center; width: calc(52px * var(--ui-density)); height: calc(52px * var(--ui-density)); border: calc(3px * var(--ui-density)) solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-top-color: var(--accent); border-radius: 50%; animation: quality-report-orbit 900ms linear infinite; }
.quality-report-loading-orbit i { display: block; width: calc(12px * var(--ui-density)); height: calc(12px * var(--ui-density)); border-radius: 50%; background: var(--accent-2); }
@keyframes quality-report-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .quality-report-loading-orbit { animation: none; } }
.quality-report-view { display: grid; gap: calc(18px * var(--ui-density)); }
.quality-report-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--ui-density));
  background: var(--panel);
}
.quality-report-scope > div,
.quality-report-scope-meta { display: flex; align-items: center; gap: calc(10px * var(--ui-density)); min-width: 0; }
.quality-report-scope strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-report-scope-meta { color: var(--muted); font-size: var(--font-size-small); }
.quality-report-scope-badge,
.quality-report-live {
  display: inline-flex;
  align-items: center;
  min-height: calc(24px * var(--ui-density));
  padding: 0 calc(9px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--active-surface);
  color: var(--menu-active-text);
  font-size: var(--font-size-small);
  white-space: nowrap;
}
.quality-report-live { background: var(--ok-bg); color: var(--ok); }
.quality-report-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(12px * var(--ui-density)); }
.quality-report-metrics.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quality-report-metrics .metric-card { min-width: 0; min-height: calc(104px * var(--ui-density)); }
.quality-report-metrics .metric-card strong { font-size: clamp(20px, 1.55vw, 28px); }
.quality-report-chart-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--ui-density)); align-items: stretch; }
.quality-report-view[data-report-view="overview"] .quality-report-chart-row { grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr); }
.quality-report-chart-card,
.quality-report-efficiency { min-width: 0; overflow: hidden; }
.quality-report-chart { min-height: calc(230px * var(--ui-density)); }
.quality-report-efficiency { display: grid; align-content: start; gap: calc(14px * var(--ui-density)); }
.quality-report-efficiency-value { display: grid; place-items: center; min-height: calc(126px * var(--ui-density)); border: 1px solid var(--line); border-radius: calc(16px * var(--ui-density)); background: var(--control); }
.quality-report-efficiency-value strong { font-size: clamp(28px, 2.2vw, 42px); color: var(--heading); }
.quality-report-efficiency-value span { color: var(--muted); font-size: var(--font-size-small); }
.quality-report-ordinary-list.list-page-shell { min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.quality-report-ordinary-list .list-page-head { padding: 0 0 calc(10px * var(--ui-density)); }
.quality-report-ordinary-list .list-table-card { overflow: hidden; border: 1px solid var(--line); border-radius: calc(18px * var(--ui-density)); background: var(--panel); }
.quality-report-ordinary-list .table-scroll { border: 0; border-radius: 0; box-shadow: none; }
.quality-report-ordinary-list table { min-width: calc(860px * var(--ui-density)); }
.quality-report-ordinary-list th { text-align: center; }
.quality-report-ordinary-list td:first-child,
.quality-report-ordinary-list th:first-child { width: calc(64px * var(--ui-density)); text-align: center; }
.quality-report-ordinary-list td:nth-child(3),
.quality-report-ordinary-list td:nth-child(4) { max-width: calc(320px * var(--ui-density)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-report-error,
.quality-report-partial-error { border-color: var(--danger); background: var(--danger-bg); }
.quality-report-error { display: grid; justify-items: start; gap: calc(8px * var(--ui-density)); min-height: calc(220px * var(--ui-density)); align-content: center; }
.quality-report-error p,
.quality-report-partial-error p { margin: 0; }

@media (max-width: 980px) {
  .modal.work-item-modal:has(#testCaseForm),
  .modal.wide:has(#attachCaseForm) {
    width: calc(100vw - calc(32px * var(--ui-density)));
    height: calc(100dvh - calc(32px * var(--ui-density)));
    max-width: none;
  }

  .modal.work-item-modal:has(#testCaseForm) .modal-body { overflow: auto; }
  .quality-case-create-form { height: auto; overflow: visible; }
  .quality-case-create-layout { grid-template-columns: 1fr; height: auto; }
  .quality-case-create-main,
  .quality-case-create-side { min-height: auto; }
  .quality-case-create-side-fields { overflow: visible; }
  .quality-case-step-scroll { height: auto; max-height: calc(340px * var(--ui-density)); }
  .quality-attach-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-attach-filter-row > button { align-self: end; }

  .quality-plan-card-grid { grid-template-columns: 1fr; }
  .quality-case-layout { grid-template-columns: 1fr; }
  .quality-case-directory {
    position: fixed;
    inset: calc(84px * var(--ui-density)) auto calc(18px * var(--ui-density)) calc(18px * var(--ui-density));
    z-index: 31;
    width: min(calc(340px * var(--ui-density)), calc(100vw - 36px));
    border: 1px solid var(--line);
    border-radius: calc(20px * var(--ui-density));
    box-shadow: var(--shadow);
    transform: translateX(calc(-100% - 32px));
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .quality-case-layout.mobile-directory-open .quality-case-directory { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .quality-directory-mobile-trigger { display: inline-flex; align-self: flex-start; margin: calc(14px * var(--ui-density)) calc(18px * var(--ui-density)) 0; }
  .quality-directory-tree { max-height: calc(230px * var(--ui-density)); }
  .quality-context-bar { align-items: stretch; }
  .quality-context-arrow { display: none; }
  .quality-report-context { width: 100% !important; flex-basis: 100%; }
  .quality-report-context-field:first-child,
  .quality-report-context-field:nth-child(2) { flex: 1 1 calc(220px * var(--ui-density)); width: auto; }
  .quality-report-scope { align-items: flex-start; flex-direction: column; }
  .quality-report-scope-meta { flex-wrap: wrap; }
  .quality-report-metrics,
  .quality-report-metrics.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-report-chart-row,
  .quality-report-view[data-report-view="overview"] .quality-report-chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .quality-report-metrics,
  .quality-report-metrics.four { grid-template-columns: 1fr; }
  .quality-report-scope-meta { align-items: flex-start; flex-direction: column; }
  .quality-plan-center__toolbar,
  .quality-case-toolbar { align-items: stretch; }
  .quality-plan-center__toolbar .planning-actions,
  .quality-case-toolbar .planning-actions { display: grid; grid-template-columns: 1fr; }
  .quality-plan-center__toolbar .quality-plan-toolbar-form { align-items: stretch; flex-wrap: wrap; }
  .quality-plan-center__toolbar .quality-plan-toolbar-form select,
  .quality-plan-center__toolbar .quality-plan-toolbar-form .system-users-toolbar-search { flex: 1 1 100%; max-width: none; }
  .quality-plan-card { padding: calc(14px * var(--ui-density)); }
  .quality-plan-group__head,
  .quality-plan-version-context,
  .quality-plan-card__head,
  .quality-plan-card__foot { align-items: flex-start; flex-direction: column; }

  .quality-plan-version-context {
    gap: calc(8px * var(--ui-density));
    padding: 0;
  }

  .quality-plan-version-context label { flex-wrap: wrap; }
  .quality-plan-workflow__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12px * var(--ui-density)) 0; }
  .quality-plan-workflow__stage:nth-child(2)::after,
  .quality-plan-workflow__stage:nth-child(2)::before { display: none; }
  .quality-plan-node { width: calc(64px * var(--ui-density)); height: calc(64px * var(--ui-density)); }
  .quality-plan-node__circle { width: calc(52px * var(--ui-density)); height: calc(52px * var(--ui-density)); }
  .quality-plan-workflow__stage:not(:last-child)::after { top: calc(31px * var(--ui-density)); left: calc(50% + calc(32px * var(--ui-density))); right: calc(-50% + calc(32px * var(--ui-density))); }
  .quality-plan-workflow__stage:not(:last-child)::before { top: calc(26px * var(--ui-density)); right: calc(-50% + calc(32px * var(--ui-density))); }
  .quality-plan-card__facts,
  .quality-detail-grid { grid-template-columns: 1fr; }
  .quality-wizard-steps { grid-template-columns: 1fr; }
  .quality-method-fieldset { display: grid; }
  .quality-story-picker > header { align-items: stretch; flex-direction: column; }
  .quality-review-inline { grid-template-columns: 1fr; }
  .quality-stage-guidance { align-items: flex-start; flex-direction: column; }
}

:root[data-font-size-level="small"] {
  --font-size-offset: 0px;
  --font-size-table-offset: 0px;
}

:root[data-font-size-level="medium"] {
  --font-size-offset: calc(1px * var(--ui-density));
  --font-size-table-offset: 1px;
}

:root[data-font-size-level="large"] {
  --font-size-offset: calc(2px * var(--ui-density));
  --font-size-table-offset: 2px;
}

:root[data-font-size-level="xlarge"] {
  --font-size-offset: calc(3px * var(--ui-density));
  --font-size-table-offset: 3px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070b;
  --bg-gradient:
    radial-gradient(calc(1100px * var(--ui-density)) calc(720px * var(--ui-density)) at 84% 10%, rgba(64, 112, 255, 0.16), transparent 58%),
    radial-gradient(calc(900px * var(--ui-density)) calc(640px * var(--ui-density)) at 18% 24%, rgba(29, 210, 177, 0.10), transparent 60%),
    linear-gradient(135deg, #040507 0%, #07101a 42%, #0a0716 100%);
  --bg-wash:
    linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 48%),
    linear-gradient(320deg, rgba(52, 255, 214, 0.08), transparent 58%),
    radial-gradient(calc(1100px * var(--ui-density)) calc(700px * var(--ui-density)) at 82% 10%, rgba(114, 149, 255, 0.14), transparent 65%);
  --auth-gradient:
    linear-gradient(120deg, rgba(34, 61, 64, 0.42), transparent 48%),
    linear-gradient(320deg, rgba(52, 36, 78, 0.42), transparent 52%),
    var(--bg);
  --panel: rgba(11, 15, 22, 0.68);
  --panel-2: rgba(13, 18, 26, 0.58);
  --panel-strong: rgba(16, 22, 31, 0.82);
  --surface-solid: #10161f;
  --surface-solid-text: #fbfdff;
  --layer-surface: rgba(7, 11, 18, 0.74);
  --layer-field: rgba(16, 22, 31, 0.92);
  --layer-line: rgba(173, 228, 255, 0.14);
  --layer-shadow: 0 calc(34px * var(--ui-density)) calc(92px * var(--ui-density)) rgba(0, 0, 0, 0.52), 0 calc(10px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(0, 0, 0, 0.32);
  --layer-soft-shadow: 0 calc(18px * var(--ui-density)) calc(46px * var(--ui-density)) rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --control: rgba(255, 255, 255, 0.06);
  --control-hover: rgba(255, 255, 255, 0.10);
  --text: #eef4f7;
  --heading: #fbfdff;
  --muted: #aab8c7;
  --muted-strong: #d2dbe4;
  --line: rgba(173, 228, 255, 0.14);
  --line-strong: rgba(201, 219, 235, 0.10);
  --accent: #1dd1b1;
  --accent-2: #2b7cff;
  --accent-3: #6257ff;
  --accent-gradient: linear-gradient(90deg, #129f98 0%, #276ee8 54%, #5546e2 100%);
  --warn: #ffd17e;
  --danger: #ff9aa9;
  --ok: #92e7ad;
  --warn-bg: rgba(150, 100, 23, 0.28);
  --danger-bg: rgba(148, 65, 82, 0.30);
  --ok-bg: rgba(47, 126, 80, 0.30);
  --work-item-type-epic: #7387ff;
  --work-item-type-feature: #65b5f6;
  --work-item-type-story: #42cda8;
  --work-item-type-task: #95cf72;
  --work-item-type-bug: #ef6f89;
  --chart-series-1: #1dd1b1;
  --chart-series-2: #2b7cff;
  --chart-series-3: #6257ff;
  --chart-series-4: #7fd0ff;
  --chart-series-5: #f5b6cf;
  --chart-series-6: #c9a6f5;
  --chart-series-7: #8ad7a8;
  --chart-series-8: #aab8c7;
  --chart-axis: rgba(201, 219, 235, 0.32);
  --chart-split: rgba(173, 228, 255, 0.16);
  --chart-tooltip-bg: rgba(16, 22, 31, 0.94);
  --chart-tooltip-border: rgba(173, 228, 255, 0.20);
  --chart-area-opacity: 0.22;
  --growth-agent-product: #38efff;
  --growth-agent-development: #9285ff;
  --growth-agent-test: #43f5aa;
  --growth-energy-track-opacity: 0.34;
  --growth-energy-track-focus-opacity: 0.56;
  --growth-energy-track-halo-opacity: 0.16;
  --growth-energy-track-focus-halo-opacity: 0.30;
  --shadow: none;
  --soft-shadow: none;
  --accent-shadow:
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(18, 84, 209, 0.28),
    0 0 0 1px rgba(78, 173, 255, 0.18),
    0 0 calc(24px * var(--ui-density)) rgba(45, 121, 255, 0.16);
  --progress-track: rgba(223, 234, 244, 0.14);
  --table-head: rgba(255, 255, 255, 0.06);
  --active-surface: linear-gradient(135deg, rgba(47, 171, 255, 0.22), rgba(89, 103, 255, 0.18));
  --overlay: rgba(2, 8, 18, 0.50);
  --toolbar-popover-bg:
    linear-gradient(135deg, rgba(10, 18, 29, 0.98), rgba(8, 14, 22, 0.98)),
    #0a0f18;
  --toolbar-popover-border: var(--layer-line);
  --toolbar-popover-shadow: 0 calc(24px * var(--ui-density)) calc(70px * var(--ui-density)) rgba(0, 0, 0, 0.34), 0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.26);
  --layer-input-border: rgba(170, 184, 255, 0.28);
  --layer-input-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 calc(8px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(0, 0, 0, 0.18);
  --layer-input-focus-border: rgba(170, 184, 255, 0.62);
  --layer-input-focus-shadow:
    0 0 0 calc(4px * var(--ui-density)) rgba(170, 184, 255, 0.16),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(0, 0, 0, 0.22);
  --layer-accent-shadow:
    0 calc(24px * var(--ui-density)) calc(70px * var(--ui-density)) rgba(0, 0, 0, 0.34),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(170, 184, 255, 0.10),
    0 0 calc(30px * var(--ui-density)) rgba(126, 160, 255, 0.18);
}

:root[data-theme="dark"] .work-item-section {
  border-color: var(--layer-line);
  background:
    linear-gradient(180deg, rgba(35, 52, 72, 0.82), rgba(20, 35, 52, 0.72)),
    rgba(18, 35, 50, 0.72);
  box-shadow: var(--layer-soft-shadow);
}

:root[data-theme="dark"] .work-item-side-panel {
  border-color: var(--layer-line);
  background:
    linear-gradient(180deg, rgba(25, 41, 58, 0.86), rgba(18, 31, 45, 0.80)),
    rgba(13, 24, 36, 0.74);
  box-shadow: var(--layer-soft-shadow);
}

:root[data-theme="dark"] .work-item-display,
:root[data-theme="dark"] .work-item-relations.compact,
:root[data-theme="dark"] .work-item-relations.unified,
:root[data-theme="dark"] .relation-card,
:root[data-theme="dark"] .attachment-list span,
:root[data-theme="dark"] .work-item-comment {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .work-item-label-icon {
  color: var(--accent-2);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .relation-dialog,
:root[data-theme="dark"] .list-filter-popover,
:root[data-theme="dark"] .iteration-filter-popover,
:root[data-theme="dark"] .iteration-card-menu,
:root[data-theme="dark"] .quick-filter-dropdown,
:root[data-theme="dark"] .custom-select-menu,
:root[data-theme="dark"] .enum-dd-menu,
:root[data-theme="dark"] .cfilter-popover,
:root[data-theme="dark"] .work-item-date-dialog {
  background:
    linear-gradient(135deg, rgba(30, 49, 68, 0.88), rgba(18, 32, 48, 0.82)),
    linear-gradient(320deg, rgba(255, 255, 255, 0.08), rgba(126, 148, 244, 0.10)),
    var(--layer-surface);
}

:root[data-theme="dark"] .work-item-head-grid > .work-item-field {
  border-color: var(--layer-line);
  background:
    linear-gradient(180deg, rgba(35, 52, 72, 0.84), rgba(20, 35, 52, 0.72)),
    rgba(18, 35, 50, 0.72);
  box-shadow: var(--layer-soft-shadow);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: visible;
  background: var(--bg-gradient), var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  letter-spacing: 0;
  line-height: 1.56;
  font-size: var(--font-size-body);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--bg-wash);
  filter: blur(0.2px);
  z-index: -1;
}

button,
input,
select,
textarea {
  font: inherit;
  font-family: var(--font-family-base);
}

button {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--text);
  border-radius: calc(999px * var(--ui-density));
  padding: calc(11px * var(--ui-density)) calc(18px * var(--ui-density));
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: var(--glass);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
  font-size: var(--font-size-title);
  font-weight: 700;
}

button:hover {
  border-color: var(--line-strong);
  background: var(--control-hover);
  transform: translateY(-1px);
}

button:disabled {
  transform: none;
}

button.primary {
  background: var(--accent-gradient);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: var(--accent-shadow);
  font-weight: 800;
}

button.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

button.ghost {
  background: transparent;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  background: var(--control);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: var(--glass);
  font-size: var(--font-size-body);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: calc(52px * var(--ui-density));
  padding-right: calc(46px * var(--ui-density));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.72)),
    var(--control);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  width: calc(22px * var(--ui-density));
  height: calc(22px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
  opacity: 0.72;
  background-color: rgba(125, 99, 244, 0.12);
  cursor: pointer;
}

.date-time-text-input {
  flex: 0 0 calc(291px * var(--ui-density));
  width: calc(291px * var(--ui-density));
  min-width: calc(291px * var(--ui-density));
  min-height: calc(52px * var(--ui-density));
  padding-right: calc(46px * var(--ui-density)) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236d63ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5.5' width='15' height='14' rx='3'/%3E%3Cpath d='M8 3.7v3.5M16 3.7v3.5M4.5 10h15M12 13.1v3.2l2.2 1.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-size: 0, calc(22px * var(--ui-density)) calc(22px * var(--ui-density)) !important;
  background-position: 0 0, right calc(16px * var(--ui-density)) center !important;
  cursor: pointer;
}

.date-time-text-input::placeholder {
  text-align: center;
}

:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]),
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) .custom-select-trigger {
  --shared-field-border: rgba(125, 99, 244, 0.32);
  --shared-field-focus-border: rgba(125, 99, 244, 0.50);
  --shared-field-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  --shared-field-focus-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.13);
  border-color: var(--shared-field-border);
  box-shadow: var(--shared-field-shadow);
}

:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):hover,
:root:not([data-theme="dark"]) select:hover,
:root:not([data-theme="dark"]) textarea:hover,
:root:not([data-theme="dark"]) .custom-select-trigger:hover {
  border-color: var(--shared-field-focus-border);
  box-shadow:
    var(--shared-field-shadow),
    0 0 0 calc(2px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent),
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) color-mix(in srgb, var(--accent-2) 10%, transparent);
}

:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):focus,
:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):focus-visible,
:root:not([data-theme="dark"]) select:focus,
:root:not([data-theme="dark"]) select:focus-visible,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) textarea:focus-visible,
:root:not([data-theme="dark"]) .custom-select.open .custom-select-trigger,
:root:not([data-theme="dark"]) .custom-select-trigger:focus,
:root:not([data-theme="dark"]) .custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--shared-field-focus-border);
  box-shadow: var(--shared-field-focus-shadow);
}

.native-select-hidden {
  display: none !important;
}

.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 2;
}

.custom-select-trigger {
  width: 100%;
  min-height: calc(48px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: var(--radius-sm);
  text-align: left;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  box-shadow: none;
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.56;
  transform: none;
  border: 1px solid var(--line);
}

.custom-select-trigger:hover {
  transform: none;
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  color: var(--muted-strong);
  transition: transform 140ms ease;
}

.custom-select.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select.open {
  z-index: 64;
}

.list-filter-popover .custom-select.open,
.quick-filter-dropdown .custom-select.open,
.cfilter-popover .custom-select.open,
.iteration-filter-popover .custom-select.open,
.iteration-add-form .custom-select.open,
.iteration-add-filter-row .custom-select.open {
  z-index: 120;
}

.custom-select-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + calc(8px * var(--ui-density)));
  left: 0;
  right: 0;
  max-height: calc(280px * var(--ui-density));
  overflow: auto;
  display: none;
  padding: calc(8px * var(--ui-density));
  border: 1px solid var(--layer-line);
  border-radius: calc(18px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72)),
    var(--layer-field);
  box-shadow: 0 calc(22px * var(--ui-density)) calc(56px * var(--ui-density)) rgba(83, 98, 155, 0.16), 0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(83, 98, 155, 0.10);
  backdrop-filter: var(--glass);
}

:root:not([data-theme="dark"]) .custom-select-menu {
  border-color: rgba(125, 99, 244, 0.32);
  box-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(18px * var(--ui-density)) calc(44px * var(--ui-density)) color-mix(in srgb, var(--accent) 12%, transparent);
}

.custom-select.direction-up .custom-select-menu {
  top: auto;
  bottom: calc(100% + calc(8px * var(--ui-density)));
}

.custom-select.open .custom-select-menu {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.custom-select-option {
  width: 100%;
  min-height: calc(42px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(9px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(12px * var(--ui-density));
  border-color: transparent;
  background: transparent;
  color: var(--muted-strong);
  text-align: left;
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.56;
}

.custom-select-option:hover {
  transform: none;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.90)),
      color-mix(in srgb, var(--accent-2) 16%, rgba(246, 249, 255, 0.84))
    ),
    var(--control-hover);
  color: var(--muted-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
}

:root:not([data-theme="dark"]) .custom-select-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.90)),
      color-mix(in srgb, var(--accent-2) 24%, rgba(246, 249, 255, 0.86))
    ),
    var(--control-hover);
  color: var(--heading);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) color-mix(in srgb, var(--accent) 14%, transparent);
}

.custom-select-option.selected {
  color: #fff;
  background: var(--active-surface);
  box-shadow: inset 0 0 0 1px rgba(125, 99, 244, 0.18);
}

.custom-select-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-option.selected::after {
  content: "✓";
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 900;
}

:root:not([data-theme="dark"]) .custom-select-option.selected::after {
  color: var(--accent);
}

.custom-select-option[data-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

.custom-select.disabled {
  opacity: 0.58;
  pointer-events: none;
}

.toolbar .custom-select {
  width: calc(180px * var(--ui-density));
}

.project-picker .custom-select {
  width: 100%;
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] .custom-select-trigger,
:root[data-theme="dark"] .project-select-native {
  background: rgba(255, 255, 255, 0.06);
  color: #eef4f7;
  border-color: rgba(173, 228, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .custom-select-arrow,
:root[data-theme="dark"] select {
  color: #d8e2ef;
}

:root[data-theme="dark"] .custom-select-menu {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 17, 26, 0.96), rgba(8, 13, 20, 0.94)),
    rgba(7, 11, 18, 0.96);
  box-shadow:
    0 calc(24px * var(--ui-density)) calc(60px * var(--ui-density)) rgba(0, 0, 0, 0.36),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .custom-select-option {
  color: rgba(232, 238, 248, 0.76);
}

:root[data-theme="dark"] .custom-select-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 34%, rgba(13, 22, 35, 0.92)),
      color-mix(in srgb, var(--accent-2) 26%, rgba(6, 16, 27, 0.94))
    ),
    rgba(255, 255, 255, 0.04);
  color: rgba(232, 238, 248, 0.88);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 24%, transparent),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .custom-select-option.selected {
  background: var(--accent-gradient);
  color: #ffffff;
}

:root[data-theme="dark"] .custom-select.open .custom-select-trigger,
:root[data-theme="dark"] .custom-select-trigger:focus,
:root[data-theme="dark"] select:focus {
  border-color: rgba(86, 156, 255, 0.36);
  box-shadow:
    0 0 0 calc(3px * var(--ui-density)) rgba(39, 110, 232, 0.18),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

textarea {
  min-height: calc(104px * var(--ui-density));
  resize: vertical;
  line-height: 1.7;
}

label {
  display: grid;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 650;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-table);
}

tbody tr.selected-row {
  background: var(--active-surface);
}

tbody tr[data-plan-row],
tbody tr[data-version-row] {
  cursor: pointer;
}

tbody tr[data-plan-row]:hover,
tbody tr[data-version-row]:hover {
  background: var(--control-hover);
}

th,
td {
  text-align: left;
  padding: calc(22px * var(--ui-density)) calc(28px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
  vertical-align: top;
  line-height: 1.55;
}

th {
  color: var(--muted-strong);
  background: var(--table-head);
  font-size: var(--font-size-body);
  font-weight: 700;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: var(--glass);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(12px * var(--ui-density));
  padding: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(980px * var(--ui-density)) calc(560px * var(--ui-density)) at 16% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(calc(820px * var(--ui-density)) calc(520px * var(--ui-density)) at 88% 86%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 72%),
    var(--bg-wash),
    var(--bg-gradient),
    var(--auth-gradient),
    var(--bg);
}

.auth-panel {
  width: min(calc(1040px * var(--ui-density)), 100%);
  display: grid;
  grid-template-columns: 1fr calc(420px * var(--ui-density));
  background:
    radial-gradient(calc(520px * var(--ui-density)) calc(280px * var(--ui-density)) at 18% 22%, color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.66)), transparent 72%),
    radial-gradient(calc(420px * var(--ui-density)) calc(260px * var(--ui-density)) at 86% 78%, color-mix(in srgb, var(--accent-3) 8%, rgba(255, 255, 255, 0.58)), transparent 76%),
    linear-gradient(90deg, rgba(248, 251, 255, 0.78) 0%, rgba(244, 248, 255, 0.68) 56%, rgba(239, 243, 255, 0.74) 100%),
    color-mix(in srgb, var(--panel-strong) 86%, rgba(255, 255, 255, 0.78));
  border: 1px solid color-mix(in srgb, var(--line) 82%, rgba(170, 184, 215, 0.22));
  border-radius: calc(30px * var(--ui-density));
  box-shadow:
    0 calc(36px * var(--ui-density)) calc(90px * var(--ui-density)) rgba(76, 92, 170, 0.18),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(117, 135, 212, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 calc(36px * var(--ui-density)) rgba(255, 255, 255, 0.18),
    0 0 calc(42px * var(--ui-density)) rgba(125, 99, 244, 0.08);
  overflow: hidden;
  backdrop-filter: var(--glass);
  position: relative;
  isolation: isolate;
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(29px * var(--ui-density));
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 34%, rgba(153, 131, 255, 0.08) 100%);
  opacity: 0.72;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  filter: blur(0.4px);
}

.auth-panel::after {
  content: "";
  position: absolute;
  inset: calc(16px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(248, 252, 255, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(178, 205, 255, 0.06), rgba(255, 255, 255, 0));
  opacity: 0.56;
}

.auth-copy {
  padding: calc(52px * var(--ui-density));
  background: transparent;
  position: relative;
  z-index: 1;
}

.auth-copy::before {
  content: "";
  position: absolute;
  inset: calc(18px * var(--ui-density)) calc(20px * var(--ui-density)) calc(18px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(28px * var(--ui-density)) calc(48px * var(--ui-density)) calc(48px * var(--ui-density)) calc(28px * var(--ui-density));
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(248, 252, 255, 0.26), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(198, 220, 255, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(248, 251, 255, 0.08), rgba(255, 255, 255, 0.01));
  filter: blur(calc(12px * var(--ui-density)));
  opacity: 0.44;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: calc(18px * var(--ui-density));
  margin-bottom: calc(18px * var(--ui-density));
  min-width: 0;
  flex-wrap: wrap;
}

.auth-brand__logo {
  width: calc(48px * var(--ui-density));
  height: calc(48px * var(--ui-density));
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.auth-brand__entity {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.auth-brand__entity strong {
  min-width: 0;
  color: var(--heading);
  font-size: calc(22px * var(--ui-density));
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.auth-brand__separator {
  color: var(--muted);
  font-size: calc(22px * var(--ui-density));
  line-height: 1;
}

.auth-brand__subtitle {
  flex-basis: 100%;
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  line-height: 1.5;
}

.auth-brand__copy {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.auth-brand__copy strong {
  color: var(--heading);
  font-size: calc(28px * var(--ui-density));
  line-height: 1.14;
  font-weight: 700;
}

.auth-brand__copy span {
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  line-height: 1.5;
}

.auth-copy p {
  line-height: 1.85;
  color: var(--muted);
  font-size: var(--font-size-body);
}

.auth-form-shell {
  padding: calc(24px * var(--ui-density));
  position: relative;
  z-index: 1;
}

.auth-form {
  padding: calc(36px * var(--ui-density));
  display: grid;
  gap: calc(18px * var(--ui-density));
  min-height: 100%;
  border-radius: calc(26px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 255, 0.84)),
    color-mix(in srgb, var(--layer-field) 88%, rgba(255, 255, 255, 0.82));
  box-shadow:
    0 calc(24px * var(--ui-density)) calc(48px * var(--ui-density)) rgba(108, 123, 196, 0.14),
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(130, 143, 212, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 calc(24px * var(--ui-density)) rgba(255, 255, 255, 0.18);
  backdrop-filter: var(--glass);
  position: relative;
}

.auth-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.08) 36%, rgba(132, 116, 255, 0.08) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  opacity: 0.68;
  filter: blur(0.3px);
}

.auth-form h2 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
}

.auth-form__heading {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.auth-form__heading p {
  margin: 0;
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
  line-height: 1.55;
}

.auth-form--registration {
  gap: calc(14px * var(--ui-density));
}

.auth-form--enterprise-selector {
  gap: calc(16px * var(--ui-density));
}

.enterprise-selector__list {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.enterprise-selector__option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  padding: calc(15px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.enterprise-selector__option:hover,
.enterprise-selector__option:focus-visible {
  border-color: var(--accent-2);
  background: var(--control-hover);
  box-shadow: var(--soft-shadow);
}

.enterprise-selector__option span:first-child {
  display: grid;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.enterprise-selector__option strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.enterprise-selector__option small,
.enterprise-selector__error {
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.enterprise-selector__error {
  margin: 0;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
}

.auth-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: calc(10px * var(--ui-density)) !important;
  font-weight: 500 !important;
  line-height: 1.5;
}

.auth-consent input {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin: 1px 0 0;
  accent-color: var(--accent-2);
}

.auth-form label {
  display: grid;
  gap: calc(10px * var(--ui-density));
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
}

.auth-form input,
.auth-form textarea,
.auth-form select {
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
  outline: none;
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

.auth-links {
  display: flex;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
}

.auth-links--end {
  justify-content: flex-end;
}

.auth-links__action {
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
}

.link-like {
  padding-inline: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent-2);
}

.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field__input {
  padding-right: calc(58px * var(--ui-density));
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: calc(10px * var(--ui-density));
  width: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  padding: 0;
  border-radius: calc(999px * var(--ui-density));
  transform: translateY(-50%);
  color: var(--muted-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  transform: translateY(-50%);
  background: rgba(125, 99, 244, 0.08);
  border-color: rgba(125, 99, 244, 0.16);
}

.auth-password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) rgba(125, 99, 244, 0.14);
}

.auth-password-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-password-toggle__icon svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
}

.auth-password-toggle__icon--hide,
.auth-password-field.is-visible .auth-password-toggle__icon--show {
  display: none;
}

.auth-password-field.is-visible .auth-password-toggle__icon--hide {
  display: inline-flex;
}

:root[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(calc(1100px * var(--ui-density)) calc(680px * var(--ui-density)) at 16% 18%, rgba(29, 209, 177, 0.08), transparent 60%),
    radial-gradient(calc(920px * var(--ui-density)) calc(560px * var(--ui-density)) at 88% 86%, rgba(98, 87, 255, 0.12), transparent 62%),
    var(--bg-wash),
    var(--bg-gradient),
    var(--auth-gradient),
    var(--bg);
}

:root[data-theme="dark"] .auth-panel {
  background:
    radial-gradient(calc(520px * var(--ui-density)) calc(280px * var(--ui-density)) at 18% 22%, rgba(29, 209, 177, 0.10), transparent 72%),
    radial-gradient(calc(420px * var(--ui-density)) calc(260px * var(--ui-density)) at 86% 78%, rgba(98, 87, 255, 0.14), transparent 76%),
    linear-gradient(90deg, rgba(9, 14, 22, 0.86) 0%, rgba(11, 17, 27, 0.8) 56%, rgba(15, 18, 30, 0.84) 100%),
    color-mix(in srgb, var(--panel-strong) 94%, rgba(7, 10, 18, 0.82));
  border-color: rgba(110, 160, 255, 0.14);
  box-shadow:
    0 calc(38px * var(--ui-density)) calc(96px * var(--ui-density)) rgba(0, 0, 0, 0.52),
    0 calc(14px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 calc(40px * var(--ui-density)) rgba(118, 164, 255, 0.04),
    0 0 calc(44px * var(--ui-density)) rgba(52, 255, 214, 0.08);
}

:root[data-theme="dark"] .auth-panel::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.01) 34%, rgba(82, 124, 255, 0.12) 100%);
  opacity: 0.84;
}

:root[data-theme="dark"] .auth-panel::after {
  background:
    radial-gradient(circle at top left, rgba(120, 164, 255, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(34, 48, 76, 0.18), rgba(255, 255, 255, 0));
  opacity: 0.62;
}

:root[data-theme="dark"] .auth-copy::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(120, 164, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(52, 255, 214, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  opacity: 0.54;
}

:root[data-theme="dark"] .auth-form {
  background:
    linear-gradient(180deg, rgba(13, 19, 29, 0.92), rgba(10, 16, 26, 0.82)),
    color-mix(in srgb, var(--layer-field) 92%, rgba(10, 14, 23, 0.86));
  box-shadow:
    0 calc(26px * var(--ui-density)) calc(56px * var(--ui-density)) rgba(0, 0, 0, 0.42),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 calc(26px * var(--ui-density)) rgba(77, 124, 255, 0.04);
}

:root[data-theme="dark"] .auth-form::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 36%, rgba(82, 124, 255, 0.12) 100%);
  opacity: 0.78;
}

:root[data-theme="dark"] .auth-password-toggle:hover,
:root[data-theme="dark"] .auth-password-toggle:focus-visible {
  background: rgba(82, 124, 255, 0.14);
  border-color: rgba(82, 124, 255, 0.22);
}

.toast-inline {
  margin-top: calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text);
}

.toast-inline.ok {
  background: var(--ok-bg);
}

.toast-inline.warn {
  background: var(--warn-bg);
}

.toast-inline.danger {
  background: var(--danger-bg);
}

.toast-inline.info {
  background: var(--panel-strong);
}

.global-toast-region {
  position: fixed;
  top: calc(20px * var(--ui-density));
  left: 50%;
  z-index: var(--z-toast);
  width: min(calc(720px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  pointer-events: none;
  transform: translateX(-50%);
}

.global-toast {
  display: grid;
  justify-items: center;
  padding: 0;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
  filter: saturate(92%);
}

.global-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(100%);
}

.global-toast__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(48px * var(--ui-density));
  max-width: min(calc(560px * var(--ui-density)), calc(100vw - calc(72px * var(--ui-density))));
  padding: 0 calc(20px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 255, 0.82)),
    var(--panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(109, 129, 180, 0.12),
    0 0 calc(28px * var(--ui-density)) rgba(151, 165, 236, 0.18);
  backdrop-filter: var(--glass);
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.56;
  text-align: center;
  letter-spacing: 0;
}

.global-toast.ok .global-toast__label {
  background:
    linear-gradient(135deg, rgba(234, 255, 243, 0.96), rgba(218, 248, 234, 0.88)),
    var(--ok-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(78, 141, 101, 0.14),
    0 0 calc(28px * var(--ui-density)) rgba(122, 218, 159, 0.20);
  color: #215c39;
}

.global-toast.warn .global-toast__label {
  background:
    linear-gradient(135deg, rgba(255, 248, 226, 0.96), rgba(255, 236, 194, 0.88)),
    var(--warn-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(173, 129, 49, 0.14),
    0 0 calc(28px * var(--ui-density)) rgba(241, 201, 121, 0.18);
  color: #7a5314;
}

.global-toast.danger .global-toast__label {
  background:
    linear-gradient(135deg, rgba(255, 239, 244, 0.96), rgba(255, 224, 232, 0.88)),
    var(--danger-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(173, 88, 110, 0.14),
    0 0 calc(28px * var(--ui-density)) rgba(237, 146, 172, 0.18);
  color: #8f3347;
}

:root[data-theme="dark"] .global-toast__label {
  background:
    linear-gradient(135deg, rgba(34, 48, 68, 0.94), rgba(25, 38, 56, 0.88)),
    var(--panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 calc(26px * var(--ui-density)) rgba(132, 149, 230, 0.16);
  color: var(--heading);
}

:root[data-theme="dark"] .global-toast.ok .global-toast__label {
  background:
    linear-gradient(135deg, rgba(42, 92, 68, 0.94), rgba(31, 70, 53, 0.88)),
    var(--ok-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 calc(26px * var(--ui-density)) rgba(116, 223, 160, 0.18);
  color: #d9ffe8;
}

:root[data-theme="dark"] .global-toast.warn .global-toast__label {
  background:
    linear-gradient(135deg, rgba(110, 73, 19, 0.92), rgba(91, 58, 13, 0.88)),
    var(--warn-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 calc(26px * var(--ui-density)) rgba(255, 209, 126, 0.16);
  color: #fff0ca;
}

:root[data-theme="dark"] .global-toast.danger .global-toast__label {
  background:
    linear-gradient(135deg, rgba(109, 41, 57, 0.92), rgba(86, 30, 45, 0.88)),
    var(--danger-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 calc(26px * var(--ui-density)) rgba(255, 154, 169, 0.16);
  color: #ffe1e8;
}

.project-select-native {
  margin-top: calc(10px * var(--ui-density));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(24px * var(--ui-density));
}

.stats-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-user-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
  padding: calc(26px * var(--ui-density)) calc(28px * var(--ui-density));
  backdrop-filter: var(--glass);
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.metric-card-actionable {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.metric-card-actionable:hover,
.metric-card-actionable:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(31, 49, 74, 0.16);
  transform: translateY(-2px);
  outline: none;
}

.metric-card.small {
  padding: calc(20px * var(--ui-density)) calc(22px * var(--ui-density));
}

.metric-card span,
.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  font-size: var(--font-size-title);
  line-height: 1.1;
  color: var(--heading);
  font-weight: 700;
}

:root[data-theme="dark"] .metric-card {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.90), rgba(10, 16, 25, 0.78)),
    radial-gradient(calc(420px * var(--ui-density)) calc(220px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.08), transparent 72%),
    rgba(10, 15, 24, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(82, 124, 255, 0.06);
}

:root[data-theme="dark"] .metric-card-actionable:hover,
:root[data-theme="dark"] .metric-card-actionable:focus-visible {
  border-color: rgba(173, 228, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(82, 124, 255, 0.12),
    0 0 calc(24px * var(--ui-density)) rgba(29, 209, 177, 0.08);
}

.home-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(22px * var(--ui-density));
  transform: none;
  overflow: hidden;
}

.home-stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--home-rail-desktop-width) minmax(0, 1fr) var(--home-info-rail-desktop-width);
  /* The enlarged entry row gives recent visits and announcements a calmer,
     more generous presentation while the catalog keeps the remaining space. */
  grid-template-rows: minmax(calc(211px * var(--ui-density)), calc(265px * var(--ui-density))) minmax(0, 1fr);
  gap: calc(13px * var(--ui-density));
  height: calc(100vh - calc(31px * var(--ui-density)));
  height: calc(100svh - calc(31px * var(--ui-density)));
  padding: 0;
  border-radius: 0;
  background:
    radial-gradient(calc(880px * var(--ui-density)) calc(520px * var(--ui-density)) at 62% 2%, color-mix(in srgb, var(--accent) 10%, rgba(205, 243, 255, 0.24)), transparent 72%),
    radial-gradient(calc(720px * var(--ui-density)) calc(460px * var(--ui-density)) at 100% 100%, color-mix(in srgb, var(--accent-3) 12%, rgba(198, 181, 255, 0.18)), transparent 70%),
    var(--bg-wash),
    var(--bg-gradient);
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.home-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./public/datayou-logo.png") center / contain no-repeat;
  opacity: 0.02;
  filter: grayscale(1);
  pointer-events: none;
}

.home-frame-content {
  grid-column: 2 / 4;
  grid-row: 1 / span 3;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: calc(6px * var(--ui-density));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
}

/* 迭代工作台需要占据首页内容区的确定高度；统计和表格各自在内部
   滚动，不能再由外层页面滚动把工作项表推离视口。 */
.home-frame-content:has(> .home-frame-content-body > .iteration-planning-shell) {
  height: 100%;
  block-size: 100%;
  overflow: hidden;
}

.home-frame-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24px * var(--ui-density));
  padding: calc(40px * var(--ui-density)) calc(36px * var(--ui-density));
  border-radius: calc(28px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
  background:
    radial-gradient(calc(360px * var(--ui-density)) calc(220px * var(--ui-density)) at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%),
    radial-gradient(calc(320px * var(--ui-density)) calc(200px * var(--ui-density)) at 0% 100%, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel-strong) 92%, var(--bg) 8%),
      color-mix(in srgb, var(--panel) 88%, var(--bg) 12%)
    ),
    color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--line) 74%, white 26%),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, rgba(113, 128, 166, 0.14));
}

.home-frame-topbar-copy {
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.home-frame-topbar-copy h2 {
  margin: 0;
  color: var(--heading);
  font-size: calc(24px * var(--ui-density));
  line-height: 1.08;
  font-weight: 800;
}

.home-frame-topbar-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: calc(15px * var(--ui-density));
  line-height: 1.6;
  font-weight: 600;
}

.home-frame-topbar-actions {
  display: flex;
  align-items: center;
  gap: calc(24px * var(--ui-density));
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-frame-quick-action {
  min-width: calc(198px * var(--ui-density));
  min-height: calc(74px * var(--ui-density));
  padding: 0 calc(28px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid rgba(233, 238, 248, 0.96);
  background: rgba(255, 255, 255, 0.92);
  color: #6f7ea0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(167, 176, 205, 0.12);
  font-size: calc(17px * var(--ui-density));
  font-weight: 800;
}

.home-frame-quick-action-primary {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--accent-gradient);
  background-clip: padding-box;
  background-size: 118% 118%;
  background-position: center;
  backdrop-filter: none;
  color: #fff;
  box-shadow:
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.home-frame-quick-action-primary:hover,
.home-frame-quick-action-primary:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--accent-gradient);
  background-clip: padding-box;
  background-size: 118% 118%;
  background-position: center;
  backdrop-filter: none;
  color: #fff;
  box-shadow:
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.home-frame-docs-action {
  min-width: calc(88px * var(--ui-density));
  min-height: calc(56px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: calc(24px * var(--ui-density));
  background: var(--control);
  color: var(--muted-strong);
  box-shadow: var(--soft-shadow);
  font-size: var(--font-size-body);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.home-frame-docs-action:hover,
.home-frame-docs-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--control-hover) 78%, var(--accent) 22%);
  color: var(--accent);
  box-shadow: var(--accent-shadow);
}

.home-frame-docs-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.home-frame-content-body {
  min-width: 0;
  min-height: 0;
}

/* 成员管理是末尾承载区，表格卡片应随首页壳的可用高度延展，而不是由行数决定高度。 */
.home-frame-content-body > .workspace-members {
  height: 100%;
  min-height: 0;
}

/* 迭代规划是分栏工作台。即使当前迭代或 Story 较少，也应占满首页壳的剩余可视高度，
   让左右两栏与浏览器底部对齐；移动端由后续断点恢复内容高度。 */
.home-frame-content-body:has(> .iteration-planning-shell) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-self: stretch;
  min-height: 0;
  height: 100%;
  block-size: 100%;
}

.home-frame-content-body > .iteration-planning-shell {
  min-height: 0;
  height: 100%;
  block-size: 100%;
  align-self: stretch;
}

.home-frame-loading-shell {
  min-width: 0;
}

.home-frame-loading-grid {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.home-frame-loading-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
}

.home-frame-loading-card {
  position: relative;
  display: grid;
  gap: calc(14px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(24px * var(--ui-density));
  border-radius: calc(26px * var(--ui-density));
  border: 1px solid rgba(222, 230, 245, 0.88);
  background:
    radial-gradient(calc(320px * var(--ui-density)) calc(180px * var(--ui-density)) at 100% 0%, rgba(190, 205, 255, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 249, 255, 0.72)),
    rgba(248, 251, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(16px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(113, 128, 166, 0.08);
  overflow: hidden;
}

.home-frame-loading-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.48) 42%, transparent 66%);
  transform: translateX(-120%);
  animation: home-frame-loading-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

.home-frame-loading-card--hero {
  padding-block: calc(26px * var(--ui-density));
}

.home-frame-loading-line,
.home-frame-loading-chip,
.home-frame-loading-preview {
  position: relative;
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background:
    linear-gradient(90deg, rgba(215, 224, 245, 0.76), rgba(232, 238, 252, 0.94), rgba(215, 224, 245, 0.76));
}

.home-frame-loading-line--title {
  width: min(calc(280px * var(--ui-density)), 38%);
  height: calc(28px * var(--ui-density));
}

.home-frame-loading-line--body {
  width: min(calc(720px * var(--ui-density)), 78%);
  height: calc(14px * var(--ui-density));
}

.home-frame-loading-line--body.short {
  width: min(calc(520px * var(--ui-density)), 52%);
}

.home-frame-loading-line--section {
  width: calc(148px * var(--ui-density));
  height: calc(18px * var(--ui-density));
}

.home-frame-loading-line--input {
  width: 100%;
  height: calc(58px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
}

.home-frame-loading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  padding-top: calc(6px * var(--ui-density));
}

.home-frame-loading-chip {
  width: calc(132px * var(--ui-density));
  height: calc(42px * var(--ui-density));
}

.home-frame-loading-preview {
  width: 100%;
  min-height: calc(170px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
}

.home-frame-loading-preview--compact {
  min-height: calc(130px * var(--ui-density));
}

@keyframes home-frame-loading-shimmer {
  100% {
    transform: translateX(120%);
  }
}

/* M64 platform documentation CMS. Lists continue to use the canonical
   ordinary-list scaffold; these rules only define the documentation-specific
   editor, history and navigation work surfaces. */
.platform-docs-page {
  min-width: 0;
  min-height: 0;
  color: var(--text);
}

.platform-docs-page.ordinary-list-shell {
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
}

.platform-docs-section-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.platform-docs-section-nav__brand {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  white-space: nowrap;
}

.platform-docs-section-nav__brand strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.platform-docs-section-nav__brand span {
  padding: calc(3px * var(--ui-density)) calc(8px * var(--ui-density));
  border-radius: 999px;
  background: var(--control);
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.platform-docs-section-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.platform-docs-section-nav__links button {
  flex: 0 0 auto;
  min-width: calc(78px * var(--ui-density));
  min-height: calc(38px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(14px * var(--ui-density));
  border-color: transparent;
  background: transparent;
  color: var(--muted-strong);
  white-space: nowrap;
}

.platform-docs-section-nav__links button.active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--menu-active-gradient);
  color: var(--menu-active-text);
  box-shadow: var(--accent-shadow);
}

.platform-docs-public-link {
  display: inline-flex;
  align-items: center;
  min-height: calc(38px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.platform-docs-public-link:hover,
.platform-docs-public-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  box-shadow: var(--soft-shadow);
  transform: translateY(-1px);
}

.platform-docs-table {
  min-width: calc(1320px * var(--ui-density));
}

.platform-docs-assets-table {
  min-width: calc(1260px * var(--ui-density));
}

.platform-docs-sequence {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.platform-docs-row-actions {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: max-content;
}

.table-link-action {
  min-height: calc(30px * var(--ui-density));
  padding: 0 calc(4px * var(--ui-density));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.table-link-action:hover,
.table-link-action:focus-visible {
  background: transparent;
  box-shadow: none;
  color: var(--accent-2);
  text-decoration: underline;
  transform: none;
}

.table-link-action.danger {
  color: var(--danger);
}

.platform-docs-editor-page,
.platform-docs-history-page,
.platform-docs-navigation-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
  height: 100%;
  overflow: hidden;
}

.platform-docs-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

.platform-docs-editor__head,
.platform-docs-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
  padding: calc(18px * var(--ui-density)) calc(22px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.platform-docs-editor__head h3,
.platform-docs-page-head h3,
.platform-docs-redirects h3 {
  margin: 0;
  color: var(--heading);
  font-size: var(--font-size-title);
}

.platform-docs-editor__head p,
.platform-docs-page-head p,
.platform-docs-redirects p {
  margin: calc(4px * var(--ui-density)) 0 0;
}

.platform-docs-editor__workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(calc(360px * var(--ui-density)), 2fr);
  min-height: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.platform-docs-editor-modes {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.platform-docs-editor-modes button {
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.platform-docs-editor-modes button.active {
  background: var(--panel-strong);
  color: var(--accent);
  box-shadow: var(--soft-shadow);
}

.platform-docs-editor-page[data-editor-mode="edit"] .platform-docs-preview,
.platform-docs-editor-page[data-editor-mode="preview"] .platform-docs-editor__main,
.platform-docs-editor-page[data-editor-mode="preview"] .platform-docs-meta-panel {
  display: none;
}

.platform-docs-editor-page[data-editor-mode="preview"] .platform-docs-editor__workspace {
  grid-template-columns: minmax(0, 1fr);
}

.platform-docs-editor-page[data-editor-mode="preview"] .platform-docs-editor__side {
  background: transparent;
}

.platform-docs-editor-page[data-editor-mode="preview"] .platform-docs-preview__body {
  max-height: none;
}

.platform-docs-editor__workspace:disabled {
  opacity: 1;
}

.platform-docs-editor__workspace:disabled :is(input, select, textarea) {
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.platform-docs-editor__main,
.platform-docs-editor__side {
  min-width: 0;
  min-height: 0;
  padding: calc(22px * var(--ui-density));
  overflow-y: auto;
  scrollbar-width: thin;
}

.platform-docs-editor__main {
  display: grid;
  align-content: start;
  gap: calc(18px * var(--ui-density));
  border-right: 1px solid var(--line);
}

.platform-docs-editor__side {
  display: grid;
  align-content: start;
  gap: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}

.platform-docs-form-grid,
.platform-docs-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.platform-docs-form-grid .full,
.platform-docs-faq-fields .full {
  grid-column: 1 / -1;
}

.platform-docs-faq-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.platform-docs-faq-fields[hidden] {
  display: none;
}

.platform-docs-editor .field-shell,
.platform-docs-dialog-form .field-shell {
  display: grid;
  align-content: start;
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.platform-docs-editor .field-label,
.platform-docs-dialog-form .field-label {
  color: var(--muted-strong);
  font-weight: 600;
}

.platform-docs-editor .field-control {
  display: contents;
}

.platform-docs-editor :is(input, select, textarea),
.platform-docs-dialog-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  border-color: var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.platform-docs-editor :is(input, select),
.platform-docs-dialog-form :is(input, select) {
  min-height: calc(48px * var(--ui-density));
}

.platform-docs-editor textarea,
.platform-docs-dialog-form textarea {
  min-height: calc(104px * var(--ui-density));
  resize: vertical;
}

.platform-docs-markdown-editor {
  display: grid;
  grid-template-rows: auto minmax(calc(360px * var(--ui-density)), 1fr);
  min-height: calc(430px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.platform-docs-markdown-editor__head,
.platform-docs-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  min-width: 0;
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.platform-docs-markdown-editor textarea {
  min-height: 0;
  height: 100%;
  padding: calc(18px * var(--ui-density));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.7;
  resize: none;
}

.platform-docs-preview,
.platform-docs-meta-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
}

.platform-docs-preview__body {
  min-height: calc(250px * var(--ui-density));
  max-height: calc(430px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  overflow: auto;
  scrollbar-width: thin;
  line-height: 1.7;
}

.platform-docs-preview__body :is(h1, h2, h3, h4) {
  margin: 1.1em 0 0.55em;
  color: var(--heading);
  letter-spacing: 0;
}

.platform-docs-preview__body h1 {
  margin-top: 0;
  font-size: calc(var(--font-size-title) + 5px);
}

.platform-docs-preview__body p,
.platform-docs-preview__body ul {
  margin: 0 0 0.9em;
}

.platform-docs-preview__body :is(ol, table) {
  margin: 0 0 0.9em;
}

.platform-docs-preview__body table {
  width: 100%;
  border-collapse: collapse;
}

.platform-docs-preview__body :is(th, td) {
  padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  text-align: left;
}

.platform-docs-preview__body th {
  background: var(--control);
}

.platform-docs-preview__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: calc(12px * var(--ui-density)) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.platform-docs-preview__body .docs-admonition {
  margin: 0 0 0.9em;
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.platform-docs-preview__body .docs-admonition > strong {
  display: block;
  margin-bottom: calc(5px * var(--ui-density));
}

.platform-docs-preview__body pre,
.platform-docs-diff-panel pre {
  margin: 0;
  padding: calc(14px * var(--ui-density));
  border-radius: var(--radius-sm);
  overflow: auto;
  background: var(--control);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.platform-docs-meta-panel {
  display: grid;
  gap: calc(16px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
}

.platform-docs-form-error {
  min-height: calc(20px * var(--ui-density));
  margin: 0;
  padding: 0 calc(22px * var(--ui-density)) calc(12px * var(--ui-density));
  color: var(--danger);
}

.platform-docs-load-error,
.platform-docs-inline-error {
  color: var(--danger);
}

.platform-docs-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.platform-docs-history-page,
.platform-docs-navigation-page {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.platform-docs-page-head {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.platform-docs-history-layout {
  display: grid;
  grid-template-columns: minmax(calc(310px * var(--ui-density)), 0.9fr) minmax(0, 2.1fr);
  gap: calc(18px * var(--ui-density));
  min-height: 0;
  overflow: hidden;
}

.platform-docs-history-list,
.platform-docs-diff-panel,
.platform-docs-redirects,
.platform-docs-nav-family,
.platform-docs-pending-state {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

.platform-docs-history-list {
  padding: calc(12px * var(--ui-density));
  overflow-y: auto;
  scrollbar-width: thin;
}

.platform-docs-revision-row {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  width: 100%;
  margin-bottom: calc(8px * var(--ui-density));
}

.platform-docs-revision-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  flex: 1;
  min-width: 0;
  min-height: calc(68px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-color: transparent;
  background: var(--control);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.platform-docs-revision-main.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: var(--accent-shadow);
}

.platform-docs-revision-main > span {
  display: grid;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.platform-docs-revision-row small,
.platform-docs-revision-row time {
  color: var(--muted);
  font-style: normal;
}

.platform-docs-revision-row [data-docs-restore] {
  flex: 0 0 auto;
  color: var(--accent);
  text-decoration: underline;
}

.platform-docs-diff-panel {
  padding: calc(20px * var(--ui-density));
  overflow: auto;
  scrollbar-width: thin;
}

.platform-docs-diff-panel > header {
  margin-bottom: calc(16px * var(--ui-density));
}

.platform-docs-diff-panel > header p {
  margin: calc(4px * var(--ui-density)) 0 0;
}

.platform-docs-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.platform-docs-diff-grid > div {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.platform-docs-diff-label {
  color: var(--muted-strong);
  font-weight: 600;
}

.platform-docs-empty-detail {
  display: grid;
  place-content: center;
  min-height: calc(260px * var(--ui-density));
  text-align: center;
}

.platform-docs-empty-detail p {
  margin: calc(6px * var(--ui-density)) 0 0;
  color: var(--muted);
}

.platform-docs-navigation-page {
  overflow-y: auto;
  scrollbar-width: thin;
}

.platform-docs-navigation-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
  min-width: 0;
}

.platform-docs-nav-family {
  padding: calc(18px * var(--ui-density));
}

.platform-docs-nav-family > header,
.platform-docs-redirects > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  min-width: 0;
  margin-bottom: calc(16px * var(--ui-density));
}

.platform-docs-nav-family > header > div,
.platform-docs-category-root > strong {
  display: grid;
  gap: calc(3px * var(--ui-density));
}

.platform-docs-nav-family > header span,
.platform-docs-category-root > strong {
  color: var(--heading);
  font-weight: 700;
}

.platform-docs-nav-family > header small,
.platform-docs-category-tree small {
  color: var(--muted);
  font-weight: 400;
}

.platform-docs-category-root {
  padding: calc(14px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--control);
}

.platform-docs-category-tree ul {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin: calc(12px * var(--ui-density)) 0 0;
  padding: 0 0 0 calc(14px * var(--ui-density));
  list-style: none;
}

.platform-docs-category-tree li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.platform-docs-category-tree li > div {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.platform-docs-category-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end !important;
  gap: calc(5px * var(--ui-density));
}

.platform-docs-category-actions .icon-button {
  width: calc(32px * var(--ui-density));
  min-width: calc(32px * var(--ui-density));
  height: calc(32px * var(--ui-density));
  padding: 0;
}

.platform-docs-release-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density));
  margin: 0 0 calc(16px * var(--ui-density));
}

.platform-docs-release-detail > div,
.platform-docs-release-detail-list {
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.platform-docs-release-detail :is(dt, dd) {
  margin: 0;
}

.platform-docs-release-detail dt {
  color: var(--muted);
}

.platform-docs-release-detail dd {
  margin-top: calc(4px * var(--ui-density));
  color: var(--heading);
  font-weight: 700;
}

.platform-docs-release-detail-list + .platform-docs-release-detail-list {
  margin-top: calc(12px * var(--ui-density));
}

.platform-docs-release-detail-list ul {
  display: grid;
  gap: calc(7px * var(--ui-density));
  margin: calc(10px * var(--ui-density)) 0 0;
  padding: 0;
  list-style: none;
}

.platform-docs-release-detail-list li {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  min-width: 0;
}

.platform-docs-release-detail-list :is(code, time) {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.platform-docs-category-tree li > ul {
  grid-column: 1 / -1;
  width: 100%;
}

.platform-docs-category-empty {
  margin: calc(12px * var(--ui-density)) 0 0;
}

.platform-docs-redirects {
  padding: calc(18px * var(--ui-density));
}

.platform-docs-redirects .table-scroll {
  max-height: calc(360px * var(--ui-density));
}

.platform-docs-redirects table {
  min-width: calc(760px * var(--ui-density));
}

.platform-docs-redirects code {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.platform-docs-visible-toggle {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  align-self: end;
}

.platform-docs-visible-toggle input {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  min-height: 0;
  accent-color: var(--accent);
}

.platform-docs-dialog-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.platform-docs-dialog-form .platform-docs-form-error {
  padding: 0;
}

.platform-docs-pending-state {
  display: grid;
  justify-items: start;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
  padding: calc(28px * var(--ui-density));
}

.platform-docs-pending-state strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.platform-docs-pending-state p {
  max-width: calc(620px * var(--ui-density));
  margin: 0;
  color: var(--muted-strong);
}

@media (max-width: 1350px) {
  .platform-docs-section-nav {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .platform-docs-public-link {
    display: none;
  }

  .platform-docs-editor__workspace {
    grid-template-columns: minmax(0, 1fr) minmax(calc(310px * var(--ui-density)), 0.72fr);
  }
}

@media (max-width: 980px) {
  .platform-docs-page.ordinary-list-shell,
  .platform-docs-editor-page,
  .platform-docs-history-page,
  .platform-docs-navigation-page {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .platform-docs-section-nav {
    grid-template-columns: 1fr;
    gap: calc(10px * var(--ui-density));
  }

  .platform-docs-section-nav__brand {
    justify-content: space-between;
  }

  .platform-docs-section-nav__links {
    justify-content: flex-start;
  }

  .platform-docs-editor {
    overflow: visible;
  }

  .platform-docs-editor__head,
  .platform-docs-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-docs-editor__workspace,
  .platform-docs-history-layout,
  .platform-docs-diff-grid,
  .platform-docs-navigation-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .platform-docs-editor__main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .platform-docs-editor__main,
  .platform-docs-editor__side,
  .platform-docs-history-list,
  .platform-docs-diff-panel {
    overflow: visible;
  }

  .platform-docs-preview__body {
    max-height: none;
  }
}

@media (max-width: 520px) {
  .platform-docs-page .system-users-list-toolbar {
    padding: calc(14px * var(--ui-density));
  }

  .platform-docs-page .system-users-list-toolbar .list-toolbar-section.left {
    width: 100%;
  }

  .platform-docs-page #platformDocsFilterForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10px * var(--ui-density));
    width: 100%;
  }

  .platform-docs-page #platformDocsFilterForm > :is(#platformDocsNewArticle, [data-select-name="category_id"], .system-users-toolbar-search, #platformDocsClearFilters) {
    grid-column: 1 / -1;
  }

  .platform-docs-page #platformDocsFilterForm > :is(button, .custom-select, .system-users-toolbar-search) {
    width: 100%;
    min-width: 0;
  }

  .platform-docs-editor__head,
  .platform-docs-page-head,
  .platform-docs-editor__main,
  .platform-docs-editor__side {
    padding: calc(16px * var(--ui-density));
  }

  .platform-docs-editor__head .page-actions,
  .platform-docs-page-head .page-actions,
  .platform-docs-form-grid,
  .platform-docs-dialog-grid,
  .platform-docs-faq-fields {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .platform-docs-editor__head .page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-docs-editor__head .page-actions button:last-child {
    grid-column: 1 / -1;
  }

  .platform-docs-markdown-editor {
    min-height: calc(360px * var(--ui-density));
    grid-template-rows: auto minmax(calc(290px * var(--ui-density)), 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-docs-public-link,
  .platform-docs-section-nav__links button {
    transition: none;
  }
}

.home-frame-content-body > .system-users-page-shell {
  height: 100%;
}

:root[data-theme="dark"] .home-frame-topbar {
  border-color: color-mix(in srgb, var(--line) 88%, var(--accent-2) 12%);
  background:
    radial-gradient(calc(420px * var(--ui-density)) calc(240px * var(--ui-density)) at 100% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 72%),
    radial-gradient(calc(360px * var(--ui-density)) calc(220px * var(--ui-density)) at 0% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel-strong) 90%, black 10%),
      color-mix(in srgb, var(--panel) 88%, black 12%)
    ),
    color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 10%, transparent);
}

:root[data-theme="dark"] .home-frame-topbar-copy h2,
:root[data-theme="dark"] .home-frame-topbar-copy p {
  color: var(--heading);
}

:root[data-theme="dark"] .home-frame-content-body > .card,
:root[data-theme="dark"] .home-frame-content-body > .list-scaffold.card,
:root[data-theme="dark"] .home-frame-content-body > .system-users-page-shell .card,
:root[data-theme="dark"] .home-frame-content-body > .system-users-page-shell .list-scaffold.card {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.88), rgba(10, 16, 25, 0.74)),
    radial-gradient(calc(520px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.08), transparent 74%),
    rgba(10, 15, 24, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(82, 124, 255, 0.05);
}

:root[data-theme="dark"] .home-frame-content-body .list-toolbar {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.86), rgba(11, 17, 27, 0.72)),
    rgba(10, 15, 24, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .home-frame-content-body .table-scroll {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(14, 20, 30, 0.84), rgba(10, 15, 24, 0.70)),
    rgba(10, 15, 24, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .home-frame-content-body .table-scroll thead th {
  background:
    linear-gradient(180deg, rgba(28, 36, 51, 0.90), rgba(19, 26, 39, 0.80)),
    rgba(17, 23, 34, 0.74);
  color: #eef4ff;
}

:root[data-theme="dark"] .home-frame-content-body .table-scroll tbody td {
  border-top-color: rgba(173, 228, 255, 0.10);
  color: rgba(232, 238, 248, 0.88);
}

:root[data-theme="dark"] .home-frame-content-body .table-scroll tbody tr:hover td {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(82, 124, 255, 0.045);
}

:root[data-theme="dark"] .home-frame-loading-card {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    radial-gradient(calc(420px * var(--ui-density)) calc(220px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(15, 22, 32, 0.88), rgba(10, 16, 25, 0.74)),
    rgba(10, 15, 24, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(82, 124, 255, 0.05);
}

:root[data-theme="dark"] .home-frame-loading-card::after {
  background:
    linear-gradient(110deg, transparent 22%, rgba(111, 176, 255, 0.14) 44%, transparent 68%);
}

:root[data-theme="dark"] .home-frame-loading-line,
:root[data-theme="dark"] .home-frame-loading-chip,
:root[data-theme="dark"] .home-frame-loading-preview {
  background:
    linear-gradient(90deg, rgba(37, 49, 68, 0.92), rgba(55, 75, 106, 0.92), rgba(37, 49, 68, 0.92));
}

.home-rail,
.home-hero,
.home-notice-card,
.home-governance-card,
.home-message-card,
.home-catalog {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  border-radius: calc(30px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(250, 252, 255, 0.54)),
    color-mix(in srgb, var(--panel-strong) 72%, rgba(255, 255, 255, 0.44));
  border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(170, 184, 215, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(16px * var(--ui-density)) calc(44px * var(--ui-density)) rgba(113, 128, 166, 0.07);
  backdrop-filter: var(--glass);
}

.home-mobile-navigation {
  display: contents;
}

.home-mobile-navigation-toggle {
  display: none;
}

.home-rail {
  grid-row: 1 / span 2;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(10px * var(--ui-density));
  padding: calc(30px * var(--ui-density)) calc(16px * var(--ui-density)) calc(28px * var(--ui-density));
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(247, 250, 255, 0.50)),
    radial-gradient(calc(460px * var(--ui-density)) calc(420px * var(--ui-density)) at 0% 100%, color-mix(in srgb, var(--accent) 8%, rgba(210, 229, 255, 0.26)), transparent 64%);
}

.home-rail-toggle {
  position: absolute;
  z-index: 2;
  top: calc(30px * var(--ui-density));
  right: calc(16px * var(--ui-density));
  display: inline-flex;
  width: auto;
  min-width: calc(88px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--panel-strong);
  color: var(--muted-strong);
  box-shadow: var(--soft-shadow);
}

.home-rail-toggle__icon {
  display: grid;
  width: calc(20px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  flex: 0 0 calc(20px * var(--ui-density));
  place-items: center;
  line-height: 0;
}

.home-rail-toggle__icon svg,
.sidebar-toggle__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-rail-toggle__label,
.sidebar-toggle__label {
  display: inline-block;
  min-width: max-content;
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.home-rail-toggle__label[hidden],
.sidebar-toggle__label[hidden] {
  display: none !important;
}

.home-rail-main {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(16px * var(--ui-density));
  min-height: 0;
  overflow: hidden;
}

.home-rail-heading {
  display: grid;
  gap: calc(16px * var(--ui-density));
  /* The toggle owns its own row above the brand, matching the project rail. */
  padding: calc(58px * var(--ui-density)) calc(6px * var(--ui-density)) calc(2px * var(--ui-density)) calc(6px * var(--ui-density));
}

.home-brand-line {
  display: inline-flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  color: var(--heading);
}

.home-brand-line strong {
  font-size: calc(20px * var(--ui-density));
  font-weight: 700;
}

.home-brand-mark {
  width: calc(38px * var(--ui-density));
  height: calc(38px * var(--ui-density));
  flex: 0 0 calc(38px * var(--ui-density));
  border-radius: 0;
  padding: 0;
  display: block;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-rail-heading h2 {
  margin: 0;
  color: #1f232a;
  font-size: calc(22px * var(--ui-density));
  line-height: 1.02;
  font-weight: 700;
}

.home-rail-group {
  display: grid;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(4px * var(--ui-density));
}

.home-rail-nav-scroll {
  /* Keep the project filters, their reserved breathing room, and management
     navigation in three distinct tracks. Management expansion can overflow
     this scroller, but can never consume the reserved middle track. */
  display: grid;
  grid-template-rows: auto minmax(calc(180px * var(--ui-density)), 1fr) auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: calc(2px * var(--ui-density));
}

.home-rail-management-groups {
  grid-row: 3;
  display: grid;
  gap: calc(10px * var(--ui-density));
  margin-top: 0;
  padding-top: calc(28px * var(--ui-density));
}

.home-rail-management-groups > .home-rail-group {
  margin-top: 0;
}

.home-rail-nav-group {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.home-rail-nav-parent {
  display: flex;
  align-items: center;
}

.home-rail-nav-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rail-nav-chevron {
  display: inline-grid;
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin-left: auto;
  color: var(--muted-strong);
  transition: transform 160ms ease;
}

.home-rail-nav-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-rail-nav-group.expanded .home-rail-nav-chevron {
  transform: rotate(180deg);
}

.home-rail-nav-children {
  display: none;
  gap: calc(10px * var(--ui-density));
  padding-left: calc(34px * var(--ui-density));
}

.home-rail-nav-group.expanded .home-rail-nav-children {
  display: grid;
}

.home-rail-link.home-rail-nav-child {
  min-height: calc(44px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  background: var(--panel);
  box-shadow: none;
}

.home-rail-link.home-rail-nav-child.active {
  color: var(--heading);
  border-color: var(--line-strong);
  background: var(--control-hover);
  box-shadow: inset calc(3px * var(--ui-density)) 0 0 var(--accent-2), var(--soft-shadow);
}

.home-rail-star,
.home-rail-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(56px * var(--ui-density));
  justify-content: flex-start;
  gap: calc(14px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  border: 1px solid rgba(220, 229, 243, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.92)),
    rgba(255, 255, 255, 0.94);
  color: #697793;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(150, 163, 194, 0.10);
  font-size: var(--font-size-body);
  font-weight: 700;
  text-align: left;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.home-rail-star:hover,
.home-rail-link:hover {
  transform: translateY(-1px);
  border-color: rgba(202, 215, 237, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.95)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(150, 163, 194, 0.14);
  color: var(--heading);
}

.home-rail-link:focus-visible {
  outline: calc(2px * var(--ui-density)) solid var(--accent-2);
  outline-offset: calc(2px * var(--ui-density));
}

.home-rail-link.active {
  background: var(--menu-active-gradient, var(--active-surface));
  background-clip: padding-box;
  backdrop-filter: none;
  color: var(--menu-active-text, #fff);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(150, 163, 194, 0.08);
}

.home-rail-star.active {
  color: #1f232a;
}

.home-rail-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  flex: 0 0 calc(26px * var(--ui-density));
}

.home-rail-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-rail-footer {
  display: grid;
  grid-row: 3;
  align-self: end;
  gap: calc(10px * var(--ui-density));
  margin-top: auto;
  min-height: 0;
  max-height: min(calc(300px * var(--ui-density)), 38svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: calc(2px * var(--ui-density));
}

.home-rail-preferences,
.sidebar-preferences {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(78px * var(--ui-density));
  gap: calc(8px * var(--ui-density));
  align-items: stretch;
  width: 100%;
}

.home-rail-theme-mode,
.home-rail-font-size,
.sidebar-theme-mode,
.sidebar-font-size {
  display: flex;
  justify-content: stretch;
  width: 100%;
}

.home-rail-theme-mode,
.sidebar-theme-mode {
  container-type: inline-size;
}

.home-rail-preferences .home-rail-footer-title {
  grid-column: 1 / -1;
}

.home-rail-theme-mode {
  grid-column: 1;
}

.home-rail-font-size {
  grid-column: 2;
}

.home-rail-admin-actions {
  gap: calc(10px * var(--ui-density));
}

.home-utility-group {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.home-utility-group > summary {
  list-style: none;
  cursor: pointer;
}

.home-utility-group > summary::-webkit-details-marker {
  display: none;
}

.home-utility-group__chevron {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin-left: auto;
  color: currentColor;
  transition: transform 160ms ease;
}

.home-utility-group__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-utility-group[open] .home-utility-group__chevron {
  transform: rotate(180deg);
}

.home-utility-group__children {
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding-left: 0;
}

.home-utility-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(14px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density));
  border-radius: calc(12px * var(--ui-density));
  border: 1px solid rgba(232, 237, 247, 0.88);
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  box-shadow: none;
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
  text-align: left;
}

.home-utility-child__indent {
  width: calc(22px * var(--ui-density));
  height: calc(22px * var(--ui-density));
  flex: 0 0 calc(22px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  color: rgba(120, 136, 166, 0.88);
}

.home-utility-child__indent svg {
  display: block;
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
}

.home-utility-child__label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.home-utility-child.active {
  color: var(--menu-active-icon, var(--muted-strong));
  background: color-mix(in srgb, var(--active-surface) 18%, rgba(255, 255, 255, 0.82));
  border-color: color-mix(in srgb, var(--accent) 22%, rgba(220, 228, 240, 0.92));
}

.home-quote-card {
  display: grid;
  gap: calc(8px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(16px * var(--ui-density)) calc(15px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(228, 235, 247, 0.94);
  background:
    radial-gradient(calc(160px * var(--ui-density)) calc(120px * var(--ui-density)) at 0% 0%, rgba(216, 230, 255, 0.38), transparent 72%),
    linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(240, 246, 255, 0.84)),
    rgba(245, 249, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(165, 179, 214, 0.08);
}

.home-quote-kicker {
  color: #7b67f5;
  font-size: calc(12px * var(--ui-density));
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-quote-card strong {
  color: var(--heading);
  font-size: calc(14px * var(--ui-density));
  line-height: 1.55;
}

.home-quote-author {
  color: var(--muted);
  font-size: calc(12px * var(--ui-density));
  font-weight: 700;
}

.home-account-shell {
  border: 1px solid rgba(232, 237, 247, 0.94);
  border-radius: calc(16px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.86)),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(150, 162, 185, 0.10);
  padding: calc(8px * var(--ui-density));
}

.home-account-shell summary {
  list-style: none;
  cursor: pointer;
}

.home-account-shell summary::-webkit-details-marker {
  display: none;
}

.home-account-card {
  display: grid;
  grid-template-columns: calc(38px * var(--ui-density)) minmax(0, 1fr) calc(16px * var(--ui-density));
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: 0 1px;
  border-radius: calc(16px * var(--ui-density));
  color: var(--heading);
  text-align: left;
}

.home-account-avatar {
  width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(214, 223, 255, 0.96), rgba(243, 235, 255, 0.96));
  color: #7b67f5;
  font-size: calc(14px * var(--ui-density));
  font-weight: 800;
}

.home-account-avatar img,
.sidebar-avatar img,
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  font-size: 0;
  color: transparent;
}

.home-account-copy {
  display: grid;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
}

.home-account-copy strong,
.home-account-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-account-copy strong {
  color: var(--heading);
  font-size: calc(15px * var(--ui-density));
}

.home-account-copy span {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-account-chevron {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  color: var(--muted);
  transition: transform 140ms ease;
}

.home-account-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-account-shell[open] .home-account-chevron {
  transform: rotate(180deg);
}

.home-rail-actions {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.home-workspace-switcher,
.sidebar-workspace-switcher {
  position: relative;
  width: 100%;
}

.home-workspace-switcher > .home-utility-btn,
.sidebar-workspace-switcher > button {
  width: 100%;
}

.home-account-shell .home-rail-actions {
  margin-top: calc(8px * var(--ui-density));
  padding-left: calc(14px * var(--ui-density));
}

.home-utility-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(44px * var(--ui-density));
  gap: calc(10px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  border: 1px solid rgba(220, 229, 243, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.92)),
    rgba(255, 255, 255, 0.94);
  color: #697793;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(150, 163, 194, 0.10);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.home-utility-btn:hover {
  border-color: rgba(202, 215, 237, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.95)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(150, 163, 194, 0.13);
}

.home-utility-btn > span:last-child {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.home-rail-docs-link {
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
}

.home-rail-admin-btn {
  min-height: calc(52px * var(--ui-density));
  gap: calc(14px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
}

.home-rail-admin-btn .home-utility-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
}

.home-utility-btn.active {
  background: var(--menu-active-gradient, var(--active-surface));
  background-clip: padding-box;
  backdrop-filter: none;
  color: var(--menu-active-text, #fff);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(150, 163, 194, 0.08);
}

.home-utility-btn.active .home-utility-icon {
  color: var(--menu-active-icon, #fff);
}

.home-account-shell .home-utility-btn {
  justify-content: flex-start;
  align-items: center;
  min-height: calc(46px * var(--ui-density));
  gap: calc(12px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density)) 0 calc(26px * var(--ui-density));
  font-size: var(--font-size-body);
  text-align: left;
}

.home-frame-page .home-account-card {
  grid-template-columns: calc(38px * var(--ui-density)) minmax(0, 1fr) calc(16px * var(--ui-density));
  justify-content: flex-start;
  padding: 0 calc(8px * var(--ui-density));
}

.home-frame-page .home-account-copy {
  justify-items: start;
  text-align: left;
}

.home-frame-page .home-account-copy strong,
.home-frame-page .home-account-copy span {
  text-align: left;
}

.home-frame-page .home-rail-actions .home-utility-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  flex: 0 0 calc(26px * var(--ui-density));
}

.home-frame-page .home-rail-actions .home-utility-btn > span:last-child {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.home-utility-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  color: #6b7890;
}

.home-utility-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 981px) {
  .home-mobile-navigation {
    display: contents;
  }

  .home-stage.home-rail-collapsed {
    /* Keep the announcement/message rail fixed in both navigation states.
       Only the catalog column receives the width released by a collapsed rail. */
    grid-template-columns: var(--collapsed-rail-layout-width) minmax(0, 1fr) var(--home-info-rail-desktop-width);
  }

.home-rail-collapsed .home-rail {
  box-sizing: border-box;
  width: var(--collapsed-rail-layout-width);
  align-items: stretch;
  gap: calc(8px * var(--ui-density));
  padding: calc(56px * var(--ui-density)) calc(4px * var(--ui-density)) calc(8px * var(--ui-density));
  z-index: 20;
  overflow: visible;
}

.home-rail-collapsed .home-rail-toggle {
  top: calc(8px * var(--ui-density));
  right: 50%;
  width: calc(40px * var(--ui-density));
  min-width: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  padding: 0;
  transform: translateX(50%);
}

.home-rail-collapsed .home-rail-toggle__label {
  display: none;
}

.home-rail-collapsed .home-rail-main,
.home-rail-collapsed .home-rail-footer,
.home-rail-collapsed .home-rail-group,
.home-rail-collapsed .home-rail-actions {
  width: 100%;
  justify-items: stretch;
}

.home-rail-collapsed .home-rail-main {
  gap: calc(12px * var(--ui-density));
  align-self: start;
}

.home-rail-collapsed .home-rail-heading {
  padding: 0;
  justify-items: center;
}

.home-rail-collapsed .home-rail-nav-children {
  display: none !important;
}

.home-rail-collapsed .home-brand-line {
  justify-content: center;
}

.home-rail-collapsed .home-brand-line strong,
.home-rail-collapsed .home-quote-card,
.home-rail-collapsed .home-account-copy,
.home-rail-collapsed .home-account-chevron,
.home-rail-collapsed .home-rail-preferences {
  display: none;
}

.home-rail-collapsed .home-rail-link,
.home-rail-collapsed .home-utility-btn {
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
  min-height: calc(48px * var(--ui-density));
  padding: 0;
}

.home-rail-collapsed .home-rail-link > span:last-child,
.home-rail-collapsed .home-utility-btn > span:last-child {
  display: none;
}

.home-rail-collapsed .home-rail-link,
.home-rail-collapsed .home-utility-btn,
.home-rail-collapsed .home-account-card {
  font-size: 0;
}

.home-rail-collapsed .home-rail-icon,
.home-rail-collapsed .home-utility-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  flex-basis: calc(26px * var(--ui-density));
}

.home-rail-collapsed .home-account-shell {
  box-sizing: border-box;
  width: 100%;
  padding: calc(4px * var(--ui-density));
}

.home-rail-collapsed .home-account-card {
  display: flex;
  justify-content: center;
  min-height: calc(34px * var(--ui-density));
  padding: 0;
}

  .home-rail-collapsed .home-account-shell .home-rail-actions {
    margin-top: calc(8px * var(--ui-density));
    padding-left: 0;
  }
}

.theme-mode-switcher,
.font-size-switcher {
  --theme-mode-index: 0;
  --font-size-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  padding: calc(4px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(222, 227, 239, 0.72),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(141, 154, 182, 0.08);
}

.theme-mode-switcher__indicator,
.font-size-switcher__indicator {
  position: absolute;
  top: calc(4px * var(--ui-density));
  left: calc(4px * var(--ui-density));
  bottom: calc(4px * var(--ui-density));
  width: calc((100% - calc(8px * var(--ui-density))) / 3);
  border-radius: calc(999px * var(--ui-density));
  box-shadow:
    0 calc(8px * var(--ui-density)) calc(16px * var(--ui-density)) color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateX(calc(var(--theme-mode-index, 0) * 100%));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-mode-switcher__indicator {
  background: var(--menu-active-gradient, var(--accent-gradient));
}

.font-size-switcher__indicator {
  background: var(--accent-gradient);
  transform: translateX(calc(var(--font-size-index, 1) * 100%));
}

.theme-mode-switcher__item,
.font-size-switcher__item {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(8px * var(--ui-density));
  border: 0;
  border-radius: calc(999px * var(--ui-density));
  background: transparent;
  color: rgba(84, 97, 124, 0.92);
  box-shadow: none;
  transition: color 180ms ease;
}

.theme-mode-switcher__item:hover,
.theme-mode-switcher__item:focus,
.theme-mode-switcher__item:focus-visible,
.theme-mode-switcher__item:active,
.font-size-switcher__item:hover,
.font-size-switcher__item:focus,
.font-size-switcher__item:focus-visible,
.font-size-switcher__item:active {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.theme-mode-switcher__item.is-active,
.font-size-switcher__item.is-active {
  color: var(--menu-active-text, #fff);
}

.theme-mode-switcher__icon {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  flex: 0 0 calc(16px * var(--ui-density));
}

.theme-mode-switcher__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.theme-mode-switcher__label,
.font-size-switcher__label {
  min-width: 0;
  white-space: nowrap;
  font-size: calc(12px * var(--ui-density));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

/* Compact rails retain the accessible button name/title from the component,
   while removing only the visual label before it can wrap or turn vertical. */
@container (max-width: 220px) {
  .home-rail-theme-mode .theme-mode-switcher__label,
  .sidebar-theme-mode .theme-mode-switcher__label {
    display: none;
  }

  .home-rail-theme-mode .theme-mode-switcher__item,
  .sidebar-theme-mode .theme-mode-switcher__item {
    gap: 0;
    padding-inline: 0;
  }
}

.theme-mode-switcher__letter,
.font-size-switcher__letter {
  font-size: calc(13px * var(--ui-density));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.font-size-switcher__letter--1 {
  font-size: calc(12px * var(--ui-density));
}

.font-size-switcher__letter--2 {
  font-size: calc(13px * var(--ui-density));
}

.font-size-switcher__letter--3 {
  font-size: calc(14px * var(--ui-density));
}

:root[data-theme="dark"] .theme-mode-switcher,
:root[data-theme="dark"] .font-size-switcher {
  background: rgba(33, 37, 44, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 calc(10px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .theme-mode-switcher__item,
:root[data-theme="dark"] .font-size-switcher__item {
  color: rgba(232, 238, 248, 0.76);
}

:root[data-theme="dark"] .theme-mode-switcher__item.is-active,
:root[data-theme="dark"] .font-size-switcher__item.is-active {
  color: #fff;
}

.font-size-switcher {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: calc(78px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
}

.font-size-switcher__item {
  gap: 0;
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(6px * var(--ui-density));
  color: rgba(84, 97, 124, 0.92);
}

.font-size-switcher__item:disabled {
  cursor: not-allowed;
  color: rgba(134, 145, 166, 0.74);
}

.font-size-switcher__sample {
  font-size: calc(18px * var(--ui-density));
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

.font-size-switcher__sign {
  align-self: flex-start;
  margin-left: 1px;
  color: #1687ff;
  font-size: calc(15px * var(--ui-density));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.font-size-switcher__item:disabled .font-size-switcher__sign {
  color: rgba(134, 145, 166, 0.62);
}

:root[data-theme="dark"] .font-size-switcher__item {
  color: rgba(232, 238, 248, 0.80);
}

:root[data-theme="dark"] .font-size-switcher__item:disabled {
  color: rgba(164, 176, 196, 0.52);
}

.system-settings-color-row {
  display: grid;
  grid-template-columns: calc(64px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.system-settings-form {
  align-content: start;
  row-gap: calc(20px * var(--ui-density));
}

.system-settings-subnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: calc(8px * var(--ui-density));
  gap: calc(16px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.76)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(92, 108, 156, 0.08);
}

.system-settings-subnav__tabs {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(238, 240, 247, 0.9);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 1px rgba(222, 227, 239, 0.64);
}

.system-settings-subnav__indicator {
  position: absolute;
  top: calc(8px * var(--ui-density));
  left: calc(8px * var(--ui-density));
  bottom: calc(8px * var(--ui-density));
  width: calc(50% - calc(16px * var(--ui-density)));
  border-radius: calc(999px * var(--ui-density));
  background: var(--menu-active-gradient, var(--accent-gradient));
  box-shadow:
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  border: 0;
  transform: translateX(0);
  z-index: 0;
}

.system-settings-subnav__tabs.is-ready .system-settings-subnav__indicator {
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.system-settings-subnav__item {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: calc(148px * var(--ui-density));
  min-height: calc(62px * var(--ui-density));
  padding: 0 calc(32px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 0;
  background: transparent;
  color: rgba(79, 92, 120, 0.92);
  font-weight: 400;
  text-align: center;
  box-shadow: none;
  transition:
    color 180ms ease;
}

.system-settings-subnav__item:focus,
.system-settings-subnav__item:focus-visible,
.system-settings-subnav__item:active {
  outline: none;
  box-shadow: none;
}

.system-settings-subnav__item::before {
  content: none;
}

.system-settings-subnav__item:hover {
  background: transparent;
}

.system-settings-subnav__item-title {
  display: block;
  font-size: calc(19px * var(--ui-density));
  line-height: 1;
  letter-spacing: -0.01em;
}

.system-settings-subnav__item-meta {
  display: none;
}

.system-settings-subnav__item.is-active {
  color: var(--menu-active-text, #fff);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.system-settings-subnav__item.is-active .system-settings-subnav__item-meta {
  display: none;
}

.system-settings-panels {
  position: relative;
  overflow: visible;
}

.system-settings-panels.is-ready {
  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.system-settings-panels__panel {
  min-width: 0;
}

.system-settings-subnav__hint {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.6;
  align-self: center;
  max-width: calc(360px * var(--ui-density));
  text-align: right;
}

.system-settings-module {
  display: grid;
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
  border-radius: calc(26px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 249, 255, 0.7)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(16px * var(--ui-density)) calc(38px * var(--ui-density)) rgba(92, 108, 156, 0.08);
}

.system-settings-module--basic {
  padding-top: calc(16px * var(--ui-density));
}

.system-settings-module--mail {
  gap: calc(20px * var(--ui-density));
}

.mail-service-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.mail-service-status__eyebrow {
  display: block;
  margin-bottom: calc(4px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.mail-service-status strong,
.mail-service-status p {
  display: block;
  margin: 0;
}

.mail-service-status strong {
  color: var(--heading);
  font-size: calc(20px * var(--ui-density));
}

.mail-service-status p {
  margin-top: calc(4px * var(--ui-density));
  color: var(--muted);
}

.mail-settings-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.mail-settings-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.mail-settings-card__head h3,
.mail-settings-card__head p {
  margin: 0;
}

.mail-settings-card__head h3,
.mail-template-heading h3 {
  color: var(--heading);
  font-size: calc(20px * var(--ui-density));
}

.mail-settings-card__head p,
.mail-template-heading p {
  margin-top: calc(4px * var(--ui-density));
  color: var(--muted);
}

.mail-settings-card__body {
  padding: calc(18px * var(--ui-density));
}

.mail-settings-grid,
.mail-template-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density)) calc(20px * var(--ui-density));
}

.mail-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-settings-grid__preset {
  grid-column: 1 / -1;
}

.mail-settings-grid .field-shell,
.mail-template-selectors .field-shell,
.mail-sender-test-row .field-shell,
.mail-sender-verify-row .field-shell {
  min-width: 0;
}

.mail-settings-grid input,
.mail-settings-grid select,
.mail-template-selectors select,
.mail-sender-test-row input,
.mail-sender-verify-row input,
.mail-template-editor input,
.mail-template-editor textarea {
  width: 100%;
  box-sizing: border-box;
  border-color: var(--line);
  background: var(--control);
  color: var(--text);
}

.mail-settings-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
}

.danger-action {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  color: var(--danger);
  background: var(--danger-bg);
}

.mail-settings-card--test {
  padding-bottom: calc(18px * var(--ui-density));
}

.mail-sender-test-row,
.mail-sender-verify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: calc(14px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
}

.mail-sender-verify-row {
  margin-top: calc(14px * var(--ui-density));
}

.mail-template-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.mail-template-heading h3,
.mail-template-heading p {
  margin: 0;
}

.mail-template-heading__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(8px * var(--ui-density));
}

.mail-settings-note {
  margin: calc(14px * var(--ui-density)) 0 0;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: var(--radius-sm);
  color: var(--warn);
  background: var(--warn-bg);
}

.mail-template-event-note {
  display: grid;
  gap: calc(4px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-3) 20%, var(--panel));
}

.mail-template-event-note strong {
  color: var(--heading);
}

.mail-template-event-note span,
.mail-template-variables p,
.mail-template-preview p {
  color: var(--muted);
}

.mail-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(calc(360px * var(--ui-density)), 0.95fr);
  align-items: start;
  gap: calc(20px * var(--ui-density));
}

.mail-template-editor {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.mail-template-html {
  min-height: calc(390px * var(--ui-density));
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: calc(14px * var(--ui-density));
  line-height: 1.55;
}

.mail-template-variables {
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.mail-template-variables strong,
.mail-template-variables p {
  display: block;
  margin: 0;
}

.mail-template-variables p {
  margin-top: calc(4px * var(--ui-density));
  font-size: var(--font-size-hint);
}

#mailTemplateVariableList {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(12px * var(--ui-density));
}

.mail-template-variable {
  min-height: calc(30px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: calc(13px * var(--ui-density));
}

.mail-template-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.mail-template-preview header {
  display: grid;
  gap: calc(3px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.mail-template-preview header strong {
  color: var(--heading);
}

.mail-template-preview header span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-template-preview iframe {
  display: block;
  width: 100%;
  min-height: calc(530px * var(--ui-density));
  border: 0;
  background: #f4f7fb;
}

.mail-template-preview p {
  margin: 0;
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  border-top: 1px solid var(--line);
  font-size: var(--font-size-hint);
}

.system-settings-module__body {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.system-settings-module__body--basic {
  align-items: start;
}

.system-settings-basic-stack {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.system-settings-basic-fields {
  display: grid;
  gap: calc(16px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
}

.system-settings-basic-stack > .field-shell,
.system-settings-assets-row > .field-shell {
  position: relative;
  z-index: 1;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
}

.system-settings-basic-fields > .field-shell {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.system-settings-basic-stack > .field-shell input,
.system-settings-basic-stack > .field-shell textarea,
.system-settings-assets-row > .field-shell input,
.system-settings-assets-row > .field-shell textarea {
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.system-settings-basic-fields > .field-shell input,
.system-settings-basic-fields > .field-shell textarea {
  border-color: color-mix(in srgb, var(--layer-input-border) 100%, rgba(124, 98, 244, 0.12));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 0 0 1px rgba(218, 226, 255, 0.28),
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(111, 123, 255, 0.06);
}

.system-settings-basic-fields > .field-shell input:focus,
.system-settings-basic-fields > .field-shell textarea:focus {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

.system-settings-assets-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: calc(16px * var(--ui-density));
}

.system-settings-preview-row,
.system-settings-footer-row {
  display: block;
}

.system-settings-section .work-item-section-body,
.system-settings-stack {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.system-settings-upload-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(188px * var(--ui-density));
  align-items: stretch;
  gap: calc(18px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.68)),
    rgba(255, 255, 255, 0.78);
}

.system-settings-upload-panel__copy {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: calc(12px * var(--ui-density));
  min-width: 0;
}

.system-settings-upload-panel p {
  margin: 0;
}

.system-settings-upload-preview {
  display: grid;
  place-items: center;
  width: calc(188px * var(--ui-density));
  height: calc(132px * var(--ui-density));
  min-height: calc(132px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 255, 0.78)),
    rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  justify-self: end;
  overflow: hidden;
}

.system-settings-upload-preview__image {
  width: calc(92px * var(--ui-density));
  height: calc(92px * var(--ui-density));
  object-fit: contain;
  display: block;
  border-radius: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.system-settings-upload-preview--favicon .system-settings-upload-preview__image {
  width: calc(72px * var(--ui-density));
  height: calc(72px * var(--ui-density));
  border-radius: 0;
}

.system-settings-file-input {
  display: none;
}

.system-settings-textarea {
  min-height: calc(148px * var(--ui-density));
}

.system-settings-color-row input[type="color"] {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--layer-field);
}

.system-settings-preview-card {
  display: grid;
  gap: calc(16px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

/* 基础设置中与 Logo 上传并列的品牌预览，复用同一层字段壳边界。 */
.system-settings-assets-row > .system-settings-preview-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.42), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
}

.system-settings-preview-title {
  color: var(--heading);
  font-size: calc(15px * var(--ui-density));
}

.system-settings-brand-preview {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.system-settings-brand-preview__stage {
  display: grid;
  gap: calc(18px * var(--ui-density));
  min-height: calc(128px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--layer-field);
}

.system-settings-preview-brand {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.system-settings-preview-copy {
  display: grid;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.system-settings-preview-copy strong,
.system-settings-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-settings-preview-copy strong {
  font-size: calc(20px * var(--ui-density));
  color: var(--heading);
}

.system-settings-preview-copy span {
  color: var(--muted);
}

.system-settings-brand-preview__stage .auth-brand {
  margin: 0;
}

.system-settings-brand-preview__stage .auth-brand__logo {
  width: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
}

.system-settings-brand-preview__stage .auth-brand__entity strong {
  font-size: calc(18px * var(--ui-density));
}

@media (max-width: 420px) {
  .auth-brand { gap: calc(10px * var(--ui-density)); }
  .auth-brand__logo { width: calc(40px * var(--ui-density)); height: calc(40px * var(--ui-density)); }
  .auth-brand__entity { gap: calc(7px * var(--ui-density)); max-width: 100%; }
  .auth-brand__entity strong { font-size: calc(18px * var(--ui-density)); }
  .auth-brand__separator { display: none; }
  .auth-brand[data-brand-mode="joint"] .auth-brand__entity { flex-basis: 100%; }
}

.system-settings-auth-preview__intro {
  margin: calc(8px * var(--ui-density)) 0 0;
  color: var(--muted-strong);
  font-size: calc(18px * var(--ui-density));
  line-height: 1.7;
}

.system-settings-footer-preview {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.system-settings-footer-preview__stage {
  display: flex;
  align-items: flex-end;
  min-height: calc(104px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(243, 247, 255, 0.76)),
    rgba(236, 242, 255, 0.72);
}

.system-settings-footer-preview__stage .system-global-footer--preview {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.system-settings-footer-preview strong {
  color: var(--heading);
}

.system-global-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10px * var(--ui-density)) calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density)) 0;
  color: var(--muted);
  font-size: calc(13px * var(--ui-density));
  line-height: 1.7;
  text-align: center;
}

.system-global-footer a {
  color: inherit;
  text-decoration: none;
}

.system-global-footer a:hover {
  text-decoration: underline;
}

.system-global-footer img {
  display: inline-block;
  width: auto;
  max-width: calc(120px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  object-fit: contain;
  vertical-align: middle;
  border-radius: calc(6px * var(--ui-density));
}

.system-global-footer--app,
.system-global-footer--home {
  padding: calc(18px * var(--ui-density)) calc(12px * var(--ui-density)) calc(4px * var(--ui-density));
}

.system-global-footer--auth {
  width: min(calc(1040px * var(--ui-density)), 100%);
  padding: 0 calc(18px * var(--ui-density));
}

.system-global-footer--preview {
  justify-content: flex-start;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(220, 228, 240, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 249, 255, 0.74)),
    rgba(255, 255, 255, 0.8);
  text-align: left;
}

.system-settings-theme-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: calc(36px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  color: #fff;
  background: linear-gradient(90deg, var(--system-preview-color), color-mix(in srgb, var(--system-preview-color) 70%, white));
  box-shadow: 0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) color-mix(in srgb, var(--system-preview-color) 26%, transparent);
  font-weight: 700;
}

.system-settings-theme-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.system-settings-theme-panel {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.system-theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(220px * var(--ui-density)), 1fr));
  gap: calc(14px * var(--ui-density));
}

.system-theme-custom-actions {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
}

.system-theme-preset-card {
  min-height: calc(160px * var(--ui-density));
  padding: 0;
  border-radius: calc(20px * var(--ui-density));
  overflow: hidden;
  background: var(--bg-gradient), var(--bg);
  border: 1px solid rgba(228, 235, 248, 0.9);
  box-shadow: 0 calc(16px * var(--ui-density)) calc(38px * var(--ui-density)) rgba(92, 108, 156, 0.12);
}

.system-theme-preset-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, white);
  box-shadow:
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(92, 108, 156, 0.16),
    0 0 0 calc(3px * var(--ui-density)) color-mix(in srgb, var(--accent) 14%, transparent);
}

.system-theme-preset-card__surface {
  min-height: inherit;
  display: grid;
  align-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  background: var(--bg-wash);
}

.system-theme-preset-card__label {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
  color: var(--heading);
  font-size: calc(15px * var(--ui-density));
  font-weight: 800;
  text-align: left;
}

.system-theme-preset-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: calc(24px * var(--ui-density));
  padding: 0 calc(10px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 88%, white 12%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--muted-strong);
  font-size: calc(12px * var(--ui-density));
  font-style: normal;
  font-weight: 700;
}

.system-theme-preset-card__desc {
  color: var(--muted-strong);
  font-size: calc(13px * var(--ui-density));
  line-height: 1.5;
  text-align: left;
}

.system-theme-preset-card__swatches {
  display: flex;
  gap: calc(10px * var(--ui-density));
  align-items: center;
}

.system-theme-preset-card__swatches i {
  display: block;
  border-radius: calc(14px * var(--ui-density));
}

.system-theme-preset-card__button {
  width: calc(84px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}

.system-theme-preset-card__menu {
  width: calc(54px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  background: var(--menu-active-gradient, var(--active-surface));
}

.system-theme-preset-card__panel {
  width: calc(54px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.82);
}

.system-theme-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: calc(14px * var(--ui-density));
  align-items: stretch;
}

.system-theme-group {
  display: grid;
  align-content: start;
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  min-height: 100%;
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid rgba(221, 229, 242, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.72)),
    rgba(255, 255, 255, 0.8);
}

.system-theme-group--button,
.system-theme-group--menu,
.system-theme-group--background {
  height: 100%;
}

.system-theme-group__head {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.system-theme-group__head strong {
  color: var(--heading);
  font-size: calc(16px * var(--ui-density));
}

.system-theme-group__head span {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

.system-theme-field-grid {
  display: grid;
  gap: calc(12px * var(--ui-density));
  align-content: start;
}

.system-theme-field-grid--button {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-theme-field-grid--menu {
  grid-template-columns: 1fr;
}

.system-theme-field-grid--background {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-theme-input {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.system-theme-input > span:first-child {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.system-theme-input__row {
  display: grid;
  grid-template-columns: calc(56px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(10px * var(--ui-density));
  align-items: center;
}

.system-theme-input__row--hex input[type="text"],
.system-theme-input__row--hex input[type="color"],
.system-theme-input__row--hex input:not([type]) {
  min-width: 0;
}

.system-theme-input__row input[type="color"] {
  width: calc(56px * var(--ui-density));
  min-width: calc(56px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.system-theme-color-trigger {
  width: calc(56px * var(--ui-density));
  min-width: calc(56px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, rgba(255, 255, 255, 0.58));
  border-radius: calc(14px * var(--ui-density));
  background: var(--theme-color-preview, #5f7cff);
  box-shadow:
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(112, 125, 164, 0.10);
}

.system-theme-color-trigger:hover:not(:disabled),
.system-theme-color-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.58));
  box-shadow:
    0 0 0 calc(3px * var(--ui-density)) rgba(125, 99, 244, 0.12),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(112, 125, 164, 0.14);
}

.system-theme-color-trigger:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.system-theme-color-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(760px * var(--ui-density)) calc(520px * var(--ui-density)) at 72% 70%, rgba(215, 150, 245, 0.16), transparent 68%),
    radial-gradient(calc(680px * var(--ui-density)) calc(480px * var(--ui-density)) at 30% 20%, rgba(155, 219, 250, 0.18), transparent 64%),
    rgba(88, 100, 132, 0.22);
  backdrop-filter: blur(calc(10px * var(--ui-density))) saturate(128%);
}

.system-theme-color-dialog {
  position: relative;
  width: min(calc(520px * var(--ui-density)), calc(100vw - calc(64px * var(--ui-density))));
  display: grid;
  gap: calc(18px * var(--ui-density));
  padding: calc(26px * var(--ui-density));
  border-radius: calc(30px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 78%, rgba(125, 99, 244, 0.28));
  background:
    radial-gradient(135% 96% at 0% 0%, rgba(255, 255, 255, 0.52), transparent 54%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16)),
    linear-gradient(320deg, rgba(255, 255, 255, 0.18), rgba(206, 185, 255, 0.10)),
    var(--layer-surface);
  box-shadow: var(--layer-shadow);
  backdrop-filter: var(--glass);
  isolation: isolate;
}

.system-theme-color-dialog::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.44), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%);
  z-index: -1;
}

.system-theme-color-dialog__head {
  padding-right: calc(52px * var(--ui-density));
}

.system-theme-color-dialog__title h3 {
  margin: 0;
  color: var(--heading);
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1.35;
}

.system-theme-color-dialog__title p {
  margin: calc(8px * var(--ui-density)) 0 0;
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

.system-theme-color-dialog__body {
  display: grid;
  gap: 0;
}

.system-theme-color-modal__body {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.system-theme-color-modal__preview {
  min-height: calc(92px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, rgba(255, 255, 255, 0.5));
  background: var(--theme-color-preview, #5f7cff);
  box-shadow:
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(112, 125, 164, 0.12);
}

.system-theme-color-dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  padding-top: calc(16px * var(--ui-density));
  border-top: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 78%, rgba(125, 99, 244, 0.12));
}

.system-theme-color-dialog__footer .ghost,
.system-theme-color-dialog__footer .primary {
  min-width: calc(112px * var(--ui-density));
}

.system-theme-live-preview {
  border-radius: calc(24px * var(--ui-density));
  overflow: hidden;
  background: var(--bg-gradient), var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 calc(18px * var(--ui-density)) calc(46px * var(--ui-density)) rgba(92, 108, 156, 0.14);
}

.system-theme-live-preview__shell {
  display: grid;
  grid-template-columns: calc(280px * var(--ui-density)) minmax(0, 1fr);
  min-height: calc(640px * var(--ui-density));
  background: var(--bg-wash);
}

.system-theme-live-preview__rail {
  display: grid;
  align-content: start;
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(16px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  border-right: 1px solid rgba(255, 255, 255, 0.68);
}

.system-theme-live-preview__brand {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  min-width: 0;
}

.system-theme-live-preview__brand-mark {
  width: calc(46px * var(--ui-density));
  height: calc(46px * var(--ui-density));
  object-fit: contain;
  display: block;
}

.system-theme-live-preview__rail strong,
.system-theme-live-preview__brand strong {
  color: var(--heading);
  font-size: calc(17px * var(--ui-density));
}

.system-theme-live-preview__project-card {
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.system-theme-live-preview__project-card span,
.system-theme-live-preview__project-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-theme-live-preview__project-card span {
  color: var(--muted);
  font-size: calc(13px * var(--ui-density));
}

.system-theme-live-preview__project-card strong {
  color: var(--heading);
  font-size: calc(15px * var(--ui-density));
}

.system-theme-live-preview__nav-group {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.system-theme-live-preview__nav {
  justify-content: flex-start;
  min-height: calc(46px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--control) 92%, transparent);
  box-shadow: none;
}

.system-theme-live-preview__nav.is-active {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--active-surface));
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.system-theme-live-preview__nav.is-sub {
  min-height: calc(40px * var(--ui-density));
  margin-left: calc(18px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  font-size: calc(14px * var(--ui-density));
}

.system-theme-live-preview__content {
  display: grid;
  align-content: start;
  gap: calc(20px * var(--ui-density));
  padding: calc(24px * var(--ui-density));
}

.system-theme-live-preview__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  padding: calc(26px * var(--ui-density)) calc(28px * var(--ui-density));
  border-radius: calc(26px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.system-theme-live-preview__hero-copy {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.system-theme-live-preview__hero-copy h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(28px * var(--ui-density));
  line-height: 1.1;
}

.system-theme-live-preview__hero-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: calc(15px * var(--ui-density));
  line-height: 1.6;
}

.system-theme-live-preview__hero-actions,
.system-theme-live-preview__header {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.system-theme-live-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
}

.system-theme-live-preview__primary,
.system-theme-live-preview__secondary {
  min-height: calc(42px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  font-weight: 700;
}

.system-theme-live-preview__primary--small {
  min-height: calc(44px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density));
}

.system-theme-live-preview__primary {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}

.system-theme-live-preview__secondary {
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
}

.system-theme-live-preview__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.system-theme-live-preview__stat-card {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-height: calc(124px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(24px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.74);
}

.system-theme-live-preview__stat-card span,
.system-theme-live-preview__stat-card small {
  color: var(--muted);
}

.system-theme-live-preview__stat-card strong {
  color: var(--heading);
  font-size: calc(36px * var(--ui-density));
  line-height: 1;
}

.system-theme-live-preview__workspace {
  display: grid;
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
  border-radius: calc(26px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.74);
}

.system-theme-live-preview__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.system-theme-live-preview__section-copy {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.system-theme-live-preview__section-copy strong {
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
}

.system-theme-live-preview__section-copy span,
.system-theme-live-preview__toolbar-meta {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
}

.system-theme-live-preview__toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) calc(172px * var(--ui-density)) auto auto auto;
  gap: calc(12px * var(--ui-density));
  align-items: center;
  padding: calc(18px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.system-theme-live-preview__search,
.system-theme-live-preview__filter,
.system-theme-live-preview__ghost-action {
  display: flex;
  align-items: center;
  min-height: calc(46px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--control) 94%, transparent);
  color: var(--muted-strong);
  font-weight: 600;
}

.system-theme-live-preview__ghost-action {
  justify-content: center;
}

.system-theme-live-preview__table {
  display: grid;
  overflow: hidden;
  border-radius: calc(22px * var(--ui-density));
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.76);
}

.system-theme-live-preview__table-head,
.system-theme-live-preview__table-row {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr .9fr .9fr .9fr .7fr;
  align-items: center;
}

.system-theme-live-preview__table-head {
  min-height: calc(68px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  color: var(--muted-strong);
  font-weight: 700;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
}

.system-theme-live-preview__table-row {
  min-height: calc(72px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  color: var(--muted);
  border-top: 1px solid rgba(220, 228, 240, 0.62);
}

.system-theme-live-preview__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14px * var(--ui-density));
}

.system-theme-live-preview__card {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-height: calc(108px * var(--ui-density));
  padding: calc(20px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.76);
}

.system-theme-live-preview__card strong {
  color: var(--heading);
}

.system-theme-live-preview__card span {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

:root[data-theme="dark"] .system-theme-live-preview {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(22px * var(--ui-density)) calc(52px * var(--ui-density)) rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .system-theme-live-preview__rail,
:root[data-theme="dark"] .system-theme-live-preview__project-card,
:root[data-theme="dark"] .system-theme-live-preview__hero,
:root[data-theme="dark"] .system-theme-live-preview__stat-card,
:root[data-theme="dark"] .system-theme-live-preview__workspace,
:root[data-theme="dark"] .system-theme-live-preview__table,
:root[data-theme="dark"] .system-theme-live-preview__toolbar,
:root[data-theme="dark"] .system-theme-live-preview__card {
  border-color: rgba(173, 228, 255, 0.12);
}

:root[data-theme="dark"] .system-theme-live-preview__rail {
  background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
}

:root[data-theme="dark"] .system-theme-live-preview__secondary,
:root[data-theme="dark"] .system-theme-live-preview__search,
:root[data-theme="dark"] .system-theme-live-preview__filter,
:root[data-theme="dark"] .system-theme-live-preview__ghost-action {
  background: rgba(255, 255, 255, 0.06);
  color: #eff5ff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .system-theme-live-preview__secondary:hover,
:root[data-theme="dark"] .system-theme-live-preview__ghost-action:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

:root[data-theme="dark"] .system-theme-live-preview__table-head {
  background: rgba(255, 255, 255, 0.05);
  color: #eef4ff;
}

:root[data-theme="dark"] .system-theme-live-preview__table-row {
  color: rgba(232, 238, 248, 0.86);
  border-top-color: rgba(173, 228, 255, 0.10);
}

.system-settings-actions {
  margin-top: calc(8px * var(--ui-density));
}

.system-settings-actions button {
  min-width: calc(148px * var(--ui-density));
}

@media (max-width: 1440px) {
  .system-theme-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-theme-group--background {
    grid-column: 1 / -1;
  }

  .system-theme-live-preview__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-theme-live-preview__toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .system-settings-subnav {
    align-items: stretch;
  }

  .system-settings-subnav__tabs {
    width: 100%;
  }

  .system-settings-subnav__item {
    min-width: 0;
  }

  .system-settings-subnav__hint {
    width: 100%;
    margin-left: 0;
    max-width: none;
    text-align: left;
  }

  .system-settings-assets-row {
    grid-template-columns: 1fr;
  }

  .system-settings-upload-panel {
    grid-template-columns: 1fr;
  }

  .system-settings-upload-preview {
    width: 100%;
    min-height: calc(112px * var(--ui-density));
    justify-self: stretch;
  }

  .system-theme-groups {
    grid-template-columns: 1fr;
  }

  .system-theme-field-grid--button,
  .system-theme-field-grid--background {
    grid-template-columns: 1fr;
  }

  .system-theme-live-preview__shell {
    grid-template-columns: 1fr;
  }

  .system-theme-live-preview__rail {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.68);
  }

  .system-theme-live-preview__hero,
  .system-theme-live-preview__section-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .system-theme-live-preview__stats,
  .system-theme-live-preview__cards {
    grid-template-columns: 1fr;
  }

  .system-theme-live-preview__toolbar {
    grid-template-columns: 1fr;
  }

  .system-theme-live-preview__table-head,
  .system-theme-live-preview__table-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mail-template-layout {
    grid-template-columns: 1fr;
  }

  .mail-template-preview {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .system-settings-subnav__item {
    min-height: calc(48px * var(--ui-density));
    padding: 0 calc(18px * var(--ui-density));
  }

  .mail-service-status,
  .mail-settings-card__head,
  .mail-template-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mail-settings-grid,
  .mail-template-selectors,
  .mail-sender-test-row,
  .mail-sender-verify-row {
    grid-template-columns: 1fr;
  }

  .mail-settings-card__actions,
  .mail-template-heading__actions {
    width: 100%;
    justify-content: stretch;
  }

  .mail-settings-card__actions button,
  .mail-template-heading__actions button,
  .mail-sender-test-row > button,
  .mail-sender-verify-row > button {
    width: 100%;
  }

  .mail-template-preview iframe {
    min-height: calc(420px * var(--ui-density));
  }
}

/* V5.1 M53：需求治理页面。只使用共享主题 token，宽表在自身容器滚动。 */
.function-catalog-page, .requirement-candidate-page { display: grid; gap: calc(14px * var(--ui-density)); min-width: 0; }
.function-catalog-toolbar, .requirements-candidate-toolbar { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-density)); flex-wrap: wrap; }
.function-catalog-workspace { display: grid; grid-template-columns: minmax(calc(270px * var(--ui-density)), 28fr) minmax(0, 72fr); gap: calc(14px * var(--ui-density)); min-height: calc(620px * var(--ui-density)); }
.function-catalog-tree-panel, .function-catalog-detail-panel, .requirements-candidate-toolbar { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--soft-shadow); }
.function-catalog-tree-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.function-catalog-tree-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8px * var(--ui-density)); padding: calc(12px * var(--ui-density)); border-bottom: 1px solid var(--line); }
.function-catalog-tree-tools select { min-width: calc(108px * var(--ui-density)); }
.function-catalog-tree-list { overflow: auto; padding: calc(8px * var(--ui-density)); }
.function-catalog-tree-subsystem { margin: 0 0 calc(12px * var(--ui-density)); }
.function-catalog-tree-subsystem h3 { margin: calc(7px * var(--ui-density)); font-size: calc(14px * var(--ui-density)); color: var(--muted-strong); }
.function-catalog-tree-subsystem ol { list-style: none; margin: 0; padding-left: calc(12px * var(--ui-density)); }
.function-catalog-tree-node { width: 100%; display: flex; align-items: center; gap: calc(7px * var(--ui-density)); border: 0; border-radius: var(--radius-sm); color: var(--text); background: transparent; text-align: left; padding: calc(8px * var(--ui-density)); }
.function-catalog-tree-node:hover { background: var(--control-hover); }
.function-catalog-tree-node.selected { background: var(--accent-gradient); color: #fff; }
.function-catalog-tree-node b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.function-catalog-tree-node i { margin-left: auto; font-size: calc(11px * var(--ui-density)); font-style: normal; color: var(--warn); white-space: nowrap; }
.function-catalog-tree-node.selected i { color: #fff; }
.function-catalog-detail-panel { min-width: 0; padding: calc(22px * var(--ui-density)); overflow: auto; }
.function-catalog-detail-head { display: flex; justify-content: space-between; gap: calc(16px * var(--ui-density)); align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: calc(16px * var(--ui-density)); }
.function-catalog-detail-head h2 { margin: 0; color: var(--heading); }
.function-catalog-detail-head p { margin: calc(5px * var(--ui-density)) 0 0; }
.function-catalog-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--ui-density)); margin-top: calc(16px * var(--ui-density)); }
.function-catalog-detail-grid section { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); padding: calc(14px * var(--ui-density)); min-width: 0; }
.function-catalog-detail-grid h3 { margin: 0 0 calc(9px * var(--ui-density)); font-size: calc(14px * var(--ui-density)); }
.function-catalog-detail-grid p { margin: 0; white-space: pre-wrap; line-height: 1.7; }
.function-catalog-detail-grid dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui-density)); margin: 0; }
.function-catalog-detail-grid dl div { display: grid; gap: calc(3px * var(--ui-density)); }
.function-catalog-detail-grid dt { color: var(--muted); font-size: calc(12px * var(--ui-density)); }.function-catalog-detail-grid dd { margin: 0; color: var(--heading); font-weight: 700; }.function-catalog-detail-wide { grid-column: 1 / -1; }
.requirements-candidate-toolbar { padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density)); }
.requirements-candidate-metrics { display: grid; grid-template-columns: repeat(4, minmax(calc(100px * var(--ui-density)), 1fr)); gap: calc(10px * var(--ui-density)); }.requirements-candidate-metrics span { display: grid; gap: calc(2px * var(--ui-density)); color: var(--muted); font-size: calc(12px * var(--ui-density)); }.requirements-candidate-metrics strong { color: var(--heading); font-size: calc(21px * var(--ui-density)); }
.requirements-candidate-search { display: flex; justify-content: space-between; align-items: center; gap: calc(12px * var(--ui-density)); }.requirements-candidate-search .list-search-field { width: min(calc(460px * var(--ui-density)), 100%); }
.requirements-candidate-table { min-width: calc(1450px * var(--ui-density)); }.requirements-candidate-table td, .requirements-candidate-table th { vertical-align: middle; }.requirements-candidate-table tr { cursor: pointer; }.requirements-candidate-table .title-link { display: block; max-width: calc(260px * var(--ui-density)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.requirements-candidate-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12px * var(--ui-density)); }.requirements-candidate-board-column { min-height: calc(380px * var(--ui-density)); padding: calc(12px * var(--ui-density)); }.requirements-candidate-board-column header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: calc(10px * var(--ui-density)); }.requirements-candidate-board-column h3 { margin: 0; font-size: calc(15px * var(--ui-density)); }.requirements-candidate-board-item { width: 100%; display: grid; gap: calc(5px * var(--ui-density)); padding: calc(10px * var(--ui-density)); margin: 0 0 calc(8px * var(--ui-density)); text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }.requirements-candidate-board-item:hover { background: var(--control-hover); }.requirements-candidate-board-item small { color: var(--muted); }
.requirement-candidate-drawer { display: grid; gap: calc(18px * var(--ui-density)); }.requirement-candidate-drawer h3, .requirement-candidate-drawer h4 { margin: 0 0 calc(7px * var(--ui-density)); }.requirement-candidate-drawer p { margin: 0; line-height: 1.6; white-space: pre-wrap; }.requirement-candidate-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui-density)); }.requirement-candidate-detail-grid div { display: grid; gap: calc(5px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: calc(10px * var(--ui-density)); }.requirement-candidate-detail-grid span { color: var(--muted); font-size: calc(12px * var(--ui-density)); }
.workshop-detail-drawer { display: grid; gap: calc(16px * var(--ui-density)); align-content: start; }.workshop-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--ui-density)); }.workshop-detail-drawer .field-shell { min-width: 0; gap: calc(8px * var(--ui-density)); }.workshop-readonly-control { min-height: calc(52px * var(--ui-density)); display: flex; align-items: center; padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--control); color: var(--text); line-height: 1.5; box-sizing: border-box; }.workshop-readonly-control--multiline { min-height: calc(104px * var(--ui-density)); align-items: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }.workshop-edit-form { align-content: start; }.workshop-edit-form textarea { min-height: calc(104px * var(--ui-density)); }.requirements-ordinary-actions-cell { white-space: nowrap; }.requirements-ordinary-row-action { padding: calc(5px * var(--ui-density)) calc(6px * var(--ui-density)); color: var(--muted-strong); font-size: var(--font-size-hint); font-weight: 700; background: transparent; border: 0; border-radius: 0; box-shadow: none; }.requirements-ordinary-row-action:hover, .requirements-ordinary-row-action:focus-visible { color: var(--accent); text-decoration: underline; background: transparent; box-shadow: none; }.requirements-ordinary-actions-cell .requirements-ordinary-row-action + .requirements-ordinary-row-action { margin-left: calc(6px * var(--ui-density)); }
.planning-ai-dev-collaboration { display: grid; gap: calc(12px * var(--ui-density)); margin-top: calc(16px * var(--ui-density)); padding: calc(14px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }.planning-ai-dev-collaboration header { display: flex; justify-content: space-between; gap: calc(12px * var(--ui-density)); }.planning-ai-dev-collaboration h3 { margin: 0; }.planning-ai-dev-collaboration p { margin: calc(5px * var(--ui-density)) 0 0; }.planning-ai-batch-list { display: grid; gap: calc(8px * var(--ui-density)); }.planning-ai-batch-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: calc(10px * var(--ui-density)); align-items: center; border-top: 1px solid var(--line); padding-top: calc(9px * var(--ui-density)); }.planning-ai-batch-list small { color: var(--muted); }
.dev-story-draft-review-form, .dev-story-draft-review-list { display: grid; gap: calc(14px * var(--ui-density)); }.dev-story-draft-review-form > p { margin: 0; }.dev-story-draft-review-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui-density)); padding: calc(14px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }.dev-story-draft-review-row header, .dev-story-draft-review-row label { display: grid; gap: calc(6px * var(--ui-density)); }.dev-story-draft-review-row header { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.dev-story-draft-review-row textarea { resize: vertical; }
@media (max-width: 980px) { .function-catalog-workspace { grid-template-columns: minmax(calc(220px * var(--ui-density)), 31fr) minmax(0, 69fr); }.requirements-candidate-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }.requirements-candidate-metrics { grid-template-columns: repeat(2, minmax(calc(100px * var(--ui-density)), 1fr)); } }
@media (max-width: 620px) { .function-catalog-workspace { display: block; min-height: 0; }.function-catalog-workspace.is-detail .function-catalog-tree-panel { display: none; }.function-catalog-workspace:not(.is-detail) .function-catalog-detail-panel { display: none; }.function-catalog-detail-panel { padding: calc(14px * var(--ui-density)); }.function-catalog-detail-head, .planning-ai-dev-collaboration header { align-items: stretch; flex-direction: column; }.function-catalog-detail-grid, .requirement-candidate-detail-grid, .dev-story-draft-review-row { grid-template-columns: 1fr; }.requirements-candidate-toolbar, .requirements-candidate-search { align-items: stretch; flex-direction: column; }.requirements-candidate-board { grid-template-columns: minmax(calc(260px * var(--ui-density)), 1fr); overflow-x: auto; }.planning-ai-batch-list article { grid-template-columns: 1fr auto; }.planning-ai-batch-list article small { grid-column: 1 / -1; } }

.system-settings-actions .ghost {
  margin-right: auto;
}

:root[data-theme="dark"] .system-settings-subnav {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(14, 21, 31, 0.88), rgba(10, 16, 25, 0.74)),
    rgba(10, 15, 24, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .system-settings-subnav__tabs {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(173, 228, 255, 0.10);
}

:root[data-theme="dark"] .system-settings-subnav__item {
  color: rgba(232, 238, 248, 0.74);
}

:root[data-theme="dark"] .system-settings-module {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.88), rgba(10, 16, 25, 0.74)),
    radial-gradient(calc(520px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.08), transparent 74%),
    rgba(10, 15, 24, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .system-settings-module--basic {
  padding-top: calc(14px * var(--ui-density));
}

:root[data-theme="dark"] .system-settings-basic-stack > .field-shell,
:root[data-theme="dark"] .system-settings-assets-row > .field-shell,
:root[data-theme="dark"] .system-settings-basic-fields,
:root[data-theme="dark"] .system-settings-upload-panel,
:root[data-theme="dark"] .system-settings-preview-card,
:root[data-theme="dark"] .system-settings-brand-preview__stage,
:root[data-theme="dark"] .system-settings-footer-preview__stage,
:root[data-theme="dark"] .system-settings-upload-preview,
:root[data-theme="dark"] .system-global-footer--preview,
:root[data-theme="dark"] .system-theme-group,
:root[data-theme="dark"] .system-theme-preset-card {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(16, 22, 31, 0.90), rgba(11, 17, 26, 0.78)),
    rgba(10, 15, 24, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .system-settings-basic-fields > .field-shell {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .system-settings-basic-stack > .field-shell input,
:root[data-theme="dark"] .system-settings-basic-stack > .field-shell textarea,
:root[data-theme="dark"] .system-settings-assets-row > .field-shell input,
:root[data-theme="dark"] .system-settings-assets-row > .field-shell textarea,
:root[data-theme="dark"] .system-settings-color-row input[type="color"] {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(34, 46, 62, 0.92), rgba(25, 35, 50, 0.88)),
    rgba(18, 26, 38, 0.88);
  color: var(--heading);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.14);
}

:root[data-theme="dark"] .system-settings-basic-fields > .field-shell input,
:root[data-theme="dark"] .system-settings-basic-fields > .field-shell textarea {
  border-color: rgba(173, 228, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(173, 228, 255, 0.08),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.14);
}

:root[data-theme="dark"] .system-settings-basic-fields > .field-shell input:focus,
:root[data-theme="dark"] .system-settings-basic-fields > .field-shell textarea:focus {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

:root[data-theme="dark"] .system-settings-preview-copy strong,
:root[data-theme="dark"] .system-settings-preview-title,
:root[data-theme="dark"] .system-theme-group__head strong,
:root[data-theme="dark"] .system-theme-preset-card__label {
  color: var(--heading);
}

:root[data-theme="dark"] .system-settings-preview-copy span,
:root[data-theme="dark"] .system-settings-auth-preview__intro,
:root[data-theme="dark"] .system-theme-group__head span,
:root[data-theme="dark"] .system-theme-preset-card__desc,
:root[data-theme="dark"] .system-theme-input > span:first-child,
:root[data-theme="dark"] .system-global-footer--preview {
  color: rgba(232, 238, 248, 0.74);
}

.announcement-admin-shell {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.home-frame-content-body > .announcement-admin-shell {
  min-height: 0;
  height: 100%;
}

.announcement-list-shell,
.announcement-list-card,
.announcement-table-scroll {
  min-height: 0;
  height: 100%;
}

.announcement-list-card,
.announcement-modal-body {
  min-width: 0;
}

.announcement-table {
  min-width: calc(1310px * var(--ui-density));
}

.announcement-table td {
  white-space: nowrap;
}

.message-sequence-column,
.announcement-sequence-column {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  text-align: center;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

.announcement-form-grid textarea,
.announcement-preview-grid textarea {
  min-height: calc(168px * var(--ui-density));
}

.announcement-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
}

.announcement-preview-grid .full {
  grid-column: 1 / -1;
}

.home-hero {
  grid-column: 2 / 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(156px * var(--ui-density)), 22%);
  align-items: stretch;
  gap: calc(20px * var(--ui-density));
  min-height: 0;
  padding: calc(20px * var(--ui-density)) calc(24px * var(--ui-density));
  overflow: hidden;
  background:
    url("./public/home-recent-aurora.svg") right calc(18px * var(--ui-density)) center / min(33%, calc(280px * var(--ui-density))) auto no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(250, 252, 255, 0.50)),
    repeating-linear-gradient(135deg, rgba(123, 103, 245, 0.035) 0 calc(12px * var(--ui-density)), rgba(112, 207, 232, 0.045) calc(12px * var(--ui-density)) calc(24px * var(--ui-density))),
    radial-gradient(calc(560px * var(--ui-density)) calc(260px * var(--ui-density)) at 78% 18%, color-mix(in srgb, var(--accent) 10%, rgba(191, 237, 255, 0.34)), transparent 70%);
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)),
    radial-gradient(calc(680px * var(--ui-density)) calc(320px * var(--ui-density)) at 78% 0%, rgba(191, 237, 255, 0.36), transparent 70%);
  pointer-events: none;
}

.home-hero-copy,
.home-hero-art {
  position: relative;
  z-index: 1;
}

.home-hero-copy {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: calc(18px * var(--ui-density));
  padding-right: calc(4px * var(--ui-density));
  min-height: 0;
}

.home-hero-greeting {
  margin: 0;
  color: #1c1f24;
  font-size: calc(26px * var(--ui-density));
  line-height: 1.04;
  font-weight: 800;
}

.home-hero-head {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.home-hero-head h1 {
  margin: 0;
  color: #1f232a;
  font-size: var(--font-size-title);
  line-height: 1.1;
  font-weight: 700;
}

.home-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(136px * var(--ui-density)), 1fr));
  gap: calc(12px * var(--ui-density));
  align-content: stretch;
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: calc(134px * var(--ui-density));
  align-self: center;
  overflow: visible;
}

#homeRecentDiagnostics:empty {
  display: none;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  align-items: stretch;
}

.home-hero-action {
  min-width: 0;
  min-height: calc(72px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  display: grid;
  align-content: center;
  gap: calc(6px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.home-hero-action:hover {
  transform: translateY(-1px);
}

.home-hero-action--primary {
  min-width: min(100%, calc(292px * var(--ui-density)));
  border: 1px solid rgba(125, 99, 244, 0.24);
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 calc(16px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(111, 99, 244, 0.22);
}

.home-hero-action--primary:hover {
  box-shadow: 0 calc(20px * var(--ui-density)) calc(38px * var(--ui-density)) rgba(111, 99, 244, 0.28);
}

.home-hero-action--secondary {
  min-width: min(100%, calc(252px * var(--ui-density)));
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--heading);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(119, 131, 166, 0.12);
}

.home-hero-action--secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 calc(18px * var(--ui-density)) calc(32px * var(--ui-density)) rgba(119, 131, 166, 0.16);
}

.home-hero-action__eyebrow {
  font-size: var(--font-size-hint);
  font-weight: 800;
  letter-spacing: 0;
}

.home-hero-action--primary .home-hero-action__eyebrow {
  color: rgba(255, 255, 255, 0.74);
}

.home-hero-action--secondary .home-hero-action__eyebrow {
  color: var(--muted);
}

.home-hero-action strong {
  font-size: var(--font-size-body);
  line-height: 1.25;
  font-weight: 800;
}

.home-hero-action__meta {
  font-size: var(--font-size-hint);
  line-height: 1.45;
}

.home-hero-action--primary .home-hero-action__meta {
  color: rgba(255, 255, 255, 0.86);
}

.home-hero-action--secondary .home-hero-action__meta {
  color: var(--muted-strong);
}

.home-diagnostic-note {
  margin: 0;
  max-width: calc(620px * var(--ui-density));
  color: #a3542b;
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

.home-recent-pill {
  height: calc(134px * var(--ui-density));
  min-height: calc(134px * var(--ui-density));
  max-height: calc(134px * var(--ui-density));
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: calc(9px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px dashed rgba(191, 202, 235, 0.72);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.home-recent-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(119, 131, 166, 0.14);
}

.home-recent-pill--disabled,
.home-recent-pill--disabled:hover {
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  opacity: 0.74;
}

.home-recent-pill-main {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.home-recent-pill-title {
  min-width: 0;
  overflow: hidden;
}

.home-recent-pill-title strong {
  display: block;
}

.home-recent-pill strong {
  min-width: 0;
  color: var(--text);
  font-size: calc(15px * var(--ui-density));
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-pill-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  min-width: 0;
  padding-left: 0;
}

.home-recent-pill-meta span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-pill-meta .home-project-status--recent {
  color: #fff;
}

.home-recent-pill-context {
  color: var(--muted-strong) !important;
}

.home-recent-pill-progress {
  display: grid;
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.home-recent-pill-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.home-recent-pill-progress-head strong {
  flex: 0 0 auto;
  color: var(--heading);
  font-size: var(--font-size-body);
}

.home-recent-pill-progress-track {
  display: block;
  height: calc(7px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--accent) 12%, var(--control));
}

.home-recent-pill-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-gradient);
  box-shadow: 0 calc(2px * var(--ui-density)) calc(8px * var(--ui-density)) color-mix(in srgb, var(--accent) 34%, transparent);
}

.home-recent-pill-meta .home-recent-pill-time {
  grid-column: 1 / -1;
}

.home-recent-empty {
  display: grid;
  gap: calc(8px * var(--ui-density));
  align-content: center;
  min-height: calc(92px * var(--ui-density));
  max-width: calc(310px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px dashed rgba(191, 202, 235, 0.86);
  background: rgba(255, 255, 255, 0.88);
}

.home-recent-empty strong {
  color: var(--heading);
  font-size: calc(16px * var(--ui-density));
}

.home-recent-empty span {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-recent-empty-icon {
  width: calc(28px * var(--ui-density));
  height: calc(28px * var(--ui-density));
  color: #6b66f4;
}

.home-recent-empty-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero-art {
  display: grid;
  place-items: center;
}

.home-hero-art img {
  width: min(calc(188px * var(--ui-density)), 100%);
  height: calc(130px * var(--ui-density));
  object-fit: contain;
  mix-blend-mode: normal;
}

.home-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.home-side-head h2,
.home-catalog-title h2 {
  margin: 0;
  color: #1f232a;
  font-size: var(--font-size-title);
  line-height: 1.12;
  font-weight: 700;
}

.home-active-priority {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--heading);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.home-active-priority__clear {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--accent-2);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.home-side-link,
.home-side-caption {
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
}

.home-side-link {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #6b66f4;
}

.home-notice-card,
.home-message-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(20px * var(--ui-density));
  padding: calc(28px * var(--ui-density)) calc(24px * var(--ui-density)) calc(24px * var(--ui-density));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.home-rail-footer:has(.home-workspace-switch-menu:not([hidden])) {
  overflow: visible;
}

.home-notice-card {
  grid-column: 3 / 4;
  grid-row: 1;
}

.home-message-card {
  grid-column: 3 / 4;
  grid-row: 2;
}

.home-notice-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(250, 252, 255, 0.52)),
    repeating-linear-gradient(150deg, rgba(123, 103, 245, 0.025) 0 calc(14px * var(--ui-density)), rgba(112, 207, 232, 0.032) calc(14px * var(--ui-density)) calc(28px * var(--ui-density))),
    radial-gradient(calc(480px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 55%, color-mix(in srgb, var(--accent) 10%, rgba(218, 230, 255, 0.34)), transparent 70%);
}

.home-message-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(248, 251, 255, 0.52)),
    radial-gradient(calc(360px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 0%, color-mix(in srgb, var(--accent) 8%, rgba(214, 233, 255, 0.3)), transparent 72%);
}

.home-governance-block {
  display: grid;
  gap: 0;
  min-height: 0;
  align-content: stretch;
  align-self: stretch;
  padding: 0;
}

.home-governance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.home-governance-item {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-height: 0;
  align-content: center;
  width: 100%;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.home-governance-item:hover,
.home-governance-item:focus-visible {
  transform: translateY(-2px);
}

.home-governance-item.active {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(31, 49, 74, 0.14);
  background:
    linear-gradient(180deg, rgba(240, 246, 255, 0.96), rgba(230, 240, 255, 0.88)),
    color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.74));
}

.home-governance-item__value {
  color: var(--heading);
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1.1;
  order: 2;
}

.home-governance-item strong {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 700;
  order: 1;
}

.home-governance-item span:last-child {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.42;
  order: 3;
}

.home-notice-body,
.home-notice-empty {
  width: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  align-self: start;
  gap: calc(14px * var(--ui-density));
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}

.home-notice-body {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  min-height: auto;
  justify-items: start;
}

.home-notice-body:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.home-notice-body small,
.home-notice-empty small {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-notice-body strong,
.home-notice-empty strong {
  color: #1f232a;
  font-size: var(--font-size-body);
  line-height: 1.42;
}

.home-notice-summary,
.home-notice-body p,
.home-notice-empty p {
  margin: 0;
  color: #343943;
  font-size: var(--font-size-body);
  line-height: 1.56;
}

.home-notice-summary {
  display: block;
}

.home-message-block {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
}

.home-message-title {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  color: #1f232a;
}

.home-message-title strong {
  font-size: var(--font-size-body);
}

.home-message-badge {
  min-width: calc(24px * var(--ui-density));
  height: calc(24px * var(--ui-density));
  padding: 0 calc(7px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  background: var(--accent-gradient);
  color: #fff;
  font-size: calc(13px * var(--ui-density));
  font-weight: 800;
  box-shadow: 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(102, 95, 246, 0.22);
}

.home-message-list {
  min-height: 0;
  display: grid;
  gap: calc(8px * var(--ui-density));
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(2px * var(--ui-density)) calc(8px * var(--ui-density)) calc(2px * var(--ui-density)) 0;
}

.home-message-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: flex-start;
  align-self: start;
  width: 100%;
  min-width: 0;
  min-height: calc(36px * var(--ui-density));
  justify-content: flex-start;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #3c4558;
  font-size: calc(14px * var(--ui-density));
  font-weight: 650;
  line-height: 1.5;
  text-align: left;
}

.home-message-item__copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-message-item:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.home-message-empty {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-catalog {
  grid-column: 2 / 3;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(26px * var(--ui-density)) calc(24px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(247, 250, 255, 0.44)),
    radial-gradient(calc(720px * var(--ui-density)) calc(340px * var(--ui-density)) at 100% 0%, color-mix(in srgb, var(--accent) 8%, rgba(196, 236, 255, 0.2)), transparent 68%),
    rgba(255, 255, 255, 0.36);
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(170, 184, 215, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 calc(18px * var(--ui-density)) calc(46px * var(--ui-density)) rgba(113, 128, 166, 0.08);
}

.home-catalog-head {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.home-catalog-title {
  display: inline-flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
}

.home-catalog-toolbar {
  display: grid;
  grid-template-columns: auto minmax(calc(320px * var(--ui-density)), 1fr) auto;
  align-items: center;
  gap: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
}

.home-toolbar-left {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.home-toolbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-create-btn {
  min-height: calc(40px * var(--ui-density));
  padding: 0 calc(22px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  border-color: rgba(104, 124, 226, 0.18);
  background: var(--accent-gradient);
  background-clip: padding-box;
  backdrop-filter: none;
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(150, 163, 194, 0.08);
}

.home-create-btn:hover {
  border-color: rgba(104, 124, 226, 0.24);
  background: var(--accent-gradient);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 calc(12px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(150, 163, 194, 0.10);
}

.home-bulk-btn {
  min-height: calc(42px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.9)),
    color-mix(in srgb, var(--accent) 10%, white);
  color: var(--accent-2);
  font-size: calc(15px * var(--ui-density));
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(111, 123, 255, 0.12);
}

.home-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.home-search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
}

.home-search-form .custom-select,
.home-search-form input {
  margin: 0;
}

.home-search-form .custom-select {
  min-width: calc(128px * var(--ui-density));
}

.home-search-form input {
  width: min(calc(360px * var(--ui-density)), 100%);
  max-width: 100%;
  min-height: calc(38px * var(--ui-density));
  padding-left: calc(42px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 252, 254, 0.92)),
    rgba(255, 255, 255, 0.92);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='%2396a0af' stroke-width='1.8'/%3E%3Cpath d='m16 16 3.6 3.6' stroke='%2396a0af' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 252, 254, 0.92));
  background-repeat: no-repeat, no-repeat;
  background-position: calc(16px * var(--ui-density)) center, center;
  font-size: var(--font-size-body);
  box-shadow: var(--layer-input-shadow);
}

.home-search-form input:focus {
  outline: none;
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

.home-view-toggle {
  display: inline-flex;
  padding: calc(3px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  border: 1px solid rgba(229, 235, 245, 0.98);
  background: rgba(255, 255, 255, 0.96);
  gap: calc(4px * var(--ui-density));
}

.home-view-toggle button {
  min-height: calc(38px * var(--ui-density));
  min-width: calc(82px * var(--ui-density));
  border-radius: calc(8px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #272b33;
  font-size: calc(15px * var(--ui-density));
  font-weight: 800;
}

.home-view-toggle button.active {
  background: var(--accent-gradient);
  background-clip: padding-box;
  backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(150, 163, 194, 0.08);
}

.home-catalog-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
  padding-top: calc(6px * var(--ui-density));
  padding-right: calc(4px * var(--ui-density));
}

.home-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density)) calc(20px * var(--ui-density));
  min-height: 100%;
  flex: 1 1 auto;
  overflow: auto;
  align-content: start;
  padding-top: calc(2px * var(--ui-density));
  padding-bottom: calc(6px * var(--ui-density));
}

.home-project-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: calc(14px * var(--ui-density));
  min-height: calc(150px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(28px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid rgba(219, 229, 244, 0.98);
  border-radius: calc(18px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(251, 253, 255, 0.94)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(143, 154, 176, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.62);
  cursor: pointer;
  min-width: 0;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.home-project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(204, 216, 236, 0.98);
  box-shadow:
    0 calc(18px * var(--ui-density)) calc(38px * var(--ui-density)) rgba(126, 138, 160, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.68);
}

.home-project-card--disabled,
.home-project-card--disabled:hover {
  cursor: not-allowed;
  transform: none;
  opacity: 0.76;
  border-style: dashed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(143, 154, 176, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.56);
}

.home-project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
}

.home-project-ident {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  min-width: 0;
}

.home-project-ident strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f232a;
  font-size: calc(18px * var(--ui-density));
  line-height: 1.28;
  font-weight: 700;
}

.home-project-title-block {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.home-project-title-block span {
  color: var(--muted);
  font-size: calc(15px * var(--ui-density));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-project-card-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  justify-content: flex-end;
  flex: 0 0 auto;
}

.home-project-icon-btn,
.home-copy-btn {
  min-height: auto;
  min-width: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #1f232a;
  font-size: calc(22px * var(--ui-density));
  line-height: 1;
}

.home-project-icon-btn.active {
  color: #f2b628;
}

.home-project-icon-btn-text {
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid rgba(227, 233, 244, 0.98);
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted-strong);
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
}

.home-project-icon-btn-text:hover {
  background: rgba(247, 250, 255, 0.96);
}

.home-project-icon-btn-text.active,
.home-table-action-btn.active {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.home-project-icon-btn-text.danger,
.home-table-action-btn.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: var(--danger-bg);
}

.home-project-icon-btn-text.danger:hover,
.home-table-action-btn.danger:hover {
  background: color-mix(in srgb, var(--danger-bg) 84%, white);
}

.home-project-card-tags {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
  overflow: hidden;
  flex-wrap: wrap;
  white-space: normal;
}

.home-project-priority-badge {
  flex: 0 0 auto;
  margin-right: calc(8px * var(--ui-density));
}

.home-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(26px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(7px * var(--ui-density));
  color: #24a46d;
  background: rgba(215, 250, 232, 0.86);
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
}

.home-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(26px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(7px * var(--ui-density));
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
  background: #eff0f4;
  color: #454b57;
}

.home-subsystem-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: calc(28px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--panel) 84%, white);
  color: var(--muted-strong);
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.home-project-card-meta {
  display: flex;
  align-items: center;
  gap: calc(22px * var(--ui-density));
  flex-wrap: nowrap;
  color: #343943;
  font-size: calc(14px * var(--ui-density));
}

.home-project-card-state-row {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  min-width: 0;
}

.home-project-card-state-item {
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.home-project-meta-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
  white-space: nowrap;
}

.home-project-status--home.status-new,
.home-project-status--recent.status-new {
  background: #5d8dff;
}

.home-project-status--home.status-in_progress,
.home-project-status--recent.status-in_progress {
  background: #42cda8;
}

.home-project-status--home.status-archived,
.home-project-status--recent.status-archived {
  background: #e4b84f;
}

.home-project-risk-badge {
  display: inline-flex;
  align-items: center;
  min-height: calc(24px * var(--ui-density));
  padding: calc(3px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  color: #fff;
  font-size: var(--font-size-hint);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.home-project-risk-badge--none { background: #42cda8; }
.home-project-risk-badge--low { background: #65b5f6; }
.home-project-risk-badge--medium { background: #f0a858; }
.home-project-risk-badge--severe { background: #ef6f89; }

.home-project-meta-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted-strong);
  min-width: 0;
}

.home-project-meta-row span {
  color: var(--muted);
}

.home-project-meta-row strong {
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
}

.home-project-meta-row--people {
  flex: 1 1 100%;
  flex-wrap: nowrap;
  gap: calc(8px * var(--ui-density));
  overflow-x: auto;
  scrollbar-width: none;
}

.home-project-meta-row--people::-webkit-scrollbar { display: none; }

.home-project-meta-divider {
  margin-left: calc(8px * var(--ui-density));
}

.home-project-meta-row--work-items {
  margin-left: auto;
  justify-content: flex-end;
}

.home-project-meta-row--work-items strong,
.home-project-meta-row--work-items span {
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

.home-person-inline {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.home-participant-stack {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.home-participant-avatar,
.home-participant-overflow {
  width: calc(30px * var(--ui-density));
  height: calc(30px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: calc(2px * var(--ui-density)) solid rgba(255, 255, 255, 0.94);
  background: linear-gradient(135deg, rgba(232, 238, 255, 0.96), rgba(245, 247, 255, 0.92));
  box-shadow: 0 calc(6px * var(--ui-density)) calc(12px * var(--ui-density)) rgba(138, 149, 172, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  font-size: calc(12px * var(--ui-density));
  font-weight: 700;
  overflow: hidden;
}

.home-participant-avatar + .home-participant-avatar,
.home-participant-avatar + .home-participant-overflow,
.home-participant-overflow + .home-participant-avatar,
.home-participant-overflow + .home-participant-overflow {
  margin-left: -8px;
}

.home-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-participant-overflow {
  background: color-mix(in srgb, var(--accent) 16%, white);
}

.home-participant-overflow--summary {
  width: auto;
  min-width: calc(68px * var(--ui-density));
  padding: 0 calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  margin-left: calc(6px * var(--ui-density)) !important;
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.home-project-person-empty {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-project-card-id {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  color: var(--muted-strong);
}

.home-copy-btn {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
  margin-left: calc(4px * var(--ui-density));
}

.home-project-list {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
}

.home-project-load-more-row td {
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  text-align: center;
  border-bottom: 0;
}

.home-project-load-more {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.home-project-list table {
  min-width: calc(1220px * var(--ui-density));
  table-layout: fixed;
  font-size: var(--font-size-table);
}

.home-project-list th {
  position: sticky;
  top: 0;
  z-index: 3;
  font-size: var(--font-size-body);
  color: var(--muted-strong);
}

.home-project-list td {
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-project-name-col,
.home-project-name-cell { width: calc(250px * var(--ui-density)); }

.home-project-code-col,
.home-project-code-cell { width: calc(154px * var(--ui-density)); }

.home-project-status-col,
.home-project-status-cell { width: calc(112px * var(--ui-density)); }

.home-project-version-col,
.home-project-version-cell { width: calc(212px * var(--ui-density)); }

.home-project-creator-col,
.home-project-creator-cell { width: calc(134px * var(--ui-density)); }

.home-project-created-col,
.home-project-created-cell { width: calc(166px * var(--ui-density)); }

.home-project-actions-col,
.home-project-actions-cell { width: calc(270px * var(--ui-density)); }

.home-project-name-cell {
  color: var(--text);
  font-weight: 600;
}

.home-project-actions-cell {
  overflow: visible !important;
}

.home-project-list tr {
  cursor: pointer;
}

.home-project-select-col {
  min-width: calc(52px * var(--ui-density)) !important;
  width: calc(52px * var(--ui-density));
  text-align: center;
  vertical-align: middle;
}

.home-project-select-col input {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  accent-color: var(--accent-2);
  cursor: pointer;
}

.home-project-select-col input:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.home-project-row-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: nowrap;
}

.home-table-action-btn {
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid rgba(227, 233, 244, 0.98);
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 800;
  box-shadow: none;
}

.home-table-action-btn:hover {
  background: rgba(247, 250, 255, 0.96);
}

.home-table-action-btn.danger-emphasis,
.home-table-action-btn.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 44%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger-bg) 92%, white), color-mix(in srgb, var(--danger-bg) 74%, white)),
    var(--danger-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(239, 111, 137, 0.12);
}

.home-table-action-btn.danger-emphasis:hover,
.home-table-action-btn.danger:hover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger-bg) 98%, white), color-mix(in srgb, var(--danger-bg) 82%, white)),
    color-mix(in srgb, var(--danger-bg) 84%, white);
}

.home-project-readonly-note {
  color: color-mix(in srgb, var(--danger) 72%, var(--muted));
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
}

.home-project-row--disabled {
  opacity: 0.78;
}

.home-project-logo {
  width: calc(44px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(44px * var(--ui-density));
  background: linear-gradient(135deg, #eff2ff, #fff2f5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(195, 206, 229, 0.14);
  overflow: hidden;
}

.home-project-logo.small {
  width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  border-radius: calc(9px * var(--ui-density));
  flex-basis: calc(34px * var(--ui-density));
}

.home-project-logo img {
  width: 100%;
  height: 100%;
  display: block;
}

.home-empty {
  display: grid;
  gap: calc(8px * var(--ui-density));
  padding: calc(24px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px dashed rgba(198, 210, 230, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 255, 0.90)),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(143, 154, 176, 0.08);
}

.home-empty strong {
  color: var(--heading);
}

.home-empty span {
  color: var(--muted);
}

.home-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(16px * var(--ui-density));
}

.home-pagination button {
  min-width: calc(34px * var(--ui-density));
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(10px * var(--ui-density));
  border: none;
  border-radius: calc(9px * var(--ui-density));
  color: #5d6a83;
  background: transparent;
  box-shadow: none;
  font-size: calc(15px * var(--ui-density));
  font-weight: 700;
}

.home-pagination button.active {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(102, 95, 246, 0.22);
}

.home-pagination button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.home-page-arrow svg,
.home-page-size svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  display: block;
}

.home-page-gap {
  color: #5d6a83;
}

.list-pagination-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: calc(16px * var(--ui-density)) calc(24px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
}

.list-pagination-footer-spacer {
  min-width: 0;
}

.list-pagination-center,
.list-pagination-meta {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: nowrap;
  min-width: 0;
}

.list-pagination-center {
  justify-content: center;
  justify-self: center;
}

.list-pagination-meta {
  justify-content: flex-end;
  justify-self: end;
  white-space: nowrap;
}

.home-catalog-foot {
  min-height: calc(42px * var(--ui-density));
}

:root[data-theme="dark"] .home-rail,
:root[data-theme="dark"] .home-hero,
:root[data-theme="dark"] .home-governance-strip,
:root[data-theme="dark"] .home-notice-card,
:root[data-theme="dark"] .home-message-card,
:root[data-theme="dark"] .home-catalog {
  border-color: rgba(173, 228, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(22px * var(--ui-density)) calc(52px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 124, 255, 0.08);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

:root[data-theme="dark"] .home-hero:hover,
:root[data-theme="dark"] .home-governance-strip:hover,
:root[data-theme="dark"] .home-notice-card:hover,
:root[data-theme="dark"] .home-message-card:hover,
:root[data-theme="dark"] .home-catalog:hover {
  border-color: rgba(173, 228, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(24px * var(--ui-density)) calc(56px * var(--ui-density)) rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(82, 124, 255, 0.16),
    0 0 calc(28px * var(--ui-density)) rgba(29, 209, 177, 0.08);
}

:root[data-theme="dark"] .home-rail {
  background:
    linear-gradient(180deg, rgba(10, 16, 26, 0.82), rgba(8, 13, 22, 0.66)),
    radial-gradient(calc(460px * var(--ui-density)) calc(420px * var(--ui-density)) at 0% 100%, rgba(29, 209, 177, 0.10), transparent 64%);
}

:root[data-theme="dark"] .home-hero {
  background:
    linear-gradient(180deg, rgba(10, 16, 26, 0.82), rgba(9, 15, 24, 0.66)),
    repeating-linear-gradient(135deg, rgba(82, 124, 255, 0.05) 0 calc(12px * var(--ui-density)), rgba(29, 209, 177, 0.04) calc(12px * var(--ui-density)) calc(24px * var(--ui-density))),
    radial-gradient(calc(560px * var(--ui-density)) calc(260px * var(--ui-density)) at 78% 18%, rgba(82, 124, 255, 0.12), transparent 70%);
  padding: calc(28px * var(--ui-density)) calc(30px * var(--ui-density));
}

:root[data-theme="dark"] .home-hero::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    radial-gradient(calc(680px * var(--ui-density)) calc(320px * var(--ui-density)) at 78% 0%, rgba(29, 209, 177, 0.10), transparent 70%);
}

:root[data-theme="dark"] .home-notice-card {
  background:
    linear-gradient(180deg, rgba(11, 17, 27, 0.82), rgba(9, 14, 23, 0.68)),
    repeating-linear-gradient(150deg, rgba(82, 124, 255, 0.04) 0 calc(14px * var(--ui-density)), rgba(29, 209, 177, 0.03) calc(14px * var(--ui-density)) calc(28px * var(--ui-density))),
    radial-gradient(calc(480px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 55%, rgba(82, 124, 255, 0.10), transparent 70%);
}

:root[data-theme="dark"] .home-message-card {
  background:
    linear-gradient(180deg, rgba(11, 17, 27, 0.82), rgba(9, 14, 23, 0.68)),
    radial-gradient(calc(360px * var(--ui-density)) calc(260px * var(--ui-density)) at 100% 0%, rgba(29, 209, 177, 0.08), transparent 72%);
}

:root[data-theme="dark"] .home-governance-strip {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .home-governance-item {
  justify-items: start;
}

:root[data-theme="dark"] .home-governance-item.active {
  border-color: rgba(173, 228, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(20px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(82, 124, 255, 0.14);
}

:root[data-theme="dark"] .home-catalog {
  background:
    radial-gradient(calc(960px * var(--ui-density)) calc(420px * var(--ui-density)) at 0% 0%, rgba(29, 209, 177, 0.12), transparent 68%),
    radial-gradient(calc(920px * var(--ui-density)) calc(440px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.18), transparent 70%),
    linear-gradient(90deg, rgba(12, 44, 49, 0.52) 0%, rgba(11, 20, 33, 0.62) 34%, rgba(23, 42, 82, 0.68) 100%),
    linear-gradient(180deg, rgba(12, 19, 30, 0.72), rgba(8, 13, 22, 0.48)),
    rgba(8, 13, 22, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 calc(42px * var(--ui-density)) rgba(118, 164, 255, 0.05),
    0 calc(22px * var(--ui-density)) calc(52px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 124, 255, 0.08);
}

:root[data-theme="dark"] .home-quote-card,
:root[data-theme="dark"] .home-account-shell,
:root[data-theme="dark"] .home-recent-pill,
:root[data-theme="dark"] .home-recent-empty,
:root[data-theme="dark"] .home-project-card,
:root[data-theme="dark"] .home-empty,
:root[data-theme="dark"] .home-view-toggle,
:root[data-theme="dark"] .home-page-size {
  border-color: rgba(173, 228, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(16, 22, 31, 0.92), rgba(11, 17, 26, 0.82)),
    rgba(10, 15, 24, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 124, 255, 0.06);
}

:root[data-theme="dark"] .home-rail-link,
:root[data-theme="dark"] .home-utility-btn {
  border-color: rgba(173, 228, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(17, 23, 34, 0.92), rgba(11, 16, 25, 0.82)),
    rgba(11, 16, 25, 0.82);
  color: rgba(232, 238, 248, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(82, 124, 255, 0.05);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

:root[data-theme="dark"] .home-rail-link:hover,
:root[data-theme="dark"] .home-utility-btn:hover {
  border-color: rgba(173, 228, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(19, 27, 39, 0.94), rgba(13, 20, 31, 0.86)),
    rgba(13, 20, 31, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 124, 255, 0.14),
    0 0 calc(24px * var(--ui-density)) rgba(29, 209, 177, 0.10);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .home-rail-link:active,
:root[data-theme="dark"] .home-utility-btn:active {
  transform: translateY(0);
  border-color: rgba(173, 228, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(82, 124, 255, 0.20),
    0 0 calc(28px * var(--ui-density)) rgba(29, 209, 177, 0.14);
}

:root[data-theme="dark"] .home-rail-link.active,
:root[data-theme="dark"] .home-utility-btn.active,
:root[data-theme="dark"] .home-view-toggle button.active,
:root[data-theme="dark"] .home-create-btn {
  background: var(--menu-active-gradient, var(--accent-gradient));
  color: var(--menu-active-text, #fff);
  border-color: rgba(173, 228, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(173, 228, 255, 0.18);
}

:root[data-theme="dark"] .home-rail-link.home-rail-nav-child.active {
  color: var(--heading);
  border-color: rgba(173, 228, 255, 0.30);
  background: var(--control-hover);
  box-shadow: inset calc(3px * var(--ui-density)) 0 0 var(--accent-2), 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.20);
}

:root[data-theme="dark"] .home-rail-link:hover .home-rail-icon,
:root[data-theme="dark"] .home-utility-btn:hover .home-utility-icon,
:root[data-theme="dark"] .home-rail-link.active .home-rail-icon,
:root[data-theme="dark"] .home-utility-btn.active .home-utility-icon {
  color: var(--menu-active-icon, rgba(255, 255, 255, 0.96));
  filter: drop-shadow(0 0 calc(10px * var(--ui-density)) rgba(29, 209, 177, 0.18));
}

:root[data-theme="dark"] .home-rail-group .home-rail-link.active {
  border-color: rgba(201, 242, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 calc(16px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(173, 228, 255, 0.22),
    0 0 calc(22px * var(--ui-density)) rgba(29, 209, 177, 0.22),
    0 0 calc(40px * var(--ui-density)) rgba(52, 126, 241, 0.16);
}

:root[data-theme="dark"] .home-hero-greeting,
:root[data-theme="dark"] .home-hero-head h1,
:root[data-theme="dark"] .home-side-head h2,
:root[data-theme="dark"] .home-catalog-title h2,
:root[data-theme="dark"] .home-notice-body strong,
:root[data-theme="dark"] .home-notice-empty strong,
:root[data-theme="dark"] .home-message-title,
:root[data-theme="dark"] .home-project-ident strong {
  color: var(--heading);
}

:root[data-theme="dark"] .home-notice-body p,
:root[data-theme="dark"] .home-notice-empty p,
:root[data-theme="dark"] .home-message-item,
:root[data-theme="dark"] .home-project-card-meta,
:root[data-theme="dark"] .home-project-icon-btn,
:root[data-theme="dark"] .home-copy-btn,
:root[data-theme="dark"] .home-view-toggle button,
:root[data-theme="dark"] .home-page-gap {
  color: rgba(232, 238, 248, 0.82);
}

:root[data-theme="dark"] .home-search-form input,
:root[data-theme="dark"] .home-table-action-btn,
:root[data-theme="dark"] .home-project-icon-btn-text,
:root[data-theme="dark"] .home-bulk-btn {
  border-color: rgba(173, 228, 255, 0.14);
}

:root[data-theme="dark"] .home-search-form input {
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.96), rgba(11, 17, 27, 0.92)),
    rgba(11, 17, 27, 0.92);
  color: var(--heading);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='%23aab8c7' stroke-width='1.8'/%3E%3Cpath d='m16 16 3.6 3.6' stroke='%23aab8c7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(15, 22, 32, 0.96), rgba(11, 17, 27, 0.92));
  background-repeat: no-repeat, no-repeat;
  background-position: calc(16px * var(--ui-density)) center, center;
  background-size: calc(18px * var(--ui-density)) calc(18px * var(--ui-density)), auto;
}

:root[data-theme="dark"] .home-table-action-btn,
:root[data-theme="dark"] .home-project-icon-btn-text,
:root[data-theme="dark"] .home-bulk-btn {
  background:
    linear-gradient(180deg, rgba(18, 24, 35, 0.94), rgba(13, 18, 29, 0.88)),
    rgba(13, 18, 29, 0.88);
  color: rgba(232, 238, 248, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .home-project-card {
  border-color: rgba(173, 228, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 124, 255, 0.06);
}

:root[data-theme="dark"] .home-project-card:hover {
  border-color: rgba(173, 228, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(20px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(82, 124, 255, 0.16),
    0 0 calc(28px * var(--ui-density)) rgba(29, 209, 177, 0.08);
}

:root[data-theme="dark"] .home-project-list,
:root[data-theme="dark"] .home-empty,
:root[data-theme="dark"] .home-quote-card,
:root[data-theme="dark"] .home-account-shell,
:root[data-theme="dark"] .home-recent-pill,
:root[data-theme="dark"] .home-recent-empty {
  border-color: rgba(173, 228, 255, 0.18);
}

:root[data-theme="dark"] .home-project-list:hover,
:root[data-theme="dark"] .home-empty:hover,
:root[data-theme="dark"] .home-quote-card:hover,
:root[data-theme="dark"] .home-account-shell:hover,
:root[data-theme="dark"] .home-recent-pill:hover,
:root[data-theme="dark"] .home-recent-empty:hover {
  border-color: rgba(173, 228, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(82, 124, 255, 0.14),
    0 0 calc(24px * var(--ui-density)) rgba(29, 209, 177, 0.08);
}

:root[data-theme="dark"] .home-catalog-body {
  background:
    radial-gradient(calc(900px * var(--ui-density)) calc(360px * var(--ui-density)) at 78% 0%, rgba(82, 124, 255, 0.06), transparent 72%),
    radial-gradient(calc(640px * var(--ui-density)) calc(300px * var(--ui-density)) at 0% 100%, rgba(29, 209, 177, 0.05), transparent 70%);
}

:root[data-theme="dark"] .home-hero-art img {
  opacity: 0.74;
  filter: saturate(0.82) brightness(0.86) hue-rotate(174deg) drop-shadow(0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(82, 124, 255, 0.18));
}

:root[data-theme="dark"] .home-hero-copy {
  align-content: center;
  justify-items: start;
  gap: calc(20px * var(--ui-density));
  padding-right: calc(18px * var(--ui-density));
}

:root[data-theme="dark"] .home-hero-head {
  gap: calc(20px * var(--ui-density));
}

:root[data-theme="dark"] .home-hero-greeting {
  font-size: calc(28px * var(--ui-density));
}

:root[data-theme="dark"] .home-hero-head h1 {
  font-size: calc(19px * var(--ui-density));
}

:root[data-theme="dark"] .home-recent-grid {
  gap: calc(14px * var(--ui-density));
  align-content: start;
}

:root[data-theme="dark"] .home-project-logo {
  background: linear-gradient(135deg, rgba(21, 32, 48, 0.94), rgba(29, 44, 66, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .home-participant-avatar,
:root[data-theme="dark"] .home-participant-overflow {
  border-color: rgba(10, 15, 24, 0.96);
  background: linear-gradient(135deg, rgba(20, 31, 48, 0.96), rgba(15, 23, 36, 0.92));
  color: rgba(232, 238, 248, 0.84);
}

.home-page-size {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(12px * var(--ui-density));
  min-height: calc(42px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density)) 0 calc(18px * var(--ui-density));
  border: 1px solid rgba(218, 226, 241, 0.98);
  border-radius: calc(10px * var(--ui-density));
  background: rgba(255, 255, 255, 0.72);
  color: #40506a;
  white-space: nowrap;
}

.home-page-size .custom-select {
  width: calc(68px * var(--ui-density));
  min-width: calc(68px * var(--ui-density));
  flex: 0 0 calc(68px * var(--ui-density));
}

.home-page-size .custom-select-trigger {
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(10px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.home-page-size .custom-select-menu {
  min-width: calc(68px * var(--ui-density));
}

.home-page-size .custom-select-option {
  min-height: calc(36px * var(--ui-density));
  padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density));
}

@media (max-width: 1540px) {
  .home-stage {
    grid-template-columns: var(--home-rail-desktop-width) minmax(0, 1fr) var(--home-info-rail-desktop-width);
    grid-template-rows: minmax(calc(211px * var(--ui-density)), calc(265px * var(--ui-density))) minmax(0, 1fr);
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr) calc(148px * var(--ui-density));
    padding: calc(20px * var(--ui-density)) calc(22px * var(--ui-density));
  }

  .home-hero-art img {
    width: min(calc(170px * var(--ui-density)), 100%);
    height: calc(112px * var(--ui-density));
  }

  .home-recent-grid {
    grid-template-columns: repeat(auto-fit, minmax(calc(128px * var(--ui-density)), 1fr));
  }

  .home-notice-card,
  .home-message-card {
    padding: calc(26px * var(--ui-density)) calc(24px * var(--ui-density));
  }

  .home-search-form input {
    width: calc(260px * var(--ui-density));
  }
}

@media (min-width: 1181px) and (max-width: 1540px) {
  .home-recent-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(8px * var(--ui-density));
  }

  .home-project-card {
    padding: calc(18px * var(--ui-density));
  }

  .home-project-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: calc(10px * var(--ui-density));
  }

  .home-project-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  .home-stage {
    grid-template-columns: var(--home-rail-desktop-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: calc(100vh - calc(48px * var(--ui-density)));
    min-height: calc(100svh - calc(48px * var(--ui-density)));
  }

  .home-stage.home-rail-collapsed {
    grid-template-columns: var(--collapsed-rail-layout-width) minmax(0, 1fr);
  }

  .home-rail {
    grid-row: 1 / span 4;
  }

  .home-hero {
    grid-column: 2 / 3;
    grid-row: 1;
    grid-template-columns: 1fr;
  }

  .home-hero-art {
    display: none;
  }

  .home-notice-card,
  .home-message-card {
    grid-column: 2 / 3;
  }

  .home-notice-card {
    grid-row: 3;
  }

  .home-message-card {
    grid-row: 4;
  }

  .home-frame-content {
    grid-column: 2 / 3;
    grid-row: 1 / span 4;
  }

  .home-frame-topbar {
    padding: calc(32px * var(--ui-density)) calc(26px * var(--ui-density));
  }

  .home-frame-quick-action {
    min-width: calc(170px * var(--ui-density));
    min-height: calc(64px * var(--ui-density));
  }

  .home-catalog {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .home-project-grid {
    grid-template-columns: 1fr;
  }

  .home-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-governance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 980px) {
  .home-page {
    width: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(22px * var(--ui-density));
    transform: none;
    overflow: auto;
  }

  .home-rail-toggle {
    display: none;
  }

  .home-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .home-rail,
  .home-hero,
  .home-frame-content,
  .home-notice-card,
  .home-message-card,
  .home-catalog {
    grid-column: auto;
    grid-row: auto;
  }

  .home-mobile-navigation {
    position: relative;
    z-index: 4;
    display: block;
    grid-column: auto;
    grid-row: auto;
  }

  .home-mobile-navigation-toggle {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-density));
    min-height: calc(48px * var(--ui-density));
    padding: 0 calc(16px * var(--ui-density));
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: calc(14px * var(--ui-density));
    background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent), 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--heading);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 750;
    list-style: none;
  }

  .home-mobile-navigation-toggle::-webkit-details-marker {
    display: none;
  }

  .home-mobile-navigation-toggle-icon {
    display: inline-grid;
    width: calc(20px * var(--ui-density));
    height: calc(20px * var(--ui-density));
    place-items: center;
    color: var(--accent);
  }

  .home-mobile-navigation-toggle-icon svg {
    width: 100%;
    height: 100%;
  }

  .home-mobile-navigation-toggle-hint {
    margin-left: auto;
    color: var(--muted-strong);
    font-size: calc(13px * var(--ui-density));
    font-weight: 650;
  }

  .home-mobile-navigation[open] .home-mobile-navigation-toggle-hint {
    font-size: 0;
  }

  .home-mobile-navigation[open] .home-mobile-navigation-toggle-hint::after {
    content: "收起";
    font-size: calc(13px * var(--ui-density));
  }

  .home-mobile-navigation > .home-rail {
    display: none;
  }

  .home-mobile-navigation[open] > .home-rail {
    position: absolute;
    top: calc(100% + calc(10px * var(--ui-density)));
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    max-height: min(calc(720px * var(--ui-density)), calc(100svh - calc(96px * var(--ui-density))));
    overflow: auto;
  }

  .home-stage::before {
    background-size: 140%;
    background-position: center bottom;
  }

  .home-frame-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .home-frame-topbar-actions {
    justify-content: stretch;
  }

  .home-frame-quick-action {
    width: 100%;
    min-width: 0;
  }

  .home-frame-loading-columns {
    grid-template-columns: 1fr;
  }

  .home-project-grid,
  .home-recent-grid {
    grid-template-columns: 1fr;
  }

  .home-catalog-toolbar,
  .home-search-form {
    width: 100%;
  }

  .home-catalog-toolbar {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .home-toolbar-left,
  .home-toolbar-right,
  .home-search-form {
    justify-content: flex-start;
  }

  .home-search-form input,
  .home-search-form .custom-select {
    width: 100%;
  }

  .home-view-toggle button,
  .home-create-btn {
    min-width: auto;
  }

  .home-catalog-foot {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .home-catalog-foot .list-pagination-meta {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .home-hero-greeting {
    font-size: calc(42px * var(--ui-density));
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-toast {
    transition: opacity 160ms linear;
    transform: none;
  }

  .global-toast.is-visible {
    transform: none;
  }
}

.grid.two-wide {
  grid-template-columns: 1.3fr 1fr;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
}

.home-project-draft-form {
  grid-template-columns: 1fr;
  gap: calc(18px * var(--ui-density));
}

.home-project-draft-form .field-shell,
.home-project-draft-form .field-shell-section {
  margin: 0;
}

.home-project-draft-form input::placeholder,
.home-project-draft-form textarea::placeholder,
.home-project-edit-form input::placeholder,
.home-project-edit-form textarea::placeholder {
  color: #98a2b3;
  opacity: 1;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  margin-bottom: calc(18px * var(--ui-density));
}

.card-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.card-head h3 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
}

.card-head p {
  margin: calc(8px * var(--ui-density)) 0 0;
  font-size: var(--font-size-hint);
}

.page-actions {
  display: flex;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
}

.page-actions > * {
  flex: 0 0 auto;
}

.table-card {
  display: grid;
  min-height: 0;
  min-width: 0;
}

.list-page-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(16px * var(--ui-density));
  min-height: 100%;
}

.list-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
}

.list-page-head-main,
.list-page-head-copy {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.list-page-head-copy h3 {
  margin: 0;
  color: var(--heading);
  font-size: calc(var(--font-size-title) + calc(2px * var(--ui-density)));
  font-weight: 800;
}

.list-page-head-copy p {
  margin: 0;
  max-width: 78ch;
}

.list-page-head-meta {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.list-page-head-actions {
  justify-content: flex-end;
}

.list-table-card {
  min-height: 100%;
  gap: calc(16px * var(--ui-density));
  align-content: start;
}

.list-table-toolbar {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(calc(260px * var(--ui-density)), 1fr) minmax(0, auto);
  align-items: center;
  gap: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 86%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
  box-shadow: var(--soft-shadow);
}

.list-toolbar.no-center {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

.list-toolbar.no-center .list-toolbar-section.center {
  display: none;
}

.list-toolbar-section {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  min-width: 0;
}

.list-toolbar-section.left {
  justify-content: flex-start;
}

.list-toolbar-section.center {
  justify-content: center;
}

.list-toolbar-section.right {
  justify-content: flex-end;
}

.list-toolbar-section.center > *,
.list-toolbar-section.right > * {
  min-width: 0;
}

.list-toolbar .toolbar,
.list-toolbar .inline-toolbar,
.list-toolbar form:not(.list-filter-popover) {
  margin: 0;
  width: 100%;
}

.toolbar-note {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.toolbar-note strong {
  color: var(--heading);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.toolbar-note span {
  font-size: var(--font-size-hint);
}

.delivery-list-shell-card {
  padding: calc(18px * var(--ui-density));
}

.delivery-list-section {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.milestone-empty-start {
  display: grid;
  gap: calc(12px * var(--ui-density));
  margin-top: calc(16px * var(--ui-density));
  padding-top: calc(16px * var(--ui-density));
  border-top: 1px solid var(--line);
}

.milestone-empty-start p {
  margin: calc(4px * var(--ui-density)) 0 0;
}

.milestone-empty-start__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
}

.milestone-empty-start__actions button {
  min-height: calc(38px * var(--ui-density));
}

.table-scroll {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  max-height: min(52vh, calc(560px * var(--ui-density)));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  background:
    radial-gradient(calc(620px * var(--ui-density)) calc(320px * var(--ui-density)) at 56% 28%, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  box-shadow:
    var(--layer-input-shadow),
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
  background-clip: padding-box;
  isolation: isolate;
}

/* 首页列表模式由项目区自身决定可用高度，不能沿用通用表格的视口上限。 */
.home-project-list.table-scroll {
  height: 100%;
  max-height: none;
}

.table-scroll-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-radius: inherit;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.table-scroll table {
  width: max-content;
  min-width: 100%;
}

.table-scroll thead th {
  white-space: nowrap;
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 84%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 98%, white 2%), color-mix(in srgb, var(--panel) 96%, white 4%));
}

.table-scroll td {
  min-width: calc(88px * var(--ui-density));
  word-break: keep-all;
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 66%, transparent);
}

.table-scroll td:first-child,
.table-scroll th:first-child {
  min-width: calc(160px * var(--ui-density));
}

.table-scroll-pagination {
  margin-top: calc(14px * var(--ui-density));
}

.table-scroll-pagination .list-pagination-meta {
  gap: calc(14px * var(--ui-density));
}

.table-scroll-page-size {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  white-space: nowrap;
}

.table-scroll-page-size select {
  min-width: calc(82px * var(--ui-density));
}

.table-scroll-page-size span {
  color: var(--muted);
}

.table-scroll tbody tr:last-child td {
  border-bottom: none;
}

.table-scroll tbody tr:not(.selected-row):not(:has(td[colspan])) {
  transition: background 150ms ease, box-shadow 150ms ease;
}

.table-scroll tbody tr:not(.selected-row):not(:has(td[colspan])):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-3) 8%, transparent)),
    color-mix(in srgb, var(--control-hover) 66%, transparent);
  box-shadow:
    inset calc(3px * var(--ui-density)) 0 0 color-mix(in srgb, var(--accent) 64%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent);
}

.table-scroll tbody tr:not(.selected-row):not(:has(td[colspan])):hover td {
  background: transparent;
}

:root[data-theme="dark"] .table-scroll {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.90), rgba(10, 16, 25, 0.78)),
    radial-gradient(calc(420px * var(--ui-density)) calc(220px * var(--ui-density)) at 100% 0%, rgba(82, 124, 255, 0.08), transparent 72%),
    rgba(10, 15, 24, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(16px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(82, 124, 255, 0.06);
  background-clip: padding-box;
}

:root[data-theme="dark"] .table-scroll thead th {
  border-bottom-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 30, 44, 0.92), rgba(14, 22, 34, 0.82)),
    rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .table-scroll td {
  border-bottom-color: rgba(173, 228, 255, 0.10);
}

:root[data-theme="dark"] .table-scroll tbody tr:not(.selected-row):not(:has(td[colspan])):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-3) 12%, transparent)),
    rgba(255, 255, 255, 0.04);
}

.collection-board {
  min-height: calc(100vh - calc(125px * var(--ui-density)));
  min-height: calc(100dvh - calc(125px * var(--ui-density)));
}

.collection-board .workshop-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
}

/* 测试计划直接复用需求采集普通表格母版；这里只定义业务列宽。 */
.quality-plans-table {
  width: max-content;
  min-width: calc(1600px * var(--ui-density));
  table-layout: fixed;
}

.quality-plans-table th,
.quality-plans-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.quality-plans-table th:nth-child(1),
.quality-plans-table td:nth-child(1) {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  text-align: center;
}
.quality-plans-table th:nth-child(2),
.quality-plans-table td:nth-child(2) { width: calc(280px * var(--ui-density)); }
.quality-plans-table th:nth-child(3),
.quality-plans-table td:nth-child(3) { width: calc(112px * var(--ui-density)); }
.quality-plans-table th:nth-child(4),
.quality-plans-table td:nth-child(4) { width: calc(156px * var(--ui-density)); }
.quality-plans-table th:nth-child(5),
.quality-plans-table td:nth-child(5) { width: calc(180px * var(--ui-density)); }
.quality-plans-table th:nth-child(6),
.quality-plans-table td:nth-child(6) { width: calc(138px * var(--ui-density)); }
.quality-plans-table th:nth-child(7),
.quality-plans-table td:nth-child(7) { width: calc(220px * var(--ui-density)); }
.quality-plans-table th:nth-child(8),
.quality-plans-table td:nth-child(8) { width: calc(228px * var(--ui-density)); }
.quality-plans-table th:nth-child(9),
.quality-plans-table td:nth-child(9) { width: calc(144px * var(--ui-density)); }
.quality-plans-table th:nth-child(10),
.quality-plans-table td:nth-child(10) { width: calc(88px * var(--ui-density)); }

.quality-plans-table .list-sequence-cell { text-align: center; }
.quality-plans-table .link-like,
.quality-plans-table .link-like:hover,
.quality-plans-table .link-like:focus-visible {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.quality-plans-table .link-like:hover,
.quality-plans-table .link-like:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: calc(3px * var(--ui-density)); }

.quality-plans-table td small {
  display: block;
  margin-top: calc(4px * var(--ui-density));
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.workshop-table {
  min-width: calc(1880px * var(--ui-density));
  table-layout: fixed;
}

.workshop-table th,
.workshop-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.workshop-table th:nth-child(1),
.workshop-table td:nth-child(1) { width: calc(330px * var(--ui-density)); }
.workshop-table th:nth-child(2),
.workshop-table td:nth-child(2) { width: calc(136px * var(--ui-density)); }
.workshop-table th:nth-child(3),
.workshop-table td:nth-child(3) { width: calc(128px * var(--ui-density)); }
.workshop-table th:nth-child(4),
.workshop-table td:nth-child(4) { width: calc(136px * var(--ui-density)); }
.workshop-table th:nth-child(5),
.workshop-table td:nth-child(5),
.workshop-table th:nth-child(6),
.workshop-table td:nth-child(6),
.workshop-table th:nth-child(9),
.workshop-table td:nth-child(9) { width: calc(126px * var(--ui-density)); }
.workshop-table th:nth-child(7),
.workshop-table td:nth-child(7),
.workshop-table th:nth-child(8),
.workshop-table td:nth-child(8) { width: calc(150px * var(--ui-density)); }
.workshop-table th:nth-child(10),
.workshop-table td:nth-child(10) { width: calc(190px * var(--ui-density)); }
.workshop-table th:nth-child(11),
.workshop-table td:nth-child(11) { width: calc(420px * var(--ui-density)); }

.initiation-page {
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-height: 0;
}

.initiation-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.initiation-card {
  min-height: 0;
}

.initiation-toolbar {
  align-items: flex-start;
}

.initiation-filter-form {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  width: 100%;
}

.initiation-filter-form input[type="text"],
.initiation-filter-form input:not([type]),
.initiation-filter-form select {
  min-width: calc(180px * var(--ui-density));
}

.initiation-filter-form input[name="q"] {
  flex: 1 1 calc(260px * var(--ui-density));
  min-width: calc(260px * var(--ui-density));
}

.initiation-check-filter,
.initiation-checkbox {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--control) 92%, transparent);
  color: var(--text);
}

.initiation-check-filter input,
.initiation-checkbox input {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  accent-color: var(--accent);
}

.initiation-load-error {
  margin: 0 0 calc(16px * var(--ui-density));
}

.initiation-table-scroll {
  max-height: none;
  min-height: 0;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
}

.initiation-table {
  min-width: calc(1500px * var(--ui-density));
  table-layout: fixed;
}

.initiation-table th,
.initiation-table td,
.initiation-doc-table th,
.initiation-doc-table td,
.initiation-stakeholder-table th,
.initiation-stakeholder-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.initiation-table th:nth-child(1),
.initiation-table td:nth-child(1) { width: calc(280px * var(--ui-density)); }
.initiation-table th:nth-child(2),
.initiation-table td:nth-child(2) { width: calc(140px * var(--ui-density)); }
.initiation-table th:nth-child(3),
.initiation-table td:nth-child(3) { width: calc(180px * var(--ui-density)); }
.initiation-table th:nth-child(4),
.initiation-table td:nth-child(4) { width: calc(140px * var(--ui-density)); }
.initiation-table th:nth-child(5),
.initiation-table td:nth-child(5) { width: calc(140px * var(--ui-density)); }
.initiation-table th:nth-child(6),
.initiation-table td:nth-child(6) { width: calc(260px * var(--ui-density)); }
.initiation-table th:nth-child(7),
.initiation-table td:nth-child(7) { width: calc(220px * var(--ui-density)); }

tbody tr[data-initiation-row] {
  cursor: pointer;
}

tbody tr[data-initiation-row]:hover {
  background: var(--control-hover);
}

.initiation-title-cell,
.initiation-owner-cell,
.initiation-binding-cell,
.initiation-range-cell,
.initiation-doc-cell,
.initiation-record-cell {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.initiation-title-cell span,
.initiation-owner-cell span,
.initiation-binding-cell span,
.initiation-range-cell span,
.initiation-doc-cell span,
.initiation-record-cell span,
.initiation-repository-summary span {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.initiation-owner-cell strong,
.initiation-range-cell strong,
.initiation-record-cell strong,
.initiation-repository-summary strong,
.initiation-repository-card strong {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.initiation-binding-cell .pill {
  justify-self: start;
}

.initiation-row-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
}

.initiation-row-actions button,
.initiation-row-actions .button-link {
  min-height: calc(36px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: var(--font-size-hint);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.initiation-row-actions .danger-link {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  background: var(--danger-bg);
}

.initiation-form textarea {
  min-height: calc(150px * var(--ui-density));
}

.initiation-detail-head,
.initiation-tab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  margin-bottom: calc(18px * var(--ui-density));
}

.initiation-detail-head h3 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
}

.initiation-detail-head p {
  margin: calc(8px * var(--ui-density)) 0 0;
}

.initiation-detail-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
}

.initiation-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  padding: calc(22px * var(--ui-density));
  min-width: 0;
}

.initiation-panel.full {
  grid-column: 1 / -1;
}

.initiation-panel h4 {
  margin: 0 0 calc(14px * var(--ui-density));
  color: var(--heading);
  font-size: var(--font-size-title);
}

.initiation-panel p {
  margin: 0;
  max-width: 74ch;
}

.initiation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin-bottom: calc(14px * var(--ui-density));
}

.initiation-inline-actions {
  margin-top: calc(16px * var(--ui-density));
}

.initiation-repository-summary {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.initiation-repository-editor {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.initiation-repository-list {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.initiation-repository-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: calc(14px * var(--ui-density));
  align-items: end;
  padding: calc(18px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.initiation-repository-row .field-shell {
  margin: 0;
}

.initiation-repository-row-actions {
  display: grid;
  gap: calc(10px * var(--ui-density));
  justify-items: end;
  align-self: center;
}

.initiation-repository-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
}

.initiation-repository-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(280px * var(--ui-density)), 1fr));
  gap: calc(16px * var(--ui-density));
}

.initiation-repository-card {
  display: grid;
  gap: calc(8px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.initiation-repository-card a {
  color: var(--accent-2);
  text-decoration: none;
  word-break: break-all;
}

.initiation-doc-table {
  min-width: calc(1100px * var(--ui-density));
  table-layout: fixed;
}

.initiation-doc-list-table {
  min-width: calc(1320px * var(--ui-density));
}

.initiation-doc-list-table th:nth-child(1),
.initiation-doc-list-table td:nth-child(1) { width: calc(320px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(2),
.initiation-doc-list-table td:nth-child(2) { width: calc(150px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(3),
.initiation-doc-list-table td:nth-child(3) { width: calc(270px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(4),
.initiation-doc-list-table td:nth-child(4) { width: calc(180px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(5),
.initiation-doc-list-table td:nth-child(5) { width: calc(140px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(6),
.initiation-doc-list-table td:nth-child(6) { width: calc(180px * var(--ui-density)); }
.initiation-doc-list-table th:nth-child(7),
.initiation-doc-list-table td:nth-child(7) { width: calc(230px * var(--ui-density)); }

.initiation-stakeholder-table {
  min-width: calc(1080px * var(--ui-density));
  table-layout: fixed;
}

.inline-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  margin-bottom: calc(18px * var(--ui-density));
}

.inline-toolbar .toolbar {
  margin: 0;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.code-card {
  margin: 0;
  padding: calc(20px * var(--ui-density));
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  width: 100%;
  gap: var(--app-shell-gap);
  padding: var(--app-shell-padding);
  transform: none;
  overflow: hidden;
}

.app-shell.sidebar-hidden {
  grid-template-columns: var(--collapsed-rail-layout-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--app-shell-sidebar-top);
  height: calc(100vh - var(--app-shell-sidebar-height-offset));
  height: calc(100dvh - var(--app-shell-sidebar-height-offset));
  background: var(--panel);
  color: var(--text);
  padding: calc(18px * var(--ui-density)) calc(16px * var(--ui-density));
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(26px * var(--ui-density));
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
  overflow: hidden;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.sidebar-hidden .sidebar {
  align-items: center;
  padding: calc(14px * var(--ui-density)) calc(12px * var(--ui-density));
  z-index: 20;
  overflow: visible;
}

.sidebar:has(.sidebar-workspace-switch-menu:not([hidden])) {
  overflow: visible;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  font-weight: 700;
  font-size: calc(24px * var(--ui-density));
}

.brand-mark {
  width: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  border-radius: 0;
  object-fit: contain;
  display: block;
  flex: 0 0 calc(40px * var(--ui-density));
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.project-picker {
  position: relative;
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.project-picker small {
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.project-select {
  justify-content: space-between;
  min-height: calc(52px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density)) calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  background: var(--control);
  color: var(--text);
  border-color: var(--line);
  font-size: var(--font-size-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.project-select span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-chevron {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--font-size-title);
  transition: transform 160ms ease;
}

.project-picker.open .project-chevron {
  transform: rotate(180deg);
}

.project-options {
  display: none;
  position: absolute;
  z-index: 12;
  top: calc(100% + calc(8px * var(--ui-density)));
  left: 0;
  width: 100%;
  max-height: min(calc(360px * var(--ui-density)), 48vh);
  overflow: auto;
  gap: calc(8px * var(--ui-density));
  padding: calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--ui-density));
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.project-picker.open .project-options {
  display: grid;
}

.project-option {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-height: calc(54px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  background: transparent;
  box-shadow: none;
}

.project-option span,
.project-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-option span {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.project-option small {
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
}

.project-option.active,
.project-option:hover {
  background: var(--active-surface);
  border-color: var(--line);
}

.project-option.active span,
.project-option.active small,
.project-option:hover span,
.project-option:hover small {
  color: var(--menu-active-text);
}

.nav {
  display: grid;
  gap: calc(10px * var(--ui-density));
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow: auto;
  /* The first item lifts on hover; retain a small in-scroll safety edge so
     its top border and glow never meet the scrollport's clipping edge. */
  padding-top: calc(3px * var(--ui-density));
  padding-right: calc(2px * var(--ui-density));
  padding-bottom: calc(2px * var(--ui-density));
}

.nav-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density));
  margin: calc(6px * var(--ui-density)) 0 calc(2px * var(--ui-density));
}

.nav-toolbar-btn {
  width: 100%;
  min-height: calc(38px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(241, 247, 255, 0.58)),
    rgba(255, 255, 255, 0.32);
  color: #66728a;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(120, 141, 177, 0.08);
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
  transition:
    transform 140ms ease,
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.nav-toolbar-btn:hover,
.nav-toolbar-btn.active,
.nav-toolbar-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--accent-shadow);
}

.nav-toolbar-btn:hover {
  transform: translateY(-1px);
}

.nav-toolbar-icon {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  line-height: 1;
  display: inline-grid;
  place-items: center;
}

.nav-toolbar-icon svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  display: block;
}

.nav-group {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.nav button,
.sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  text-align: left;
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: calc(11px * var(--ui-density)) calc(12px * var(--ui-density));
  box-shadow: none;
  font-weight: 800;
  min-height: calc(48px * var(--ui-density));
  background: rgba(255, 255, 255, 0.38);
}

.mobile-navigation-toggle {
  display: none;
}

.nav-parent {
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.42);
  font-size: var(--font-size-title);
}

.nav-parent.nav-direct {
  justify-content: flex-start;
}

.nav-parent.nav-direct.active {
  color: var(--menu-active-text, #5f66ee);
  background: var(--active-surface);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.sidebar-toggle {
  justify-content: center;
  align-self: flex-end;
  width: auto;
  min-width: calc(88px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  gap: calc(4px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--panel-strong);
  color: var(--muted-strong);
  flex: 0 0 auto;
}

.sidebar-hidden .sidebar-toggle {
  box-sizing: border-box;
  display: grid;
  align-self: center;
  width: calc(40px * var(--ui-density));
  min-width: calc(40px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: 0;
  place-items: center;
}

.sidebar-toggle__icon {
  display: grid;
  width: calc(20px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  flex: 0 0 calc(20px * var(--ui-density));
  place-items: center;
  line-height: 0;
}

.sidebar-hidden .sidebar-toggle__label {
  display: none;
}

.sidebar-hidden .sidebar {
  box-sizing: border-box;
  width: var(--collapsed-rail-layout-width);
  padding: calc(8px * var(--ui-density)) calc(4px * var(--ui-density));
}

.nav-icon {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  flex: 0 0 calc(26px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  color: #6b7890;
  line-height: 1;
}

.nav-icon svg {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  display: block;
}

.nav-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-disclosure-dot {
  margin-left: auto;
  width: calc(7px * var(--ui-density));
  height: calc(7px * var(--ui-density));
  flex: 0 0 calc(7px * var(--ui-density));
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.78;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav-group.expanded .nav-disclosure-dot {
  background: var(--menu-active-gradient, var(--accent-gradient));
  box-shadow:
    0 0 0 calc(2px * var(--ui-density)) color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 calc(9px * var(--ui-density)) color-mix(in srgb, var(--accent) 58%, transparent);
  opacity: 1;
  transform: scale(1.15);
}

.nav-children {
  display: grid;
  grid-template-rows: 0fr;
  padding-left: calc(34px * var(--ui-density));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s linear 280ms;
}

.nav-children__inner {
  display: grid;
  min-height: 0;
  gap: 0;
  overflow: hidden;
  transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-group.expanded .nav-children {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s;
}

.nav-group.expanded .nav-children__inner {
  gap: calc(6px * var(--ui-density));
  padding-top: calc(2px * var(--ui-density));
  overflow: visible;
}

.nav-children .nav-child {
  opacity: 0;
  transform: translateY(calc(-4px * var(--ui-density)));
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-group.expanded .nav-children .nav-child {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 70ms;
}

.nav .nav-child {
  min-height: calc(38px * var(--ui-density));
  padding: calc(9px * var(--ui-density)) calc(12px * var(--ui-density));
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.24);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.3;
}

.nav-child span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-child small {
  margin-left: auto;
  padding: calc(3px * var(--ui-density)) calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
  white-space: nowrap;
}

.nav-child.reserved {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.nav-child.reserved:hover {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
  transform: none;
}

.sidebar-hidden .brand,
.sidebar-hidden .project-picker,
.sidebar-hidden .nav-toolbar {
  display: none;
}

.sidebar-hidden .nav {
  display: grid;
  width: 100%;
  gap: calc(8px * var(--ui-density));
  overflow: visible;
}

.sidebar-hidden .nav-parent {
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
  min-height: calc(48px * var(--ui-density));
  padding: 0;
}

.sidebar-hidden .nav-label,
.sidebar-hidden .nav-disclosure-dot,
.sidebar-hidden .nav-children {
  display: none;
}

.sidebar-hidden .nav-children {
  display: none !important;
}

/* The collapsed project rail keeps only the account avatar at the bottom.
   Its action surface remains fully available while secondary footer content is
   intentionally removed from the compact navigation mode. */
.sidebar-hidden .sidebar-footer {
  display: grid;
  width: 100%;
  margin-top: auto;
}

.sidebar-hidden .sidebar-preferences,
.sidebar-hidden .sidebar-user-copy,
.sidebar-hidden .sidebar-user-menu {
  display: none;
}

.sidebar-hidden .sidebar-user {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  padding: calc(4px * var(--ui-density));
  place-items: center;
}

.sidebar-hidden .sidebar-user summary {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  justify-items: center;
}

.sidebar-hidden .sidebar-avatar {
  width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
}

.nav button.active {
  color: var(--menu-active-text, #5f66ee);
  background: var(--active-surface);
  border-color: var(--line);
  box-shadow: none;
}

.nav button:not(.active):not(.reserved):hover {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.38);
  border-color: var(--menu-hover-border, rgba(90, 118, 245, 0.50));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(90, 118, 245, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26));
  transform: translateY(-1px);
}

.nav-parent:hover {
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.42);
  border-color: var(--menu-hover-border, rgba(90, 118, 245, 0.50));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(90, 118, 245, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26));
  transform: translateY(-1px);
}

.nav button.active .nav-icon {
  color: var(--menu-active-icon, #5f66ee);
}

.nav button:not(.active):not(.reserved):hover .nav-icon,
.nav-parent:hover .nav-icon {
  color: #6b7890;
}

.nav-child.active {
  color: var(--menu-active-text, #5f66ee);
  background: var(--active-surface);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.nav-child:not(.active):not(.reserved):hover {
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.24);
  border-color: var(--menu-hover-border, rgba(90, 118, 245, 0.50));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(90, 118, 245, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26));
  transform: translateY(-1px);
}

/* Sidebar menu controls are pills. The generic menu-hover shadow is deliberately
   too broad for this compact navigation, so override it with a contour-only
   treatment: a fine rounded ring and an inner highlight, never an outer blur. */
.nav-parent,
.nav-child {
  border-radius: calc(999px * var(--ui-density));
}

.nav button.nav-parent:not(.active):not(.reserved):hover,
.nav button.nav-child:not(.active):not(.reserved):hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--panel-strong) 72%, transparent),
    0 0 0 calc(1px * var(--ui-density)) color-mix(in srgb, var(--accent) 32%, transparent);
}

.nav button.nav-parent:focus-visible,
.nav button.nav-child:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--panel-strong) 76%, transparent),
    0 0 0 calc(2px * var(--ui-density)) color-mix(in srgb, var(--accent) 48%, transparent);
}

:root[data-theme="dark"] .nav-parent {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.10);
}

:root[data-theme="dark"] .nav-parent.nav-direct.active {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--active-surface));
  border-color: var(--menu-hover-border, rgba(170, 184, 255, 0.38));
}

:root[data-theme="dark"] .nav-toolbar-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(8, 16, 34, 0.18);
}

:root[data-theme="dark"] .nav-toolbar-btn:hover,
:root[data-theme="dark"] .nav-toolbar-btn.active,
:root[data-theme="dark"] .nav-toolbar-btn[aria-pressed="true"] {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--accent-gradient));
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--menu-active-shadow, var(--accent-shadow));
}

:root[data-theme="dark"] .nav button.active {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--accent-gradient));
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--menu-active-shadow, var(--accent-shadow));
}

:root[data-theme="dark"] .nav button:not(.active):not(.reserved):hover,
:root[data-theme="dark"] .nav-parent:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--menu-hover-border, rgba(86, 156, 255, 0.42));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(86, 156, 255, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(86, 156, 255, 0.26), 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18));
}

:root[data-theme="dark"] .nav button.active .nav-icon {
  color: var(--menu-active-icon, #fff);
}

:root[data-theme="dark"] .nav button:not(.active):not(.reserved):hover .nav-icon,
:root[data-theme="dark"] .nav-parent:hover .nav-icon {
  color: inherit;
}

:root[data-theme="dark"] .nav-child {
  color: #fff;
  background: rgb(2 7 18 / 0%);
  border-color: rgb(255 255 255 / 15%);
}

:root[data-theme="dark"] .nav-child.active {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--active-surface));
  border-color: var(--menu-hover-border, rgba(170, 184, 255, 0.38));
  box-shadow: none;
}

:root[data-theme="dark"] .nav-child:not(.active):not(.reserved):hover {
  color: #fff;
  background: rgb(2 7 18 / 0%);
  border-color: var(--menu-hover-border, rgba(170, 184, 255, 0.38));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(170, 184, 255, 0.14), 0 0 calc(18px * var(--ui-density)) rgba(107, 140, 255, 0.24), 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18));
}

:root[data-theme="dark"] .nav button.nav-parent:not(.active):not(.reserved):hover,
:root[data-theme="dark"] .nav button.nav-child:not(.active):not(.reserved):hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--panel-strong) 40%, transparent),
    0 0 0 calc(1px * var(--ui-density)) color-mix(in srgb, var(--accent) 38%, transparent);
}

:root[data-theme="dark"] .nav-child.reserved,
:root[data-theme="dark"] .nav-child.reserved:hover {
  color: rgba(170, 184, 199, 0.62);
  background: rgba(2, 8, 18, 0.16);
}

:root[data-theme="dark"] .nav-child small {
  color: rgba(170, 184, 199, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(22px * var(--ui-density));
  overflow: hidden;
}

.topbar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(26px * var(--ui-density));
  padding: calc(26px * var(--ui-density)) calc(30px * var(--ui-density));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.topbar > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topbar h2 {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: 1.08;
  color: var(--heading);
  font-weight: 700;
}

.topbar p {
  margin: calc(12px * var(--ui-density)) 0 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: stretch;
  gap: calc(16px * var(--ui-density));
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: stretch;
}

.workspace-switch-menu {
  position: absolute;
  z-index: 24;
  top: calc(100% + calc(10px * var(--ui-density)));
  right: 0;
  width: min(calc(360px * var(--ui-density)), calc(100vw - calc(36px * var(--ui-density))));
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding: calc(10px * var(--ui-density));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--layer-surface);
  box-shadow: var(--layer-accent-shadow);
  backdrop-filter: var(--glass);
}

.workspace-switch-menu[hidden] {
  display: none;
}

/* Account-menu switchers must open into the available rail space, not below
   the footer where the home rail intentionally clips overflow. */
.home-workspace-switcher .home-workspace-switch-menu,
.sidebar-workspace-switcher .sidebar-workspace-switch-menu {
  top: auto;
  right: 0;
  bottom: calc(100% + calc(8px * var(--ui-density)));
  width: 100%;
  max-height: min(calc(356px * var(--ui-density)), calc(100svh - calc(120px * var(--ui-density))));
  overflow-y: auto;
}

.acceptance-record-details {
  display: grid;
  gap: calc(16px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.acceptance-record-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  cursor: pointer;
  color: var(--heading);
  font-weight: 700;
  list-style: none;
}

.acceptance-record-details > summary::-webkit-details-marker {
  display: none;
}

.acceptance-record-details > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: calc(22px * var(--ui-density));
  line-height: 1;
}

.acceptance-record-details[open] > summary::after {
  content: "-";
}

.acceptance-record-details > summary small {
  color: var(--muted);
  font-size: var(--font-size-assist);
  font-weight: 600;
  text-align: right;
}

.acceptance-record-details__body {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.workspace-switch-menu__option {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.workspace-switch-menu__manage,
.workspace-switch-menu__create {
  width: 100%;
  margin-top: calc(6px * var(--ui-density));
  border-radius: var(--radius-sm);
  justify-content: center;
}

.workspace-switch-menu__manage {
  background: var(--control);
  color: var(--heading);
}

.workspace-switch-menu__manage:hover,
.workspace-switch-menu__manage:focus-visible {
  background: var(--control-hover);
  border-color: var(--line-strong);
}

.workspace-overview {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.workspace-members {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-density));
  min-height: 0;
}

/* 成员列表直接沿用消息管理 ordinary-list 母版；访问区占据上方，列表承接剩余高度。 */
.workspace-members.ordinary-list-shell {
  /* The pending-invitations block is conditional.  Keep the list in the
     flexible final row when it is absent; otherwise the list collapses to
     content height and only a few member rows are visible. */
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.workspace-members.ordinary-list-shell.has-pending-invitations {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.workspace-members__access {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

.workspace-members__access-copy,
.workspace-members__access-controls {
  display: grid;
  align-content: start;
  gap: calc(12px * var(--ui-density));
}

.workspace-members__access-controls {
  width: 100%;
}

.workspace-members__access h3,
.workspace-members__access p {
  margin: 0;
}

.workspace-members__access p,
.workspace-members__notice span,
.workspace-members__enterprise-login > span {
  color: var(--muted);
}

.workspace-members__enterprise-login {
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding-bottom: calc(12px * var(--ui-density));
  border-bottom: 1px dashed var(--line);
}

.workspace-members__enterprise-login > span {
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.workspace-members__enterprise-login code {
  min-width: 0;
  overflow: hidden;
  padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--muted-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-members__list {
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.workspace-members__list-card {
  min-width: 0;
  min-height: 0;
}

.workspace-members__list-card .list-toolbar-section.left,
.workspace-members__list-card .list-toolbar-section.right {
  min-width: 0;
}

.workspace-members__list-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.workspace-members__member-table-scroll {
  min-height: 0;
  height: 100%;
  max-height: none;
}

.workspace-members__member-table-scroll .table-scroll-viewport {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* 成员列表默认一页为 10 条。桌面端保留 8–10 行的稳定可视范围；
   超出可视范围的行由表格自身纵向滚动承接，避免列表被页面无限撑高。 */
@media (min-width: 981px) {
  /* 页面说明与邀请区仍由首页右侧 home-frame 纵向滚动承接；
     表格视口则独立处理默认页内超过 8 行的纵向及宽表横向滚动。 */
  .home-frame-content:has(> .home-frame-content-body > .workspace-members.ordinary-list-shell) {
    grid-template-rows: auto auto;
    align-content: start;
  }

  .home-frame-content-body > .workspace-members.ordinary-list-shell {
    --workspace-members-table-visible-height: calc(600px * var(--ui-density));
    --workspace-members-list-content-min-height: calc(680px * var(--ui-density));
    height: auto;
    min-height: calc(1080px * var(--ui-density));
  }

  .workspace-members__list {
    min-height: calc(800px * var(--ui-density));
  }

  .workspace-members__list-content {
    /* 固定表格视口轨道，禁止“每页 20 / 50 条”把成员列表继续撑高。 */
    grid-template-rows: var(--workspace-members-table-visible-height) auto;
    height: var(--workspace-members-list-content-min-height);
    min-height: var(--workspace-members-list-content-min-height);
    max-height: var(--workspace-members-list-content-min-height);
    align-content: start;
  }

  .workspace-members__list-content .workspace-members__member-table-scroll {
    height: var(--workspace-members-table-visible-height);
    min-height: var(--workspace-members-table-visible-height);
    max-height: var(--workspace-members-table-visible-height);
  }
}

.workspace-members__member-table-scroll.table-scroll .workspace-members__member-table {
  /* 与消息管理普通列表保持同一宽表画布：宽屏填满表格卡片，
     窄屏由当前表格视口横滚，不压缩邮箱、状态或完整行级操作。 */
  width: 100%;
  min-width: calc(1484px * var(--ui-density));
  table-layout: fixed;
}

.workspace-members__member-table th:last-child,
.workspace-members__member-table td:last-child {
  /* 该宽度由完整的紧凑按钮组反推，表头和按钮使用同一列画布，
     不让行内操作从表头右侧溢出。 */
  width: calc(236px * var(--ui-density));
  min-width: calc(236px * var(--ui-density));
}

.workspace-members__pagination {
  min-width: 0;
  margin-top: calc(24px * var(--ui-density));
}

.workspace-members__actions {
  justify-content: flex-end;
}

.workspace-members__list-card .list-toolbar-section.left {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
}

.workspace-members__list-card .list-toolbar-section.left button {
  white-space: nowrap;
}

.workspace-member-create-form {
  align-content: start;
}

.workspace-member-password {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(8px * var(--ui-density));
}

.workspace-member-password > button {
  white-space: nowrap;
}

.workspace-members__empty h3,
.workspace-members__empty p {
  margin: 0;
}

.workspace-members__empty p {
  margin-top: calc(8px * var(--ui-density));
  color: var(--muted);
}

.workspace-members__notice {
  display: grid;
  gap: calc(4px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-left: calc(3px * var(--ui-density)) solid var(--accent-2);
  background: var(--panel-2);
}

.workspace-members__invite {
  display: grid;
  grid-template-columns: minmax(calc(180px * var(--ui-density)), 0.7fr) minmax(0, 1.3fr);
  gap: calc(18px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--panel);
}

.workspace-members__invite h3,
.workspace-members__invite p {
  margin: 0;
}

.workspace-members__invite p {
  margin-top: calc(6px * var(--ui-density));
  color: var(--muted);
}

.workspace-members__invite-form {
  display: grid;
  grid-template-columns: minmax(calc(180px * var(--ui-density)), 1.2fr) minmax(calc(130px * var(--ui-density)), 0.8fr) minmax(calc(120px * var(--ui-density)), 0.7fr) auto;
  align-items: end;
  gap: calc(10px * var(--ui-density));
}

.workspace-members__invite-form label {
  display: grid;
  gap: calc(5px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.workspace-members__invite-result {
  grid-column: 1 / -1;
  min-height: 1.2em;
}

.workspace-subscription {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.workspace-subscription__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.workspace-subscription__summary > div,
.workspace-plan-card,
.workspace-order-confirm,
.workspace-subscription__empty {
  min-width: 0;
}

.workspace-subscription__summary > div {
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.workspace-subscription__summary span,
.workspace-section-heading p,
.workspace-plan-card__facts dt,
.workspace-plan-card__restricted,
.workspace-subscription__empty p,
.workspace-order-confirm p {
  color: var(--muted);
}

.workspace-subscription__summary strong {
  color: var(--heading);
}

.workspace-section-heading,
.workspace-plan-card__head,
.workspace-order-confirm,
.workspace-addon-confirm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.workspace-section-heading h3,
.workspace-section-heading p,
.workspace-plan-card h3,
.workspace-plan-card__facts,
.workspace-subscription__empty h3,
.workspace-subscription__empty p,
.workspace-order-confirm h3,
.workspace-order-confirm p {
  margin: 0;
}

.workspace-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.workspace-plan-card {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.workspace-plan-card[data-current="true"] {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.workspace-plan-card__price {
  color: var(--heading);
  font-size: var(--font-size-title);
  line-height: 1.1;
}

.workspace-plan-card__price small {
  margin-left: calc(4px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-assist);
  font-weight: 600;
}

.workspace-plan-card__facts {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.workspace-plan-card__facts div {
  display: grid;
  gap: calc(3px * var(--ui-density));
}

.workspace-plan-card__facts dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.workspace-plan-card__action {
  display: flex;
  align-items: center;
  min-height: calc(38px * var(--ui-density));
}

.workspace-plan-card__current {
  color: var(--ok);
  font-weight: 700;
}

.workspace-order-confirm {
  align-items: center;
  flex-wrap: wrap;
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.workspace-order-confirm__actions,
.workspace-overview__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
}

.workspace-order-confirm__result {
  flex-basis: 100%;
}

.workspace-orders-table table {
  min-width: calc(860px * var(--ui-density));
}

.workspace-usage-page {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.workspace-usage-page__summary,
.workspace-usage-page__detail-note {
  display: grid;
  gap: calc(5px * var(--ui-density));
}

.workspace-usage-page__summary span,
.workspace-usage-page__summary small,
.workspace-usage-page__detail-note p,
.workspace-usage-detail dt,
.workspace-addon-card p,
.workspace-addon-card small,
.workspace-addon-confirm__quantity {
  color: var(--muted);
}

.workspace-usage-page__summary strong,
.workspace-usage-detail dd,
.workspace-addon-card h3 {
  color: var(--heading);
}

.workspace-usage-page__detail-note h3,
.workspace-usage-page__detail-note p,
.workspace-usage-page__notice h3,
.workspace-usage-page__notice p,
.workspace-usage-detail h3,
.workspace-usage-detail dl,
.workspace-addon-card h3,
.workspace-addon-card p {
  margin: 0;
}

.workspace-usage-detail-grid,
.workspace-addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.workspace-usage-detail,
.workspace-addon-card {
  display: grid;
  min-width: 0;
  gap: calc(14px * var(--ui-density));
}

.workspace-usage-detail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.workspace-usage-detail__head strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.workspace-usage-detail__track {
  height: calc(10px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: var(--progress-track);
}

.workspace-usage-detail__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.workspace-usage-detail__track[data-level="warn"] i {
  background: var(--warn);
}

.workspace-usage-detail__track[data-level="risk"] i {
  background: var(--danger);
}

.workspace-usage-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
}

.workspace-usage-detail dl > div {
  display: grid;
  gap: calc(3px * var(--ui-density));
}

.workspace-usage-detail dd {
  margin: 0;
  font-weight: 700;
}

.workspace-usage-page__notice {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.workspace-usage-page__notice[data-tone="warn"] {
  background: var(--warn-bg);
}

.workspace-usage-page__notice[data-tone="risk"] {
  background: var(--danger-bg);
}

.workspace-addon-card > strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.workspace-addon-confirm {
  align-items: center;
  flex-wrap: wrap;
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.workspace-addon-confirm__quantity {
  display: grid;
  min-width: calc(120px * var(--ui-density));
  gap: calc(6px * var(--ui-density));
  font-weight: 700;
}

.workspace-addon-confirm__quantity input {
  min-height: calc(38px * var(--ui-density));
}

.workspace-overview__summary,
.workspace-overview__notice,
.workspace-usage {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.workspace-overview__summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.workspace-overview__summary h3,
.workspace-overview__notice h3,
.workspace-usage h3,
.workspace-usage p {
  margin: 0;
}

.workspace-overview__summary p,
.workspace-overview__notice p,
.workspace-usage p,
.workspace-usage small {
  color: var(--muted);
}

.workspace-overview__plan {
  display: grid;
  justify-items: end;
  gap: calc(4px * var(--ui-density));
  text-align: right;
}

.workspace-overview__plan strong {
  color: var(--heading);
  font-size: var(--font-size-title);
  line-height: 1.2;
}

.workspace-overview__notice {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.workspace-overview__notice[data-tone="risk"] {
  background: var(--danger-bg);
}

.workspace-overview__notice[data-tone="warn"] {
  background: var(--warn-bg);
}

/* V5.1 M37 — tenant plan and usage summary. */
.home-tenant-billing-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.home-tenant-settings-nav {
  margin-top: 0;
}

.home-rail-footer-title {
  padding-top: calc(6px * var(--ui-density));
}

.home-rail-group-title {
  padding: 0 calc(12px * var(--ui-density)) calc(6px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.workspace-plans-page {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.workspace-plans-card {
  display: grid;
  gap: calc(14px * var(--ui-density));
  min-width: 0;
  padding: calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.workspace-plans-card .card-head,
.workspace-plans-card__actions,
.workspace-plans-modal__pager,
.workspace-plans-modal__tabs {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.workspace-plans-card .card-head {
  justify-content: space-between;
}

.workspace-plans-card .card-head h3,
.workspace-plans-card p {
  margin: 0;
}

.workspace-plans-subscription__grid,
.workspace-plans-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.workspace-plans-subscription__grid > div,
.workspace-plans-metrics > div {
  display: grid;
  min-width: 0;
  gap: calc(6px * var(--ui-density));
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.workspace-plans-label,
.workspace-plans-metrics span {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.workspace-plans-subscription__grid strong,
.workspace-plans-metrics strong {
  color: var(--heading);
  font-size: var(--font-size-title);
  overflow-wrap: anywhere;
}

.workspace-plans-notice,
.workspace-plans-state,
.workspace-plans-permission,
.workspace-plans-summary {
  color: var(--muted-strong);
}

.workspace-plans-notice {
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--ok-bg);
}

.workspace-plans-notice[data-tone="warn"],
.workspace-plans-state {
  background: var(--warn-bg);
}

/* The usage summary belongs to the current-plan surface; it is a separated
   data region rather than another floating card. */
.workspace-plans-current-usage {
  display: grid;
  gap: calc(12px * var(--ui-density));
  min-width: 0;
  padding-top: calc(14px * var(--ui-density));
  border-top: 1px solid var(--line);
}

.workspace-plans-current-usage .card-head h3 {
  font-size: var(--font-size-body);
}

.workspace-plans-state {
  padding: calc(12px * var(--ui-density));
  border-radius: var(--radius-sm);
  color: var(--text);
}

.workspace-plans-progress {
  display: block;
  height: calc(8px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: var(--progress-track);
}

.workspace-plans-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.workspace-plans-storage-list {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.workspace-plans-storage-list > div {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) 0;
  border-bottom: 1px solid var(--line);
}

.workspace-plans-placeholder {
  color: var(--muted);
  background: var(--panel-2);
}

.workspace-plans-modal .modal-body {
  width: min(calc(760px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density))));
}

.workspace-plans-backdrop .workspace-plans-modal {
  width: min(calc(760px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density))));
  max-height: calc(100dvh - calc(32px * var(--ui-density)));
  overflow: auto;
}

.workspace-plans-modal__tabs {
  overflow-x: auto;
  white-space: nowrap;
}

.workspace-plans-modal__tabs button.active {
  color: var(--heading);
  border-color: var(--line-strong);
  background: var(--control-hover);
}

.workspace-plans-modal__table {
  overflow-x: auto;
}

.workspace-plans-modal__table table {
  min-width: calc(720px * var(--ui-density));
}

.workspace-plans-modal__pager {
  justify-content: flex-end;
}

.workspace-plans-upgrade-modal .workspace-plans-modal__body {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.workspace-plans-upgrade__section,
.workspace-plans-upgrade__checkout,
.workspace-plans-upgrade__result {
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.workspace-plans-upgrade__section {
  padding-top: calc(2px * var(--ui-density));
  border-top: 1px solid var(--line);
}

.workspace-plans-upgrade__section h3,
.workspace-plans-upgrade__section p,
.workspace-plans-upgrade__result h3,
.workspace-plans-upgrade__result p {
  margin: 0;
}

.workspace-plans-upgrade__section h3,
.workspace-plans-upgrade__result h3 {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.workspace-plans-upgrade__section p,
.workspace-plans-upgrade__checkout span,
.workspace-plans-upgrade__result p,
.workspace-plans-action-result {
  color: var(--muted);
}

.workspace-plans-upgrade__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density));
}

.workspace-plans-upgrade__choices button {
  display: grid;
  min-width: 0;
  gap: calc(4px * var(--ui-density));
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
  background: var(--panel-2);
}

.workspace-plans-upgrade__choices button.active {
  border-color: var(--accent);
  background: var(--control-hover);
  color: var(--heading);
}

.workspace-plans-upgrade__choices button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.workspace-plans-upgrade__choices span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.workspace-plans-upgrade__choices em {
  font-style: normal;
  color: var(--accent);
  font-size: var(--font-size-hint);
}

.workspace-plans-upgrade__agreement label {
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--ui-density));
  color: var(--text);
}

.workspace-plans-upgrade__agreement input {
  flex: 0 0 auto;
  margin-top: calc(3px * var(--ui-density));
}

.workspace-plans-upgrade__checkout {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-top: calc(4px * var(--ui-density));
}

.workspace-plans-upgrade__checkout > div {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.workspace-plans-action-result {
  min-height: 1.4em;
  margin: 0;
}

@media (max-width: 980px) {
  .workspace-plans-subscription__grid,
  .workspace-plans-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .workspace-plans-card {
    padding: calc(16px * var(--ui-density));
  }

  .workspace-plans-card .card-head,
  .workspace-plans-card__actions,
  .workspace-plans-storage-list > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-plans-subscription__grid,
  .workspace-plans-metrics {
    grid-template-columns: 1fr;
  }

  .workspace-plans-modal .modal-body {
    width: min(100vw - calc(16px * var(--ui-density)), calc(760px * var(--ui-density)));
    padding: calc(16px * var(--ui-density));
  }

  .workspace-plans-backdrop .workspace-plans-modal {
    width: calc(100vw - calc(16px * var(--ui-density)));
    max-height: calc(100dvh - calc(16px * var(--ui-density)));
    padding: calc(16px * var(--ui-density));
  }

  .workspace-plans-upgrade__choices {
    grid-template-columns: 1fr;
  }

  .workspace-plans-upgrade__checkout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .workspace-plans-upgrade__checkout .primary {
    width: 100%;
  }
}

.workspace-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.workspace-usage__head,
.workspace-usage__numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.workspace-usage__numbers strong {
  color: var(--heading);
  font-size: var(--font-size-title);
  line-height: 1.15;
}

.workspace-usage__track {
  height: calc(10px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: var(--progress-track);
}

.workspace-usage__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.workspace-usage__track[data-level="warn"] i {
  background: var(--warn);
}

.workspace-usage__track[data-level="risk"] i {
  background: var(--danger);
}

.workspace-switch-menu__option:hover:not(:disabled),
.workspace-switch-menu__option:focus-visible {
  background: var(--control-hover);
  border-color: var(--line);
}

.workspace-switch-menu__option.is-active {
  background: var(--ok-bg);
  color: var(--heading);
  cursor: default;
  opacity: 1;
}

.workspace-switch-menu__copy {
  display: grid;
  min-width: 0;
  gap: calc(4px * var(--ui-density));
}

.workspace-switch-menu__copy strong,
.workspace-switch-menu__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switch-menu__copy strong {
  color: inherit;
}

.workspace-switch-menu__copy small,
.workspace-switch-menu__status {
  color: var(--muted);
  font-size: var(--font-size-assist);
}

.workspace-switch-menu__state {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: var(--font-size-assist);
  font-weight: 700;
}

.workspace-switch-menu__status {
  margin: calc(4px * var(--ui-density)) calc(6px * var(--ui-density));
  line-height: 1.5;
}

.workspace-switch-menu__status.is-error {
  color: var(--danger);
}

:root[data-theme="dark"] .workspace-switch-menu__option.is-active {
  background: var(--ok-bg);
}

/* ---------------------------------------------------------------------------
 * V5-T-M28-02 工作区 AI 点数（钱包/充值包/报价/订单/流水/退款）
 * 全部走 theme token，无写死颜色/渐变；移动端 calc(390px * var(--ui-density)) 无横向溢出。
 * ------------------------------------------------------------------------- */

.ai-points-page {
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.ai-points-page--readonly {
  align-content: start;
}

.ai-points-state {
  min-height: calc(160px * var(--ui-density));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-points-state h3 {
  margin: 0 0 calc(10px * var(--ui-density));
}

.ai-points-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.ai-points-card .card-head {
  margin-bottom: calc(20px * var(--ui-density));
}

.ai-points-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.ai-points-summary-grid .field-shell {
  min-width: 0;
}

.ai-points-summary-grid .field-shell__display strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.ai-points-note {
  margin: calc(18px * var(--ui-density)) 0 0;
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-size: var(--font-size-hint);
  color: var(--text);
}

.ai-points-note.warn {
  background: var(--warn-bg);
}

.ai-points-wallet-meta {
  margin: calc(16px * var(--ui-density)) 0 0;
}

.ai-points-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.ai-points-package {
  display: grid;
  min-width: 0;
  gap: calc(14px * var(--ui-density));
}

.ai-points-package__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
}

.ai-points-package__head h3,
.ai-points-package p {
  margin: 0;
}

.ai-points-package__price {
  color: var(--heading);
  font-size: var(--font-size-title);
  line-height: 1.1;
}

.ai-points-package__action {
  display: flex;
  align-items: center;
  min-height: calc(38px * var(--ui-density));
}

.ai-points-package-lock {
  color: var(--muted);
  font-weight: 700;
}

.ai-points-orders-table table,
.ai-points-ledger-table table {
  min-width: calc(760px * var(--ui-density));
}

.ai-points-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
}

.ai-points-ledger-pager {
  display: flex;
  justify-content: flex-end;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(16px * var(--ui-density));
}

.ai-points-quote,
.ai-points-order-detail,
.ai-points-refund {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.ai-points-quote__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  margin-bottom: calc(18px * var(--ui-density));
}

.ai-points-quote__head h3,
.ai-points-quote__head p {
  margin: 0;
}

.ai-points-quote__head p {
  margin-top: calc(4px * var(--ui-density));
}

.ai-points-quote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
}

.ai-points-quote__actions p {
  margin: 0;
}

.ai-points-refund-summary {
  margin-top: calc(18px * var(--ui-density));
  padding-top: calc(18px * var(--ui-density));
  border-top: 1px solid var(--line);
}

@media (max-width: 960px) {
  .ai-points-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-points-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ai-points-card {
    padding: calc(18px * var(--ui-density));
  }

  .ai-points-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-points-package-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * v5.0 M29 营销与权益（平台营销运营 + 工作区权益兑换）。全部复用共享主题
 * token（--line/--panel/--radius/--shadow/--glass/--text/--heading/--muted/
 * --warn-bg/--danger-bg/--ok-bg），无写死颜色或渐变，无页面私有图表。
 * ------------------------------------------------------------------------- */

.platform-marketing-page,
.workspace-benefits-page {
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.platform-marketing-page--access {
  align-content: start;
}

.platform-marketing-card,
.workspace-benefits-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.platform-marketing-card .card-head,
.workspace-benefits-card .card-head {
  margin-bottom: calc(20px * var(--ui-density));
}

.platform-marketing-access-state {
  min-height: calc(160px * var(--ui-density));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.platform-marketing-access-state h3 {
  margin: 0 0 calc(10px * var(--ui-density));
}

.platform-marketing-quote-steps {
  margin: 0 0 calc(14px * var(--ui-density));
  padding-left: calc(20px * var(--ui-density));
  display: grid;
  gap: calc(6px * var(--ui-density));
  color: var(--text);
}

.platform-marketing-subhead {
  margin: calc(22px * var(--ui-density)) 0 calc(10px * var(--ui-density));
  color: var(--heading);
}

.platform-marketing-table table,
.workspace-benefits-table table {
  min-width: calc(720px * var(--ui-density));
}

.platform-marketing-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
}

.platform-marketing-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: calc(16px * var(--ui-density));
  margin: 0;
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.platform-marketing-subform {
  margin: 0;
}

.platform-marketing-form .field-shell {
  min-width: 0;
}

.platform-marketing-form-error {
  color: var(--danger);
  min-height: 1em;
  margin: 0;
}

.platform-marketing-codes__list {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(14px * var(--ui-density));
  max-height: calc(320px * var(--ui-density));
  overflow: auto;
}

.platform-marketing-codes__list code {
  display: block;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

.workspace-benefits-form__row {
  display: flex;
  gap: calc(12px * var(--ui-density));
  align-items: center;
  max-width: calc(560px * var(--ui-density));
}

.workspace-benefits-form__row input {
  flex: 1;
  min-width: 0;
}

.workspace-benefits-form p {
  margin: calc(12px * var(--ui-density)) 0 0;
}

.workspace-benefits-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.workspace-benefits-summary .field-shell {
  min-width: 0;
}

.workspace-benefits-reveal {
  margin-top: calc(16px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.workspace-benefits-reveal p {
  margin: 0 0 calc(10px * var(--ui-density));
}

.workspace-benefits-reveal code {
  display: inline-block;
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

@media (max-width: 640px) {
  .platform-marketing-card,
  .workspace-benefits-card {
    padding: calc(18px * var(--ui-density));
  }

  .workspace-benefits-summary {
    grid-template-columns: 1fr;
  }

  .workspace-benefits-form__row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
 * v5.0 M32 支付设置（系统设置-支付设置，仅 platform operator）。复用共享主题
 * token（--line/--panel/--radius/--shadow/--glass/--text/--heading/--muted/
 * --muted-strong/--danger/--accent-2），无写死颜色、渐变或透明度。
 * ------------------------------------------------------------------------- */
.payment-settings-module {
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.payment-channel-tabs {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding: calc(6px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--panel-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-strong) 72%, transparent);
}

.payment-channel-tabs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density));
  border: 0;
  border-radius: calc(999px * var(--ui-density));
  background: transparent;
  color: var(--muted-strong);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.payment-channel-tabs__item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--control-hover) 70%, transparent);
}

.payment-channel-tabs__item.is-active {
  color: var(--menu-active-text, #fff);
  background: var(--menu-active-gradient, var(--accent-gradient));
  box-shadow: var(--accent-shadow);
}

.payment-channel-tabpanel {
  min-width: 0;
}

.payment-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.payment-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(16px * var(--ui-density));
  flex-wrap: wrap;
  margin-bottom: calc(18px * var(--ui-density));
}

.payment-card__head h3 {
  margin: 0 0 calc(6px * var(--ui-density));
}

.payment-card__head p {
  margin: 0;
}

.payment-card__head-meta {
  display: grid;
  gap: calc(6px * var(--ui-density));
  justify-items: end;
}

.payment-card__validated {
  font-size: calc(12px * var(--ui-density));
}

.payment-form {
  margin: 0;
}

.payment-secrets {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: calc(16px * var(--ui-density));
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.payment-secrets__title {
  margin: 0;
  color: var(--heading);
}

.payment-secrets__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.payment-secrets__rotate {
  flex: 0 0 auto;
}

.payment-secrets--three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-secrets--three-columns .payment-secrets__item {
  min-width: 0;
}

.payment-form-hint {
  color: var(--muted);
  margin: 0;
}

.payment-form-error {
  color: var(--danger);
  min-height: 1em;
  margin: 0;
}

.payment-fingerprint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-strong);
  margin-left: calc(8px * var(--ui-density));
}

.payment-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  align-items: center;
  margin-top: calc(18px * var(--ui-density));
}

.payment-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  margin-left: auto;
  padding: 0 calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--panel-2);
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

/* 配置类启停开关：支付渠道与业务表单共用这一主题化胶囊控件。 */
.status-switch {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--panel-2);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.status-switch input,
.payment-status-toggle input {
  appearance: none;
  position: relative;
  width: calc(36px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.status-switch input::after,
.payment-status-toggle input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(2px * var(--ui-density));
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
  border-radius: 50%;
  background: var(--panel-strong);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 20%, transparent);
  transform: translateY(-50%);
  transition: transform 160ms ease;
}

.status-switch input:checked,
.payment-status-toggle input:checked {
  border-color: transparent;
  background: var(--menu-active-gradient, var(--accent-gradient));
}

.status-switch input:checked::after,
.payment-status-toggle input:checked::after {
  transform: translate(calc(16px * var(--ui-density)), -50%);
}

.status-switch input:focus-visible,
.payment-status-toggle input:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-2));
  outline-offset: 2px;
}

.status-switch:has(input:disabled),
.payment-status-toggle[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
}

.status-switch input:disabled,
.payment-status-toggle[aria-disabled="true"] input {
  cursor: not-allowed;
}

.payment-access-state {
  align-content: start;
}

.payment-loading {
  margin: 0;
}

.payment-validate {
  display: grid;
  gap: calc(8px * var(--ui-density));
  border-top: 1px dashed var(--line);
  padding-top: calc(12px * var(--ui-density));
}

.payment-validate__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
  align-items: center;
}

.payment-codes__list {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(14px * var(--ui-density));
}

.payment-codes__item {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.payment-codes__item strong {
  color: var(--heading);
}

.payment-codes__item code {
  display: block;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

@media (max-width: 640px) {
  .payment-card {
    padding: calc(18px * var(--ui-density));
  }

  .payment-secrets {
    grid-template-columns: 1fr;
  }

  .payment-secrets__head {
    align-items: flex-start;
  }

  .payment-card__actions {
    align-items: stretch;
  }

  .payment-status-toggle {
    margin-left: 0;
    justify-content: space-between;
  }

  .payment-card__head-meta {
    justify-items: start;
  }

  .payment-channel-tabs {
    width: 100%;
  }

  .payment-channel-tabs__item {
    flex: 1 0 auto;
    padding: 0 calc(14px * var(--ui-density));
  }
}

.topbar-home-action {
  min-height: 100%;
  min-width: calc(108px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border-color: rgba(226, 233, 247, 0.94);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted-strong);
  font-size: calc(16px * var(--ui-density));
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}

.topbar-home-action:hover,
.topbar-home-action.active-filter {
  background: rgba(255, 255, 255, 0.38);
  color: var(--muted);
  border-color: var(--menu-hover-border, rgba(90, 118, 245, 0.50));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(90, 118, 245, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26));
}

.topbar-quick-action {
  min-height: 100%;
  min-width: calc(148px * var(--ui-density));
  padding: 0 calc(20px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  color: #fff;
  font-size: calc(16px * var(--ui-density));
  font-weight: 700;
  box-shadow: var(--accent-shadow);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--ui-density));
}

.topbar-quick-action:hover,
.topbar-quick-action.active-filter {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.topbar-quick-action-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted-strong);
  border-color: rgba(255, 255, 255, 0.72);
}

.topbar-quick-action-secondary:hover,
.topbar-quick-action-secondary.active-filter {
  background: rgba(255, 255, 255, 0.38);
  color: var(--muted);
  border-color: var(--menu-hover-border, rgba(90, 118, 245, 0.50));
  box-shadow: var(--menu-hover-shadow, 0 0 0 1px rgba(90, 118, 245, 0.16), 0 0 calc(18px * var(--ui-density)) rgba(90, 118, 245, 0.26));
}

:root[data-theme="dark"] .topbar-home-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 248, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .topbar-home-action:hover,
:root[data-theme="dark"] .topbar-home-action.active-filter {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(86, 156, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(86, 156, 255, 0.16),
    0 0 calc(18px * var(--ui-density)) rgba(86, 156, 255, 0.26),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .topbar-quick-action-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 248, 0.76);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .topbar-quick-action-secondary:hover,
:root[data-theme="dark"] .topbar-quick-action-secondary.active-filter {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(86, 156, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(86, 156, 255, 0.16),
    0 0 calc(18px * var(--ui-density)) rgba(86, 156, 255, 0.26),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

.topbar-quick-badge {
  min-width: calc(38px * var(--ui-density));
  height: calc(38px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.24);
  color: inherit;
  font-size: calc(15px * var(--ui-density));
  font-weight: 700;
  line-height: 1;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
}

.top-action {
  min-height: calc(82px * var(--ui-density));
  padding: 0 calc(42px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  font-size: calc(22px * var(--ui-density));
  font-weight: 700;
}

.top-action.secondary {
  background: rgba(255, 255, 255, 0.48);
  color: var(--muted-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .top-action.secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #eef4f7;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  backdrop-filter: var(--glass);
}

.action-icon {
  display: inline-flex;
  margin-right: calc(12px * var(--ui-density));
  font-size: calc(22px * var(--ui-density));
  line-height: 1;
  vertical-align: -2px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  color: var(--muted);
}

.user-chip span {
  display: none;
}

.user-chip button {
  min-height: calc(62px * var(--ui-density));
  padding-inline: calc(24px * var(--ui-density));
  font-size: var(--font-size-title);
}

.theme-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(4px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
  min-width: calc(150px * var(--ui-density));
  background: var(--control);
  box-shadow: none;
}

.theme-toggle span {
  border-radius: calc(999px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  text-align: center;
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.logout-btn {
  min-height: calc(48px * var(--ui-density));
  padding-inline: calc(20px * var(--ui-density));
  color: var(--muted-strong);
}

.theme-toggle span.active {
  background: var(--panel-strong);
  color: var(--heading);
  box-shadow: none;
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: calc(22px * var(--ui-density));
  padding: 0 0 calc(8px * var(--ui-density));
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.content > * {
  min-width: 0;
}

/* 迭代规划运行在项目工作区（.app-shell），并非首页壳。内容较少时，
   让 `.content` 的唯一工作台子项占满顶部栏以下的可用高度；列表、侧栏
   与统计槽再各自在自己的区域滚动，避免出现页面底部的无效留白。 */
.main:has(> .content > .iteration-planning-shell) {
  grid-template-rows: auto minmax(0, 1fr);
}

.content:has(> .iteration-planning-shell) {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding-bottom: 0;
}

.content > .iteration-planning-shell {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.grid {
  display: grid;
  gap: calc(28px * var(--ui-density));
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-span-all {
  grid-column: 1 / -1;
}

.scope-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(10px * var(--ui-density));
}

.scope-check-grid.compact {
  max-width: calc(460px * var(--ui-density));
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--control) 92%, transparent);
  color: var(--text);
  white-space: nowrap;
}

.inline-check input {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  accent-color: var(--accent);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  overflow: hidden;
}

.card.pad {
  padding: calc(30px * var(--ui-density));
}

.card h3 {
  margin: 0 0 calc(28px * var(--ui-density));
  font-size: var(--font-size-title);
  line-height: 1.28;
  font-weight: 700;
}

.dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
  display: grid;
  grid-template-columns: calc(78px * var(--ui-density)) 1fr;
  align-items: center;
  gap: calc(18px * var(--ui-density));
  min-height: calc(184px * var(--ui-density));
}

.metric strong {
  display: block;
  margin-top: calc(10px * var(--ui-density));
  font-size: var(--font-size-title);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.metric span {
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.metric small {
  display: block;
  margin-top: calc(14px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.metric-icon {
  width: calc(78px * var(--ui-density));
  height: calc(78px * var(--ui-density));
  display: grid;
  place-items: center;
  border-radius: calc(999px * var(--ui-density));
  font-size: calc(38px * var(--ui-density));
  font-weight: 900;
}

.metric-briefcase .metric-icon {
  color: var(--icon-blue);
  background: var(--icon-blue-bg);
}

.metric-bug .metric-icon {
  color: var(--icon-pink);
  background: var(--icon-pink-bg);
}

.metric-check .metric-icon {
  color: var(--icon-green);
  background: var(--icon-green-bg);
}

.metric-flag .metric-icon {
  color: var(--icon-orange);
  background: var(--icon-orange-bg);
}

.dashboard-panels {
  margin-top: calc(50px * var(--ui-density));
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
}

.dashboard-panels .card {
  height: calc(430px * var(--ui-density));
}

.dashboard-table-card {
  display: flex;
  flex-direction: column;
}

.dashboard-table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: calc(18px * var(--ui-density));
  background: rgba(255, 255, 255, 0.20);
}

.dashboard-table-scroll table {
  min-width: calc(560px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
}

:root[data-theme="dark"] .dashboard-table-scroll {
  background: rgba(255, 255, 255, 0.06);
}

.dashboard-panels td:last-child {
  display: flex;
  align-items: center;
  gap: calc(18px * var(--ui-density));
}

.progress-value {
  min-width: calc(46px * var(--ui-density));
  color: var(--muted);
  font-weight: 800;
}

.toolbar {
  display: flex;
  gap: calc(12px * var(--ui-density));
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: calc(20px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(2px * var(--ui-density));
}

.toolbar button:not(.primary):not(.danger) {
  color: var(--muted-strong);
  background: var(--control);
  box-shadow: none;
}

.toolbar button.active-filter {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.toolbar > * {
  width: auto;
}

.toolbar input,
.toolbar select {
  width: calc(180px * var(--ui-density));
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  padding: calc(5px * var(--ui-density)) calc(10px * var(--ui-density));
  font-size: var(--font-size-hint);
  background: var(--control);
  color: var(--muted-strong);
  border: 1px solid var(--line);
}

.pill.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.pill.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.pill.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.muted {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.planning {
  display: grid;
  grid-template-columns: minmax(calc(420px * var(--ui-density)), 48%) 1fr;
  gap: calc(18px * var(--ui-density));
  min-height: calc(660px * var(--ui-density));
}

.tree-row,
.gantt-row {
  min-height: calc(38px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  align-items: center;
}

.tree-row {
  grid-template-columns: 1fr calc(82px * var(--ui-density)) calc(72px * var(--ui-density));
  gap: calc(8px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  cursor: pointer;
  font-weight: 620;
}

.tree-row:hover,
.tree-row.selected {
  background: var(--active-surface);
}

.tree-title {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.tree-title span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indent-0 { padding-left: 0; }
.indent-1 { padding-left: calc(18px * var(--ui-density)); }
.indent-2 { padding-left: calc(36px * var(--ui-density)); }
.indent-3 { padding-left: calc(54px * var(--ui-density)); }
.indent-4 { padding-left: calc(72px * var(--ui-density)); }

.gantt-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--line-strong);
  background: var(--table-head);
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.gantt-head div {
  padding: calc(10px * var(--ui-density)) calc(4px * var(--ui-density));
  border-left: 1px solid var(--line-strong);
  text-align: center;
}

.gantt-row {
  position: relative;
  padding: 0 calc(8px * var(--ui-density));
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.33% - 1px), var(--line-strong) calc(8.33% - 1px), var(--line-strong) 8.33%);
}

.gantt-bar {
  height: calc(20px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--accent-2) 58%, transparent);
  position: absolute;
  top: calc(10px * var(--ui-density));
  min-width: calc(16px * var(--ui-density));
  overflow: hidden;
  box-shadow: none;
}

.gantt-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

.planning-board {
  --planning-control-height: calc(40px * var(--ui-density));
  padding: calc(24px * var(--ui-density));
  overflow: hidden;
  min-height: calc(100vh - calc(125px * var(--ui-density)));
  min-height: calc(100dvh - calc(125px * var(--ui-density)));
  display: flex;
  flex-direction: column;
}

.planning-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: calc(16px * var(--ui-density));
  align-items: start;
  margin-bottom: calc(12px * var(--ui-density));
}

.planning-actions,
.planning-filter-center,
.planning-view-actions,
.segmented {
  display: flex;
  gap: calc(10px * var(--ui-density));
  align-items: center;
}

.planning-actions,
.planning-view-actions,
.planning-filter-center {
  min-width: 0;
}

.planning-filter-center {
  justify-content: center;
  flex-wrap: wrap;
  max-height: calc(58px * var(--ui-density));
  overflow: visible;
  justify-self: center;
  width: 100%;
  max-width: calc(760px * var(--ui-density));
  padding-inline: 0;
}

.work-items-toolbar .planning-filter-center {
  max-width: none;
  max-height: none;
}

.work-items-toolbar {
  gap: calc(14px * var(--ui-density));
  margin-bottom: calc(10px * var(--ui-density));
}

.work-items-toolbar .planning-actions,
.work-items-toolbar .planning-filter-center,
.work-items-toolbar .segmented {
  gap: calc(8px * var(--ui-density));
}

.work-items-toolbar .planning-actions > button,
.work-items-toolbar .planning-filter-center > button,
.work-items-toolbar .planning-filter-center > .list-filter-anchor > button,
.work-items-toolbar .planning-filter-center > .quick-filter-anchor > button,
.work-items-toolbar .planning-filter-center > .segmented > .quick-filter-anchor > button,
.work-items-toolbar .planning-filter-center > .segmented > button {
  min-height: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.18));
  border-radius: calc(999px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 255, 0.72)),
    var(--control);
  color: var(--muted-strong);
  font-size: var(--font-size-title);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(6px * var(--ui-density)) calc(16px * var(--ui-density)) rgba(109, 123, 170, 0.08);
}

.work-items-toolbar .planning-actions > button:not(:disabled):not(.primary):hover,
.work-items-toolbar .planning-filter-center > button:not(:disabled):not(.active-filter):hover,
.work-items-toolbar .planning-filter-center > .list-filter-anchor > button:not(:disabled):not(.active-filter):hover,
.work-items-toolbar .planning-filter-center > .quick-filter-anchor > button:not(:disabled):not(.active-filter):hover,
.work-items-toolbar .planning-filter-center > .segmented > .quick-filter-anchor > button:not(:disabled):not(.active-filter):hover,
.work-items-toolbar .planning-filter-center > .segmented > button:not(:disabled):not(.active-filter):hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--accent-shadow);
}

.work-items-toolbar .planning-filter-center button.active-filter,
.work-items-toolbar .segmented button.active-filter,
.work-items-toolbar .planning-filter-center button.active-filter:hover,
.work-items-toolbar .segmented button.active-filter:hover,
.work-items-toolbar .planning-actions > button.primary,
.work-items-toolbar .planning-actions > button.primary:hover,
.planning-toolbar .planning-actions > button.primary,
.planning-toolbar .planning-actions > button.primary:hover,
.planning-toolbar .planning-filter-center button.active-filter,
.planning-toolbar .planning-filter-center button.active-filter:hover,
.planning-toolbar .segmented button.active-filter,
.planning-toolbar .segmented button.active-filter:hover,
.planning-summary-row .planning-view-actions button.active-filter,
.planning-summary-row .planning-view-actions button.active-filter:hover,
.planning-summary-row .planning-view-actions .segmented button.active-filter,
.planning-summary-row .planning-view-actions .segmented button.active-filter:hover,
.planning-summary-row .segmented button.active-filter {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.work-items-toolbar .planning-actions-balance span {
  min-height: calc(40px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
  font-weight: 600;
}

.planning-actions-balance {
  visibility: hidden;
  pointer-events: none;
}

.planning-actions-balance span {
  min-height: calc(48px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(22px * var(--ui-density));
  border: 1px solid transparent;
  border-radius: calc(999px * var(--ui-density));
  font-size: calc(18px * var(--ui-density));
  font-weight: 700;
  white-space: nowrap;
}

.planning-board.filters-open .planning-filter-center {
  max-height: none;
}

.planning-view-actions {
  justify-content: flex-end;
}

.planning-filter-center button.active-filter,
.segmented button.active-filter {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.compact-filter-toggle {
  height: calc(40px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(14px * var(--ui-density));
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.planning-filter-center .advanced-filter {
  display: none;
}

.planning-filter-center .advanced-filter.is-open {
  display: flex;
}

.list-filter-toolbar {
  position: relative;
}

.toolbar-popover,
.list-filter-popover,
.quick-filter-dropdown,
.cfilter-popover,
.iteration-filter-popover,
.enum-dd-menu {
  border: 1px solid var(--toolbar-popover-border);
  background: var(--toolbar-popover-bg);
  box-shadow: var(--toolbar-popover-shadow);
  backdrop-filter: none;
}

.toolbar-popover {
  color: var(--text);
}

.toolbar-popover--compact {
  padding: calc(14px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
}

.toolbar-popover__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
}

.toolbar-popover__head > div {
  min-width: 0;
}

.toolbar-popover__head .link-like {
  flex: 0 0 auto;
  white-space: nowrap;
}

.toolbar-popover__title {
  display: block;
  color: var(--heading);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.3;
}

.toolbar-popover__desc {
  margin: calc(4px * var(--ui-density)) 0 0;
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

.toolbar-popover__menu {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.list-filter-anchor {
  position: relative;
  flex: 0 0 auto;
}

.work-items-toolbar .list-filter-anchor:has(.list-filter-popover) {
  position: static;
}

.list-filter-trigger {
  min-height: calc(48px * var(--ui-density));
  height: calc(48px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  padding: calc(11px * var(--ui-density)) calc(18px * var(--ui-density));
  font-size: var(--font-size-title);
  font-weight: 700;
}

.work-items-toolbar .list-filter-trigger {
  min-height: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
  font-weight: 600;
}

.list-filter-trigger b {
  min-width: calc(22px * var(--ui-density));
  height: calc(22px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  border-radius: calc(999px * var(--ui-density));
  background: rgba(95, 102, 238, 0.14);
  color: #5f66ee;
  font-size: var(--font-size-hint);
}

.filter-icon {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(16px * var(--ui-density));
  color: #5f66ee;
}

.filter-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.list-search-field {
  width: calc(280px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--muted);
  font-size: var(--font-size-title);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.work-items-toolbar .list-search-field {
  min-height: calc(40px * var(--ui-density));
  height: calc(40px * var(--ui-density));
  gap: calc(7px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.18));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 255, 0.74)),
    var(--control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(6px * var(--ui-density)) calc(16px * var(--ui-density)) rgba(109, 123, 170, 0.08);
  font-size: var(--font-size-body);
}

.list-search-field .filter-icon {
  color: #5f66ee;
}

.list-search-field input {
  width: 100%;
  height: calc(46px * var(--ui-density));
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-body);
  color: var(--text);
  font-family: inherit;
}

.list-search-field input:focus,
.list-search-field input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.list-search-field:focus-within {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.82)),
    var(--control-hover);
}

:root[data-theme="dark"] .list-search-field:focus-within {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06)),
    var(--control-hover);
}

.work-items-toolbar .list-search-field input {
  height: calc(38px * var(--ui-density));
  font-size: var(--font-size-body);
  font-weight: 500;
}

:root[data-theme="dark"] .work-items-toolbar .planning-actions > button:not(.primary),
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > button:not(.active-filter),
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > .list-filter-anchor > button:not(.active-filter),
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > .quick-filter-anchor > button:not(.active-filter),
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > .segmented > .quick-filter-anchor > button:not(.active-filter),
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > .segmented > button:not(.active-filter) {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(11, 18, 30, 0.86);
  color: rgba(232, 238, 248, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .work-items-toolbar .planning-actions > button:disabled,
:root[data-theme="dark"] .work-items-toolbar .planning-filter-center > button:disabled {
  opacity: 0.58;
  color: rgba(232, 238, 248, 0.48);
}

:root[data-theme="dark"] .work-items-toolbar .list-search-field {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(11, 18, 30, 0.86);
  color: rgba(232, 238, 248, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .work-items-toolbar .list-search-field input {
  color: #edf3fb;
}

.list-filter-popover {
  position: absolute;
  top: calc(100% + calc(12px * var(--ui-density)));
  right: 0;
  z-index: 70;
  /* Fallback for Chromium versions that do not yet evaluate CSS unit multiplication. */
  width: min(820px, calc(100vw - 120px));
  width: min(calc(820px * var(--ui-density)), calc(100vw - calc(120px * var(--ui-density))));
  padding: calc(24px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
}

.work-items-toolbar .list-filter-popover {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.list-sort-popover {
  width: min(calc(560px * var(--ui-density)), calc(100vw - calc(120px * var(--ui-density))));
}

.list-filter-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: calc(34px * var(--ui-density));
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
  transform: rotate(45deg);
  border-left: 1px solid var(--toolbar-popover-border);
  border-top: 1px solid var(--toolbar-popover-border);
  background: rgba(250, 252, 255, 0.98);
}

.work-items-toolbar .list-filter-popover::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(45deg);
}

.list-filter-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.list-filter-head,
.list-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.list-filter-head strong {
  color: var(--heading);
  font-size: var(--font-size-title);
}

.list-filter-row {
  display: grid;
  grid-template-columns: calc(76px * var(--ui-density)) minmax(calc(145px * var(--ui-density)), 1fr) minmax(calc(120px * var(--ui-density)), 0.7fr) minmax(calc(180px * var(--ui-density)), 1.2fr) calc(42px * var(--ui-density));
  align-items: end;
  gap: calc(12px * var(--ui-density));
}

.filter-join-static {
  width: 100%;
  height: calc(48px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.list-filter-row > label,
.list-sort-row > label {
  position: relative;
  display: grid;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.list-filter-row .field-shell {
  min-width: 0;
  margin: 0;
  gap: calc(6px * var(--ui-density));
}

.filter-value-cell {
  min-width: 0;
}

.list-filter-row select,
.list-filter-row input {
  height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
}

.list-filter-popover input,
.list-filter-popover select,
.list-filter-popover .custom-select-trigger,
.list-filter-popover .enum-dd-trigger,
.quick-filter-dropdown input,
.quick-filter-dropdown select,
.quick-filter-dropdown .custom-select-trigger,
.cfilter-popover input,
.cfilter-popover select,
.cfilter-popover .custom-select-trigger,
.cfilter-popover .enum-dd-trigger,
.iteration-filter-popover input,
.iteration-filter-popover select,
.iteration-filter-popover .custom-select-trigger,
.iteration-add-form > label input,
.iteration-add-form > label select,
.iteration-add-form > label .custom-select-trigger,
.iteration-add-filter-row input,
.iteration-add-filter-row select,
.iteration-add-filter-row .custom-select-trigger {
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.list-filter-popover input:focus,
.list-filter-popover select:focus,
.list-filter-popover .custom-select.open .custom-select-trigger,
.list-filter-popover .custom-select-trigger:focus,
.list-filter-popover .enum-dd-trigger:focus,
.list-filter-popover .enum-dd-trigger.is-open,
.quick-filter-dropdown input:focus,
.quick-filter-dropdown select:focus,
.quick-filter-dropdown .custom-select.open .custom-select-trigger,
.quick-filter-dropdown .custom-select-trigger:focus,
.cfilter-popover input:focus,
.cfilter-popover select:focus,
.cfilter-popover .custom-select.open .custom-select-trigger,
.cfilter-popover .custom-select-trigger:focus,
.cfilter-popover .enum-dd-trigger:focus,
.cfilter-popover .enum-dd-trigger.is-open,
.iteration-filter-popover input:focus,
.iteration-filter-popover select:focus,
.iteration-filter-popover .custom-select.open .custom-select-trigger,
.iteration-filter-popover .custom-select-trigger:focus,
.iteration-add-form > label input:focus,
.iteration-add-form > label select:focus,
.iteration-add-form > label .custom-select.open .custom-select-trigger,
.iteration-add-form > label .custom-select-trigger:focus,
.iteration-add-filter-row input:focus,
.iteration-add-filter-row select:focus,
.iteration-add-filter-row .custom-select.open .custom-select-trigger,
.iteration-add-filter-row .custom-select-trigger:focus {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
  outline: none;
}

.list-filter-popover .custom-select-trigger,
.list-filter-popover .enum-dd-trigger,
.quick-filter-dropdown .custom-select-trigger,
.iteration-filter-popover .custom-select-trigger,
.iteration-add-form > label .custom-select-trigger,
.iteration-add-filter-row .custom-select-trigger,
.cfilter-popover .custom-select-trigger,
.cfilter-popover .enum-dd-trigger {
  min-height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
}

.filter-join {
  width: 100%;
  height: calc(48px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.filter-operator {
  min-height: calc(48px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--ui-density));
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.list-sort-row {
  display: grid;
  grid-template-columns: minmax(calc(180px * var(--ui-density)), 1fr) calc(150px * var(--ui-density)) calc(42px * var(--ui-density));
  align-items: end;
  gap: calc(12px * var(--ui-density));
}

.list-sort-row select {
  height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
}

.list-rule-stack {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.list-rule-remove {
  width: calc(42px * var(--ui-density));
  height: calc(48px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: 0;
  border-radius: calc(14px * var(--ui-density));
  color: var(--muted);
}

.list-filter-toolbar-inline {
  display: flex;
  gap: calc(16px * var(--ui-density));
  align-items: center;
  flex-wrap: wrap;
}

.list-filter-toolbar-inline .link-like:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.list-filter-actions {
  margin-top: calc(6px * var(--ui-density));
  padding-top: calc(14px * var(--ui-density));
  border-top: 1px solid var(--line-strong);
  justify-content: flex-end;
}

.inline-field {
  width: auto;
  min-width: 0;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  white-space: nowrap;
}

.inline-field span {
  flex: 0 0 auto;
}

.inline-field input,
.inline-field select {
  width: calc(180px * var(--ui-density));
  height: calc(48px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
}

.inline-field:first-child input {
  width: calc(230px * var(--ui-density));
}

.timeline-range-field input {
  width: calc(160px * var(--ui-density));
}

.planning-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  margin-bottom: calc(14px * var(--ui-density));
}

.planning-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  margin-bottom: 0;
  font-size: var(--font-size-hint);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.planning-summary span {
  border: 1px solid var(--line);
  background: var(--control);
  border-radius: calc(999px * var(--ui-density));
  min-height: var(--planning-control-height);
  display: inline-flex;
  align-items: center;
  padding: calc(6px * var(--ui-density)) calc(14px * var(--ui-density));
  white-space: nowrap;
}

.planning-summary-row .planning-view-actions {
  flex: 0 0 auto;
  gap: calc(8px * var(--ui-density));
}

.planning-summary-row .planning-view-actions button,
.planning-summary-row .segmented button {
  min-height: var(--planning-control-height);
  height: var(--planning-control-height);
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-title);
  font-weight: 700;
}

.planning-board .gantt-shell {
  flex: 1 1 auto;
  height: auto;
  min-height: calc(460px * var(--ui-density));
  display: grid;
  grid-template-columns: minmax(calc(620px * var(--ui-density)), 46%) minmax(calc(620px * var(--ui-density)), 1fr);
  grid-template-rows: calc(58px * var(--ui-density)) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: rgba(255, 255, 255, 0.18);
  isolation: isolate;
}

.planning-board .gantt-fields-head-wrap {
  grid-column: 1;
  grid-row: 1;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: calc(10px * var(--ui-density)) 0 calc(24px * var(--ui-density)) rgba(126, 144, 176, 0.10);
  z-index: 5;
  scrollbar-width: none;
}

.planning-board .gantt-fields-head-wrap::-webkit-scrollbar {
  display: none;
}

.planning-board .gantt-fields-head,
.planning-board .gantt-time-head {
  display: grid;
  min-height: calc(58px * var(--ui-density));
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
  backdrop-filter: none;
}

.planning-board .gantt-fields-head {
  width: max-content;
  min-width: 100%;
}

.planning-board .gantt-time-head-wrap {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.planning-board .gantt-fields-head div,
.planning-board .gantt-time-head div {
  display: flex;
  align-items: center;
  padding: 0 calc(16px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
  border-right: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.96);
}

.gantt-time-head .today,
.gantt-lane .today {
  background: rgba(95, 124, 255, 0.10);
}

.gantt-lane .weekend-cell {
  background: rgba(255, 255, 255, 0.26);
}

.gantt-row {
  display: grid;
  min-height: calc(62px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
  background-image: none;
}

.gantt-row.is-overdue {
  background: linear-gradient(90deg, rgba(255, 221, 229, 0.32), transparent 46%);
}

.planning-board .gantt-fields {
  display: grid;
  width: max-content;
  min-width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  overflow: hidden;
}

.planning-board .gantt-fields > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-right: 1px solid var(--line-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.94);
}

.planning-board .gantt-fields-body {
  grid-column: 1;
  grid-row: 2;
  overflow: auto;
  min-height: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: calc(10px * var(--ui-density)) 0 calc(24px * var(--ui-density)) rgba(126, 144, 176, 0.10);
  scrollbar-width: auto;
}

.planning-board .gantt-fields-body::-webkit-scrollbar {
  height: calc(10px * var(--ui-density));
  width: calc(10px * var(--ui-density));
}

.planning-board .gantt-fields-body::-webkit-scrollbar-thumb {
  border-radius: calc(999px * var(--ui-density));
  background: rgba(121, 137, 176, 0.26);
}

.planning-board .gantt-fields-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.36);
}

.planning-board .gantt-fields-row {
  min-height: calc(62px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
}

.planning-board .gantt-fields-row.is-row-hover .gantt-fields > div {
  background:
    linear-gradient(90deg, rgba(125, 99, 244, 0.12), rgba(95, 124, 255, 0.08)),
    rgba(255, 255, 255, 0.96);
}

.gantt-fields-row.selected-row .gantt-fields > div {
  background: var(--active-surface);
}

.work-items-table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: rgba(255, 255, 255, 0.18);
  isolation: isolate;
}

.work-items-grid-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.work-items-board {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: calc(100vh - calc(171px * var(--ui-density)));
  min-height: 0;
  max-height: calc(100vh - calc(171px * var(--ui-density)));
  height: calc(100dvh - calc(171px * var(--ui-density)));
  max-height: calc(100dvh - calc(171px * var(--ui-density)));
  overflow: hidden;
}

.work-items-pagination-footer {
  flex: 0 0 auto;
  padding-top: calc(14px * var(--ui-density));
}

.work-items-page-size {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: max-content;
}

.work-items-page-size .custom-select {
  width: calc(86px * var(--ui-density));
}

.work-items-page-size .custom-select-trigger {
  min-height: calc(36px * var(--ui-density));
  height: calc(36px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.work-items-page-size .custom-select-menu {
  bottom: calc(100% + calc(8px * var(--ui-density)));
  top: auto;
}

.work-items-view-switcher {
  --work-items-view-index: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: calc(132px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.16));
  border-radius: calc(999px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 255, 0.72)),
    var(--control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(6px * var(--ui-density)) calc(16px * var(--ui-density)) rgba(109, 123, 170, 0.08);
}

.work-items-view-switcher__indicator {
  position: absolute;
  top: calc(4px * var(--ui-density));
  bottom: calc(4px * var(--ui-density));
  left: calc(4px * var(--ui-density));
  width: calc((100% - calc(8px * var(--ui-density))) / 2);
  border-radius: calc(999px * var(--ui-density));
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
  transform: translateX(calc(var(--work-items-view-index, 0) * 100%));
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.planning-summary-row .planning-view-actions .work-items-view-switcher button,
.planning-summary-row .planning-view-actions .work-items-view-switcher button:hover,
.planning-summary-row .planning-view-actions .work-items-view-switcher button.active-filter,
.planning-summary-row .planning-view-actions .work-items-view-switcher button.active-filter:hover {
  position: relative;
  z-index: 1;
  min-height: calc(36px * var(--ui-density));
  height: calc(36px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.planning-summary-row .planning-view-actions .work-items-view-switcher button {
  color: var(--muted-strong);
}

.planning-summary-row .planning-view-actions .work-items-view-switcher button.active-filter {
  color: #fff;
}

.work-items-table-wrap .gantt-fields-head-wrap {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  width: max-content;
  min-width: 100%;
  overflow: visible;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: calc(10px * var(--ui-density)) 0 calc(24px * var(--ui-density)) rgba(126, 144, 176, 0.10);
  z-index: 12;
  scrollbar-width: none;
}

.work-items-table-wrap .gantt-fields-head-wrap::-webkit-scrollbar {
  display: none;
}

.work-items-table-wrap .work-items-fields-head {
  width: max-content;
  min-width: 100%;
  overflow: visible;
  transform: none;
}

.work-items-table-wrap .work-items-fields-head .col-head-cell[data-col-key="title"],
.work-items-table-wrap .complex-table-canvas--aligned .work-items-fields-head .col-head-cell:first-child {
  position: sticky;
  left: 0;
  z-index: 14;
  box-shadow: calc(10px * var(--ui-density)) 0 calc(18px * var(--ui-density)) rgba(126, 144, 176, 0.10);
}

.work-items-table-wrap .gantt-fields-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/*
 * 复杂表格的表头与表体必须位于同一横向滚动画布：列模板只在
 * complex-table frame 上声明一次，并同时传给表头和每一行。禁止为表头、
 * 表体分别计算宽度或使用独立横向滚动容器，否则窄屏滚动会产生像素错位。
 */
.work-items-table-wrap .complex-table-canvas--aligned {
  --complex-table-canvas-inline-size: var(--complex-table-canvas-width, max-content);
}

.work-items-table-wrap .complex-table-canvas--aligned > .gantt-fields-head-wrap,
.work-items-table-wrap .complex-table-canvas--aligned > .work-items-rows,
.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields-row,
.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields-head,
.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields {
  box-sizing: border-box;
  width: var(--complex-table-canvas-inline-size);
  min-width: 100%;
}

.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields-head,
.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields {
  grid-template-columns: var(--complex-table-columns) !important;
}

.work-items-table-wrap .gantt-fields-row {
  width: max-content;
  min-width: 100%;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: calc(62px * var(--ui-density));
}

.work-items-table-wrap .gantt-fields {
  overflow: visible;
}

.work-items-table-wrap .work-items-rows {
  width: max-content;
  min-width: 100%;
}

.work-items-table-wrap .gantt-fields > .title-cell,
.work-items-table-wrap .complex-table-canvas--aligned .gantt-fields > :first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  box-shadow: calc(10px * var(--ui-density)) 0 calc(18px * var(--ui-density)) rgba(126, 144, 176, 0.08);
}

:root[data-theme="dark"] .planning-board,
:root[data-theme="dark"] .planning-board .gantt-shell,
:root[data-theme="dark"] .work-items-table-wrap {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(173, 228, 255, 0.14);
}

:root[data-theme="dark"] .planning-summary span,
:root[data-theme="dark"] .planning-stat-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(173, 228, 255, 0.14);
  color: #d6dfeb;
}

:root[data-theme="dark"] .planning-stat-btn:hover,
:root[data-theme="dark"] .planning-summary-row .planning-view-actions button:hover,
:root[data-theme="dark"] .planning-summary-row .segmented button:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: var(--accent-shadow);
}

:root[data-theme="dark"] .planning-stat-btn.active-filter,
:root[data-theme="dark"] .planning-stat-btn.active-filter:hover,
:root[data-theme="dark"] .planning-summary-row .planning-view-actions button.active-filter,
:root[data-theme="dark"] .planning-summary-row .planning-view-actions button.active-filter:hover,
:root[data-theme="dark"] .planning-summary-row .segmented button.active-filter,
:root[data-theme="dark"] .planning-summary-row .segmented button.active-filter:hover {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

:root[data-theme="dark"] .work-items-view-switcher {
  border-color: rgba(173, 228, 255, 0.14);
  background: rgba(33, 37, 44, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 calc(10px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .planning-summary-row .planning-view-actions .work-items-view-switcher button,
:root[data-theme="dark"] .planning-summary-row .planning-view-actions .work-items-view-switcher button:hover {
  background: transparent;
  color: rgba(232, 238, 248, 0.76);
  box-shadow: none;
}

:root[data-theme="dark"] .planning-summary-row .planning-view-actions .work-items-view-switcher button.active-filter,
:root[data-theme="dark"] .planning-summary-row .planning-view-actions .work-items-view-switcher button.active-filter:hover {
  color: #fff;
}

:root[data-theme="dark"] .planning-board .gantt-fields-head-wrap,
:root[data-theme="dark"] .planning-board .gantt-time-head-wrap,
:root[data-theme="dark"] .planning-board .gantt-fields-head,
:root[data-theme="dark"] .planning-board .gantt-time-head,
:root[data-theme="dark"] .planning-board .gantt-fields-head div,
:root[data-theme="dark"] .planning-board .gantt-time-head div,
:root[data-theme="dark"] .planning-board .gantt-fields,
:root[data-theme="dark"] .planning-board .gantt-fields > div,
:root[data-theme="dark"] .planning-board .gantt-fields-body,
:root[data-theme="dark"] .work-items-table-wrap .gantt-fields-head-wrap,
:root[data-theme="dark"] .work-items-table-wrap .gantt-fields-body,
:root[data-theme="dark"] .work-items-grid-scroll {
  background: rgba(10, 15, 23, 0.96);
  color: #edf3fb;
  border-color: rgba(173, 228, 255, 0.12);
  box-shadow: none;
}

:root[data-theme="dark"] .work-items-table-wrap .work-items-fields-head .col-head-cell[data-col-key="title"],
:root[data-theme="dark"] .work-items-table-wrap .gantt-fields > .title-cell {
  background: rgba(10, 15, 23, 0.98);
  box-shadow: calc(10px * var(--ui-density)) 0 calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .planning-board .gantt-fields-row,
:root[data-theme="dark"] .gantt-row,
:root[data-theme="dark"] .planning-board .gantt-fields-body::-webkit-scrollbar-track {
  border-color: rgba(173, 228, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .planning-board .gantt-fields-row.is-row-hover .gantt-fields > div {
  background:
    linear-gradient(90deg, rgba(37, 108, 226, 0.24), rgba(18, 159, 152, 0.14)),
    rgba(10, 15, 23, 0.98);
}

:root[data-theme="dark"] .gantt-fields-row.selected-row .gantt-fields > div,
:root[data-theme="dark"] .iteration-story-row.selected-row > div,
:root[data-theme="dark"] tbody tr.selected-row td {
  background: linear-gradient(90deg, rgba(37, 108, 226, 0.28), rgba(18, 159, 152, 0.12));
}

:root[data-theme="dark"] .gantt-lane .weekend-cell {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .gantt-time-head .today,
:root[data-theme="dark"] .gantt-lane .today {
  background: rgba(37, 108, 226, 0.18);
}

:root[data-theme="dark"] .gantt-row.is-overdue {
  background: linear-gradient(90deg, rgba(148, 65, 82, 0.28), transparent 46%);
}

:root[data-theme="dark"] .planning-board .gantt-fields-body::-webkit-scrollbar-thumb {
  background: rgba(98, 122, 177, 0.46);
}

:root[data-theme="dark"] .quick-filter-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 30%, rgba(13, 22, 35, 0.92)),
      color-mix(in srgb, var(--accent-2) 24%, rgba(6, 16, 27, 0.94))
    ),
    rgba(255, 255, 255, 0.04);
  color: rgba(232, 238, 248, 0.88);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

.quick-scope-segmented {
  gap: calc(6px * var(--ui-density));
}

.quick-filter-anchor {
  position: relative;
}

.quick-filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: calc(10px * var(--ui-density));
  min-width: calc(288px * var(--ui-density));
  max-width: min(calc(320px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  z-index: 90;
  padding: calc(14px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quick-filter-option {
  display: block;
  width: 100%;
  min-height: calc(44px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: none;
  background: transparent;
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 600;
  text-align: left;
  border-radius: calc(14px * var(--ui-density));
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.quick-filter-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.86)),
      color-mix(in srgb, var(--accent-2) 14%, rgba(246, 249, 255, 0.78))
    ),
    var(--control-hover);
  color: var(--muted-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
}

.quick-filter-option:disabled,
.quick-filter-option.disabled {
  cursor: not-allowed;
  opacity: 0.48;
  color: var(--muted);
}

.quick-filter-option:disabled:hover,
.quick-filter-option.disabled:hover {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  transform: none;
}

.quick-filter-option.selected {
  background: var(--accent-gradient);
  color: #fff;
}

.quick-filter-option.selected:hover,
.work-items-toolbar .planning-filter-center .active-filter,
.work-items-toolbar .planning-filter-center .active-filter:hover,
.work-items-toolbar .planning-filter-center .active-filter:focus-visible,
.planning-summary-row .planning-summary .planning-stat-btn.active-filter,
.planning-summary-row .planning-summary .planning-stat-btn.active-filter:hover,
.planning-summary-row .planning-summary .planning-stat-btn.active-filter:focus-visible,
.planning-summary-row .planning-view-actions button.active-filter,
.planning-summary-row .planning-view-actions button.active-filter:hover,
.planning-summary-row .planning-view-actions button.active-filter:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}

.planning-summary-row .planning-view-actions > button:not(.active-filter) {
  color: var(--muted-strong);
}

.planning-summary-row .planning-view-actions > button:not(:disabled):not(.active-filter):hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}

.planning-stat-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  min-height: var(--planning-control-height);
  height: var(--planning-control-height);
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--control);
  border-radius: calc(999px * var(--ui-density));
  font-size: var(--font-size-body);
  color: var(--muted-strong);
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}

.planning-stat-btn:not(:disabled):not(.active-filter):hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
  transform: translateY(-1px);
}

.planning-stat-btn.active-filter {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: var(--accent-shadow);
}

.planning-stat-btn strong {
  font-weight: 800;
}

.planning-board .gantt-timeline-body-scroll {
  grid-column: 2;
  grid-row: 2;
  overflow: auto;
  min-height: 0;
  background: transparent;
  position: relative;
}

.planning-board .gantt-timeline-body {
  min-width: max-content;
}

.planning-board .gantt-time-head {
  z-index: 4;
  width: max-content;
  display: grid;
  grid-template-rows: calc(28px * var(--ui-density)) calc(30px * var(--ui-density));
}

.planning-board .gantt-time-head .gantt-time-primary,
.planning-board .gantt-time-head .gantt-time-secondary {
  display: grid;
  width: 100%;
  justify-items: stretch;
  padding: 0;
}

.planning-board .gantt-time-primary div,
.planning-board .gantt-time-secondary div {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  color: var(--muted-strong);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--line-strong);
  padding: 0;
  min-width: 0;
  justify-self: stretch;
}

.planning-board .gantt-time-primary div {
  justify-content: flex-start;
  font-size: var(--font-size-hint);
}

.planning-board .gantt-time-secondary div {
  justify-content: center;
  font-size: var(--font-size-body);
}

.planning-board .gantt-time-head.view-week .gantt-time-secondary div,
.planning-board .gantt-time-head.view-month .gantt-time-secondary div {
  justify-content: flex-start;
}

.planning-board .timeline-label {
  display: block;
  padding: 0 calc(12px * var(--ui-density));
  width: 100%;
  box-sizing: border-box;
}

.planning-board .gantt-time-head.view-day .gantt-time-secondary .timeline-label {
  padding: 0;
  text-align: center;
}

.planning-board .gantt-time-head.view-day .gantt-time-primary .timeline-label {
  text-align: left;
}

.planning-board .gantt-time-head.view-week .gantt-time-secondary .timeline-label,
.planning-board .gantt-time-head.view-month .gantt-time-secondary .timeline-label {
  text-align: left;
}

.title-cell strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-link {
  position: relative;
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--heading);
  font-weight: 850;
  box-shadow: none;
  cursor: pointer;
}

.title-link:hover {
  color: var(--accent-2);
  background: transparent;
  transform: none;
}

.work-items-table-wrap .title-link {
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: 500;
}

.work-items-table-wrap .title-link:hover {
  color: var(--text);
}

.hover-tooltip {
  position: relative;
}

.global-hover-tooltip {
  position: fixed;
  left: var(--tooltip-left, -9999px);
  top: var(--tooltip-top, -9999px);
  transform: translate(0, -50%);
  transform-origin: left center;
  width: max-content;
  max-width: min(calc(320px * var(--ui-density)), 36vw);
  padding: calc(6px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: calc(12px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.90)),
      color-mix(in srgb, var(--accent-2) 18%, rgba(246, 249, 255, 0.86))
    ),
    var(--toolbar-popover-bg);
  box-shadow:
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  backdrop-filter: var(--glass);
  color: var(--heading);
  font-size: var(--font-size-tooltip);
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-align: left;
  pointer-events: none;
  z-index: 260;
  opacity: 0;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.global-hover-tooltip::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: calc(8px * var(--ui-density));
  height: calc(8px * var(--ui-density));
  border-left: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.92));
  box-shadow: calc(4px * var(--ui-density)) calc(4px * var(--ui-density)) calc(10px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
}

.global-hover-tooltip[data-side="left"]::after {
  left: auto;
  right: -5px;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.global-hover-tooltip[data-side="left"] {
  transform-origin: right center;
}

.global-hover-tooltip.visible {
  opacity: 1;
  transform: translate(0, -50%);
}

.global-hover-tooltip[data-variant="detail"] {
  max-width: min(var(--tooltip-max-width, calc(300px * var(--ui-density))), calc(100vw - calc(240px * var(--ui-density))));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: var(--font-size-tooltip);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0;
  white-space: pre-line;
}

:root[data-theme="dark"] .global-hover-tooltip {
  border-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 22%, rgba(11, 24, 40, 0.98)),
      color-mix(in srgb, var(--accent-2) 18%, rgba(5, 15, 28, 0.98))
    ),
    rgba(6, 14, 26, 0.98);
  box-shadow:
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #ffffff;
}

:root[data-theme="dark"] .global-hover-tooltip::after {
  border-left-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
  border-bottom-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
  background: color-mix(in srgb, var(--accent) 20%, rgba(8, 20, 36, 0.98));
  box-shadow: calc(4px * var(--ui-density)) calc(4px * var(--ui-density)) calc(12px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .global-hover-tooltip[data-side="left"]::after {
  border-right-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
  border-top-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
}

.table-title-text {
  position: relative;
  display: inline-block;
  max-width: min(100%, calc(320px * var(--ui-density)));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
  color: var(--heading);
  font-weight: 700;
}

.tree-indent,
.tree-spacer {
  flex: 0 0 auto;
  display: inline-flex;
}

.tree-spacer {
  width: calc(24px * var(--ui-density));
}

.tree-toggle {
  width: calc(24px * var(--ui-density));
  height: calc(24px * var(--ui-density));
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: calc(8px * var(--ui-density));
  font-weight: 900;
}

.type-badge {
  flex: 0 0 auto;
  border-radius: calc(6px * var(--ui-density));
  padding: calc(3px * var(--ui-density)) calc(7px * var(--ui-density));
  color: #fff;
  font-size: var(--font-size-hint);
  font-weight: 700;
  line-height: 1.2;
}

.type-badge.epic { background: var(--work-item-type-epic); }
.type-badge.feature { background: var(--work-item-type-feature); }
.type-badge.story { background: var(--work-item-type-story); }
.type-badge.task { background: var(--work-item-type-task); }
.type-badge.bug { background: var(--work-item-type-bug); }

.status-badge,
.priority-badge,
.importance-badge,
.severity-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(4px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  color: #fff;
  font-size: var(--font-size-hint);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: default;
}

.status-badge:hover:not(:has(select)) { filter: brightness(1.08); }

.status-new { background: #7387ff; }
.status-in_progress { background: #f0a858; }
.status-developing { background: #f0a858; }
.status-pending_test { background: #65b5f6; }
.status-testing { background: #65b5f6; }
.status-completed { background: #42cda8; }
.status-closed { background: #9ea7b8; }
.status-archived { background: #9ea7b8; }
.status-deleted { background: #ef6f89; }
.status-rejected { background: #ef6f89; }
.status-deferred { background: #b8acf6; }
.status-fixed { background: #42cda8; }

.priority-low,
.importance-unimportant { background: #9ea7b8; }
.priority-medium,
.importance-normal { background: #65b5f6; }
.priority-high,
.importance-important { background: #f0a858; }
.priority-critical,
.importance-key { background: #ef6f89; }

.severity-minor { background: #9ea7b8; }
.severity-normal { background: #65b5f6; }
.severity-major { background: #f0a858; }
.severity-fatal { background: #ef6f89; }

.source-badge,
.department-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(4px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  color: #fff;
  font-size: var(--font-size-hint);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.source-client_email,
.department-customer { background: #65b5f6; }
.source-meeting_notes,
.department-business { background: #42cda8; }
.source-change_request,
.department-operation { background: #f0a858; }
.source-internal_optimization,
.department-internal { background: #7387ff; }
.source-other,
.department-none { background: #9ea7b8; }

.sort-arrows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: calc(6px * var(--ui-density));
  opacity: 0.42;
  transition: opacity 140ms ease, color 140ms ease;
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  color: var(--muted-strong);
}

.sort-chevron-svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  display: block;
  transform-origin: center;
  transition: transform 140ms ease;
}

.sort-chevron-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sort-arrows.sort-asc,
.sort-arrows.sort-desc {
  opacity: 1;
  color: var(--muted-strong);
}

.sort-arrows.sort-asc .sort-chevron-svg {
  transform: rotate(180deg);
}

.col-head-sort {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.col-head-sort:hover { color: var(--accent); }

.col-head-filter {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: calc(6px * var(--ui-density));
  opacity: 0.35;
  transition: opacity 140ms ease;
}

.col-head-filter:hover { opacity: 0.8; }
.col-head-filter.active { opacity: 1; color: var(--accent); }

.col-head-filter svg path { fill: currentColor; stroke: currentColor; }

.col-head-cell {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(6px * var(--ui-density));
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  transition: background 140ms ease;
}

.col-resize-handle:hover,
.col-resize-handle:active {
  background: rgba(95, 102, 238, 0.18);
}

.cfilter-popover {
  position: absolute;
  min-width: calc(196px * var(--ui-density));
  max-width: calc(260px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  z-index: 80;
  padding: calc(10px * var(--ui-density));
}

.cfilter-form {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.cfilter-popover .toolbar-popover__head {
  gap: calc(8px * var(--ui-density));
}

.cfilter-popover .toolbar-popover__title {
  font-size: var(--font-size-body);
  line-height: 1.25;
  font-weight: 700;
}

.cfilter-popover .toolbar-popover__desc {
  margin-top: calc(2px * var(--ui-density));
  font-size: var(--font-size-hint);
  line-height: 1.35;
}

.cfilter-popover .multi-check-list {
  gap: calc(4px * var(--ui-density));
  max-height: calc(420px * var(--ui-density));
}

.cfilter-popover .multi-check-option {
  min-height: calc(34px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(8px * var(--ui-density));
  gap: calc(8px * var(--ui-density));
  border-radius: calc(12px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  line-height: 1.25;
}

.cfilter-popover .multi-check-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfilter-popover .multi-check-count {
  flex: 0 0 auto;
  min-width: calc(24px * var(--ui-density));
  padding: 1px calc(7px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.62));
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.cfilter-popover .multi-check-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 20%, transparent),
      color-mix(in srgb, var(--accent-2) 16%, transparent) 54%,
      color-mix(in srgb, var(--accent-3) 14%, transparent)
    );
  color: var(--heading);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
}

.cfilter-popover .multi-check-option:hover .multi-check-count {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.72));
  color: var(--heading);
}

:root[data-theme="dark"] .cfilter-popover .multi-check-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 28%, rgba(10, 18, 32, 0.86)),
      color-mix(in srgb, var(--accent-2) 24%, rgba(12, 24, 42, 0.82)) 58%,
      color-mix(in srgb, var(--accent-3) 20%, rgba(18, 28, 48, 0.80))
    );
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.12)),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.24));
}

:root[data-theme="dark"] .cfilter-popover .multi-check-count {
  background: color-mix(in srgb, var(--accent) 16%, rgba(10, 18, 32, 0.72));
  color: rgba(232, 238, 248, 0.76);
}

:root[data-theme="dark"] .cfilter-popover .multi-check-option:hover .multi-check-count {
  background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.10));
  color: #ffffff;
}

.cfilter-popover .multi-check-option input[type="checkbox"] {
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
  min-width: calc(14px * var(--ui-density));
  min-height: calc(14px * var(--ui-density));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--muted-strong) 42%, transparent);
  border-radius: calc(4px * var(--ui-density));
  background: transparent;
  box-shadow: none;
  flex: 0 0 calc(14px * var(--ui-density));
  accent-color: var(--accent);
}

.cfilter-popover .check-mark,
.cfilter-popover .check-placeholder {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
}

.cfilter-actions {
  display: flex;
  gap: calc(6px * var(--ui-density));
  justify-content: flex-end;
}

.cfilter-actions button {
  min-height: calc(32px * var(--ui-density));
  height: calc(32px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: var(--font-size-title);
  font-weight: 700;
}

.inline-edit-select {
  font-family: inherit;
  width: 100%;
  height: calc(28px * var(--ui-density));
  min-height: calc(28px * var(--ui-density));
  box-sizing: border-box;
  line-height: 1.2;
  font-size: var(--font-size-hint);
  font-weight: 700;
  padding: calc(2px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.28);
  border-radius: calc(999px * var(--ui-density));
  background: var(--layer-field);
  color: var(--text);
  min-width: calc(80px * var(--ui-density));
  max-width: 100%;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.46), 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.inline-edit-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) rgba(125, 99, 244, 0.14), 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.inline-edit-input {
  font-family: inherit;
  width: 100%;
  height: calc(28px * var(--ui-density));
  min-height: calc(28px * var(--ui-density));
  box-sizing: border-box;
  line-height: 1.2;
  font-size: var(--font-size-hint);
  font-weight: 700;
  padding: calc(2px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.28);
  border-radius: calc(999px * var(--ui-density));
  background: var(--layer-field);
  color: var(--text);
  min-width: calc(92px * var(--ui-density));
  max-width: 100%;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.46), 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.inline-edit-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) rgba(125, 99, 244, 0.14), 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.work-items-table-wrap .inline-edit-input,
.work-items-table-wrap .inline-edit-input[type="date"],
.work-items-table-wrap .inline-edit-input[type="number"],
.work-items-table-wrap .inline-edit-input[type="text"] {
  height: calc(28px * var(--ui-density));
  min-height: calc(28px * var(--ui-density));
  padding: calc(2px * var(--ui-density)) calc(10px * var(--ui-density));
  box-sizing: border-box;
}

.work-items-table-wrap .inline-edit-input[type="date"]::-webkit-calendar-picker-indicator {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  padding: calc(2px * var(--ui-density));
}

.work-items-table-wrap [data-inline-cell] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  min-height: calc(28px * var(--ui-density));
  vertical-align: middle;
  cursor: pointer;
}

.work-items-table-wrap [data-inline-cell].inline-editing {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 40;
  cursor: default;
}

.work-items-table-wrap .status-badge.inline-editing,
.work-items-table-wrap .priority-badge.inline-editing,
.work-items-table-wrap .importance-badge.inline-editing {
  min-height: calc(28px * var(--ui-density));
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-items-table-wrap [data-inline-cell].inline-editing .custom-select {
  width: 100%;
  min-width: 0;
  z-index: 180;
}

.work-items-table-wrap [data-inline-cell].inline-editing .custom-select-trigger {
  min-height: calc(28px * var(--ui-density));
  height: calc(28px * var(--ui-density));
  box-sizing: border-box;
  line-height: 1.2;
  padding: calc(3px * var(--ui-density)) calc(8px * var(--ui-density)) calc(3px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.28);
  border-radius: calc(999px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94)),
    var(--layer-field);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.10);
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--muted-strong);
}

.work-items-table-wrap [data-inline-cell].inline-editing .custom-select.open .custom-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) rgba(125, 99, 244, 0.14), 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.work-items-table-wrap [data-inline-cell].inline-editing .custom-select-menu {
  min-width: 0;
  z-index: 220;
  border-color: rgba(125, 99, 244, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96)),
    var(--layer-field);
  box-shadow:
    0 calc(18px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(111, 123, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.78);
}

.custom-select-menu--portaled {
  z-index: 9999;
  display: grid;
  gap: calc(4px * var(--ui-density));
  border-color: rgba(125, 99, 244, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96)),
    var(--layer-field);
  box-shadow:
    0 calc(18px * var(--ui-density)) calc(34px * var(--ui-density)) rgba(111, 123, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.78);
}

:root[data-theme="dark"] .inline-edit-select,
:root[data-theme="dark"] .inline-edit-input {
  border-color: rgba(173, 228, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(8, 14, 24, 0.96);
  color: #edf3fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .work-items-table-wrap [data-inline-cell].inline-editing .custom-select-trigger {
  border-color: rgba(173, 228, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(8, 14, 24, 0.96);
  color: rgba(232, 238, 248, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .inline-edit-select:focus,
:root[data-theme="dark"] .inline-edit-input:focus,
:root[data-theme="dark"] .work-items-table-wrap [data-inline-cell].inline-editing .custom-select.open .custom-select-trigger {
  border-color: color-mix(in srgb, var(--accent-2) 46%, rgba(173, 228, 255, 0.18));
  box-shadow:
    0 0 0 calc(3px * var(--ui-density)) color-mix(in srgb, var(--accent) 20%, transparent),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .work-items-table-wrap [data-inline-cell].inline-editing .custom-select-menu,
:root[data-theme="dark"] .custom-select-menu--portaled {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 17, 26, 0.98), rgba(8, 13, 20, 0.96)),
    rgba(7, 11, 18, 0.98);
  box-shadow:
    0 calc(20px * var(--ui-density)) calc(42px * var(--ui-density)) rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.custom-select--compact .custom-select-option,
.custom-select-menu--portaled .custom-select-option {
  min-height: calc(30px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  font-size: var(--font-size-body);
  line-height: 1.25;
  font-weight: 600;
}

.work-items-table-wrap .gantt-fields-row:has(.inline-editing) {
  position: relative;
  z-index: 300;
  contain: none;
  content-visibility: visible;
}

.work-items-table-wrap .gantt-fields:has(.inline-editing),
.work-items-table-wrap .gantt-fields > div:has(.inline-editing) {
  overflow: visible;
  contain: none;
}

.work-items-table-wrap .gantt-fields > div:has(.inline-editing) {
  position: relative;
  z-index: 320;
}

.list-filter-row input[data-filter-value] {
  height: calc(48px * var(--ui-density));
  box-sizing: border-box;
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
  border: 1px solid rgba(125, 99, 244, 0.24);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
}

.date-text-input {
  padding-right: calc(46px * var(--ui-density)) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236d63ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.8v3.4M17 3.8v3.4M4.8 9.2h14.4M6.5 5.8h11A2.5 2.5 0 0 1 20 8.3v9.2A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5V8.3a2.5 2.5 0 0 1 2.5-2.5Z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 0, calc(22px * var(--ui-density)) calc(22px * var(--ui-density)) !important;
  background-position: 0 0, right calc(16px * var(--ui-density)) center !important;
}

.date-picker-popover {
  position: fixed;
  z-index: 190;
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-width: calc(292px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.26);
  border-radius: calc(22px * var(--ui-density));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.58), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98)),
    #fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.56),
    0 calc(28px * var(--ui-density)) calc(72px * var(--ui-density)) rgba(83, 98, 155, 0.20),
    0 calc(10px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.14);
  color: var(--text);
  transform-origin: top left;
  will-change: transform, top, left;
}

:root:not([data-theme="dark"]) .date-picker-popover {
  border-color: rgba(125, 99, 244, 0.32);
  box-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(20px * var(--ui-density)) calc(52px * var(--ui-density)) rgba(83, 98, 155, 0.16),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.12);
}

.date-picker-head,
.date-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-density));
}

.date-picker-head strong {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 800;
}

.date-picker-nav,
.date-picker-text {
  min-height: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  box-shadow: none;
}

.date-picker-nav {
  width: calc(34px * var(--ui-density));
  min-width: calc(34px * var(--ui-density));
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  background: rgba(125, 99, 244, 0.08);
  font-size: calc(22px * var(--ui-density));
  font-weight: 800;
}

.date-picker-text {
  padding: calc(5px * var(--ui-density)) calc(12px * var(--ui-density));
  color: var(--accent);
  background: rgba(125, 99, 244, 0.08);
  font-size: var(--font-size-hint);
  font-weight: 800;
}

.date-picker-weekdays,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(6px * var(--ui-density));
}

.date-picker-weekdays span {
  min-height: calc(24px * var(--ui-density));
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 800;
}

.date-picker-day {
  width: 100%;
  min-width: 0;
  min-height: calc(36px * var(--ui-density));
  height: calc(36px * var(--ui-density));
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--ui-density));
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-hint);
  font-weight: 800;
}

.date-picker-day:hover,
.date-picker-nav:hover,
.date-picker-text:hover {
  transform: none;
  color: var(--heading);
  background: linear-gradient(135deg, rgba(232, 230, 255, 0.92), rgba(245, 220, 255, 0.76));
}

.date-picker-day.muted {
  color: rgba(98, 112, 132, 0.44);
}

.date-picker-day.today {
  border: 1px solid rgba(125, 99, 244, 0.38);
}

.date-picker-day.selected {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 99, 244, 0.22);
}

:root[data-theme="dark"] .date-picker-popover {
  border-color: var(--layer-line);
  background:
    linear-gradient(135deg, rgba(30, 49, 68, 0.98), rgba(18, 32, 48, 0.98)),
    #122030;
  box-shadow: 0 calc(24px * var(--ui-density)) calc(70px * var(--ui-density)) rgba(0, 0, 0, 0.34), 0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.26);
}

.date-time-picker-popover {
  gap: calc(12px * var(--ui-density));
}

.date-time-picker-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: calc(8px * var(--ui-density));
  padding: calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--ui-density));
  background: color-mix(in srgb, var(--control) 84%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 54%, transparent);
}

.date-time-picker-field {
  display: grid;
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 700;
  text-align: center;
}

.date-time-picker-field input {
  min-height: calc(38px * var(--ui-density));
  padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density));
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.date-time-picker-separator {
  padding-bottom: calc(8px * var(--ui-density));
  color: var(--accent);
  font-size: calc(20px * var(--ui-density));
  font-weight: 800;
}

.date-time-picker-confirm {
  min-height: calc(34px * var(--ui-density));
  padding: calc(5px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  font-size: var(--font-size-hint);
  font-weight: 700;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}

.date-time-picker-confirm:hover {
  transform: none;
  filter: brightness(1.04);
}

.list-number-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: rgba(255,255,255,0.5);
  color: var(--muted-strong);
  font-size: calc(12px * var(--ui-density));
  font-weight: 700;
  margin-right: calc(6px * var(--ui-density));
  white-space: nowrap;
}

.multi-check-list {
  display: grid;
  gap: calc(6px * var(--ui-density));
  max-height: calc(240px * var(--ui-density));
  overflow-y: auto;
  padding-right: calc(2px * var(--ui-density));
}

.multi-check-option {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  cursor: pointer;
  font-size: var(--font-size-body);
  transition: background 140ms ease;
}

.multi-check-option:hover {
  background: linear-gradient(135deg, rgba(232, 230, 255, 0.92), rgba(245, 220, 255, 0.76));
  color: var(--heading);
}

.multi-check-option input[type="checkbox"] {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  accent-color: var(--accent);
}

.check-mark {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--accent);
  flex-shrink: 0;
}

.check-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-placeholder {
  display: inline-flex;
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  margin-left: auto;
  flex-shrink: 0;
}

.enum-dd-trigger {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: calc(120px * var(--ui-density));
  min-height: calc(52px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enum-dd-trigger:hover { border-color: var(--accent); background: var(--control-hover); }

.enum-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.enum-dd-menu {
  position: absolute;
  top: calc(100% + calc(8px * var(--ui-density)));
  left: 0;
  min-width: 100%;
  max-width: calc(280px * var(--ui-density));
  max-height: calc(260px * var(--ui-density));
  overflow-y: auto;
  border-radius: calc(18px * var(--ui-density));
  z-index: 130;
  padding: calc(10px * var(--ui-density));
}

.enum-dd-option {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(12px * var(--ui-density));
  cursor: pointer;
  font-size: var(--font-size-body);
  transition: background 140ms ease;
}

.enum-dd-option:hover {
  background: linear-gradient(135deg, rgba(232, 230, 255, 0.92), rgba(245, 220, 255, 0.76));
  color: var(--heading);
}

.enum-dd-option input[type="checkbox"] {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  accent-color: var(--accent);
}

.enum-dd-option .check-mark {
  color: var(--accent);
  flex-shrink: 0;
}

.enum-dd-option .check-placeholder {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  margin-left: auto;
  flex-shrink: 0;
}

.head-icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.type-tree-cell {
  gap: calc(2px * var(--ui-density));
}

.type-tree-cell .tree-indent,
.type-tree-cell .tree-spacer {
  flex: 0 0 auto;
}

.progress-mini {
  width: calc(82px * var(--ui-density));
  height: calc(8px * var(--ui-density));
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: var(--progress-track);
}

.progress-mini i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

.gantt-lane {
  position: relative;
  display: grid;
  min-width: max-content;
}

.gantt-row.is-row-hover .gantt-lane {
  background: rgba(125, 99, 244, 0.08);
}

.gantt-lane > span:not(.gantt-bar):not(.gantt-empty) {
  min-height: calc(62px * var(--ui-density));
  border-right: 1px solid var(--line-strong);
}

.gantt-bar {
  position: absolute;
  top: 50%;
  left: calc(8px * var(--ui-density));
  right: calc(8px * var(--ui-density));
  transform: translateY(-50%);
  height: calc(24px * var(--ui-density));
  margin: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(112, 132, 255, 0.28);
}

.gantt-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

.gantt-bar b {
  position: relative;
  z-index: 1;
  padding: 0 calc(10px * var(--ui-density));
  color: var(--heading);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.gantt-bar.overdue {
  background: var(--danger-bg);
}

.gantt-bar.overdue i {
  background: linear-gradient(90deg, #ff6c72, #ff9cab);
}

.gantt-bar.overdue b {
  color: #c12d4c;
}

.gantt-empty {
  position: absolute;
  left: calc(16px * var(--ui-density));
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.field-config,
.attach-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.field-config-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(calc(88px * var(--ui-density)), 1fr) minmax(calc(96px * var(--ui-density)), 1fr);
  align-items: center;
  gap: calc(12px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density)) calc(2px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.field-option,
.check-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(calc(88px * var(--ui-density)), 1fr) minmax(calc(96px * var(--ui-density)), 1fr);
  align-items: center;
  gap: calc(12px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}

.field-option.selected {
  background: var(--active-surface);
}

.check-row {
  grid-template-columns: calc(28px * var(--ui-density)) minmax(calc(180px * var(--ui-density)), 1fr) auto;
}

.field-option input,
.check-row input {
  width: auto;
}

.field-option__name {
  min-width: 0;
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: 400;
}

.field-option__check,
.field-option__sort {
  display: inline-flex;
  align-items: center;
}

.field-option__check {
  justify-content: center;
}

.field-option__sort {
  justify-content: flex-end;
  gap: calc(8px * var(--ui-density));
}

.field-option__sort button {
  min-width: calc(34px * var(--ui-density));
  min-height: calc(34px * var(--ui-density));
  padding: 0;
  border-radius: calc(12px * var(--ui-density));
  font-size: calc(18px * var(--ui-density));
  line-height: 1;
 }

.field-option__sort button[data-field-move="up"],
.field-option__sort button[data-field-move="down"] {
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--control) 80%, transparent);
  color: var(--muted-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(84, 99, 140, 0.06);
}

.field-option__sort button:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--control-hover) 86%, transparent);
  color: var(--text);
}

.work-items-field-config {
  display: grid;
  gap: calc(10px * var(--ui-density));
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 400;
}

.modal:has(.work-items-field-config) {
  width: min(calc(680px * var(--ui-density)), calc(100vw - calc(72px * var(--ui-density))));
  max-height: min(74dvh, calc(680px * var(--ui-density)));
  padding: calc(26px * var(--ui-density)) calc(30px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
}

.modal:has(.work-items-field-config) .modal-head {
  padding-bottom: calc(14px * var(--ui-density));
}

.modal:has(.work-items-field-config) .modal-title-group h3 {
  font-size: var(--font-size-body);
  line-height: 1.2;
  font-weight: 600;
}

.modal:has(.work-items-field-config) .modal-body {
  padding-block: 0 calc(18px * var(--ui-density));
}

.modal:has(.work-items-field-config) .modal-footer {
  padding-top: calc(16px * var(--ui-density));
}

.modal:has(.work-items-field-config) .modal-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(30px * var(--ui-density));
  height: calc(30px * var(--ui-density));
  padding: calc(5px * var(--ui-density)) calc(14px * var(--ui-density));
  font-size: var(--font-size-body);
  font-weight: 500;
  border-radius: calc(999px * var(--ui-density));
}

.modal:has(.work-items-field-config) .layer-close-button {
  width: calc(28px * var(--ui-density));
  height: calc(28px * var(--ui-density));
  font-size: calc(19px * var(--ui-density));
}

.work-items-field-config-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(calc(88px * var(--ui-density)), 1fr) minmax(calc(96px * var(--ui-density)), 1fr);
  align-items: center;
  gap: calc(12px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) calc(12px * var(--ui-density)) calc(2px * var(--ui-density));
}

.work-items-field-config-head span {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.35;
  font-weight: 700;
}

.work-items-field-config-list {
  max-height: min(48dvh, calc(450px * var(--ui-density)));
  display: grid;
  gap: calc(9px * var(--ui-density));
  overflow: auto;
  padding: calc(6px * var(--ui-density)) calc(8px * var(--ui-density)) calc(8px * var(--ui-density)) calc(4px * var(--ui-density));
  scrollbar-gutter: stable;
}

.work-items-field-option {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(calc(88px * var(--ui-density)), 1fr) minmax(calc(96px * var(--ui-density)), 1fr);
  align-items: center;
  gap: calc(12px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.14);
  border-radius: calc(12px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(250, 252, 255, 0.58)),
    rgba(255, 255, 255, 0.56);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.06);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.work-items-field-option.selected {
  border-color: rgba(105, 118, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(232, 237, 255, 0.92), rgba(245, 241, 255, 0.82)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.work-items-field-check {
  display: inline-grid;
  place-items: center;
  justify-self: center;
}

.work-items-field-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.work-items-field-drag {
  display: inline-grid;
  place-items: center;
  width: calc(16px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  color: rgba(102, 114, 154, 0.7);
  font-size: calc(12px * var(--ui-density));
  font-weight: 400;
  letter-spacing: 1px;
  cursor: grab;
  user-select: none;
}

.work-items-field-drag:hover {
  background: rgba(105, 118, 255, 0.10);
  color: rgba(91, 102, 237, 0.92);
}

.work-items-field-drag:active {
  cursor: grabbing;
}

.work-items-field-option.dragging {
  opacity: 0.58;
  transform: scale(0.992);
  border-color: rgba(105, 118, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(16px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(92, 105, 230, 0.14);
}

.work-items-field-option.drag-over {
  border-color: rgba(105, 118, 255, 0.34);
}

.work-items-field-check input {
  width: calc(11px * var(--ui-density));
  height: calc(11px * var(--ui-density));
  accent-color: #6872f7;
}

.work-items-field-name {
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: 1.25;
  font-weight: 400;
}

:root[data-theme="dark"] .modal:has(.work-items-field-config) {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(21, 32, 48, 0.96), rgba(11, 20, 34, 0.94)),
    rgba(8, 15, 27, 0.96);
  color: rgba(232, 238, 248, 0.86);
  box-shadow:
    0 calc(26px * var(--ui-density)) calc(70px * var(--ui-density)) rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .modal:has(.work-items-field-config) .modal-head,
:root[data-theme="dark"] .modal:has(.work-items-field-config) .modal-footer {
  border-color: rgba(173, 228, 255, 0.12);
}

:root[data-theme="dark"] .modal:has(.work-items-field-config) .modal-title-group h3,
:root[data-theme="dark"] .work-items-field-name {
  color: #edf3fb;
}

:root[data-theme="dark"] .work-items-field-config-head span {
  color: rgba(232, 238, 248, 0.62);
}

:root[data-theme="dark"] .work-items-field-option {
  border-color: rgba(173, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(10, 17, 29, 0.82);
  color: rgba(232, 238, 248, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .work-items-field-option.selected {
  border-color: color-mix(in srgb, var(--accent-2) 34%, rgba(173, 228, 255, 0.14));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 24%, rgba(13, 22, 35, 0.92)),
      color-mix(in srgb, var(--accent-2) 18%, rgba(6, 16, 27, 0.94))
    ),
    rgba(10, 17, 29, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .work-items-field-drag {
  color: rgba(232, 238, 248, 0.44);
}

:root[data-theme="dark"] .work-items-field-drag:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: rgba(232, 238, 248, 0.82);
}

:root[data-theme="dark"] .work-items-field-check input {
  accent-color: var(--accent);
}

:root[data-theme="dark"] .modal:has(.work-items-field-config) .modal-footer button.ghost {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(11, 18, 30, 0.86);
  color: rgba(232, 238, 248, 0.82);
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  margin-top: calc(8px * var(--ui-density));
  padding-top: calc(16px * var(--ui-density));
  border-top: 1px solid var(--line-strong);
}

.modal-actions button {
  min-width: calc(112px * var(--ui-density));
}

.drawer-form {
  grid-template-columns: 1fr 1fr;
}

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(var(--layer-drawer-width), calc(100vw - calc(24px * var(--ui-density))));
  max-width: calc(100vw - calc(24px * var(--ui-density)));
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.28), transparent 54%),
    linear-gradient(180deg, rgba(243, 247, 255, 0.72), rgba(226, 236, 250, 0.56)),
    rgba(255, 255, 255, 0.28);
  border-left: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 68%, rgba(125, 99, 244, 0.52));
  box-shadow:
    -24px 0 calc(54px * var(--ui-density)) rgba(84, 101, 150, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    var(--layer-accent-shadow);
  z-index: 10;
  padding: calc(24px * var(--ui-density));
  overflow: hidden;
  backdrop-filter: blur(calc(24px * var(--ui-density))) saturate(155%);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: calc(18px * var(--ui-density));
}

.drawer.work-item-drawer {
  z-index: 21;
  width: min(var(--layer-work-item-drawer-width), calc(100vw - calc(24px * var(--ui-density))));
  max-width: calc(100vw - calc(24px * var(--ui-density)));
}

@media (max-width: 760px) {
  .drawer,
  .drawer.work-item-drawer {
    width: 100vw;
    max-width: 100vw;
    padding: calc(16px * var(--ui-density));
  }
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background:
    radial-gradient(calc(860px * var(--ui-density)) calc(560px * var(--ui-density)) at 72% 70%, rgba(215, 150, 245, 0.20), transparent 68%),
    radial-gradient(calc(720px * var(--ui-density)) calc(520px * var(--ui-density)) at 38% 18%, rgba(155, 219, 250, 0.24), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(78, 92, 126, 0.16)),
    var(--overlay);
  backdrop-filter: blur(calc(12px * var(--ui-density))) saturate(136%);
}

.drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(2px * var(--ui-density));
  height: 100%;
  background: linear-gradient(180deg, rgba(182, 169, 255, 0.96), rgba(116, 136, 255, 0.24));
  pointer-events: none;
}

.drawer:has(.system-user-editor-shell)::before {
  display: none;
}

.drawer::after,
.modal::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.34), transparent 50%),
    linear-gradient(135deg, rgba(169, 146, 255, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 38%);
  opacity: 0.95;
  z-index: -1;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  padding-right: calc(54px * var(--ui-density));
}

.drawer-head h3 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
}

.drawer-head p {
  margin: calc(8px * var(--ui-density)) 0 0;
}

.drawer-body {
  display: grid;
  gap: calc(14px * var(--ui-density));
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(4px * var(--ui-density));
}

.drawer:has(.system-user-editor-shell) {
  border-left-color: transparent;
  padding: 0;
  gap: 0;
}

.drawer:has(.system-user-editor-shell) .drawer-head {
  padding: calc(24px * var(--ui-density)) calc(78px * var(--ui-density)) calc(20px * var(--ui-density)) calc(44px * var(--ui-density));
  margin: 0;
}

.drawer:has(.system-user-editor-shell) .drawer-head h3 {
  font-size: calc(32px * var(--ui-density));
  font-weight: 800;
  line-height: 1.15;
}

.drawer:has(.system-user-editor-shell) .drawer-body {
  gap: 0;
  padding: calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) calc(14px * var(--ui-density));
}

.work-item-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(calc(360px * var(--ui-density)), 0.92fr);
  gap: calc(22px * var(--ui-density));
  align-items: start;
  height: 100%;
}

.work-item-main-column,
.work-item-side-column {
  min-width: 0;
}

.work-item-main-column {
  display: grid;
  gap: calc(14px * var(--ui-density));
  align-content: start;
  min-height: 0;
}

.work-item-head-grid {
  display: grid;
  grid-template-columns: minmax(calc(180px * var(--ui-density)), 2fr) minmax(0, 4fr);
  gap: calc(18px * var(--ui-density));
}

.workshop-entry-head-grid {
  grid-template-columns: minmax(0, 4fr) minmax(calc(220px * var(--ui-density)), 2fr);
}

.workshop-description-textarea {
  min-height: calc(500px * var(--ui-density));
}

.workshop-research-textarea {
  min-height: calc(220px * var(--ui-density));
}

.workshop-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.workshop-row-actions button {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--text);
  border-radius: calc(999px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.workshop-row-actions button:hover:not(.danger-link),
.workshop-drawer-actions button:hover:not(.danger-link):not(.primary) {
  color: #fff;
  background: var(--accent-gradient);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}

.workshop-row-actions .danger-link {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background: var(--danger-bg);
}

.workshop-row-actions .danger-link:hover,
.workshop-drawer-actions .danger-link:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
  transform: translateY(-1px);
}

.workshop-drawer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
  margin-left: auto;
}

.workshop-drawer-actions .danger-link {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background: var(--danger-bg);
}

.workshop-related-box,
.workshop-record-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.workshop-record-item {
  display: grid;
  gap: calc(4px * var(--ui-density));
  width: 100%;
  text-align: left;
  border: 1px solid var(--layer-input-border);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  color: var(--text);
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  box-shadow: var(--layer-input-shadow);
}

.workshop-record-item strong {
  color: var(--heading);
  font-size: calc(16px * var(--ui-density));
}

.workshop-record-item span {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
}

.work-item-side-column {
  position: relative;
  min-width: 0;
  display: grid;
  gap: calc(14px * var(--ui-density));
  align-content: start;
  min-height: 0;
}

.work-item-side-panel {
  position: relative;
  display: grid;
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(20px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.44), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
  min-width: 0;
  width: 100%;
  align-content: start;
}

.work-item-side-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--heading);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.35;
}

.work-item-side-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.30), transparent 46%),
    linear-gradient(135deg, rgba(167, 147, 255, 0.12), transparent 56%);
  z-index: 0;
}

.work-item-side-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--ui-density));
  align-content: start;
}

.work-item-side-groups {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(20px * var(--ui-density));
  align-content: start;
}

.work-item-side-group {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.work-item-side-group + .work-item-side-group {
  padding-top: calc(20px * var(--ui-density));
  border-top: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 68%, rgba(255, 255, 255, 0.34));
}

.work-item-section {
  position: relative;
  z-index: 0;
  display: grid;
  gap: calc(10px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  border-radius: calc(22px * var(--ui-density));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.44), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
}

.work-item-section:has([data-relation-dialog]:not([hidden])) {
  z-index: 88;
}

.work-item-section-head {
  color: var(--muted-strong);
  font-size: var(--font-size-title);
  font-weight: 700;
}

.work-item-section-head .work-item-label {
  font-size: var(--font-size-title);
}

.work-item-section-body {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.work-item-field {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.field-shell {
  --field-shell-meta-min-height: 0px;
}

.field-shell__label {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(8px * var(--ui-density));
}

.field-shell__label-text {
  min-width: 0;
}

.field-shell__label-tail {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.field-shell__icon:empty {
  display: none;
}

.field-shell__required {
  color: var(--danger);
  font-size: inherit;
  line-height: 1;
}

.field-shell__label-help {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  flex: 0 0 calc(18px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  border-radius: calc(999px * var(--ui-density));
  background: rgba(224, 230, 241, 0.82);
  color: var(--muted);
  font-size: calc(12px * var(--ui-density));
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.field-shell__display {
  width: 100%;
}

.field-shell--compact {
  gap: calc(6px * var(--ui-density));
}

.field-shell--compact .work-item-label {
  gap: calc(6px * var(--ui-density));
  font-size: var(--font-size-hint);
}

.field-shell--compact .work-item-label-icon {
  width: calc(20px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  flex-basis: calc(20px * var(--ui-density));
  border-radius: calc(7px * var(--ui-density));
}

.field-shell--compact .work-item-label-icon svg {
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
}

.field-shell__meta {
  min-height: var(--field-shell-meta-min-height);
  display: grid;
  gap: calc(2px * var(--ui-density));
}

.field-shell__help,
.field-shell__error {
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.field-shell__help {
  color: var(--muted);
}

.field-shell__error {
  color: var(--danger);
}

.field-shell--readonly .field-shell__label {
  align-self: start;
}

.field-shell--invalid input,
.field-shell--invalid select,
.field-shell--invalid textarea,
.field-shell--invalid .custom-select-trigger,
.field-shell--invalid .work-item-date-trigger {
  border-color: color-mix(in srgb, var(--danger) 72%, white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 calc(3px * var(--ui-density)) color-mix(in srgb, var(--danger) 14%, transparent) !important;
}

.field-shell-section--invalid textarea,
.field-shell-section--invalid input,
.field-shell-section--invalid select {
  border-color: color-mix(in srgb, var(--danger) 72%, white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 calc(3px * var(--ui-density)) color-mix(in srgb, var(--danger) 14%, transparent) !important;
}

.work-item-head-grid > .work-item-field {
  position: relative;
  z-index: 1;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 82%, rgba(125, 99, 244, 0.26));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.44), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  backdrop-filter: var(--glass);
}

.work-item-head-grid > .work-item-field:has(.custom-select.open) {
  z-index: 14;
}

.work-item-label {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.35;
}

.work-item-label-icon {
  width: calc(24px * var(--ui-density));
  height: calc(24px * var(--ui-density));
  flex: 0 0 calc(24px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  border-radius: calc(8px * var(--ui-density));
  color: var(--accent-2);
  background: rgba(232, 238, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.work-item-label-icon svg {
  width: calc(17px * var(--ui-density));
  height: calc(17px * var(--ui-density));
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.work-item-field > span:not(.work-item-label) {
  color: var(--muted-strong);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.work-item-label b {
  color: var(--danger);
  font-size: calc(16px * var(--ui-density));
  line-height: 1;
}

.work-item-side-panel .work-item-field {
  position: relative;
  z-index: 1;
  grid-template-columns: calc(122px * var(--ui-density)) minmax(0, 1fr);
  align-items: start;
  gap: calc(12px * var(--ui-density));
}

.work-item-side-panel .work-item-label {
  min-width: 0;
  white-space: nowrap;
  padding-top: calc(12px * var(--ui-density));
}

.work-item-side-panel .work-item-label > span:last-of-type::after {
  content: "：";
}

.work-item-side-inline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.work-item-side-column:has(.custom-select.open),
.work-item-side-column:has(.work-item-date-dialog:not([hidden])) {
  z-index: 36;
}

.work-item-side-panel:has(.custom-select.open),
.work-item-side-panel:has(.work-item-date-dialog:not([hidden])) {
  z-index: 37;
}

.work-item-side-group:has(.custom-select.open),
.work-item-side-group:has(.work-item-date-dialog:not([hidden])) {
  position: relative;
  z-index: 38;
}

.work-item-side-inline:has(.custom-select.open),
.work-item-side-inline:has(.work-item-date-dialog:not([hidden])) {
  z-index: 39;
}

.work-item-side-panel .work-item-field:has(.custom-select.open),
.work-item-side-panel .work-item-field:has(.work-item-date-dialog:not([hidden])) {
  z-index: 40;
}

.work-item-side-inline .work-item-field {
  grid-template-columns: 1fr;
  gap: calc(8px * var(--ui-density));
}

.work-item-side-inline .work-item-label {
  padding-top: 0;
}

.work-item-side-inline .work-item-label > span:last-of-type::after {
  content: none;
}

.work-item-side-panel .work-item-field input,
.work-item-side-panel .work-item-field select,
.work-item-side-panel .work-item-field .custom-select-trigger,
.work-item-side-panel .work-item-display {
  min-height: calc(46px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  font-size: var(--font-size-body);
}

.work-item-field.span-2 {
  grid-column: span 2;
}

.work-item-field.full {
  grid-column: 1 / -1;
}

.work-item-field textarea {
  min-height: calc(84px * var(--ui-density));
  resize: vertical;
}

.work-item-main-column .work-item-field input,
.work-item-main-column .work-item-field select,
.work-item-main-column .work-item-field textarea,
.work-item-main-column .work-item-field .custom-select-trigger,
.work-item-main-column .work-item-display {
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.work-item-display {
  min-height: calc(52px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(18px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  line-height: 1.65;
}

.work-item-display.prose {
  align-items: flex-start;
  white-space: normal;
  font-size: var(--font-size-body);
}

.work-item-spacer {
  visibility: hidden;
  pointer-events: none;
}

.work-item-relations {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.work-item-relations.compact,
.work-item-relations.unified {
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.88));
}

.work-item-relation-action {
  display: grid;
  gap: calc(14px * var(--ui-density));
  align-items: start;
}

.relation-text-link {
  width: auto;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5f66ee;
  box-shadow: none;
  backdrop-filter: none;
  justify-self: start;
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
  line-height: 1.4;
}

.relation-text-link:hover {
  transform: none;
  border-color: transparent;
  background: transparent;
  color: #6c63f4;
}

.relation-text-link.active {
  color: #6c63f4;
}

.relation-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(720px * var(--ui-density)) calc(480px * var(--ui-density)) at 66% 70%, rgba(199, 152, 244, 0.20), transparent 68%),
    rgba(56, 68, 86, 0.22);
  backdrop-filter: blur(calc(8px * var(--ui-density))) saturate(124%);
}

.relation-dialog {
  position: fixed;
  z-index: 121;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(520px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  max-height: calc(100vh - calc(64px * var(--ui-density)));
  display: grid;
  gap: calc(16px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(26px * var(--ui-density));
  background:
    linear-gradient(135deg, rgba(249, 252, 255, 0.74), rgba(218, 233, 250, 0.60)),
    linear-gradient(320deg, rgba(255, 255, 255, 0.46), rgba(191, 219, 242, 0.24)),
    var(--layer-surface);
  box-shadow: var(--layer-shadow);
  backdrop-filter: var(--glass);
}

.relation-dialog-head,
.relation-dialog-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.relation-dialog-head h4 {
  margin: 0;
  font-size: var(--font-size-title);
  color: var(--heading);
}

.relation-dialog-body {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.relation-dialog-filters {
  display: grid;
  grid-template-columns: calc(140px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(12px * var(--ui-density));
}

.relation-dialog-close {
  position: static;
}

.relation-search-field {
  gap: calc(8px * var(--ui-density));
}

.relation-search-field span {
  color: var(--muted);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.relation-picker-list {
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-height: calc(140px * var(--ui-density));
  max-height: calc(180px * var(--ui-density));
  overflow: auto;
  padding: calc(6px * var(--ui-density)) calc(2px * var(--ui-density)) calc(2px * var(--ui-density));
}

.relation-picker-placeholder {
  min-height: calc(120px * var(--ui-density));
  display: grid;
  place-items: center;
  margin: 0;
  padding: calc(18px * var(--ui-density));
  text-align: center;
  border-radius: calc(20px * var(--ui-density));
  border: 1px dashed rgba(126, 145, 188, 0.28);
  background: rgba(255, 255, 255, 0.58);
}

.relation-picker-option {
  min-height: calc(60px * var(--ui-density));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  background: var(--layer-field);
  border-color: var(--layer-line);
}

.relation-picker-option:hover {
  transform: none;
}

.relation-picker-option.selected {
  color: #5f66ee;
  background: linear-gradient(135deg, rgba(107, 140, 255, 0.18), rgba(181, 116, 246, 0.16));
  border-color: rgba(125, 99, 244, 0.22);
}

.relation-picker-option div {
  min-width: 0;
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.relation-picker-option strong,
.relation-picker-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-picker-option strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.relation-picker-option span,
.relation-picker-option small {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.work-item-date {
  position: relative;
  min-width: 0;
}

.work-item-date-trigger {
  width: 100%;
  min-height: calc(46px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: var(--radius-sm);
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: 600;
  text-align: left;
}

.work-item-date-trigger:hover {
  transform: none;
}

.work-item-date-trigger:focus-visible {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
  outline: none;
}

.work-item-date-icon {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: calc(16px * var(--ui-density));
  line-height: 1;
}

.work-item-date-dialog {
  position: absolute;
  top: calc(100% + calc(10px * var(--ui-density)));
  left: 0;
  right: 0;
  z-index: 68;
  display: grid;
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--layer-line);
  border-radius: calc(22px * var(--ui-density));
  background:
    linear-gradient(135deg, rgba(247, 251, 255, 0.96), rgba(226, 238, 252, 0.90)),
    var(--layer-surface);
  box-shadow: var(--layer-soft-shadow);
  backdrop-filter: var(--glass);
}

.work-item-date-head,
.work-item-date-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
}

.work-item-date-head strong {
  color: var(--heading);
  font-size: calc(15px * var(--ui-density));
  font-weight: 700;
}

.work-item-date-head .ghost,
.work-item-date-footer .ghost {
  min-height: calc(34px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  box-shadow: none;
}

.work-item-date-weekdays,
.work-item-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(6px * var(--ui-density));
}

.work-item-date-weekdays span {
  color: var(--muted);
  font-size: calc(13px * var(--ui-density));
  font-weight: 700;
  text-align: center;
}

.work-item-date-day {
  min-height: calc(38px * var(--ui-density));
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: calc(14px * var(--ui-density));
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text);
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
  box-shadow: none;
}

.work-item-date-day:hover {
  transform: none;
  background: rgba(95, 102, 238, 0.12);
}

.work-item-date-day.outside {
  color: rgba(123, 138, 170, 0.56);
}

.work-item-date-day.today {
  border-color: rgba(95, 102, 238, 0.28);
  color: #5f66ee;
}

.work-item-date-day.selected {
  background: linear-gradient(135deg, #5d78ff, #8e63ff);
  color: #fff;
  border-color: transparent;
}

.relation-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
}

.relation-selected-chip {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.78);
}

.relation-selected-chip strong,
.relation-selected-chip span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.relation-selected-chip strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.relation-selected-chip span,
.relation-selected-chip small {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.relation-selected-chip button {
  width: calc(24px * var(--ui-density));
  height: calc(24px * var(--ui-density));
  min-height: calc(24px * var(--ui-density));
  padding: 0;
  border-radius: calc(999px * var(--ui-density));
  background: rgba(125, 99, 244, 0.10);
  color: #7d63f4;
  font-size: calc(16px * var(--ui-density));
}

.relation-card {
  display: grid;
  gap: calc(14px * var(--ui-density));
  align-items: center;
  padding: calc(12px * var(--ui-density)) 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}

.relation-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.relation-card:last-child {
  border-bottom: 0;
}

.relation-card.strong {
  border-color: var(--line-strong);
  background: transparent;
}

.relation-card strong {
  display: block;
  margin-bottom: calc(6px * var(--ui-density));
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--heading);
}

.relation-card p {
  margin: 0;
}

.attachment-list {
  display: grid;
  gap: 0;
}

.attachment-list span {
  display: inline-flex;
  align-items: center;
  min-height: calc(44px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.work-item-comments {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.work-item-comments.empty {
  padding: calc(2px * var(--ui-density)) 0;
}

.work-item-comment {
  display: grid;
  gap: calc(8px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.74);
}

.work-item-side-section {
  align-self: start;
}

.work-item-comment header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.work-item-comment header span {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.work-item-comment p {
  margin: 0;
}

.work-item-form-message {
  grid-column: 1 / -1;
  margin: calc(2px * var(--ui-density)) calc(2px * var(--ui-density)) 0;
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin-top: auto;
  padding-top: calc(16px * var(--ui-density));
  border-top: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 78%, rgba(125, 99, 244, 0.12));
  flex-wrap: wrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(calc(860px * var(--ui-density)) calc(560px * var(--ui-density)) at 72% 70%, rgba(215, 150, 245, 0.20), transparent 68%),
    radial-gradient(calc(720px * var(--ui-density)) calc(520px * var(--ui-density)) at 38% 18%, rgba(155, 219, 250, 0.22), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(113, 126, 160, 0.18)),
    var(--overlay);
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  overflow: auto;
  backdrop-filter: blur(calc(10px * var(--ui-density))) saturate(128%);
}

.modal {
  width: min(var(--layer-dialog-width), calc(100vw - calc(56px * var(--ui-density))));
  position: relative;
  max-height: 95dvh;
  overflow: hidden;
  background: var(--toolbar-popover-bg);
  border-radius: calc(28px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 76%, rgba(125, 99, 244, 0.46));
  box-shadow: var(--layer-accent-shadow);
  backdrop-filter: var(--glass);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: auto 0;
}

.modal.wide {
  width: min(var(--layer-wide-dialog-width), calc(100vw - calc(56px * var(--ui-density))));
}

.page-actions .version-governance-action {
  min-width: calc(164px * var(--ui-density));
  padding-inline: calc(18px * var(--ui-density));
  white-space: nowrap;
  flex-shrink: 0;
}

.modal.work-item-modal {
  width: min(var(--layer-work-item-dialog-width), calc(100vw - calc(56px * var(--ui-density))));
  min-height: 0;
  padding: calc(24px * var(--ui-density));
  border-radius: calc(32px * var(--ui-density));
}

.modal.workshop-layer-modal.work-item-modal:not(.wide) {
  width: min(var(--layer-dialog-width), calc(100vw - calc(56px * var(--ui-density))));
  min-height: auto;
}

.modal-head {
  margin-bottom: calc(22px * var(--ui-density));
  padding-right: calc(54px * var(--ui-density));
}

.modal-title-group {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.modal.work-item-modal .modal-head {
  margin-bottom: calc(24px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
}

.layer-close-button {
  position: absolute;
  top: calc(22px * var(--ui-density));
  right: calc(24px * var(--ui-density));
  z-index: 3;
  width: calc(42px * var(--ui-density));
  height: calc(42px * var(--ui-density));
  min-width: calc(42px * var(--ui-density));
  min-height: calc(42px * var(--ui-density));
  max-width: calc(42px * var(--ui-density));
  max-height: calc(42px * var(--ui-density));
  aspect-ratio: 1 / 1;
  flex: 0 0 calc(42px * var(--ui-density));
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 72%, rgba(125, 99, 244, 0.22));
  border-radius: calc(999px * var(--ui-density));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 255, 0.82)),
    rgba(255, 255, 255, 0.82);
  color: #7d63f4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.10),
    0 0 calc(18px * var(--ui-density)) rgba(136, 108, 255, 0.16);
  font-size: calc(28px * var(--ui-density));
  line-height: 1;
  font-weight: 800;
}

.layer-close-button:hover {
  transform: none;
  color: #6445ef;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 242, 255, 0.88)),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(111, 123, 255, 0.14),
    0 0 calc(24px * var(--ui-density)) rgba(136, 108, 255, 0.20);
}

.modal-body {
  display: grid;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(4px * var(--ui-density));
}

.modal.work-item-modal .modal-body {
  align-content: start;
}

.modal input,
.modal textarea,
.modal select,
.modal .custom-select-trigger,
.modal .enum-dd-trigger,
.modal .work-item-date-trigger,
.drawer input,
.drawer textarea,
.drawer select,
.drawer .custom-select-trigger,
.drawer .enum-dd-trigger,
.drawer .work-item-date-trigger {
  border: 1px solid var(--layer-input-border);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
}

.modal select,
.modal .custom-select-trigger,
.modal .custom-select-option {
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.56;
}

.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.modal .custom-select.open .custom-select-trigger,
.modal .custom-select-trigger:focus,
.modal .enum-dd-trigger:focus,
.modal .enum-dd-trigger.is-open,
.modal .work-item-date-trigger:focus-visible,
.drawer input:focus,
.drawer textarea:focus,
.drawer select:focus,
.drawer .custom-select.open .custom-select-trigger,
.drawer .custom-select-trigger:focus,
.drawer .enum-dd-trigger:focus,
.drawer .enum-dd-trigger.is-open,
.drawer .work-item-date-trigger:focus-visible {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
  outline: none;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
  padding-top: calc(16px * var(--ui-density));
  border-top: 1px solid color-mix(in srgb, var(--toolbar-popover-border) 78%, rgba(125, 99, 244, 0.12));
  flex-wrap: wrap;
}

.modal.work-item-modal .modal-footer {
  margin-top: calc(22px * var(--ui-density));
  padding-top: 0;
  border-top: 0;
}

.modal.work-item-modal .modal-footer .ghost,
.modal.work-item-modal .modal-footer .primary {
  min-width: calc(150px * var(--ui-density));
}

.discard-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(640px * var(--ui-density)) calc(420px * var(--ui-density)) at 54% 46%, rgba(210, 158, 246, 0.18), transparent 70%),
    rgba(78, 90, 120, 0.16);
  backdrop-filter: blur(calc(8px * var(--ui-density))) saturate(128%);
}

.discard-confirm-dialog {
  position: relative;
  width: min(calc(520px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  padding: calc(24px * var(--ui-density));
  border: 1px solid var(--layer-line);
  border-radius: calc(28px * var(--ui-density));
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(255, 255, 255, 0.48), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16)),
    linear-gradient(320deg, rgba(255, 255, 255, 0.20), rgba(206, 185, 255, 0.10)),
    var(--layer-surface);
  box-shadow: var(--layer-shadow);
  backdrop-filter: var(--glass);
  isolation: isolate;
}

.discard-confirm-dialog::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.44), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%);
  z-index: -1;
}

.discard-confirm-close {
  top: calc(16px * var(--ui-density));
  right: calc(16px * var(--ui-density));
  width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  min-width: calc(34px * var(--ui-density));
  min-height: calc(34px * var(--ui-density));
  max-width: calc(34px * var(--ui-density));
  max-height: calc(34px * var(--ui-density));
  font-size: calc(22px * var(--ui-density));
}

.discard-confirm-icon {
  width: calc(44px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  display: grid;
  place-items: center;
  border-radius: calc(16px * var(--ui-density));
  color: #735cf5;
  background: rgba(238, 235, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
  font-size: calc(22px * var(--ui-density));
  font-weight: 900;
  line-height: 1;
}

.discard-confirm-dialog[data-variant="danger"] .discard-confirm-icon {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: rgba(255, 255, 255, 0.72);
}

.discard-confirm-copy {
  min-width: 0;
  padding-right: calc(42px * var(--ui-density));
}

.discard-confirm-copy h3 {
  margin: 0;
  color: var(--heading);
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1.35;
}

.discard-confirm-copy p {
  margin: calc(8px * var(--ui-density)) 0 0;
  color: var(--muted-strong);
  font-size: var(--font-size-title);
  line-height: 1.5;
}

.discard-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: calc(10px * var(--ui-density));
  padding-top: calc(6px * var(--ui-density));
}

.discard-confirm-actions button {
  min-width: calc(112px * var(--ui-density));
  font-size: var(--font-size-title);
}

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(calc(210px * var(--ui-density)), 1fr));
  gap: calc(16px * var(--ui-density));
  overflow: auto;
}

.lane {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(14px * var(--ui-density));
  min-height: calc(300px * var(--ui-density));
  backdrop-filter: var(--glass);
}

.lane h4 {
  margin: 0 0 calc(10px * var(--ui-density));
  font-size: var(--font-size-title);
  line-height: 1.35;
  font-weight: 700;
}

.ticket {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  margin-bottom: calc(11px * var(--ui-density));
  display: grid;
  gap: calc(10px * var(--ui-density));
  box-shadow: none;
  line-height: 1.55;
}

.progress {
  width: min(calc(180px * var(--ui-density)), 100%);
  height: calc(13px * var(--ui-density));
  background: var(--progress-track);
  border-radius: calc(999px * var(--ui-density));
  overflow: hidden;
}

.progress div {
  height: 100%;
  background: linear-gradient(90deg, #51c7c1, #6d6cff);
  border-radius: inherit;
}

.empty-workload {
  min-height: calc(230px * var(--ui-density));
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(12px * var(--ui-density));
  color: var(--muted);
  text-align: center;
}

.empty-workload strong {
  color: var(--muted-strong);
  font-size: var(--font-size-title);
}

.empty-workload span {
  font-size: var(--font-size-body);
}

.empty-illo {
  position: relative;
  width: calc(86px * var(--ui-density));
  height: calc(96px * var(--ui-density));
  margin-bottom: calc(8px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  background: linear-gradient(145deg, rgba(211, 218, 255, 0.90), rgba(236, 224, 255, 0.70));
  box-shadow: none;
  transform: rotate(7deg);
}

.empty-illo::before,
.empty-illo::after {
  content: "";
  position: absolute;
  left: calc(22px * var(--ui-density));
  right: calc(18px * var(--ui-density));
  height: calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: rgba(146, 155, 245, 0.32);
}

.empty-illo::before {
  top: calc(28px * var(--ui-density));
}

.empty-illo::after {
  top: calc(56px * var(--ui-density));
  right: calc(34px * var(--ui-density));
}

.split {
  display: grid;
  grid-template-columns: 1fr calc(320px * var(--ui-density));
  gap: calc(14px * var(--ui-density));
}

.tabs {
  display: flex;
  gap: calc(8px * var(--ui-density));
  margin-bottom: calc(14px * var(--ui-density));
  flex-wrap: wrap;
}

.tabs button.active {
  color: #10202b;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255, 255, 255, 0.64);
}

.route-tabs {
  margin-bottom: calc(18px * var(--ui-density));
}

.overview-hero,
.overview-section {
  display: grid;
  gap: calc(22px * var(--ui-density));
}

.overview-advanced-progress {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.overview-advanced-progress > summary {
  cursor: pointer;
  color: var(--heading);
  font-weight: 700;
}

.overview-advanced-progress__content {
  display: grid;
  gap: calc(28px * var(--ui-density));
  padding-top: calc(6px * var(--ui-density));
}

.delivery-chain-card {
  display: grid;
  gap: calc(16px * var(--ui-density));
  border-color: var(--line);
  background: var(--panel);
  overflow: visible;
}

.delivery-chain-head h3 {
  margin: 0 0 calc(6px * var(--ui-density));
  color: var(--heading);
  font-size: calc(22px * var(--ui-density));
}

.delivery-chain-head p,
.delivery-chain-artifact {
  margin: 0;
}

.delivery-chain-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(calc(150px * var(--ui-density)), 1fr));
  gap: calc(12px * var(--ui-density));
  /* An overflow grid otherwise contributes only its scrollbar height to the card. */
  min-height: calc(188px * var(--ui-density));
  overflow-x: auto;
  padding-bottom: calc(4px * var(--ui-density));
}

.delivery-chain-step {
  display: grid;
  align-content: start;
  gap: calc(8px * var(--ui-density));
  min-height: calc(188px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.delivery-chain-step-blocked {
  border-color: var(--danger);
}

.delivery-chain-step-completed {
  border-color: var(--ok);
}

/* M52: retain each status card's existing surface and shadow, but move its
 * semantic outline onto the in-card next-step action. */
.workbench-m52 .delivery-chain-step {
  --delivery-chain-tone: var(--accent);
  border-color: transparent;
}

.workbench-m52 .delivery-chain-step-completed {
  --delivery-chain-tone: var(--ok);
}

.workbench-m52 .delivery-chain-step-blocked {
  --delivery-chain-tone: var(--danger);
}

.workbench-m52 .delivery-chain-step-not_started {
  --delivery-chain-tone: var(--warn);
}

.workbench-m52 .delivery-chain-action {
  border-color: color-mix(in srgb, var(--delivery-chain-tone) 58%, var(--line));
}

.workbench-m52 .delivery-chain-action:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--delivery-chain-tone) 72%, var(--line));
}

.delivery-chain-step-top {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
}

.delivery-chain-index,
.delivery-chain-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(24px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.delivery-chain-index {
  min-width: calc(24px * var(--ui-density));
  color: var(--menu-active-text);
  background: var(--accent);
}

.delivery-chain-status {
  margin-left: auto;
  padding: 0 calc(8px * var(--ui-density));
  color: var(--muted-strong);
  background: var(--panel-strong);
}

.delivery-chain-count,
.delivery-chain-blocker,
.delivery-chain-waiting {
  margin: 0;
}

.delivery-chain-count {
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
  font-weight: 800;
}

.delivery-chain-blocker {
  color: var(--text);
  line-height: 1.5;
}

.delivery-chain-waiting {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
}

.delivery-chain-action {
  width: 100%;
  margin-top: auto;
}

.overview-hero {
  padding: calc(28px * var(--ui-density));
  background:
    radial-gradient(circle at top right, rgba(99, 116, 255, 0.12), transparent 32%),
    radial-gradient(circle at left bottom, rgba(88, 199, 168, 0.12), transparent 28%),
    var(--panel);
}

.overview-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: calc(20px * var(--ui-density));
  align-items: start;
}

.overview-hero-copy,
.overview-hero-meta,
.overview-hero-actions,
.overview-section-head,
.overview-intro-facts,
.overview-member-cloud,
.overview-subsystem-card,
.overview-delivery-summary,
.overview-risk-card,
.overview-activity-item,
.overview-stage-detail,
.overview-stage-detail-block {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.overview-hero-kicker,
.overview-flow-legend,
.overview-flow-node-top,
.overview-flow-node-footer,
.overview-milestone-head,
.overview-milestone-meta,
.overview-subsystem-head,
.overview-subsystem-meta,
.overview-deliverable-meta,
.overview-stage-detail-head {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.overview-hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid rgba(99, 116, 255, 0.22);
  background: rgba(99, 116, 255, 0.12);
  color: var(--accent-2);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.overview-hero-chip.subtle {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-strong);
}

.overview-hero-copy h2 {
  margin: 0;
  color: var(--heading);
  font-size: calc(30px * var(--ui-density));
  line-height: 1.12;
}

.overview-hero-copy p,
.overview-flow-node-body p,
.overview-risk-card span,
.overview-activity-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.56;
}

.overview-hero-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.overview-hero-meta-item {
  display: grid;
  gap: calc(4px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--ui-density));
  background: rgba(255, 255, 255, 0.04);
}

.overview-hero-meta-item span,
.overview-intro-field span,
.overview-milestone-meta span,
.overview-subsystem-meta span,
.overview-stage-detail-card span,
.overview-flow-node-status,
.overview-risk-kind,
.overview-activity-category,
.overview-activity-placeholder {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
}

.overview-hero-meta-item strong,
.overview-intro-field strong,
.overview-subsystem-head h3,
.overview-deliverable-item strong,
.overview-risk-card strong,
.overview-activity-copy strong,
.overview-stage-detail-card strong {
  color: var(--heading);
}

.overview-hero-actions {
  justify-items: end;
  align-content: start;
}

.overview-hero-actions button,
.overview-stage-detail .page-actions button {
  min-width: calc(164px * var(--ui-density));
}

.overview-section-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.overview-flow-legend {
  justify-content: flex-end;
}

.overview-flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 600;
}

.overview-flow-legend-item i,
.overview-flow-node-dot,
.overview-milestone-dot {
  display: inline-block;
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: currentColor;
  flex: 0 0 auto;
}

.overview-flow-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
  align-items: stretch;
}

.overview-flow-node {
  position: relative;
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-height: calc(248px * var(--ui-density));
  padding: calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(24px * var(--ui-density));
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.overview-flow-node::after {
  content: "";
  position: absolute;
  top: calc(28px * var(--ui-density));
  left: calc(100% + 1px);
  width: calc(16px * var(--ui-density));
  height: calc(2px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--line);
}

.overview-flow-node.is-last::after {
  display: none;
}

.overview-flow-node-body {
  display: grid;
  gap: calc(12px * var(--ui-density));
  align-content: start;
}

.overview-flow-node-body h3,
.overview-milestone-card h3 {
  margin: 0;
  color: var(--heading);
}

.overview-flow-node-count {
  display: flex;
  align-items: baseline;
  gap: calc(6px * var(--ui-density));
}

.overview-flow-node-count strong {
  color: var(--heading);
  font-size: calc(34px * var(--ui-density));
  line-height: 1;
}

.overview-flow-node-count span {
  color: var(--muted-strong);
  font-size: calc(18px * var(--ui-density));
}

.overview-flow-node-footer {
  margin-top: auto;
}

.overview-flow-node.pending,
.overview-flow-legend-item.pending,
.overview-milestone-card.pending {
  color: var(--muted);
}

.overview-flow-node.pending {
  border-color: var(--line);
}

.overview-flow-node.active,
.overview-flow-legend-item.active,
.overview-milestone-card.active {
  color: var(--accent-2);
}

.overview-flow-node.active,
.overview-milestone-card.active {
  border-color: rgba(99, 116, 255, 0.26);
  box-shadow: var(--accent-shadow);
}

.overview-flow-node.active::after {
  background: var(--accent-gradient);
}

.overview-flow-node.completed,
.overview-flow-legend-item.completed,
.overview-milestone-card.completed {
  color: var(--ok);
}

.overview-flow-node.completed,
.overview-milestone-card.completed {
  border-color: rgba(74, 201, 145, 0.3);
}

.overview-flow-node.completed::after {
  background: var(--ok);
}

.overview-flow-node.risk,
.overview-flow-legend-item.risk,
.overview-milestone-card.risk {
  color: var(--danger);
}

.overview-flow-node.risk,
.overview-milestone-card.risk {
  border-color: rgba(255, 112, 149, 0.3);
}

.overview-flow-node.risk::after {
  background: linear-gradient(90deg, rgba(255, 112, 149, 0.9), rgba(250, 181, 82, 0.9));
}

.overview-flow-legend-item.active {
  background: rgba(99, 116, 255, 0.12);
  border-color: rgba(99, 116, 255, 0.24);
}

.overview-flow-legend-item.completed {
  background: var(--ok-bg);
  border-color: rgba(74, 201, 145, 0.24);
}

.overview-flow-legend-item.risk {
  background: var(--danger-bg);
  border-color: rgba(255, 112, 149, 0.24);
}

.overview-milestone-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(240px * var(--ui-density)), 1fr);
  gap: calc(18px * var(--ui-density));
  overflow-x: auto;
  padding-bottom: calc(6px * var(--ui-density));
}

.overview-milestone-card,
.overview-intro-field,
.overview-member-cloud,
.overview-subsystem-card,
.overview-deliverable-item,
.overview-risk-card,
.overview-activity-item,
.overview-stage-detail-card,
.overview-stage-detail-block {
  padding: calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
}

.overview-milestone-card {
  min-height: calc(228px * var(--ui-density));
  align-content: start;
}

.overview-milestone-head,
.overview-milestone-meta,
.overview-deliverable-item,
.overview-activity-item {
  justify-content: space-between;
}

.overview-milestone-status {
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.overview-progress-track {
  position: relative;
  height: calc(10px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: rgba(255, 255, 255, 0.06);
}

.overview-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-gradient);
}

.overview-milestone-card.completed .overview-progress-track span,
.overview-subsystem-card .overview-progress-track span {
  background: linear-gradient(90deg, rgba(74, 201, 145, 0.9), rgba(120, 219, 170, 0.95));
}

.overview-milestone-card.risk .overview-progress-track span {
  background: linear-gradient(90deg, rgba(255, 112, 149, 0.92), rgba(250, 181, 82, 0.92));
}

.overview-milestone-progress {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.overview-milestone-progress small {
  color: var(--muted);
}

.overview-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(calc(280px * var(--ui-density)), 0.8fr);
  gap: calc(18px * var(--ui-density));
}

.overview-intro-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-intro-field.full {
  grid-column: 1 / -1;
}

.overview-member-cloud h4 {
  margin: 0;
  color: var(--heading);
}

.overview-member-list,
.overview-subsystem-list,
.overview-risk-stack,
.overview-activity-feed {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.overview-member-list {
  grid-template-columns: repeat(auto-fit, minmax(calc(112px * var(--ui-density)), max-content));
}

.overview-member-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(38px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--muted-strong);
}

.overview-subsystem-list {
  grid-template-columns: repeat(auto-fit, minmax(calc(240px * var(--ui-density)), 1fr));
}

.overview-subsystem-head {
  justify-content: space-between;
}

.overview-subsystem-head h3 {
  font-size: calc(18px * var(--ui-density));
}

.overview-progress-track.large {
  height: calc(12px * var(--ui-density));
}

.overview-subsystem-meta {
  justify-content: space-between;
}

.overview-delivery-summary {
  gap: calc(18px * var(--ui-density));
}

.overview-deliverable-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--ui-density)), 1fr));
  gap: calc(12px * var(--ui-density));
}

.overview-deliverable-type-card {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-height: calc(132px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  box-shadow: var(--soft-shadow);
}

.overview-deliverable-type-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-density));
}

.overview-deliverable-type-card__head strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.overview-deliverable-type-card__head span,
.overview-deliverable-type-card small {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.45;
}

.overview-deliverable-type-card > b {
  color: var(--heading);
  font-size: var(--font-size-title);
  line-height: 1.1;
}

.overview-deliverable-type-card.completed {
  border-color: var(--ok);
  background: var(--ok-bg);
}

.overview-deliverable-type-card.completed .overview-deliverable-type-card__head span {
  color: var(--ok);
}

.overview-deliverable-type-card.overdue {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.overview-deliverable-type-card.overdue .overview-deliverable-type-card__head span {
  color: var(--warn);
}

.overview-deliverable-list {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.overview-deliverable-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.overview-deliverable-item > div {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.overview-risk-card,
.overview-activity-item {
  width: 100%;
  text-align: left;
  color: var(--text);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.overview-risk-card:not(:disabled),
.overview-activity-item:not(:disabled) {
  cursor: pointer;
}

.overview-risk-card:not(:disabled):hover,
.overview-risk-card:not(:disabled):focus-visible,
.overview-activity-item:not(:disabled):hover,
.overview-activity-item:not(:disabled):focus-visible {
  transform: translateY(-2px);
  outline: none;
  border-color: var(--accent);
}

.overview-risk-card.warning {
  border-color: rgba(250, 181, 82, 0.3);
  background: linear-gradient(180deg, rgba(250, 181, 82, 0.09), rgba(255, 255, 255, 0.02));
}

.overview-risk-card.high {
  border-color: rgba(255, 112, 149, 0.32);
  background: linear-gradient(180deg, rgba(255, 112, 149, 0.1), rgba(255, 255, 255, 0.02));
}

.overview-risk-kind {
  font-weight: 700;
}

.overview-activity-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(16px * var(--ui-density));
}

.overview-activity-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--muted-strong);
  font-weight: 700;
}

.overview-activity-copy {
  min-width: 0;
}

.overview-activity-meta {
  display: grid;
  gap: calc(8px * var(--ui-density));
  justify-items: end;
}

.overview-stage-detail-head {
  justify-content: space-between;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(22px * var(--ui-density));
  border: 1px solid var(--line);
  background: var(--control);
}

.overview-stage-detail-head.active {
  border-color: rgba(99, 116, 255, 0.24);
  background: rgba(99, 116, 255, 0.12);
  color: var(--accent-2);
}

.overview-stage-detail-head.completed {
  border-color: rgba(74, 201, 145, 0.24);
  background: var(--ok-bg);
  color: var(--ok);
}

.overview-stage-detail-head.risk {
  border-color: rgba(255, 112, 149, 0.24);
  background: var(--danger-bg);
  color: var(--danger);
}

.overview-stage-detail-head strong {
  font-size: calc(28px * var(--ui-density));
  color: currentColor;
}

.overview-stage-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-stage-detail-card strong {
  display: block;
  margin-top: calc(8px * var(--ui-density));
  font-size: calc(28px * var(--ui-density));
}

.overview-stage-detail-block strong {
  color: var(--heading);
}

.overview-stage-detail-block ul {
  margin: 0;
  padding-left: calc(18px * var(--ui-density));
  display: grid;
  gap: calc(8px * var(--ui-density));
  color: var(--muted-strong);
}

.overview-empty {
  display: grid;
  gap: calc(8px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
  border: 1px dashed var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: rgba(255, 255, 255, 0.03);
}

.overview-empty.compact {
  padding: calc(18px * var(--ui-density));
}

.overview-empty strong {
  color: var(--heading);
}

.overview-footnote {
  margin-top: calc(10px * var(--ui-density));
}

.overview-timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(220px * var(--ui-density)), 1fr);
  gap: calc(18px * var(--ui-density));
  overflow-x: auto;
  overflow-y: hidden;
  padding: calc(4px * var(--ui-density)) calc(6px * var(--ui-density)) calc(8px * var(--ui-density)) 0;
  scrollbar-gutter: stable both-edges;
}

.overview-timeline::-webkit-scrollbar,
.overview-milestone-rail::-webkit-scrollbar,
.overview-risk-list::-webkit-scrollbar,
.overview-activity-feed::-webkit-scrollbar,
.overview-deliverable-list::-webkit-scrollbar,
.overview-subsystem-list::-webkit-scrollbar,
.table-scroll:has([data-milestone-nav])::-webkit-scrollbar,
.table-scroll:has([data-delivery-nav])::-webkit-scrollbar,
.table-scroll:has([data-subsystem-nav])::-webkit-scrollbar {
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
}

.overview-timeline::-webkit-scrollbar-thumb,
.overview-milestone-rail::-webkit-scrollbar-thumb,
.overview-risk-list::-webkit-scrollbar-thumb,
.overview-activity-feed::-webkit-scrollbar-thumb,
.overview-deliverable-list::-webkit-scrollbar-thumb,
.overview-subsystem-list::-webkit-scrollbar-thumb,
.table-scroll:has([data-milestone-nav])::-webkit-scrollbar-thumb,
.table-scroll:has([data-delivery-nav])::-webkit-scrollbar-thumb,
.table-scroll:has([data-subsystem-nav])::-webkit-scrollbar-thumb {
  border-radius: calc(999px * var(--ui-density));
  background: rgba(111, 123, 255, 0.26);
}

.overview-timeline-node {
  position: relative;
  display: grid;
  gap: calc(14px * var(--ui-density));
  min-height: calc(248px * var(--ui-density));
  min-width: 0;
  padding: calc(22px * var(--ui-density));
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: calc(26px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.46)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.14), transparent 36%),
    radial-gradient(circle at left bottom, rgba(100, 218, 182, 0.12), transparent 32%);
  backdrop-filter: var(--glass);
}

.overview-timeline-node::after {
  content: "";
  position: absolute;
  top: calc(44px * var(--ui-density));
  left: calc(100% + 1px);
  width: calc(18px * var(--ui-density));
  height: calc(3px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: rgba(170, 182, 208, 0.48);
}

.overview-timeline-node.is-last::after {
  display: none;
}

.overview-timeline-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.overview-timeline-step {
  color: var(--heading);
  font-size: calc(20px * var(--ui-density));
  font-weight: 800;
  line-height: 1.18;
}

.overview-stage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
  white-space: nowrap;
}

.overview-stage-badge.not_started,
.overview-stage-badge.pending,
.overview-stage-badge.todo,
.overview-stage-badge.planned {
  border-color: rgba(150, 166, 191, 0.28);
  background: rgba(236, 242, 250, 0.76);
  color: var(--muted-strong);
}

.overview-stage-badge.active,
.overview-stage-badge.in_progress,
.overview-stage-badge.building,
.overview-stage-badge.testing {
  border-color: rgba(99, 116, 255, 0.28);
  background: rgba(99, 116, 255, 0.13);
  color: var(--accent-2);
}

.overview-stage-badge.completed,
.overview-stage-badge.done,
.overview-stage-badge.accepted,
.overview-stage-badge.released {
  border-color: rgba(74, 201, 145, 0.28);
  background: var(--ok-bg);
  color: var(--ok);
}

.overview-stage-badge.warning,
.overview-stage-badge.warn,
.overview-stage-badge.risk,
.overview-stage-badge.blocked,
.overview-stage-badge.overdue {
  border-color: rgba(255, 126, 160, 0.24);
  background: var(--danger-bg);
  color: var(--danger);
}

.overview-timeline-node.not_started,
.overview-timeline-node.pending,
.overview-timeline-node.todo,
.overview-timeline-node.planned {
  border-color: rgba(170, 182, 208, 0.34);
}

.overview-timeline-node.active,
.overview-timeline-node.in_progress,
.overview-timeline-node.building,
.overview-timeline-node.testing {
  border-color: rgba(99, 116, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.overview-timeline-node.active::after,
.overview-timeline-node.in_progress::after,
.overview-timeline-node.building::after,
.overview-timeline-node.testing::after {
  background: var(--accent-gradient);
}

.overview-timeline-node.completed,
.overview-timeline-node.done,
.overview-timeline-node.accepted,
.overview-timeline-node.released {
  border-color: rgba(74, 201, 145, 0.28);
}

.overview-timeline-node.completed::after,
.overview-timeline-node.done::after,
.overview-timeline-node.accepted::after,
.overview-timeline-node.released::after {
  background: linear-gradient(90deg, rgba(74, 201, 145, 0.9), rgba(139, 229, 184, 0.9));
}

.overview-timeline-node.warning,
.overview-timeline-node.warn,
.overview-timeline-node.risk,
.overview-timeline-node.blocked,
.overview-timeline-node.overdue {
  border-color: rgba(255, 126, 160, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 244, 247, 0.88), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at top right, rgba(255, 126, 160, 0.16), transparent 38%);
}

.overview-timeline-node.warning::after,
.overview-timeline-node.warn::after,
.overview-timeline-node.risk::after,
.overview-timeline-node.blocked::after,
.overview-timeline-node.overdue::after {
  background: linear-gradient(90deg, rgba(255, 126, 160, 0.9), rgba(250, 181, 82, 0.9));
}

.overview-timeline-count,
.overview-timeline-reasons {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.overview-timeline-count strong {
  color: var(--heading);
  font-size: calc(32px * var(--ui-density));
  line-height: 1;
  white-space: nowrap;
}

.overview-timeline-count small,
.overview-timeline-count span {
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
}

.overview-timeline-reasons {
  min-height: 0;
  align-content: start;
}

.overview-timeline-reasons p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-strong);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.overview-timeline-actions {
  margin-top: auto;
}

.overview-timeline-actions button {
  min-width: calc(132px * var(--ui-density));
}

.overview-milestone-rail,
.overview-deliverable-list,
.overview-risk-list,
.overview-activity-feed,
.overview-subsystem-list {
  min-height: 0;
  overflow: auto;
  padding-right: calc(6px * var(--ui-density));
  scrollbar-gutter: stable;
}

.overview-milestone-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(260px * var(--ui-density)), calc(320px * var(--ui-density)));
  gap: calc(18px * var(--ui-density));
  max-height: clamp(calc(280px * var(--ui-density)), 36vh, calc(400px * var(--ui-density)));
  overflow-y: hidden;
  padding-bottom: calc(8px * var(--ui-density));
}

.overview-deliverable-list,
.overview-risk-list,
.overview-activity-feed,
.overview-subsystem-list {
  max-height: clamp(calc(260px * var(--ui-density)), 34vh, calc(380px * var(--ui-density)));
}

.overview-risk-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.overview-risk-item {
  width: 100%;
  min-height: calc(88px * var(--ui-density));
  display: grid;
  gap: calc(8px * var(--ui-density));
  justify-items: start;
  align-content: start;
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  text-align: left;
  border: 1px solid var(--line);
  border-radius: calc(22px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.46)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.08), transparent 32%);
  color: var(--text);
  box-shadow: var(--soft-shadow);
}

.overview-risk-item strong {
  color: var(--heading);
}

.overview-workbench-hero .overview-risk-item strong {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.overview-workbench-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.overview-workbench-recent-card {
  display: grid;
  gap: calc(12px * var(--ui-density));
  min-height: 0;
}

.overview-workbench-recent-card h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
  font-weight: 800;
}

.overview-workbench-recent-list {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.overview-workbench-recent-item {
  width: 100%;
  display: grid;
  gap: calc(6px * var(--ui-density));
  justify-items: start;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  text-align: left;
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.46)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.08), transparent 32%);
  color: var(--text);
  box-shadow: var(--soft-shadow);
}

.overview-workbench-recent-item strong {
  color: var(--heading);
}

.overview-workbench-recent-item small {
  color: var(--muted);
}

.overview-workbench-recent-item:not(:disabled) {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.overview-workbench-recent-item:not(:disabled):hover,
.overview-workbench-recent-item:not(:disabled):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(99, 116, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.12), transparent 36%);
  outline: none;
}

.overview-workbench-recent-item:disabled {
  cursor: default;
  opacity: 1;
}

.overview-summary-section {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.overview-milestone-road {
  min-width: 0;
}

.overview-milestone-road-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: calc(10px * var(--ui-density));
  scrollbar-gutter: stable;
}

.overview-milestone-road-track {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  width: max(var(--milestone-total-width), 100%);
}

.overview-milestone-segment {
  position: relative;
  display: grid;
  grid-template-rows: minmax(calc(208px * var(--ui-density)), auto) calc(90px * var(--ui-density)) minmax(calc(208px * var(--ui-density)), auto);
  width: var(--segment-width);
}

.overview-milestone-note-slot {
  display: flex;
}

.overview-milestone-note-slot.top {
  align-items: flex-end;
  padding-right: calc(18px * var(--ui-density));
  padding-bottom: calc(22px * var(--ui-density));
}

.overview-milestone-note-slot.bottom {
  align-items: flex-start;
  padding-left: calc(18px * var(--ui-density));
  padding-top: calc(22px * var(--ui-density));
}

.overview-milestone-note-card {
  width: min(calc(260px * var(--ui-density)), calc(100% - calc(8px * var(--ui-density))));
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(26px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.48)),
    radial-gradient(circle at top right, var(--segment-color-soft), transparent 42%);
  box-shadow: var(--soft-shadow);
}

.overview-milestone-note-card.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.overview-milestone-note-card.completed {
  border-color: rgba(74, 201, 145, 0.28);
}

.overview-milestone-note-card.active {
  border-color: rgba(99, 116, 255, 0.24);
}

.overview-milestone-note-card.risk {
  border-color: rgba(255, 126, 160, 0.28);
}

.overview-milestone-note-kicker {
  display: inline-flex;
  align-items: center;
  min-height: calc(32px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.overview-milestone-note-card h3 {
  margin: calc(12px * var(--ui-density)) 0 0;
  color: var(--heading);
  font-size: calc(20px * var(--ui-density));
  line-height: 1.25;
}

.overview-milestone-note-lines {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(14px * var(--ui-density));
}

.overview-milestone-note-lines p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin: 0;
  color: var(--muted-strong);
}

.overview-milestone-note-lines strong {
  color: var(--heading);
  font-size: calc(14px * var(--ui-density));
  white-space: nowrap;
}

.overview-milestone-note-card .ghost.compact {
  margin-top: calc(14px * var(--ui-density));
}

.overview-milestone-axis {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(90px * var(--ui-density));
}

.overview-milestone-axis-dot,
.overview-milestone-axis-tail {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  flex: 0 0 calc(18px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border: calc(5px * var(--ui-density)) solid #fff;
  background: var(--segment-color);
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) var(--segment-color-soft);
}

.overview-milestone-axis-dot.is-solid,
.overview-milestone-axis-tail {
  border-width: 0;
  box-shadow: none;
}

.overview-milestone-axis-line {
  position: absolute;
  left: calc(18px * var(--ui-density));
  right: 0;
  height: calc(8px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--segment-color);
}

.overview-milestone-axis-pill {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: calc(8px * var(--ui-density)) calc(18px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
  font-size: calc(16px * var(--ui-density));
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 calc(14px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(95, 102, 238, 0.12);
  backdrop-filter: blur(calc(12px * var(--ui-density)));
}

.overview-milestone-axis-tail {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
}

.overview-milestone-axis-connector {
  position: absolute;
  left: calc(18px * var(--ui-density));
  width: calc(2px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  border-left: calc(2px * var(--ui-density)) dashed rgba(110, 122, 144, 0.58);
}

.overview-milestone-axis-connector.top {
  top: calc(100% / 3 - calc(12px * var(--ui-density)));
  height: calc(66px * var(--ui-density));
}

.overview-milestone-axis-connector.bottom {
  top: calc(100% / 3 + calc(90px * var(--ui-density)));
  height: calc(66px * var(--ui-density));
}

.overview-system-progress-section {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.overview-system-progress-shell {
  display: grid;
  grid-template-columns: minmax(calc(220px * var(--ui-density)), 1fr) minmax(0, 5fr);
  gap: calc(18px * var(--ui-density));
  min-height: 0;
}

.overview-system-progress-total,
.overview-system-progress-card {
  padding: calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(26px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.5)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.1), transparent 36%);
  box-shadow: var(--soft-shadow);
}

.overview-system-progress-total {
  display: grid;
  align-content: start;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.overview-system-progress-total-copy {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.overview-system-progress-kicker {
  color: var(--muted-strong);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.overview-system-progress-total-copy strong,
.overview-system-progress-card-copy strong {
  color: var(--heading);
  font-size: calc(34px * var(--ui-density));
  line-height: 1;
}

.overview-system-progress-total-copy p {
  margin: 0;
}

.overview-system-progress-total-chart {
  height: calc(260px * var(--ui-density));
}

.overview-system-progress-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: calc(8px * var(--ui-density));
  scrollbar-gutter: stable;
}

.overview-system-progress-strip {
  display: flex;
  gap: calc(16px * var(--ui-density));
  min-width: max-content;
}

.overview-system-progress-card {
  width: calc(220px * var(--ui-density));
  display: grid;
  justify-items: center;
  gap: calc(14px * var(--ui-density));
  text-align: center;
}

.overview-system-progress-chart {
  width: calc(180px * var(--ui-density));
  height: calc(180px * var(--ui-density));
}

.overview-system-progress-card-copy {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.overview-system-progress-card-copy h3 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
}

.overview-system-progress-card .ghost.compact {
  width: 100%;
}

:root[data-theme="dark"] .overview-milestone-note-card,
:root[data-theme="dark"] .overview-system-progress-total,
:root[data-theme="dark"] .overview-system-progress-card {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(30, 41, 58, 0.94), rgba(18, 29, 43, 0.9)),
    rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .overview-milestone-note-kicker {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1200px) {
  .overview-workbench-recent-grid {
    grid-template-columns: 1fr;
  }
}

.overview-risk-item .muted {
  margin: 0;
  text-align: left;
}

.overview-risk-item:not(:disabled) {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.overview-risk-item:not(:disabled):hover,
.overview-risk-item:not(:disabled):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(99, 116, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    radial-gradient(circle at top right, rgba(125, 120, 255, 0.12), transparent 36%);
  outline: none;
}

.overview-risk-item:disabled {
  cursor: default;
  opacity: 1;
}

.overview-timeline-detail {
  min-height: 0;
}

.overview-timeline-detail-list {
  margin: 0;
  padding-left: calc(18px * var(--ui-density));
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.overview-timeline-detail-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.overview-timeline-detail-list li span {
  min-width: 0;
  color: var(--muted-strong);
}

.table-scroll:has([data-milestone-nav]),
.table-scroll:has([data-delivery-nav]),
.table-scroll:has([data-subsystem-nav]) {
  max-height: clamp(calc(260px * var(--ui-density)), 34vh, calc(380px * var(--ui-density)));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.44)),
    color-mix(in srgb, var(--panel) 92%, transparent);
}

.table-scroll:has([data-milestone-nav]) tr,
.table-scroll:has([data-delivery-nav]) tr,
.table-scroll:has([data-subsystem-nav]) tr {
  cursor: pointer;
}

.table-scroll:has([data-milestone-nav]) tbody tr:hover td,
.table-scroll:has([data-delivery-nav]) tbody tr:hover td,
.table-scroll:has([data-subsystem-nav]) tbody tr:hover td {
  background: rgba(99, 116, 255, 0.08);
}

.grid.two > .card.pad:has(.overview-risk-list),
.grid.two > .card.pad:has(.overview-milestone-rail),
.grid.two > .card.pad:has(.overview-deliverable-list),
.grid.two > .card.pad:has(.overview-subsystem-list),
.grid.two > .card.pad:has(.table-scroll:has([data-milestone-nav])),
.grid.two > .card.pad:has(.table-scroll:has([data-delivery-nav])),
.grid.two > .card.pad:has(.table-scroll:has([data-subsystem-nav])),
.card.pad:has(.overview-risk-list) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

:root[data-theme="dark"] .overview-timeline-node {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(28, 40, 58, 0.94), rgba(19, 31, 47, 0.88)),
    radial-gradient(circle at top right, rgba(125, 160, 255, 0.14), transparent 38%),
    radial-gradient(circle at left bottom, rgba(88, 199, 168, 0.12), transparent 34%);
}

:root[data-theme="dark"] .overview-timeline-node.warning,
:root[data-theme="dark"] .overview-timeline-node.warn,
:root[data-theme="dark"] .overview-timeline-node.risk,
:root[data-theme="dark"] .overview-timeline-node.blocked,
:root[data-theme="dark"] .overview-timeline-node.overdue {
  background:
    linear-gradient(180deg, rgba(63, 31, 49, 0.92), rgba(31, 24, 40, 0.88)),
    radial-gradient(circle at top right, rgba(255, 140, 174, 0.18), transparent 40%);
}

:root[data-theme="dark"] .overview-stage-badge {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .overview-risk-item,
:root[data-theme="dark"] .overview-workbench-recent-item,
:root[data-theme="dark"] .table-scroll:has([data-milestone-nav]),
:root[data-theme="dark"] .table-scroll:has([data-delivery-nav]),
:root[data-theme="dark"] .table-scroll:has([data-subsystem-nav]) {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(30, 41, 58, 0.94), rgba(18, 29, 43, 0.9)),
    rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .table-scroll:has([data-milestone-nav]) tbody tr:hover td,
:root[data-theme="dark"] .table-scroll:has([data-delivery-nav]) tbody tr:hover td,
:root[data-theme="dark"] .table-scroll:has([data-subsystem-nav]) tbody tr:hover td {
  background: rgba(110, 216, 202, 0.1);
}

.stack {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
}

.system-user-identity,
.system-user-contact {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.system-users-toolbar-form {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: nowrap;
  min-width: 0;
}

.system-users-page-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
  min-height: 0;
}

.system-user-list-shell {
  min-height: 0;
}

.message-management-shell,
.ordinary-list-shell {
  min-height: 0;
  height: 100%;
  display: grid;
}

.home-frame-content-body > .message-management-shell,
.home-frame-content-body > .ordinary-list-shell {
  min-height: 0;
  height: 100%;
}

.message-list-shell,
.ordinary-list-list-shell {
  min-height: 0;
  height: 100%;
}

.system-user-list-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(14px * var(--ui-density));
  padding: calc(20px * var(--ui-density)) calc(20px * var(--ui-density)) 0;
  overflow: hidden;
}

.system-user-list-footer {
  padding: 0 calc(4px * var(--ui-density)) calc(18px * var(--ui-density));
}

.message-list-card,
.ordinary-list-card {
  min-height: 0;
  height: 100%;
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .list-toolbar {
  --message-field-border: rgba(125, 99, 244, 0.32);
  --message-field-focus-border: rgba(125, 99, 244, 0.50);
  --message-field-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  --message-field-focus-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.13);
  border-color: var(--layer-input-border);
  background:
    radial-gradient(calc(520px * var(--ui-density)) calc(220px * var(--ui-density)) at 24% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow:
    var(--layer-input-shadow),
    0 calc(16px * var(--ui-density)) calc(34px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
}

/* 迭代工作项工具栏与消息管理页共用同一组字段 token；容器本身不复用
   message list toolbar 的卡片表面，避免把搜索区域重新包成胶囊。 */
:root:not([data-theme="dark"]) .iteration-workitem-toolbar {
  --message-field-border: rgba(125, 99, 244, 0.32);
  --message-field-focus-border: rgba(125, 99, 244, 0.50);
  --message-field-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
  --message-field-focus-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.13);
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar select,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar input,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar select,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar input,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-trigger,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .message-page-size .custom-select-trigger {
  border-color: var(--message-field-border, var(--layer-input-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--layer-field) 88%, white 12%), color-mix(in srgb, var(--control) 82%, white 18%));
  box-shadow: var(--message-field-shadow, var(--layer-input-shadow));
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar select:hover,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar input:hover,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar select:hover,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar input:hover,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-trigger:hover,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .message-page-size .custom-select-trigger:hover,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) button.ghost:not(:disabled):hover {
  border-color: var(--message-field-focus-border, color-mix(in srgb, var(--layer-input-focus-border) 82%, var(--line)));
  box-shadow:
    var(--message-field-shadow, var(--layer-input-shadow)),
    0 0 0 calc(2px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent),
    0 calc(12px * var(--ui-density)) calc(26px * var(--ui-density)) color-mix(in srgb, var(--accent-2) 10%, transparent);
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar select:focus,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar select:focus-visible,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar input:focus,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .toolbar input:focus-visible,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar select:focus,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar select:focus-visible,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar input:focus,
:root:not([data-theme="dark"]) .iteration-workitem-toolbar input:focus-visible,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select.open .custom-select-trigger,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-trigger:focus,
:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--message-field-focus-border, var(--layer-input-focus-border));
  box-shadow: var(--message-field-focus-shadow, var(--layer-input-focus-shadow));
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-menu {
  border-color: var(--message-field-border, var(--layer-input-border));
  box-shadow:
    var(--message-field-focus-shadow, var(--layer-input-focus-shadow)),
    0 calc(18px * var(--ui-density)) calc(44px * var(--ui-density)) color-mix(in srgb, var(--accent) 12%, transparent);
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-option:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.90)),
      color-mix(in srgb, var(--accent-2) 24%, rgba(246, 249, 255, 0.86))
    ),
    var(--control-hover);
  color: var(--heading);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) color-mix(in srgb, var(--accent) 14%, transparent);
}

:root:not([data-theme="dark"]) :is(.message-management-shell, .ordinary-list-shell) .custom-select-option.selected::after {
  color: var(--accent);
}

:root:not([data-theme="dark"]) body:has(:is(.message-management-shell, .ordinary-list-shell)) .date-picker-popover {
  border-color: rgba(125, 99, 244, 0.32);
  box-shadow:
    0 0 0 calc(2px * var(--ui-density)) rgba(125, 99, 244, 0.15),
    0 calc(20px * var(--ui-density)) calc(52px * var(--ui-density)) rgba(83, 98, 155, 0.16),
    0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.12);
}

:root:not([data-theme="dark"]) .message-table-scroll {
  border: 1px solid var(--layer-input-border);
  border-radius: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(620px * var(--ui-density)) calc(320px * var(--ui-density)) at 56% 28%, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  box-shadow:
    var(--layer-input-shadow),
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
}

:root:not([data-theme="dark"]) .ordinary-list-table-scroll {
  border: 1px solid var(--layer-input-border);
  border-radius: calc(24px * var(--ui-density));
  background:
    radial-gradient(calc(620px * var(--ui-density)) calc(320px * var(--ui-density)) at 56% 28%, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  box-shadow:
    var(--layer-input-shadow),
    0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
}

:root:not([data-theme="dark"]) .ordinary-list-table th {
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 84%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 98%, white 2%), color-mix(in srgb, var(--panel) 96%, white 4%));
}

:root:not([data-theme="dark"]) .ordinary-list-table td {
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 66%, transparent);
}

:root:not([data-theme="dark"]) .ordinary-list-table tbody tr:not(.selected-row):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-3) 8%, transparent)),
    color-mix(in srgb, var(--control-hover) 66%, transparent);
  box-shadow:
    inset calc(3px * var(--ui-density)) 0 0 color-mix(in srgb, var(--accent) 64%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent);
}

:root:not([data-theme="dark"]) .ordinary-list-table tbody tr:not(.selected-row):hover td {
  background: transparent;
}

:root:not([data-theme="dark"]) .message-table th {
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 84%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 98%, white 2%), color-mix(in srgb, var(--panel) 96%, white 4%));
}

:root:not([data-theme="dark"]) .message-table td {
  border-bottom-color: color-mix(in srgb, var(--layer-input-border) 66%, transparent);
}

:root:not([data-theme="dark"]) .message-table tbody tr[data-todo-row] {
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}

:root:not([data-theme="dark"]) .message-table tbody tr[data-todo-row]:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-3) 8%, transparent)),
    color-mix(in srgb, var(--control-hover) 66%, transparent);
  box-shadow:
    inset calc(3px * var(--ui-density)) 0 0 color-mix(in srgb, var(--accent) 64%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent);
}

:root:not([data-theme="dark"]) .message-table tbody tr[data-todo-row]:hover td {
  background: transparent;
}

:root:not([data-theme="dark"]) .message-table .ghost {
  border-color: var(--layer-input-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--layer-field) 90%, white 10%), color-mix(in srgb, var(--control) 84%, white 16%));
  color: var(--text);
  box-shadow: var(--layer-input-shadow);
}

.system-user-page-size {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.system-user-page-size .custom-select {
  width: calc(88px * var(--ui-density));
  min-width: calc(88px * var(--ui-density));
}

.system-user-page-size .custom-select-trigger {
  min-height: calc(34px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  font-size: calc(15px * var(--ui-density));
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.92);
}

.system-user-page-size .custom-select-value {
  display: inline-flex;
  align-items: center;
}

.system-user-page-size .custom-select-arrow {
  font-size: calc(15px * var(--ui-density));
}

.system-user-page-size .custom-select-menu {
  min-width: calc(88px * var(--ui-density));
}

.system-user-page-size .custom-select-option {
  min-height: calc(34px * var(--ui-density));
  padding: calc(7px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: calc(15px * var(--ui-density));
  font-weight: 700;
}

.system-users-toolbar-form > * {
  min-width: 0;
}

.system-users-toolbar-search {
  flex: 1 1 calc(340px * var(--ui-density));
  min-width: calc(240px * var(--ui-density));
  letter-spacing: 0.01em;
  font-variant-ligatures: none;
  border-color: var(--layer-input-border);
  box-shadow: var(--layer-input-shadow);
}

.system-users-toolbar-search:focus,
.system-users-toolbar-search:focus-visible {
  outline: none;
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

.system-users-toolbar-form select {
  flex: 0 1 calc(164px * var(--ui-density));
  min-width: calc(140px * var(--ui-density));
  letter-spacing: 0.01em;
  font-variant-ligatures: none;
}

.system-users-list-toolbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.system-users-list-toolbar .list-toolbar-section {
  flex-wrap: nowrap;
}

.system-users-list-toolbar .list-toolbar-section.center {
  justify-content: stretch;
}

.system-users-list-toolbar .list-toolbar-section.right {
  gap: calc(10px * var(--ui-density));
}

@media (max-width: 760px) {
  .modal.wide:has(#integrationCredentialCreateForm) {
    width: calc(100vw - 16px);
    max-width: none;
  }

  .integration-credentials-page .system-users-list-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .integration-credentials-page .system-users-list-toolbar .list-toolbar-section,
  .integration-credentials-page .system-users-toolbar-form {
    width: 100%;
  }

  .integration-credentials-page .system-users-toolbar-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: wrap;
  }

  .integration-credentials-page .system-users-toolbar-form select,
  .integration-credentials-page .system-users-toolbar-search {
    width: 100%;
    min-width: 0;
  }

  .integration-credentials-page .system-users-toolbar-search {
    grid-column: 1 / -1;
  }

  #integrationCredentialCreateForm .scope-check-grid {
    align-items: stretch;
  }
}

.system-users-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: nowrap;
  min-width: 0;
}

.system-users-toolbar-actions > button,
.system-users-toolbar-more-menu .toolbar-popover__menu > button {
  min-height: calc(44px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  font-size: calc(16px * var(--ui-density));
  line-height: 1;
  white-space: nowrap;
}

.system-users-toolbar-more {
  position: relative;
  display: none;
  flex: 0 0 auto;
}

.system-users-toolbar-more-menu {
  position: absolute;
  top: calc(100% + calc(10px * var(--ui-density)));
  right: 0;
  min-width: calc(200px * var(--ui-density));
  z-index: 12;
}

.system-users-toolbar-more-menu .toolbar-popover__menu {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.system-users-toolbar-more-menu .toolbar-popover__menu > button {
  justify-content: flex-start;
}

.system-users-list-toolbar.is-collapsed .system-users-toolbar-actions {
  display: none;
}

.system-users-list-toolbar.is-collapsed .system-users-toolbar-more {
  display: inline-flex;
}

.system-user-list-footer .list-pagination-center .home-pagination {
  flex: 0 0 auto;
  white-space: nowrap;
}

.system-user-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  overscroll-behavior: contain;
  border-radius: calc(24px * var(--ui-density));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  background-clip: padding-box;
  isolation: isolate;
  scrollbar-gutter: stable;
}

.message-table-scroll,
.ordinary-list-table-scroll {
  min-height: 0;
  height: 100%;
}

.system-user-table {
  min-width: calc(1484px * var(--ui-density));
}

.system-user-sequence-cell {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  text-align: center;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

.system-user-select-cell {
  width: calc(54px * var(--ui-density));
  min-width: calc(54px * var(--ui-density));
  text-align: center;
}

.system-user-select-cell input[type="checkbox"] {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  min-width: calc(18px * var(--ui-density));
  margin: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--accent);
}

.system-user-table th,
.system-user-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.system-user-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 96%, white 2%), color-mix(in srgb, var(--panel) 98%, white 2%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 1px 0 color-mix(in srgb, var(--line) 76%, transparent);
}

.system-user-table td {
  padding-top: calc(18px * var(--ui-density));
  padding-bottom: calc(18px * var(--ui-density));
  transition: background 140ms ease, color 140ms ease;
}

.system-user-table tbody tr:not(.selected-row):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-3) 8%, transparent)),
    color-mix(in srgb, var(--control-hover) 66%, transparent);
  box-shadow:
    inset calc(3px * var(--ui-density)) 0 0 color-mix(in srgb, var(--accent) 64%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--layer-input-border) 78%, transparent);
}

.system-user-table tbody tr:not(.selected-row):hover td {
  background: transparent;
}

.system-user-table thead th:first-child {
  border-top-left-radius: calc(22px * var(--ui-density));
}

.system-user-table thead th:last-child {
  border-top-right-radius: calc(22px * var(--ui-density));
}

.system-user-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(22px * var(--ui-density));
}

.system-user-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(22px * var(--ui-density));
}

.system-user-text {
  letter-spacing: 0.01em;
}

.system-user-table .table-title-text {
  color: var(--text);
  font-weight: 400;
}

.system-user-text--mono {
  font-variant-ligatures: none;
  word-spacing: 0.05em;
}

.system-user-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
}

.system-user-actions .ghost {
  min-height: calc(40px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density));
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--control) 78%, transparent);
  color: var(--muted-strong);
  font-size: calc(16px * var(--ui-density));
  font-weight: 650;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(84, 99, 140, 0.06);
}

.system-user-actions .ghost:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--control-hover) 86%, transparent);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(84, 99, 140, 0.10);
}

.system-users-toolbar-actions [data-user-bulk-delete],
.system-users-toolbar-more-menu [data-user-bulk-delete],
.system-user-actions [data-user-action="delete"] {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 96%, white 8%), color-mix(in srgb, var(--danger-bg) 88%, transparent)),
    var(--danger-bg);
  color: var(--danger);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) color-mix(in srgb, var(--danger) 14%, transparent);
}

.system-users-toolbar-actions [data-user-bulk-delete]:not(:disabled):hover,
.system-users-toolbar-more-menu [data-user-bulk-delete]:not(:disabled):hover,
.system-user-actions [data-user-action="delete"]:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 100%, white 10%), color-mix(in srgb, var(--danger-bg) 94%, transparent)),
    var(--danger-bg);
  color: var(--danger);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--danger) 20%, transparent);
}

.danger-text {
  color: var(--danger);
}

.team-list-card {
  gap: calc(18px * var(--ui-density));
}

.team-row-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
}

.team-row-action {
  min-width: calc(88px * var(--ui-density));
}

.team-list-footer .list-pagination-center .home-pagination {
  justify-content: center;
}

.team-page-size {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.team-page-size select {
  min-width: calc(84px * var(--ui-density));
}

.team-editor-modal {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.team-form {
  gap: calc(16px * var(--ui-density));
}

.team-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(52px * var(--ui-density));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.25 5.5 7 9.25l3.75-3.75' stroke='%2373829D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(18px * var(--ui-density)) center;
  background-size: calc(14px * var(--ui-density)) calc(14px * var(--ui-density));
}

.team-description-input {
  min-height: calc(56px * var(--ui-density));
  resize: vertical;
}

.team-member-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.team-member-selector {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.team-member-selector__toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  flex-wrap: wrap;
}

.team-member-selector__search {
  display: grid;
  min-width: min(calc(360px * var(--ui-density)), 100%);
  flex: 1 1 calc(320px * var(--ui-density));
}

.team-member-selector__meta {
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.team-member-selector__chips:empty {
  display: none;
}

.team-member-selector__list {
  display: grid;
  gap: calc(12px * var(--ui-density));
  align-content: start;
  min-height: calc(220px * var(--ui-density));
  max-height: min(40dvh, calc(420px * var(--ui-density)));
  overflow: auto;
  padding: calc(8px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(241, 246, 255, 0.72)),
    color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(111, 123, 255, 0.06);
}

.team-member-selector__list--compact {
  min-height: calc(180px * var(--ui-density));
  max-height: min(27dvh, calc(260px * var(--ui-density)));
}

.team-member-option {
  min-height: calc(72px * var(--ui-density));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.05);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.team-member-option:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 99, 244, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.team-member-option:has(input:checked) {
  border-color: rgba(125, 99, 244, 0.28);
  background:
    linear-gradient(135deg, rgba(105, 132, 255, 0.16), rgba(188, 118, 246, 0.16)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 calc(16px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.team-member-option input[type="checkbox"] {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin: 0;
}

.team-member-option__copy {
  min-width: 0;
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.team-member-option__copy strong,
.team-member-option__copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-option__copy strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.team-member-option__copy span,
.team-member-option small {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.team-member-selector__empty {
  min-height: calc(180px * var(--ui-density));
  display: grid;
  place-items: center;
  margin: 0;
  padding: calc(20px * var(--ui-density));
  text-align: center;
  border-radius: calc(20px * var(--ui-density));
  border: 1px dashed rgba(126, 145, 188, 0.28);
  background: rgba(255, 255, 255, 0.58);
}

.team-selected-members {
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-height: calc(92px * var(--ui-density));
  max-height: min(21dvh, calc(200px * var(--ui-density)));
  overflow: auto;
  padding-right: calc(4px * var(--ui-density));
}

.team-selected-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 255, 0.88)),
    rgba(255, 255, 255, 0.9);
}

.team-selected-member__copy,
.team-selected-member__meta {
  min-width: 0;
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.team-selected-member__copy strong,
.team-selected-member__copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-selected-member__copy strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.team-selected-member__copy span,
.team-selected-member__meta small {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.team-selected-member__meta {
  justify-items: end;
}

.team-selected-member__remove {
  min-width: calc(84px * var(--ui-density));
}

.team-selected-members__empty,
.team-member-message {
  margin: 0;
}

.project-members-page-shell {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.project-governance-card {
  display: grid;
  gap: calc(18px * var(--ui-density));
  padding: calc(20px * var(--ui-density));
}

.project-governance-warning,
.project-governance-editor__notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  flex-wrap: wrap;
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--warn-bg) 84%, white 10%), color-mix(in srgb, var(--warn-bg) 76%, transparent)),
    color-mix(in srgb, var(--panel) 88%, transparent);
}

.project-governance-warning__copy,
.project-governance-editor__notice {
  min-width: 0;
}

.project-governance-warning__copy {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.project-governance-warning__copy strong,
.project-governance-editor__notice strong {
  color: var(--heading);
}

.project-governance-warning__copy span,
.project-governance-editor__notice span {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.project-governance-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  flex-wrap: wrap;
}

.project-governance-card__copy,
.project-governance-card__actions {
  min-width: 0;
}

.project-governance-card__copy {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.project-governance-card__title-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.project-governance-card__title-row h3,
.project-governance-panel__head h4 {
  margin: 0;
}

.project-governance-card__copy p {
  margin: 0;
}

.project-governance-card__actions {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.project-governance-refresh {
  min-height: calc(36px * var(--ui-density));
  padding-inline: calc(14px * var(--ui-density));
  font-size: var(--font-size-hint);
}

.project-governance-template-badge {
  display: inline-grid;
  gap: calc(2px * var(--ui-density));
  min-width: calc(164px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    var(--soft-shadow);
}

.project-governance-template-badge span {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.project-governance-template-badge small {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.project-governance-state {
  display: grid;
  gap: calc(4px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 84%, white 10%), color-mix(in srgb, var(--danger-bg) 76%, transparent)),
    color-mix(in srgb, var(--panel) 88%, transparent);
}

.project-governance-state strong {
  color: var(--heading);
}

.project-governance-state span {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.project-governance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.project-governance-grid.is-loading {
  opacity: 0.72;
}

.project-governance-panel {
  display: grid;
  gap: calc(14px * var(--ui-density));
  min-height: 100%;
  padding: calc(18px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 calc(14px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--accent) 6%, transparent);
}

.project-governance-panel--wide {
  grid-column: span 2;
}

.project-governance-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.project-governance-panel__head .muted {
  font-size: var(--font-size-hint);
}

.project-governance-template {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.project-governance-template strong,
.project-governance-action-item strong,
.project-governance-missing-item strong,
.project-governance-role-card__person strong {
  color: var(--heading);
}

.project-governance-template span,
.project-governance-action-item span,
.project-governance-missing-item span,
.project-governance-role-card__person span {
  color: var(--muted);
}

.project-governance-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.project-governance-role-card {
  display: grid;
  gap: calc(12px * var(--ui-density));
  min-width: 0;
  padding: calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, white 3%), color-mix(in srgb, var(--panel-strong) 92%, transparent));
}

.project-governance-role-card.is-missing {
  border-style: dashed;
}

.project-governance-role-card__head,
.project-governance-role-card__person,
.project-governance-role-card__meta,
.project-governance-action-item > div,
.project-governance-missing-item {
  display: grid;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.project-governance-role-card__head strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.project-governance-role-card__head span {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.project-governance-role-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.project-governance-role-card__person strong,
.project-governance-role-card__person span,
.project-governance-missing-item strong,
.project-governance-missing-item span,
.project-governance-action-item strong,
.project-governance-action-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-governance-role-card__person span,
.project-governance-action-item span,
.project-governance-missing-item span {
  white-space: nowrap;
  font-size: var(--font-size-hint);
}

.project-governance-role-card__meta {
  justify-items: end;
  flex: 0 0 auto;
}

.project-governance-missing-list,
.project-governance-action-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.project-governance-missing-item,
.project-governance-action-item {
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--control) 86%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
}

.project-governance-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.project-governance-form {
  gap: calc(18px * var(--ui-density));
}

.project-governance-section {
  min-height: 0;
}

.project-governance-editor {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.project-governance-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.project-governance-editor__field {
  min-height: 0;
}

.project-governance-editor__control {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.project-governance-editor__control select {
  width: 100%;
}

.project-governance-editor__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
}

.project-members-table {
  min-width: calc(1540px * var(--ui-density));
}

.project-members-table td:last-child,
.project-members-table th:last-child {
  width: calc(356px * var(--ui-density));
  min-width: calc(356px * var(--ui-density));
}

.project-member-pill-stack {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
}

.project-member-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8px * var(--ui-density));
  justify-content: flex-end;
}

.project-member-actions-cell {
  white-space: nowrap;
}

.project-member-row-actions.system-user-actions {
  justify-content: flex-end;
}

.project-member-row-actions.system-user-actions .ghost {
  flex: 0 0 auto;
  min-height: calc(34px * var(--ui-density));
  padding-inline: calc(12px * var(--ui-density));
  color: var(--muted-strong);
  font-size: calc(15px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.project-member-row-actions.system-user-actions .danger {
  font-size: calc(15px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.project-member-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  gap: calc(20px * var(--ui-density));
}

.project-member-config-panel {
  display: grid;
  gap: calc(16px * var(--ui-density));
  align-content: start;
}

.project-member-section {
  min-height: 0;
}

.project-member-candidate-selector {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.project-member-candidate-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  flex-wrap: wrap;
}

.project-member-candidate-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
  min-height: calc(260px * var(--ui-density));
  max-height: min(48dvh, calc(560px * var(--ui-density)));
  overflow: auto;
  padding: calc(8px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(241, 246, 255, 0.72)),
    color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(111, 123, 255, 0.06);
}

.project-member-candidate-row {
  min-height: calc(76px * var(--ui-density));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(111, 123, 255, 0.05);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.project-member-candidate-row:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 99, 244, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.project-member-candidate-row:has(input:checked) {
  border-color: rgba(125, 99, 244, 0.28);
  background:
    linear-gradient(135deg, rgba(105, 132, 255, 0.16), rgba(188, 118, 246, 0.16)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 calc(16px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(111, 123, 255, 0.10);
}

.project-member-candidate-row input[type="radio"] {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin: 0;
}

.project-member-candidate-copy {
  min-width: 0;
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.project-member-candidate-copy strong,
.project-member-candidate-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-candidate-copy strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.project-member-candidate-copy span {
  color: var(--muted);
  font-size: var(--font-size-body);
}

.project-member-role-grid {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.project-member-option-list {
  display: grid;
  gap: calc(12px * var(--ui-density));
  width: 100%;
  align-content: start;
  padding: calc(8px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(241, 246, 255, 0.72)),
    color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(111, 123, 255, 0.06);
}

.project-member-role-option {
  min-height: calc(46px * var(--ui-density));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(12px * var(--ui-density));
  align-items: center;
  width: 100%;
  padding: calc(7px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.project-member-role-option:has(input:checked) {
  border-color: rgba(125, 99, 244, 0.3);
  background:
    linear-gradient(135deg, rgba(105, 132, 255, 0.12), rgba(188, 118, 246, 0.12)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 calc(12px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.project-member-role-option input[type="checkbox"] {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin: 0;
}

.project-member-role-copy {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  flex-wrap: nowrap;
}

.project-member-role-copy strong {
  color: var(--heading);
  white-space: nowrap;
}

.project-member-role-copy span {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-team-list {
  min-height: calc(200px * var(--ui-density));
  align-content: start;
}

.project-member-team-option {
  min-height: calc(46px * var(--ui-density));
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-block: calc(7px * var(--ui-density));
}

.project-member-team-option .team-member-option__copy {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  flex-wrap: nowrap;
}

.project-member-team-option .team-member-option__copy strong {
  white-space: nowrap;
}

.project-member-team-option .team-member-option__copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-user-modal-body {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.system-user-editor-shell {
  display: grid;
  grid-template-columns: minmax(calc(360px * var(--ui-density)), 0.98fr) minmax(0, 2.42fr);
  gap: 0;
  min-height: 0;
  height: 100%;
  border-radius: calc(32px * var(--ui-density));
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 56%),
    linear-gradient(180deg, rgba(238, 244, 255, 0.54), rgba(224, 234, 250, 0.4)),
    rgba(255, 255, 255, 0.12);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 calc(18px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(111, 123, 255, 0.06);
}

.system-user-editor-tabs {
  display: grid;
  align-content: start;
  gap: calc(14px * var(--ui-density));
  padding: calc(20px * var(--ui-density)) calc(12px * var(--ui-density)) calc(20px * var(--ui-density)) calc(20px * var(--ui-density));
  min-width: 0;
  background: transparent;
}

.system-user-editor-tab {
  min-height: calc(108px * var(--ui-density));
  padding: calc(22px * var(--ui-density)) calc(24px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(232, 239, 251, 0.1)),
    rgba(255, 255, 255, 0.08);
  color: var(--muted-strong);
  display: grid;
  gap: calc(10px * var(--ui-density));
  justify-items: start;
  align-content: center;
  text-align: left;
  backdrop-filter: blur(calc(22px * var(--ui-density))) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(111, 123, 255, 0.04);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.system-user-editor-tab strong {
  font-size: calc(20px * var(--ui-density));
  line-height: 1.2;
  color: var(--heading);
}

.system-user-editor-tab span {
  font-size: calc(14px * var(--ui-density));
  line-height: 1.5;
  color: var(--muted);
}

.system-user-editor-tab:hover {
  transform: translateX(calc(3px * var(--ui-density)));
  border-color: rgba(125, 99, 244, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(235, 242, 255, 0.14)),
    rgba(255, 255, 255, 0.12);
}

.system-user-editor-tab.active {
  position: relative;
  z-index: 2;
  margin-right: 0;
  padding-right: calc(24px * var(--ui-density));
  padding-left: calc(32px * var(--ui-density));
  border-color: rgba(125, 99, 244, 0.12);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.92), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    calc(18px * var(--ui-density)) 0 calc(26px * var(--ui-density)) rgba(121, 138, 179, 0.05),
    0 calc(18px * var(--ui-density)) calc(32px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.system-user-editor-tab.active::after {
  content: "";
  position: absolute;
  top: calc(16px * var(--ui-density));
  bottom: calc(16px * var(--ui-density));
  left: calc(14px * var(--ui-density));
  width: calc(4px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: linear-gradient(180deg, rgba(127, 101, 245, 0.88), rgba(92, 124, 255, 0.68));
}

.system-user-editor-tab.active strong,
.system-user-editor-tab.active span {
  color: var(--heading);
}

.system-user-editor-content {
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
  margin-left: 0;
  padding: calc(24px * var(--ui-density));
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(255, 255, 255, 0.72), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
  border-radius: calc(32px * var(--ui-density));
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 calc(18px * var(--ui-density)) calc(40px * var(--ui-density)) rgba(121, 138, 179, 0.08);
}

.system-user-editor-panel {
  display: none;
  gap: calc(18px * var(--ui-density));
  align-content: start;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: calc(6px * var(--ui-density));
}

.system-user-editor-panel.active {
  display: grid;
}

.system-user-editor-panel[data-user-detail-panel="permissions"] {
  overflow: visible;
  grid-template-rows: auto minmax(0, 1fr);
}

.system-user-editor-panel[data-user-detail-panel="audit"] {
  grid-template-rows: minmax(0, 1fr);
}

.drawer:has(.system-user-editor-shell) .drawer-footer {
  justify-content: flex-end;
  gap: calc(14px * var(--ui-density));
  margin-top: 0;
  padding: calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) calc(20px * var(--ui-density));
  border-top: 0;
  background: transparent;
}

.system-user-editor-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
}

.system-user-editor-summary-copy {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.system-user-editor-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: calc(28px * var(--ui-density));
  padding: 0 calc(12px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: rgba(125, 99, 244, 0.08);
  color: var(--accent);
  font-size: calc(13px * var(--ui-density));
  font-weight: 800;
}

.system-user-editor-summary-copy h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(28px * var(--ui-density));
  font-weight: 800;
  line-height: 1.15;
}

.system-user-editor-summary-copy p {
  margin: 0;
  max-width: 68ch;
}

.system-user-editor-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
  justify-content: flex-end;
}

.system-user-editor-count {
  display: inline-grid;
  place-items: center;
  min-width: calc(52px * var(--ui-density));
  min-height: calc(52px * var(--ui-density));
  padding: 0 calc(14px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 242, 255, 0.92)),
    rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(125, 99, 244, 0.16);
  color: var(--heading);
  font-size: calc(22px * var(--ui-density));
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(111, 123, 255, 0.08);
}

.system-user-inline-message {
  margin: 0;
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(18px * var(--ui-density));
  border: 1px solid rgba(125, 99, 244, 0.14);
  background:
    linear-gradient(180deg, rgba(247, 248, 255, 0.94), rgba(239, 243, 255, 0.88)),
    rgba(255, 255, 255, 0.92);
}

.system-user-editor-form {
  gap: calc(18px * var(--ui-density));
}

.system-user-modal-help {
  width: calc(20px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  flex: 0 0 calc(20px * var(--ui-density));
}

.system-user-form {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.system-user-form input,
.system-user-form select,
.system-user-form textarea,
.system-user-grant-row select {
  letter-spacing: 0.01em;
  font-variant-ligatures: none;
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.56;
}

.system-user-form select,
.system-user-grant-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(52px * var(--ui-density));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.25 5.5 7 9.25l3.75-3.75' stroke='%2373829D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(18px * var(--ui-density)) center;
  background-size: calc(14px * var(--ui-density)) calc(14px * var(--ui-density));
}

.system-user-form select option,
.system-user-grant-row select option {
  font-size: var(--font-size-body);
  font-weight: 600;
}

.system-user-cancel {
  border-color: color-mix(in srgb, var(--toolbar-popover-border) 78%, rgba(125, 99, 244, 0.22));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 255, 0.88)),
    rgba(255, 255, 255, 0.9);
  color: var(--heading);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 calc(10px * var(--ui-density)) calc(20px * var(--ui-density)) rgba(121, 138, 179, 0.08);
}

.system-user-cancel:hover {
  border-color: color-mix(in srgb, var(--toolbar-popover-border) 86%, rgba(125, 99, 244, 0.32));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 242, 255, 0.9)),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) rgba(121, 138, 179, 0.12);
}

.system-user-base-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(14px * var(--ui-density));
}

.system-user-base-grid--drawer {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
}

.system-user-identity strong,
.system-user-contact strong {
  color: var(--heading);
}

.system-user-identity span,
.system-user-contact span,
.system-user-identity small {
  color: var(--muted);
}

.system-user-section {
  display: grid;
  gap: calc(18px * var(--ui-density));
}

.system-user-section--solid {
  position: relative;
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density)) calc(20px * var(--ui-density));
  border-radius: calc(24px * var(--ui-density));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(121, 138, 179, 0.08);
}

.system-user-grant-section {
  overflow: visible;
  z-index: 12;
}

.system-user-section-header {
  display: block;
}

.system-user-section-header h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
  font-weight: 800;
}

.system-user-grant-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(calc(220px * var(--ui-density)), 0.92fr) auto;
  gap: calc(14px * var(--ui-density));
  align-items: end;
}

.system-user-grant-field {
  display: grid;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
}

.system-user-grant-field label {
  color: var(--muted-strong);
  font-size: calc(15px * var(--ui-density));
  font-weight: 800;
  line-height: 1.4;
}

.system-user-grant-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(52px * var(--ui-density));
  position: relative;
  z-index: 6;
}

.system-user-grant-field {
  position: relative;
  z-index: 6;
}

.system-user-grant-field:has(.custom-select.open),
.system-user-grant-actions:has(.custom-select.open),
.system-user-section--solid:has(.custom-select.open),
.system-user-editor-content:has(.custom-select.open) {
  z-index: 80;
}

.system-user-grant-row .custom-select {
  z-index: 6;
}

.system-user-grant-row .custom-select.open {
  z-index: 120;
}

.system-user-grant-row .custom-select-menu {
  position: absolute;
  z-index: 160;
}

.system-user-grant-actions .primary {
  min-height: calc(48px * var(--ui-density));
  min-width: calc(120px * var(--ui-density));
  justify-content: center;
}

.system-user-grant-actions .primary:disabled {
  min-width: calc(120px * var(--ui-density));
}

.system-user-detail-table-card {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(14px * var(--ui-density));
}

.system-user-detail-table-shell {
  min-height: 0;
}

.system-user-detail-table-scroll {
  height: calc(340px * var(--ui-density));
  min-height: calc(340px * var(--ui-density));
}

.system-user-detail-table-scroll table {
  min-width: 100%;
}

.system-user-detail-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: calc(4px * var(--ui-density));
}

.system-user-detail-pager .system-user-pagination {
  margin-left: auto;
}

:root[data-theme="dark"] .system-user-list-card,
:root[data-theme="dark"] .project-governance-card,
:root[data-theme="dark"] .project-governance-panel,
:root[data-theme="dark"] .project-governance-warning,
:root[data-theme="dark"] .project-governance-editor__notice,
:root[data-theme="dark"] .system-user-detail-table-card,
:root[data-theme="dark"] .system-user-section--solid,
:root[data-theme="dark"] .system-user-editor-shell,
:root[data-theme="dark"] .system-user-editor-content,
:root[data-theme="dark"] .system-user-editor-tab,
:root[data-theme="dark"] .system-user-inline-message,
:root[data-theme="dark"] .system-user-editor-count {
  border-color: rgba(173, 228, 255, 0.14);
}

:root[data-theme="dark"] .system-user-editor-shell {
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.84), rgba(10, 16, 25, 0.70)),
    rgba(10, 15, 24, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(18px * var(--ui-density)) calc(36px * var(--ui-density)) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .system-user-editor-tab {
  background:
    linear-gradient(180deg, rgba(22, 31, 44, 0.88), rgba(14, 21, 32, 0.76)),
    rgba(13, 19, 29, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .system-user-editor-tab strong,
:root[data-theme="dark"] .system-user-editor-tab span,
:root[data-theme="dark"] .system-user-editor-summary-copy h4,
:root[data-theme="dark"] .system-user-section-header h4,
:root[data-theme="dark"] .system-user-identity strong,
:root[data-theme="dark"] .system-user-contact strong {
  color: var(--heading);
}

:root[data-theme="dark"] .system-user-editor-content,
:root[data-theme="dark"] .project-governance-panel,
:root[data-theme="dark"] .system-user-section--solid,
:root[data-theme="dark"] .system-user-inline-message,
:root[data-theme="dark"] .system-user-editor-count {
  background:
    linear-gradient(180deg, rgba(15, 22, 32, 0.92), rgba(10, 16, 25, 0.82)),
    rgba(10, 15, 24, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .system-user-identity span,
:root[data-theme="dark"] .system-user-contact span,
:root[data-theme="dark"] .system-user-identity small,
:root[data-theme="dark"] .project-governance-warning__copy span,
:root[data-theme="dark"] .project-governance-editor__notice span,
:root[data-theme="dark"] .system-user-editor-summary-copy p,
:root[data-theme="dark"] .system-user-grant-field label,
:root[data-theme="dark"] .system-user-page-size,
:root[data-theme="dark"] .system-user-list-footer,
:root[data-theme="dark"] .system-user-text {
  color: rgba(232, 238, 248, 0.76);
}

:root[data-theme="dark"] .system-users-toolbar-search,
:root[data-theme="dark"] .system-users-toolbar-form select,
:root[data-theme="dark"] .project-governance-editor__control select,
:root[data-theme="dark"] .system-user-form input,
:root[data-theme="dark"] .system-user-form select,
:root[data-theme="dark"] .system-user-form textarea,
:root[data-theme="dark"] .system-user-grant-row select,
:root[data-theme="dark"] .system-user-page-size .custom-select-trigger {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(31, 42, 58, 0.94), rgba(22, 31, 44, 0.88)),
    rgba(18, 26, 38, 0.88);
  color: var(--heading);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) rgba(0, 0, 0, 0.14);
}

:root[data-theme="dark"] .system-user-table th,
:root[data-theme="dark"] .system-user-table td,
:root[data-theme="dark"] .system-user-detail-table-scroll th,
:root[data-theme="dark"] .system-user-detail-table-scroll td {
  color: rgba(232, 238, 248, 0.88);
}

:root[data-theme="dark"] .system-user-table tbody tr:not(.selected-row):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-3) 12%, transparent)),
    rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .system-user-table tbody tr:not(.selected-row):hover td {
  background: transparent;
}

:root[data-theme="dark"] .system-user-actions .ghost,
:root[data-theme="dark"] .project-governance-configure,
:root[data-theme="dark"] .system-user-cancel {
  border-color: rgba(173, 228, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(19, 27, 39, 0.90), rgba(13, 20, 31, 0.82)),
    rgba(13, 20, 31, 0.82);
  color: var(--heading);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(10px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .project-governance-warning,
:root[data-theme="dark"] .project-governance-editor__notice {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--warn-bg) 28%, rgba(15, 22, 32, 0.92)), rgba(10, 15, 24, 0.72)),
    rgba(10, 15, 24, 0.72);
}

:root[data-theme="dark"] .system-users-toolbar-search:focus,
:root[data-theme="dark"] .system-users-toolbar-search:focus-visible {
  border-color: var(--layer-input-focus-border);
  box-shadow: var(--layer-input-focus-shadow);
}

:root[data-theme="dark"] .system-users-toolbar-actions [data-user-bulk-delete],
:root[data-theme="dark"] .system-users-toolbar-more-menu [data-user-bulk-delete],
:root[data-theme="dark"] .system-user-actions [data-user-action="delete"] {
  border-color: color-mix(in srgb, var(--danger) 46%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 72%, rgba(38, 12, 24, 0.82)), rgba(44, 14, 28, 0.82)),
    rgba(44, 14, 28, 0.78);
  color: color-mix(in srgb, var(--danger) 82%, #ffffff 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(12px * var(--ui-density)) calc(24px * var(--ui-density)) color-mix(in srgb, var(--danger) 16%, transparent);
}

:root[data-theme="dark"] .system-users-toolbar-actions [data-user-bulk-delete]:not(:disabled):hover,
:root[data-theme="dark"] .system-users-toolbar-more-menu [data-user-bulk-delete]:not(:disabled):hover,
:root[data-theme="dark"] .system-user-actions [data-user-action="delete"]:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--danger) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 88%, rgba(48, 16, 30, 0.86)), rgba(55, 17, 32, 0.86)),
    rgba(55, 17, 32, 0.82);
  color: color-mix(in srgb, var(--danger) 74%, #ffffff 26%);
}

.audit-log-shell,
.audit-log-management-shell {
  display: grid;
  min-height: 0;
  height: 100%;
}

.audit-log-list-shell,
.audit-log-list-card,
.audit-log-table-scroll {
  min-height: 0;
  height: 100%;
}

.audit-log-table {
  min-width: calc(1160px * var(--ui-density));
}

.audit-log-sequence-column {
  width: calc(64px * var(--ui-density));
  min-width: calc(64px * var(--ui-density));
  text-align: center;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

/* Ordinary-list alignment: headers are a shared scan line; variable prose
 * stays left-aligned while compact states, dates and actions centre. */
.workspace-members__member-table thead th,
.message-table thead th,
.announcement-table thead th,
.audit-log-table thead th {
  text-align: center;
}

.workspace-members__member-table td:nth-child(1),
.workspace-members__member-table td:nth-child(4),
.workspace-members__member-table td:nth-child(5),
.workspace-members__member-table td:nth-child(6),
.workspace-members__member-table td:last-child,
.message-table td:nth-child(1),
.message-table td:nth-child(2),
.message-table td:nth-child(3),
.message-table td:nth-child(6),
.message-table td:last-child,
.announcement-table td:nth-child(1),
.announcement-table td:nth-child(5),
.announcement-table td:nth-child(6),
.announcement-table td:nth-child(7),
.announcement-table td:last-child,
.audit-log-table td:nth-child(1),
.audit-log-table td:nth-child(2),
.audit-log-table td:last-child {
  text-align: center;
}

.workspace-members__member-table th:last-child,
.workspace-members__member-table td:last-child {
  text-align: center;
}

.workspace-member-actions-cell {
  white-space: nowrap;
}

.workspace-member-row-actions.system-user-actions {
  justify-content: center;
}

/* 成员列表是普通列表的行级操作，不使用系统用户维护页的大号按钮。
   文字与表格正文同号，紧凑边框保证三项操作完整落入“操作”列。 */
.workspace-member-row-actions.system-user-actions {
  gap: calc(5px * var(--ui-density));
}

.workspace-member-row-actions.system-user-actions .ghost {
  min-height: calc(28px * var(--ui-density));
  padding: 0 calc(8px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  font-size: var(--font-size-table);
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
}

:root[data-theme="dark"] .audit-log-shell,
:root[data-theme="dark"] .audit-log-table-scroll {
  border-color: rgba(173, 228, 255, 0.14);
}

.meta-table th {
  width: calc(148px * var(--ui-density));
}

.notice-list {
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.notice {
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  background: var(--panel-strong);
  box-shadow: none;
}

.print-area {
  background: #fff;
  color: #000;
}

.iteration-planning-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(calc(300px * var(--ui-density)), calc(360px * var(--ui-density))) minmax(0, 1fr);
  gap: calc(24px * var(--ui-density));
}

.iteration-sidebar,
.iteration-workspace {
  min-height: 0;
  overflow: hidden;
}

.iteration-sidebar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: visible;
  border-radius: var(--radius);
}

.iteration-sidebar.card {
  overflow: visible;
  border-radius: var(--radius);
  background: var(--panel);
}

/* 筛选浮层需要跨越右侧工作区显示；侧栏在浮层打开时提升到同级工作区之上，
   保持列表滚动区与卡片本身不裁切该浮层。 */
.iteration-sidebar:has(.iteration-filter-popover) {
  z-index: 40;
}

.iteration-workspace {
  position: relative;
  z-index: 0;
}

.iteration-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(24px * var(--ui-density)) calc(24px * var(--ui-density)) calc(18px * var(--ui-density));
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel-strong);
  backdrop-filter: var(--glass);
}

.iteration-sidebar-head h3,
.iteration-workspace-head h3,
.iteration-report h4 {
  margin: 0;
}

.iteration-head-actions {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.iteration-filter-anchor {
  position: relative;
  flex: 0 0 auto;
}

.iteration-filter-trigger {
  min-height: calc(44px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  padding-inline: calc(14px * var(--ui-density));
  font-size: var(--font-size-body);
}

.icon-button {
  width: calc(44px * var(--ui-density));
  min-width: calc(44px * var(--ui-density));
  height: calc(44px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: calc(999px * var(--ui-density));
}

.icon-button svg {
  width: calc(20px * var(--ui-density));
  height: calc(20px * var(--ui-density));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}

.iteration-filter-popover {
  position: absolute;
  top: calc(100% + calc(10px * var(--ui-density)));
  left: 50%;
  right: auto;
  z-index: 90;
  width: min(calc(340px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density))));
  display: grid;
  gap: calc(12px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  border-radius: calc(20px * var(--ui-density));
  transform: translateX(-50%);
}

.iteration-filter-popover label,
.iteration-filter-popover .field-shell,
.iteration-add-list label {
  min-width: 0;
}

.popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.popover-actions button {
  min-height: calc(48px * var(--ui-density));
}

.iteration-sidebar-list {
  min-height: 0;
  overflow: auto;
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density)) calc(22px * var(--ui-density));
  border-radius: 0 0 var(--radius) var(--radius);
}

.iteration-view-control {
  padding: calc(6px * var(--ui-density)) 0 calc(12px * var(--ui-density));
}

.iteration-view-control select {
  min-height: calc(44px * var(--ui-density));
  padding-block: calc(9px * var(--ui-density));
  border-color: var(--line);
  background: var(--control);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.iteration-sidebar-list::-webkit-scrollbar,
.iteration-workitem-table::-webkit-scrollbar,
.iteration-add-list::-webkit-scrollbar {
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
}

.iteration-sidebar-list::-webkit-scrollbar-thumb,
.iteration-workitem-table::-webkit-scrollbar-thumb,
.iteration-add-list::-webkit-scrollbar-thumb {
  border-radius: calc(999px * var(--ui-density));
  background: rgba(111, 123, 255, 0.28);
}

.iteration-group {
  border-bottom: 1px solid var(--line);
}

.iteration-group summary {
  min-height: calc(56px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: 0 calc(6px * var(--ui-density));
  cursor: pointer;
  color: var(--heading);
  font-weight: 800;
}

.iteration-group summary span {
  color: var(--muted);
  font-size: var(--font-size-note);
}

.iteration-group-body {
  display: grid;
  gap: calc(10px * var(--ui-density));
  padding: 0 0 calc(14px * var(--ui-density));
}

.iteration-card {
  width: 100%;
  position: relative;
  z-index: 1;
  min-height: calc(112px * var(--ui-density));
  display: grid;
  align-items: start;
  gap: calc(8px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: none;
  cursor: pointer;
}

.iteration-card.menu-open,
.iteration-card:has(.iteration-card-menu) {
  z-index: 70;
}

.iteration-card:hover,
.iteration-card.selected {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow:
    0 0 0 calc(1px * var(--ui-density)) color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 calc(20px * var(--ui-density)) color-mix(in srgb, var(--accent) 30%, transparent);
}

.iteration-card-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 60%) auto calc(34px * var(--ui-density));
  align-items: center;
  gap: calc(8px * var(--ui-density));
}

.iteration-card-title,
.iteration-card-progress {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.iteration-card-title {
  color: var(--heading);
  font-weight: 800;
}

.iteration-card-progress {
  display: grid;
  grid-template-columns: auto minmax(calc(72px * var(--ui-density)), 1fr) auto;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-body);
}

.iteration-card-progress b,
.iteration-card-progress em {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-style: normal;
  font-weight: 700;
}

.iteration-card-progress__track {
  display: flex;
  min-width: 0;
  height: calc(9px * var(--ui-density));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--accent) 46%, var(--control));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.iteration-card-progress__segment {
  display: block;
  height: 100%;
  flex: 0 0 auto;
}

.iteration-card-progress__segment.done {
  background: var(--ok);
}

.iteration-card-progress__segment.due-soon {
  background: var(--warn);
}

.iteration-card-progress__segment.overdue {
  background: var(--danger);
}

.iteration-menu-button {
  width: calc(34px * var(--ui-density));
  min-width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  min-height: calc(34px * var(--ui-density));
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: calc(999px * var(--ui-density));
}

.iteration-menu-button svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  fill: currentColor;
}

.iteration-card-menu {
  position: absolute;
  top: calc(100% + calc(6px * var(--ui-density)));
  right: 0;
  z-index: 95;
  width: calc(116px * var(--ui-density));
  display: grid;
  gap: 0;
}

.iteration-card-menu button {
  width: 100%;
  min-height: calc(44px * var(--ui-density));
  justify-content: flex-start;
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  border-radius: calc(14px * var(--ui-density));
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-body);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.iteration-workitem-toolbar .list-filter-anchor:has(.list-filter-popover) {
  position: relative;
}

.iteration-workitem-toolbar .list-filter-popover {
  left: 50%;
  right: auto;
  width: min(calc(620px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density))));
  padding: calc(18px * var(--ui-density));
  transform: translateX(-50%);
}

.iteration-workitem-toolbar .list-filter-popover::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(45deg);
}

.iteration-workitem-toolbar .list-filter-row {
  grid-template-columns: calc(56px * var(--ui-density)) minmax(calc(112px * var(--ui-density)), 1fr) minmax(calc(90px * var(--ui-density)), 0.76fr) minmax(calc(130px * var(--ui-density)), 1fr) calc(32px * var(--ui-density));
  gap: calc(8px * var(--ui-density));
}

.iteration-workitem-toolbar .list-filter-row .field-shell__label-text {
  justify-self: center;
}

.iteration-workitem-toolbar .list-filter-row .field-shell__label,
.iteration-workitem-toolbar .filter-join-static,
.iteration-workitem-toolbar .list-filter-row select,
.iteration-workitem-toolbar .list-filter-row input {
  font-size: var(--font-size-table);
}

.iteration-workitem-toolbar .filter-join-static,
.iteration-workitem-toolbar .list-filter-row select,
.iteration-workitem-toolbar .list-filter-row input {
  height: calc(42px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density));
}

.iteration-card-menu button:hover {
  background: var(--control-hover);
  transform: none;
}

.iteration-card-menu .danger-text {
  color: var(--danger);
}

:root[data-theme="dark"] .iteration-card-menu {
  border-color: var(--layer-line);
  background:
    linear-gradient(135deg, rgba(30, 49, 68, 0.98), rgba(18, 32, 48, 0.98)),
    #122030;
  box-shadow: 0 calc(24px * var(--ui-density)) calc(70px * var(--ui-density)) rgba(0, 0, 0, 0.34), 0 calc(8px * var(--ui-density)) calc(22px * var(--ui-density)) rgba(0, 0, 0, 0.26);
}

.iteration-workspace {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  padding: calc(24px * var(--ui-density));
}

.iteration-workspace.is-report-open {
  grid-template-rows: auto auto minmax(0, 1fr) auto minmax(calc(180px * var(--ui-density)), 0.9fr);
  overflow: hidden;
}

.iteration-workspace-notice,
.iteration-report-slot {
  min-height: 0;
}

.iteration-workspace.is-report-open .iteration-report-slot {
  overflow: auto;
  overscroll-behavior: contain;
}

.iteration-workspace-notice .muted {
  margin: calc(12px * var(--ui-density)) 0 0;
}

.iteration-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  padding-bottom: calc(18px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.iteration-workspace-head p {
  margin: calc(6px * var(--ui-density)) 0 0;
}

.iteration-scope-title {
  min-width: 0;
}

.iteration-scope-title h3 {
  max-width: min(52vw, calc(760px * var(--ui-density)));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.iteration-scope-title .status-badge {
  vertical-align: middle;
}

.iteration-report {
  display: grid;
  grid-template-columns: minmax(calc(220px * var(--ui-density)), 0.8fr) minmax(calc(180px * var(--ui-density)), 0.7fr) minmax(calc(320px * var(--ui-density)), 1.4fr) minmax(calc(170px * var(--ui-density)), 0.5fr);
  align-items: center;
  gap: calc(24px * var(--ui-density));
  margin: calc(18px * var(--ui-density)) 0;
  padding: calc(24px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45);
}

.iteration-report--dashboard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(240px * var(--ui-density)), auto);
  align-items: stretch;
}

.iteration-report-panel {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(10px * var(--ui-density));
}

.iteration-report-panel--status {
  grid-template-rows: auto minmax(0, 1fr);
}

.iteration-report-panel h4 {
  margin: 0;
}

.report-legend {
  display: grid;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(16px * var(--ui-density));
}

.iteration-status-summary {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(calc(112px * var(--ui-density)), 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(16px * var(--ui-density));
}

.iteration-status-summary .report-legend {
  align-self: start;
  margin-top: calc(8px * var(--ui-density));
}

.iteration-status-summary .iteration-chart {
  min-height: calc(220px * var(--ui-density));
}

.report-legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
}

.report-legend i {
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
}

.ok-dot { background: var(--ok); }
.danger-dot { background: var(--danger); }
.normal-dot { background: var(--accent); }

.iteration-chart {
  min-height: calc(220px * var(--ui-density));
  min-width: 0;
}

.report-members {
  display: grid;
  justify-items: center;
  gap: calc(8px * var(--ui-density));
  text-align: center;
}

.report-members strong {
  color: var(--heading);
  font-size: calc(28px * var(--ui-density));
}

.report-members span {
  color: var(--muted);
}

.iteration-workitem-toolbar {
  display: grid;
  grid-template-columns: auto minmax(calc(132px * var(--ui-density)), 0.72fr) minmax(calc(146px * var(--ui-density)), 0.88fr) minmax(calc(260px * var(--ui-density)), 2.4fr) auto;
  gap: calc(12px * var(--ui-density));
  align-items: center;
  justify-content: start;
  padding: calc(18px * var(--ui-density)) 0;
}

.iteration-workitem-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  min-height: calc(40px * var(--ui-density));
}

.iteration-workitem-actions button {
  white-space: nowrap;
}

.iteration-workitem-toolbar .iteration-workitem-search {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* 迭代页只保留状态与处理人两个高频条件，直接复用消息管理工具栏的常驻下拉节奏。 */
.iteration-workitem-filter-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.iteration-workitem-table {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.38);
}

.iteration-workitem-head,
.iteration-story-row {
  display: grid;
  width: 100%;
  min-width: calc(940px * var(--ui-density));
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
}

.iteration-workitem-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-head);
  font-weight: 800;
}

.iteration-workitem-head .col-head-cell,
.iteration-story-row > div {
  min-width: 0;
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  white-space: nowrap;
}

/* 迭代工作项表的字段名统一居中；正文仅居中短枚举、处理人与操作列，
   保留编号和标题左对齐以维持识别与扫读效率。 */
.iteration-workitem-head .col-head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.iteration-story-row > div:nth-child(4),
.iteration-story-row > div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 所有数据列随宽屏共同伸缩，操作保留左侧落点以便连续扫描。 */
.iteration-workitem-head .col-head-cell:nth-child(6),
.iteration-story-row > div:nth-child(6) {
  justify-content: flex-start;
  text-align: left;
}

.iteration-story-row .title-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: calc(8px * var(--ui-density));
}

.iteration-story-row .table-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iteration-story-empty > div {
  grid-column: 1 / -1;
}

.iteration-story-row {
  background: rgba(255, 255, 255, 0.24);
}

.iteration-story-row:hover {
  background: var(--control-hover);
}

.iteration-workitem-table input[type="checkbox"],
.iteration-add-list input[type="checkbox"] {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
}

.row-text-button {
  min-height: calc(30px * var(--ui-density));
  padding: calc(5px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: calc(10px * var(--ui-density));
  color: var(--danger);
  background: var(--danger-bg);
  font-size: var(--font-size-hint);
}

.iteration-add-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.iteration-add-filter-row {
  display: grid;
  grid-template-columns: minmax(calc(220px * var(--ui-density)), 1.3fr) minmax(calc(150px * var(--ui-density)), 0.8fr) minmax(calc(150px * var(--ui-density)), 0.8fr) minmax(calc(170px * var(--ui-density)), 0.9fr) auto;
  align-items: end;
  gap: calc(12px * var(--ui-density));
}

.iteration-add-filter-row label,
.iteration-add-filter-row .field-shell {
  min-width: 0;
}

.iteration-add-filter-row input,
.iteration-add-filter-row select {
  min-height: calc(44px * var(--ui-density));
}

.iteration-filter-popover .field-shell,
.iteration-add-filter-row .field-shell {
  margin: 0;
}

.iteration-add-list {
  max-height: 48vh;
  overflow: auto;
  display: grid;
  gap: calc(10px * var(--ui-density));
  padding: calc(4px * var(--ui-density));
}

:root[data-theme="dark"] .iteration-sidebar.card,
:root[data-theme="dark"] .iteration-workspace,
:root[data-theme="dark"] .iteration-report,
:root[data-theme="dark"] .iteration-workitem-table {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(173, 228, 255, 0.14);
}

:root[data-theme="dark"] .iteration-sidebar-head,
:root[data-theme="dark"] .iteration-workspace-head {
  background: rgba(10, 15, 23, 0.78);
  border-color: rgba(173, 228, 255, 0.10);
}

:root[data-theme="dark"] .iteration-group {
  border-color: rgba(173, 228, 255, 0.10);
}

:root[data-theme="dark"] .iteration-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(173, 228, 255, 0.12);
}

:root[data-theme="dark"] .iteration-card-status-counts i,
:root[data-theme="dark"] .row-text-button {
  background: rgba(255, 255, 255, 0.08);
  color: #e4edf9;
}

:root[data-theme="dark"] .iteration-workitem-head {
  background: rgba(255, 255, 255, 0.06);
  color: #eef4fb;
}

:root[data-theme="dark"] .iteration-story-row {
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .iteration-story-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.iteration-add-list-head,
.iteration-add-list label {
  display: grid;
  grid-template-columns: calc(28px * var(--ui-density)) calc(130px * var(--ui-density)) minmax(calc(260px * var(--ui-density)), 1fr) calc(104px * var(--ui-density)) calc(92px * var(--ui-density)) calc(128px * var(--ui-density));
  align-items: center;
  gap: calc(12px * var(--ui-density));
}

.iteration-add-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--ui-density));
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 800;
}

.iteration-add-list label {
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.58);
}

.iteration-add-list label[hidden] {
  display: none;
}

/* 加入工作项为高密度选择弹窗，全部可见文字统一为 12px。 */
.modal:has(#addItemsForm) .modal-head h3,
.modal:has(#addItemsForm) .modal-body,
.modal:has(#addItemsForm) .modal-footer,
.modal:has(#addItemsForm) input,
.modal:has(#addItemsForm) select,
.modal:has(#addItemsForm) button:not(.layer-close-button),
.modal:has(#addItemsForm) .field-shell__label,
.modal:has(#addItemsForm) .field-shell__label-text,
.modal:has(#addItemsForm) .field-shell__required,
.modal:has(#addItemsForm) .field-shell__help,
.modal:has(#addItemsForm) .field-shell__error,
.modal:has(#addItemsForm) .iteration-add-list,
.modal:has(#addItemsForm) .iteration-add-list-head,
.modal:has(#addItemsForm) .iteration-add-list label,
.modal:has(#addItemsForm) .type-badge,
.modal:has(#addItemsForm) .status-badge,
.modal:has(#addItemsForm) .priority-badge {
  font-size: calc(12px * var(--ui-density));
}

.modal:has(#addItemsForm) .iteration-add-list .status-badge,
.modal:has(#addItemsForm) .iteration-add-list .priority-badge {
  justify-self: start;
  width: max-content;
}

.modal:has(#addItemsForm) .modal-head h3,
.modal:has(#addItemsForm) .modal-footer button:not(.layer-close-button) {
  font-size: calc(14px * var(--ui-density));
}

/* Keep the dialog footprint stable while the candidate list changes length. */
.modal:has(#addItemsForm) {
  height: min(calc(900px * var(--ui-density)), calc(100dvh - calc(48px * var(--ui-density))));
}

.modal:has(#addItemsForm) .modal-body,
.modal:has(#addItemsForm) .iteration-add-form,
.modal:has(#addItemsForm) .iteration-add-list {
  min-height: 0;
}

.modal:has(#addItemsForm) .iteration-add-form {
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.modal:has(#addItemsForm) .iteration-add-list {
  max-height: none;
  align-content: start;
  grid-auto-rows: max-content;
}

/* Reserve identical label and control rows so enhanced selects and date inputs never shift vertically after a value changes. */
.modal:has(#addItemsForm) .iteration-add-filter-row {
  align-items: end;
}

.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell {
  grid-template-rows: calc(15px * var(--ui-density)) calc(44px * var(--ui-density));
  align-content: start;
}

/* Older mounted shells may retain an empty validation slot after a change; it must not add a third grid row. */
.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell > .field-shell__meta:not(:has(.field-shell__help:not(:empty), .field-shell__error:not(:empty))) {
  display: none;
}

.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell > input,
.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell > select,
.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell > .custom-select,
.modal:has(#addItemsForm) .iteration-add-filter-row .iteration-filter-shell .custom-select-trigger {
  box-sizing: border-box;
  height: calc(44px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
}

.modal:has(#addItemsForm) #clearAddItemFilters {
  align-self: end;
  box-sizing: border-box;
  height: calc(44px * var(--ui-density));
  min-height: calc(44px * var(--ui-density));
}

.iteration-add-title {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.iteration-add-title-cell {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.planning-readiness-reminder {
  display: flex;
  align-items: flex-start;
  gap: calc(4px * var(--ui-density));
  color: var(--warn);
  font-size: calc(11px * var(--ui-density));
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
}

.planning-readiness-reminder__icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
  place-items: center;
  border-radius: 50%;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: calc(10px * var(--ui-density));
  font-weight: 800;
  line-height: 1;
}

.empty-list-note {
  padding: calc(8px * var(--ui-density)) calc(6px * var(--ui-density));
}

@media (max-width: 980px) {
  .app-shell.sidebar-hidden {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-hidden .sidebar-toggle {
    display: none;
  }

  .home-stage.home-rail-collapsed {
    grid-template-columns: 1fr;
  }

  .home-page .home-rail-toggle {
    display: none !important;
  }

  body {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: auto;
  }

  .app-shell {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(12px * var(--ui-density));
    grid-template-columns: 1fr;
    transform: none;
    overflow: visible;
  }

  .mobile-navigation-toggle {
    position: sticky;
    top: calc(12px * var(--ui-density));
    z-index: 60;
    display: inline-flex;
    width: max-content;
    min-height: calc(44px * var(--ui-density));
    align-items: center;
    gap: calc(8px * var(--ui-density));
    padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
    border-radius: var(--radius-sm);
    background: var(--panel-strong);
    color: var(--heading);
    border-color: var(--line);
    box-shadow: var(--soft-shadow);
  }

  .app-shell .sidebar {
    display: none;
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .app-shell.mobile-navigation-open .sidebar {
    display: flex;
  }

  .app-shell .sidebar .nav {
    flex: 0 1 auto;
    min-height: calc(180px * var(--ui-density));
    max-height: 44svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-shell .main,
  .app-shell .content {
    min-height: 0;
    overflow: visible;
  }

  .initiation-detail-layout,
  .initiation-repository-row {
    grid-template-columns: 1fr;
  }

  .initiation-repository-row-actions {
    justify-items: start;
  }

  .iteration-planning-shell {
    height: auto;
    grid-template-columns: 1fr;
  }

  .iteration-sidebar {
    max-height: 58vh;
  }

  .iteration-workspace {
    min-height: 72vh;
  }

  .iteration-workspace-head,
  .iteration-workspace-head .page-actions,
  .popover-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .iteration-report,
  .iteration-workitem-toolbar {
    grid-template-columns: 1fr;
  }

  .iteration-filter-anchor .iteration-filter-popover,
  .iteration-workitem-toolbar .list-filter-popover {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .iteration-workitem-toolbar .list-filter-row {
    grid-template-columns: 1fr;
  }

  .iteration-add-filter-row {
    grid-template-columns: 1fr;
  }

  .iteration-add-list label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .iteration-add-list-head {
    display: none;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .topbar,
  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions,
  .hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10px * var(--ui-density));
  }

  .topbar-home-action,
  .topbar-quick-action {
    min-height: calc(48px * var(--ui-density));
    min-width: 0;
    width: auto;
    padding: 0 calc(12px * var(--ui-density));
  }

  .topbar-quick-action {
    flex: initial;
  }

  .workspace-switch-menu {
    left: 0;
    right: auto;
  }

  .home-hero {
    grid-template-columns: 1fr;
  }

  .home-hero-art {
    display: none;
  }

  .home-project-grid,
  .home-recent-grid {
    grid-template-columns: 1fr;
  }

  .project-governance-grid,
  .project-governance-role-grid {
    grid-template-columns: 1fr;
  }

  .project-governance-panel--wide {
    grid-column: span 1;
  }

  .project-governance-action-item,
  .project-governance-role-card__body {
    align-items: stretch;
    flex-direction: column;
  }

  .project-governance-role-card__meta {
    justify-items: start;
  }

  .system-user-editor-shell,
  .system-user-base-grid--drawer,
  .system-user-grant-row {
    grid-template-columns: 1fr;
  }

  .announcement-preview-grid {
    grid-template-columns: 1fr;
  }

  .system-user-editor-tabs {
    padding: calc(18px * var(--ui-density)) calc(14px * var(--ui-density)) calc(12px * var(--ui-density));
  }

  .system-user-editor-tab {
    min-height: calc(88px * var(--ui-density));
    padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  }

  .system-user-editor-tab.active {
    margin-right: 0;
    padding-right: calc(20px * var(--ui-density));
    padding-left: calc(20px * var(--ui-density));
  }

  .system-user-editor-tab.active::after {
    top: auto;
    bottom: calc(12px * var(--ui-density));
    left: calc(20px * var(--ui-density));
    right: auto;
    width: calc(56px * var(--ui-density));
    height: calc(4px * var(--ui-density));
  }

  .system-user-editor-content {
    margin-left: 0;
    padding: calc(10px * var(--ui-density)) calc(18px * var(--ui-density)) calc(18px * var(--ui-density));
    border-radius: 0 0 calc(28px * var(--ui-density)) calc(28px * var(--ui-density));
  }

  .drawer:has(.system-user-editor-shell) .drawer-head {
    padding: calc(20px * var(--ui-density)) calc(70px * var(--ui-density)) calc(14px * var(--ui-density)) calc(24px * var(--ui-density));
  }

  .drawer:has(.system-user-editor-shell) .drawer-body {
    padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density)) calc(12px * var(--ui-density));
  }

  .drawer:has(.system-user-editor-shell) .drawer-footer {
    padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density)) calc(16px * var(--ui-density));
  }

  .system-user-section-header {
    display: block;
  }

  .system-user-detail-table-scroll {
    height: calc(280px * var(--ui-density));
    min-height: calc(280px * var(--ui-density));
  }

  .system-user-grant-actions {
    justify-content: flex-start;
  }

  .overview-timeline {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .overview-timeline-node::after {
    display: none;
  }

  .overview-milestone-rail {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    max-height: clamp(calc(320px * var(--ui-density)), 52vh, calc(480px * var(--ui-density)));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .overview-milestone-road-track {
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .overview-milestone-segment {
    width: 100%;
    grid-template-rows: auto auto auto;
    gap: calc(14px * var(--ui-density));
    padding-bottom: calc(12px * var(--ui-density));
  }

  .overview-milestone-note-slot.top,
  .overview-milestone-note-slot.bottom {
    padding: 0;
  }

  .overview-milestone-note-card {
    width: 100%;
  }

  .overview-milestone-axis {
    min-height: calc(64px * var(--ui-density));
  }

  .overview-milestone-axis-line {
    left: calc(18px * var(--ui-density));
    right: calc(18px * var(--ui-density));
  }

  .overview-milestone-axis-tail {
    right: calc(18px * var(--ui-density));
  }

  .overview-milestone-axis-connector,
  .overview-milestone-note-card.placeholder {
    display: none;
  }

  .overview-system-progress-shell {
    grid-template-columns: 1fr;
  }

  .overview-system-progress-total-chart {
    height: calc(220px * var(--ui-density));
  }

  .overview-risk-list,
  .overview-activity-feed,
  .overview-deliverable-list,
  .overview-subsystem-list,
  .table-scroll:has([data-milestone-nav]),
  .table-scroll:has([data-delivery-nav]),
  .table-scroll:has([data-subsystem-nav]) {
    max-height: clamp(calc(260px * var(--ui-density)), 46vh, calc(420px * var(--ui-density)));
  }

  .overview-timeline-detail-list li {
    flex-direction: column;
    align-items: stretch;
  }

  .overview-timeline-detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    align-self: auto;
  }

  .topbar-quick-action {
    min-height: calc(56px * var(--ui-density));
    min-width: 0;
    flex: 1 1 calc(240px * var(--ui-density));
  }

  .dashboard-hero h1 {
    font-size: var(--font-size-title);
  }

  .planning,
  .split,
  .auth-panel {
    grid-template-columns: 1fr;
  }

  .grid.two,
  .grid.two-wide,
  .grid.three,
  .grid.four,
  .board,
  .stats-grid,
  .stats-grid.compact,
  .system-user-stats,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .workspace-overview__summary,
  .workspace-usage-grid,
  .workspace-subscription__summary,
  .workspace-plan-grid,
  .workspace-usage-detail-grid,
  .workspace-addon-grid {
    grid-template-columns: 1fr;
  }

  .workspace-overview__plan {
    justify-items: start;
    text-align: left;
  }

  .workspace-order-confirm {
    display: grid;
  }

  .workspace-addon-confirm {
    display: grid;
  }

  .workspace-usage-detail dl {
    grid-template-columns: 1fr;
  }

  .planning-board {
    min-height: calc(620px * var(--ui-density));
  }

  .work-items-board {
    height: auto;
    min-height: calc(620px * var(--ui-density));
  }

  .planning-toolbar {
    grid-template-columns: 1fr;
  }

  .list-page-head,
  .list-toolbar,
  .list-toolbar.no-center {
    grid-template-columns: 1fr;
  }

  .list-page-head-actions,
  .list-toolbar-section,
  .list-toolbar-section.left,
  .list-toolbar-section.center,
  .list-toolbar-section.right {
    justify-content: flex-start;
  }

  .planning-actions,
  .planning-filter-center,
  .planning-view-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .work-items-pagination-footer {
    grid-template-columns: 1fr;
  }

  .work-items-pagination-footer .list-pagination-center,
  .work-items-pagination-footer .list-pagination-meta {
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .planning-filter-center {
    padding-inline: 0;
    max-width: none;
    justify-self: stretch;
  }

  .planning-actions-balance {
    display: none;
  }

  .list-filter-popover,
  .list-sort-popover,
  .quick-filter-dropdown,
  .iteration-filter-popover {
    left: 0;
    right: auto;
    transform: none;
    width: min(100%, calc(100vw - calc(64px * var(--ui-density))));
  }

  .list-filter-popover::before {
    left: calc(34px * var(--ui-density));
    right: auto;
  }

  .list-filter-row,
  .list-sort-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .list-rule-remove {
    width: 100%;
  }

  .inline-field,
  .inline-field input,
  .inline-field select,
  .inline-field:first-child input {
    width: 100%;
  }

  .inline-field {
    max-width: 100%;
  }

  .gantt-shell {
    grid-template-columns: minmax(calc(520px * var(--ui-density)), max-content) minmax(calc(560px * var(--ui-density)), 1fr);
  }

  .drawer-form {
    grid-template-columns: 1fr;
  }

  .work-item-layout,
  .work-item-side-grid,
  .work-item-head-grid,
  .work-item-grid,
  .work-item-side-inline {
    grid-template-columns: 1fr;
  }

  .relation-dialog-filters {
    grid-template-columns: 1fr;
  }

  .work-item-side-column {
    position: static;
  }

  .work-item-field.span-2,
  .work-item-field.full {
    grid-column: auto;
  }

  .modal-backdrop {
    padding: calc(14px * var(--ui-density));
  }

  .system-user-list-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .team-list-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .system-user-list-footer .list-pagination-meta,
  .system-user-list-footer .list-pagination-center {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .team-list-footer .list-pagination-meta,
  .team-list-footer .list-pagination-center {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .system-user-page-size {
    justify-content: flex-start;
  }

  .team-page-size,
  .team-member-selector__toolbar {
    justify-content: flex-start;
  }

  .team-member-selector__search {
    min-width: 100%;
  }

  .team-selected-member {
    grid-template-columns: 1fr;
  }

  .team-selected-member__meta {
    justify-items: start;
  }

  .team-row-actions {
    justify-content: flex-start;
  }

  .project-member-create-grid {
    grid-template-columns: 1fr;
  }

  .project-member-candidate-toolbar {
    justify-content: flex-start;
  }

  .modal.work-item-modal {
    min-height: auto;
    padding: calc(22px * var(--ui-density));
    border-radius: calc(26px * var(--ui-density));
  }

  .modal.work-item-modal .modal-footer .ghost,
  .modal.work-item-modal .modal-footer .primary {
    width: 100%;
  }

  .work-item-side-panel .work-item-field {
    grid-template-columns: 1fr;
  }

  .work-item-side-panel .work-item-label {
    padding-top: 0;
  }

  .work-item-side-panel .work-item-label > span:last-of-type::after {
    content: none;
  }
}

.quality-page {
  display: grid;
  gap: calc(28px * var(--ui-density));
}

.quality-toolbar,
.quality-filter-row,
.quality-tab-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
}

.quality-toolbar input,
.quality-toolbar select,
.quality-filter-row input,
.quality-filter-row select {
  min-height: calc(52px * var(--ui-density));
  min-width: calc(220px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--text);
  padding: calc(12px * var(--ui-density)) calc(18px * var(--ui-density));
}

.quality-split {
  display: grid;
  grid-template-columns: minmax(calc(260px * var(--ui-density)), 0.28fr) minmax(0, 1fr);
  gap: calc(28px * var(--ui-density));
  align-items: start;
}

.quality-directory-panel,
.quality-side-panel,
.quality-section,
.quality-board-band,
.quality-risk-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

.quality-directory-panel,
.quality-side-panel,
.quality-section,
.quality-risk-card {
  padding: calc(24px * var(--ui-density));
}

.quality-segment,
.quality-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  align-items: center;
}

.quality-tabs {
  border-bottom: 1px solid var(--line);
  padding-bottom: calc(12px * var(--ui-density));
}

.quality-segment button,
.quality-tabs button {
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--muted-strong);
  padding: calc(10px * var(--ui-density)) calc(16px * var(--ui-density));
}

.quality-segment button.active,
.quality-tabs button.active {
  background: var(--accent-gradient);
  color: white;
  box-shadow: var(--accent-shadow);
}

.quality-full-button {
  width: 100%;
  margin-block: calc(16px * var(--ui-density));
}

.quality-directory-list {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.quality-directory-list button {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
}

.quality-directory-list button.active {
  border-color: var(--menu-hover-border);
  background: var(--control-hover);
  color: var(--heading);
  box-shadow: var(--soft-shadow);
}

.quality-case-list {
  min-width: 0;
}

.quality-workbench-form {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(calc(320px * var(--ui-density)), 0.9fr);
  gap: calc(28px * var(--ui-density));
}

.quality-main-column {
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.quality-drawer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(calc(300px * var(--ui-density)), 0.8fr);
  gap: calc(24px * var(--ui-density));
}

.quality-field {
  display: grid;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.quality-field input,
.quality-field select,
.quality-field textarea,
.quality-side-panel input,
.quality-side-panel select,
.quality-side-panel textarea {
  width: 100%;
  min-height: calc(52px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  color: var(--text);
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  font: inherit;
}

.quality-field textarea {
  min-height: calc(132px * var(--ui-density));
  resize: vertical;
}

.quality-section {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.quality-section h3,
.quality-side-panel h3,
.quality-risk-card h3 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
}

.quality-section-head {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.quality-methods,
.quality-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
}

.quality-method-badge,
.quality-radio-option,
.quality-level-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--text);
  padding: calc(7px * var(--ui-density)) calc(12px * var(--ui-density));
  font-size: calc(14px * var(--ui-density));
  font-weight: 700;
}

.quality-radio-option {
  cursor: pointer;
}

.quality-radio-option input {
  margin: 0;
}

.quality-level-badge span,
.quality-level-help {
  display: inline-grid;
  place-items: center;
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  border-radius: 50%;
  background: var(--active-surface);
  color: var(--accent);
  font-size: calc(12px * var(--ui-density));
  cursor: help;
}

.quality-step-table textarea {
  width: 100%;
  min-height: calc(96px * var(--ui-density));
  border: 0;
  background: transparent;
  color: var(--text);
  resize: vertical;
}

.quality-import-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(46px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--text);
  padding: 0 calc(18px * var(--ui-density));
  font-size: calc(18px * var(--ui-density));
  font-weight: 700;
  cursor: pointer;
}

.quality-timeline {
  display: grid;
  gap: calc(14px * var(--ui-density));
  margin: 0;
  padding-left: calc(20px * var(--ui-density));
}

.quality-timeline li {
  color: var(--muted-strong);
}

.quality-board-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(320px * var(--ui-density));
  gap: calc(24px * var(--ui-density));
}

.quality-board-top .stats-grid {
  margin: 0;
}

.quality-risk-card {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.quality-risk-card textarea {
  min-height: calc(120px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  color: var(--text);
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  resize: vertical;
}

.quality-stars {
  color: var(--muted);
  letter-spacing: 0;
}

.quality-board-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18px * var(--ui-density));
  padding: calc(22px * var(--ui-density));
}

.quality-focus-card {
  display: grid;
  gap: calc(8px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  padding: calc(18px * var(--ui-density));
}

.quality-focus-card span,
.quality-focus-card small {
  color: var(--muted);
}

.quality-focus-card strong {
  color: var(--heading);
  font-size: calc(28px * var(--ui-density));
}

.danger-text {
  color: var(--danger);
}

.sidebar-user {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  padding: calc(10px * var(--ui-density));
}

.sidebar-user summary {
  display: grid;
  grid-template-columns: calc(42px * var(--ui-density)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12px * var(--ui-density));
  cursor: pointer;
  list-style: none;
}

.sidebar-user summary::-webkit-details-marker {
  display: none;
}

.sidebar-avatar {
  display: grid;
  width: calc(42px * var(--ui-density));
  height: calc(42px * var(--ui-density));
  place-items: center;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--accent-shadow);
}

.profile-avatar-section {
  margin-bottom: calc(4px * var(--ui-density));
}

.profile-avatar-card {
  display: grid;
  grid-template-columns: calc(104px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(18px * var(--ui-density));
  align-items: center;
  padding: calc(18px * var(--ui-density)) calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: var(--soft-shadow);
}

.profile-avatar-preview {
  width: calc(104px * var(--ui-density));
  height: calc(104px * var(--ui-density));
  border-radius: calc(28px * var(--ui-density));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent-gradient);
  color: #fff;
  font-size: calc(34px * var(--ui-density));
  font-weight: 800;
  box-shadow: var(--accent-shadow);
}

.profile-avatar-actions {
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.profile-avatar-actions strong {
  color: var(--heading);
}

.profile-avatar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.profile-avatar-upload {
  cursor: pointer;
}

.profile-avatar-controls input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-avatar-actions #profileAvatarMsg {
  min-height: calc(22px * var(--ui-density));
  margin: 0;
}

.profile-form-grid {
  margin-bottom: calc(28px * var(--ui-density));
}

.profile-panel-card {
  align-content: start;
}

.profile-inline-footer {
  margin-top: calc(8px * var(--ui-density));
  padding-top: 0;
  border-top: 0;
}

.profile-projects-card {
  gap: calc(10px * var(--ui-density));
}

.profile-projects-table-scroll {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(46vh, calc(480px * var(--ui-density)));
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-projects-table {
  min-width: calc(720px * var(--ui-density)) !important;
}

.profile-projects-table .row-text-button {
  justify-content: flex-start;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: 700;
}

.profile-projects-table .row-text-button:hover,
.profile-projects-table .row-text-button:focus-visible {
  color: var(--heading);
}

:root[data-theme="dark"] .profile-projects-table .row-text-button {
  background: transparent;
  color: var(--text);
}

.profile-projects-table td:nth-child(3),
.profile-projects-table td:nth-child(4) {
  white-space: nowrap;
}

.profile-project-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.profile-projects-msg {
  min-height: calc(22px * var(--ui-density));
  margin: 0;
}

.sidebar-user-copy {
  display: grid;
  min-width: 0;
  gap: calc(2px * var(--ui-density));
}

.sidebar-user-copy strong,
.sidebar-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy small {
  color: var(--muted);
}

.sidebar-user-menu {
  display: grid;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(12px * var(--ui-density));
}

.sidebar-user-menu button {
  width: 100%;
  justify-content: flex-start;
}

.sidebar-user-menu__group {
  display: grid;
  gap: calc(4px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) 0;
  border-top: 1px solid var(--line);
}

.sidebar-user-menu__group > span {
  padding: calc(2px * var(--ui-density)) calc(10px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-xs);
}

.sidebar-user-menu__group button {
  padding-left: calc(18px * var(--ui-density));
}

.sidebar-preferences {
  margin-top: calc(2px * var(--ui-density));
}

.flow-map {
  display: grid;
  grid-template-columns: repeat(7, minmax(calc(96px * var(--ui-density)), 1fr));
  align-items: center;
  gap: calc(12px * var(--ui-density));
}

.flow-node {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-height: calc(92px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  color: var(--text);
  padding: calc(16px * var(--ui-density));
  text-align: left;
  box-shadow: var(--soft-shadow);
}

.flow-node:hover {
  transform: translateY(-1px);
}

.flow-node span {
  color: var(--heading);
  font-weight: 800;
}

.flow-node small {
  color: var(--muted);
}

.flow-node.disabled {
  opacity: 0.55;
}

.flow-arrow {
  display: none;
}

.workbench-list,
.workbench-activity,
.quick-link-grid,
.permission-grid {
  display: grid;
  gap: calc(12px * var(--ui-density));
}

.quick-link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbench-list-item,
.workbench-activity-item,
.quick-link {
  display: grid;
  gap: calc(6px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--text);
  padding: calc(16px * var(--ui-density)) calc(18px * var(--ui-density));
  text-align: left;
}

.workbench-list-item strong,
.workbench-activity-item strong,
.quick-link strong {
  color: var(--heading);
}

.workbench-list-item span,
.workbench-activity-item span,
.quick-link span,
.workbench-activity-item small {
  color: var(--muted);
}

.workbench-empty {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.check-row {
  display: grid;
  grid-template-columns: calc(22px * var(--ui-density)) minmax(0, 1fr);
  align-items: center;
  gap: calc(10px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
}

.check-row span {
  display: grid;
  gap: calc(2px * var(--ui-density));
}

.check-row small {
  color: var(--muted);
}

[data-tooltip]:not(.hover-tooltip) {
  position: relative;
}

[data-tooltip]:not(.hover-tooltip)::before,
[data-tooltip]:not(.hover-tooltip):hover::after,
[data-tooltip]:not(.hover-tooltip):focus-visible::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

[data-tooltip]:not(.hover-tooltip):hover::before,
[data-tooltip]:not(.hover-tooltip):focus-visible::before {
  content: "";
  position: absolute;
  z-index: 29;
  left: calc(100% + calc(6px * var(--ui-density)));
  top: 50%;
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
  border-right: 1px solid rgba(158, 132, 255, 0.48);
  border-top: 1px solid rgba(158, 132, 255, 0.48);
  background: rgba(244, 241, 255, 0.96);
  box-shadow: calc(3px * var(--ui-density)) -3px calc(10px * var(--ui-density)) rgba(133, 107, 241, 0.08);
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
}

[data-tooltip]:not(.hover-tooltip):hover::after,
[data-tooltip]:not(.hover-tooltip):focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: calc(100% + calc(12px * var(--ui-density)));
  top: 50%;
  width: max-content;
  max-width: min(calc(360px * var(--ui-density)), 42vw);
  border: 1px solid rgba(158, 132, 255, 0.5);
  border-radius: calc(16px * var(--ui-density));
  background:
    linear-gradient(135deg, rgba(247, 244, 255, 0.98), rgba(239, 234, 255, 0.96)),
    rgba(244, 241, 255, 0.97);
  color: #2f3442;
  box-shadow:
    0 calc(12px * var(--ui-density)) calc(28px * var(--ui-density)) rgba(133, 107, 241, 0.16),
    0 0 0 1px rgba(209, 194, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  font-size: var(--font-size-tooltip);
  line-height: 1.5;
  white-space: normal;
  backdrop-filter: blur(calc(12px * var(--ui-density)));
  transform: translateY(-50%);
  opacity: 1;
}

.inline-footer {
  justify-content: flex-end;
  padding: 0;
}

/* 平台商业目录：内部运营列表，复用统一表面与层级，不形成套餐营销卡片。 */
.platform-mode-marker {
  display: grid;
  gap: calc(4px * var(--ui-density));
  margin: 0 calc(14px * var(--ui-density)) calc(14px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.platform-mode-marker small,
.platform-mode-marker strong {
  min-width: 0;
}

.platform-mode-marker small { color: var(--muted); }
.platform-mode-marker strong { color: var(--heading); }

.platform-catalog-page {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-height: 0;
}

.platform-catalog-page--access {
  min-height: min(calc(420px * var(--ui-density)), 58vh);
  align-content: center;
}

.platform-catalog-access-state,
.platform-catalog-compact-empty {
  display: grid;
  gap: calc(10px * var(--ui-density));
  justify-items: start;
  align-content: start;
}

.platform-catalog-access-state {
  max-width: calc(620px * var(--ui-density));
  margin: 0 auto;
}

.platform-catalog-access-state h3,
.platform-catalog-compact-empty strong,
.platform-catalog-history h4 {
  margin: 0;
  color: var(--heading);
}

.platform-catalog-access-state p,
.platform-catalog-compact-empty p,
.platform-catalog-confirm-copy {
  margin: 0;
}

.platform-catalog-head { display: flex; align-items: center; min-width: 0; }

.platform-catalog-tabs { overflow-x: auto; max-width: 100%; }

.platform-catalog-card { min-height: min(calc(560px * var(--ui-density)), calc(100dvh - calc(147px * var(--ui-density)))); }

.platform-catalog-list-region { min-height: 0; }

.platform-catalog-toolbar .list-toolbar-section.right { max-width: calc(340px * var(--ui-density)); }

.platform-catalog-filters {
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-block: calc(2px * var(--ui-density));
}

.platform-catalog-filter-count,
.platform-catalog-plan-label {
  display: inline-flex;
  align-items: center;
  min-height: calc(26px * var(--ui-density));
  padding: calc(3px * var(--ui-density)) calc(8px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.platform-catalog-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--ui-density));
}

.platform-catalog-code,
.platform-catalog-secondary {
  display: block;
  margin-top: calc(4px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.platform-catalog-table { min-width: calc(1380px * var(--ui-density)); }
.platform-catalog-plan-table { min-width: calc(820px * var(--ui-density)); }

.platform-catalog-table-scroll {
  max-height: min(58vh, calc(620px * var(--ui-density)));
}

.platform-catalog-table th,
.platform-catalog-table td { vertical-align: middle; }

.platform-catalog-table tr { cursor: pointer; }

.platform-catalog-action-column {
  position: sticky;
  right: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow: -10px 0 calc(18px * var(--ui-density)) color-mix(in srgb, var(--bg) 42%, transparent);
}

.platform-catalog-table thead .platform-catalog-action-column { z-index: 4; }

.platform-catalog-action-column button + button { margin-left: calc(6px * var(--ui-density)); }

.platform-catalog-compact-empty {
  min-height: calc(160px * var(--ui-density));
  padding: calc(28px * var(--ui-density)) calc(22px * var(--ui-density));
  border: 1px dashed var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.platform-catalog-upgrade { border-style: solid; }

.platform-catalog-load-more {
  display: flex;
  justify-content: center;
  padding: calc(14px * var(--ui-density)) 0 calc(2px * var(--ui-density));
}

.platform-catalog-mobile-list { display: none; }

.platform-catalog-drawer-loading {
  display: grid;
  gap: calc(10px * var(--ui-density));
  align-content: center;
  min-height: calc(160px * var(--ui-density));
}

.platform-catalog-drawer-loading p { margin: 0; color: var(--muted); }

.platform-catalog-detail-tabs { margin-bottom: calc(2px * var(--ui-density)); }

.platform-catalog-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
  overflow-y: auto;
  padding-right: calc(4px * var(--ui-density));
}

.platform-catalog-detail-fields .field-shell { min-width: 0; }

.platform-catalog-impact-panel {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  margin-top: calc(2px * var(--ui-density));
  padding: calc(13px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control) 82%, transparent);
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.platform-catalog-impact-panel strong { color: var(--heading); }

.platform-catalog-history { display: grid; gap: calc(18px * var(--ui-density)); overflow-y: auto; padding-right: calc(4px * var(--ui-density)); }
.platform-catalog-history section { display: grid; gap: calc(8px * var(--ui-density)); }

.platform-catalog-history-row,
.platform-catalog-audit-summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: calc(10px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control) 76%, transparent);
  font-size: var(--font-size-hint);
}

.platform-order-detail-section {
  display: grid;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
}

.platform-order-detail-section h4 {
  margin: 0;
  color: var(--heading);
}

.platform-order-detail-section > .muted { margin: 0; }

.platform-offline-confirmation {
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-2) 76%, transparent);
}

.platform-offline-confirmation .form-grid { margin-top: calc(2px * var(--ui-density)); }

.platform-catalog-history-row small,
.platform-catalog-audit-summary small { color: var(--muted); }

.platform-catalog-audit-summary { grid-template-columns: auto minmax(0, 1fr); }
.platform-catalog-audit-summary small { grid-column: 1 / -1; }

.platform-catalog-form .field-shell,
.platform-catalog-confirm-form .field-shell { min-width: 0; }

.platform-catalog-form-error {
  min-height: calc(20px * var(--ui-density));
  margin: 0;
  color: var(--danger);
}

.platform-catalog-confirm-copy {
  color: var(--text);
  line-height: 1.65;
}

:root[data-theme="dark"] .platform-mode-marker,
:root[data-theme="dark"] .platform-catalog-compact-empty,
:root[data-theme="dark"] .platform-catalog-impact-panel,
:root[data-theme="dark"] .platform-catalog-history-row,
:root[data-theme="dark"] .platform-catalog-audit-summary {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

/* 平台 AI Provider：一个高风险基础设施任务，使用单卡片与明确动作，避免
   把配置安全误呈现为租户数据或用量分析。所有颜色复用主题令牌。 */
.platform-ai-provider-page {
  display: grid;
  min-height: 0;
}

.platform-ai-provider-page--access {
  min-height: min(calc(420px * var(--ui-density)), 58vh);
  align-content: center;
}

.platform-ai-provider-card {
  display: grid;
  min-height: min(calc(420px * var(--ui-density)), calc(100dvh - calc(147px * var(--ui-density))));
}

.platform-ai-provider-access-state,
.platform-ai-provider-empty,
.platform-ai-provider-loading,
.platform-ai-provider-inline-error {
  display: grid;
  gap: calc(10px * var(--ui-density));
  align-content: start;
}

.platform-ai-provider-access-state {
  max-width: calc(620px * var(--ui-density));
  margin: auto;
}

.platform-ai-provider-access-state h3,
.platform-ai-provider-empty h3,
.platform-ai-provider-head h3 {
  margin: 0;
  color: var(--heading);
}

.platform-ai-provider-access-state p,
.platform-ai-provider-empty p,
.platform-ai-provider-head p,
.platform-ai-provider-note,
.platform-ai-provider-confirm-copy,
.platform-ai-provider-form-error {
  margin: 0;
}

.platform-ai-provider-empty {
  min-height: calc(180px * var(--ui-density));
  padding: calc(28px * var(--ui-density)) calc(22px * var(--ui-density));
  border: 1px dashed var(--line);
  border-radius: calc(22px * var(--ui-density));
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.platform-ai-provider-empty > div { display: grid; gap: calc(8px * var(--ui-density)); }
.platform-ai-provider-empty > button { justify-self: start; }

.platform-ai-provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  padding-bottom: calc(16px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.platform-ai-provider-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  padding: calc(18px * var(--ui-density)) 0;
}

.platform-ai-provider-summary .field-shell { min-width: 0; }

.platform-ai-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  padding-top: calc(2px * var(--ui-density));
}

.platform-ai-provider-note {
  padding-top: calc(16px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.platform-ai-provider-loading,
.platform-ai-provider-inline-error {
  min-height: calc(140px * var(--ui-density));
  padding: calc(26px * var(--ui-density)) calc(6px * var(--ui-density));
  color: var(--muted);
}

.platform-ai-provider-inline-error { color: var(--danger); }
.platform-ai-provider-form .field-shell { min-width: 0; }
.platform-ai-provider-form-error { min-height: calc(20px * var(--ui-density)); color: var(--danger); }
.platform-ai-provider-confirm-copy { color: var(--text); line-height: 1.65; }

:root[data-theme="dark"] .platform-ai-provider-empty {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

@media (max-width: 980px) {
  .platform-catalog-card { min-height: 0; }
  .platform-catalog-toolbar .list-toolbar-section.right { display: none; }
  .platform-catalog-detail-fields { grid-template-columns: 1fr; }
  .platform-ai-provider-card { min-height: 0; }
  .platform-ai-provider-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .requirements-pool-stats.stats-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(12px * var(--ui-density));
  }

  .requirements-pool-stats .metric-card.small {
    min-height: calc(112px * var(--ui-density));
    padding: calc(16px * var(--ui-density));
  }

  .platform-catalog-desktop-list { display: none; }
  .platform-catalog-mobile-list { display: grid; gap: calc(10px * var(--ui-density)); }
  .platform-catalog-mobile-group {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: calc(20px * var(--ui-density));
    background: color-mix(in srgb, var(--panel) 78%, transparent);
  }
  .platform-catalog-mobile-group-head {
    display: grid;
    gap: calc(2px * var(--ui-density));
    padding: calc(13px * var(--ui-density)) calc(14px * var(--ui-density)) calc(10px * var(--ui-density));
  }
  .platform-catalog-mobile-group-head span { color: var(--muted); font-size: var(--font-size-hint); }
  .platform-catalog-mobile-row {
    display: grid;
    gap: calc(5px * var(--ui-density));
    width: 100%;
    min-height: 0;
    padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: color-mix(in srgb, var(--control) 62%, transparent);
    color: var(--text);
    text-align: left;
    box-shadow: none;
  }
  .platform-catalog-mobile-row span { display: flex; align-items: center; gap: calc(8px * var(--ui-density)); min-width: 0; }
  .platform-catalog-mobile-row small { color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
  .platform-catalog-history-row { grid-template-columns: auto 1fr; }
  .platform-catalog-history-row small { grid-column: 1 / -1; }
  .platform-catalog-filters { width: 100%; justify-content: flex-start; }
  .platform-catalog-tabs button { flex: 0 0 auto; }
  .platform-catalog-compact-empty { min-height: calc(132px * var(--ui-density)); padding: calc(22px * var(--ui-density)) calc(16px * var(--ui-density)); }
  .platform-ai-provider-card { padding: calc(18px * var(--ui-density)) calc(16px * var(--ui-density)); }
  .platform-ai-provider-head { align-items: stretch; flex-direction: column; }
  .platform-ai-provider-head .pill { align-self: flex-start; }
  .platform-ai-provider-summary { grid-template-columns: 1fr; gap: calc(12px * var(--ui-density)); padding: calc(16px * var(--ui-density)) 0; }
  .platform-ai-provider-actions { display: grid; grid-template-columns: 1fr; }
  .platform-ai-provider-actions button { width: 100%; }
  .platform-ai-provider-empty { min-height: calc(144px * var(--ui-density)); padding: calc(22px * var(--ui-density)) calc(16px * var(--ui-density)); }
}

@media (max-width: 980px) {
  .delivery-chain-steps {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .delivery-chain-step {
    min-height: 0;
  }

  .quality-split,
  .quality-workbench-form,
  .quality-drawer-layout,
  .quality-board-top,
  .quality-board-band,
  .flow-map,
  .profile-avatar-card,
  .quick-link-grid {
    grid-template-columns: 1fr;
  }

  .quality-toolbar > *,
  .quality-filter-row > * {
    width: 100%;
  }

  .workspace-members__access,
  .workspace-members__invite,
  .workspace-members__invite-form {
    grid-template-columns: 1fr;
  }

  .workspace-members__list-card .list-toolbar-section.left {
    width: 100%;
  }
}

/* Final desktop homepage guard. It deliberately follows all legacy
   breakpoints so the entry row and sidebar geometry stay stable. */
.home-page .home-stage {
  grid-template-rows: minmax(calc(211px * var(--ui-density)), calc(265px * var(--ui-density))) minmax(0, 1fr) !important;
}

.home-page .home-mobile-navigation {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: stretch;
  display: block !important;
  height: 100%;
  min-height: 0;
  position: relative;
}

.home-page .home-rail {
  position: absolute;
  inset: 0;
  grid-row: auto !important;
  height: auto;
}

.home-page .home-rail-footer {
  grid-row: 3;
  align-self: end;
}

/* This final desktop guard follows the legacy homepage placement overrides
   above.  The collapsed rail must pack its brand and navigation from the top
   instead of inheriting the expanded rail's vertical centering. */
@media (min-width: 981px) {
  .home-page .home-stage.home-rail-collapsed .home-rail {
    align-items: stretch !important;
  }

  .home-page .home-stage.home-rail-collapsed .home-rail-main {
    align-self: start !important;
    justify-items: stretch !important;
  }

  .home-page .home-stage.home-rail-collapsed .home-rail-heading {
    justify-items: center !important;
  }
}

@media (max-width: 980px) {
  .home-page .home-stage {
    grid-template-rows: auto !important;
  }

  /* On a phone the project catalog is the primary home task. Recent visits
     remain a useful continuation aid, but must not push the catalog several
     screens below the navigation when a user has a long visit history. */
  .home-page .home-mobile-navigation {
    order: 0;
  }

  .home-page .home-catalog {
    order: 1;
  }

  .home-page .home-hero {
    order: 2;
  }

  .home-page .home-notice-card {
    order: 3;
  }

  .home-page .home-message-card {
    order: 4;
  }

  .home-page .home-recent-grid {
    min-height: 0;
  }

  .home-page .home-recent-pill {
    height: calc(134px * var(--ui-density));
    min-height: calc(134px * var(--ui-density));
    max-height: calc(134px * var(--ui-density));
    padding: calc(14px * var(--ui-density));
  }

  .home-page .home-mobile-navigation {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto;
  }

  .home-page .home-rail {
    grid-row: auto !important;
    height: auto;
  }
}

/* M40 keeps the recent-visit response capped at four cards. On a calc(390px * var(--ui-density))
   phone, show the two newest continuations without displacing the catalog or
   its empty state below the fold. The card itself stays at the fixed calc(134px * var(--ui-density))
   M40 height from the shared mobile rule above. */
@media (max-width: 390px) {
  .home-page .home-recent-grid .home-recent-pill:nth-child(n + 3) {
    display: none;
  }
}

/* Collapsed navigation keeps the same glass reflection and icon glow in the
   homepage and project workspace. Labels remain available through the shared
   tooltip pattern without adding noise while either rail is expanded. */
.app-shell:not(.sidebar-hidden) .collapsed-menu-tooltip::before,
.app-shell:not(.sidebar-hidden) .collapsed-menu-tooltip::after,
.home-stage:not(.home-rail-collapsed) .collapsed-menu-tooltip::before,
.home-stage:not(.home-rail-collapsed) .collapsed-menu-tooltip::after {
  display: none !important;
}

@keyframes collapsed-rail-reflection {
  from {
    background-position: 140% 0, 0 0;
  }
  to {
    background-position: -38% 0, 0 0;
  }
}

@media (min-width: 981px) {
  .sidebar-hidden .nav-parent:not(.active):hover,
  .sidebar-hidden .nav-parent:not(.active):focus-visible,
  .home-rail-collapsed .home-rail-link:not(.active):hover,
  .home-rail-collapsed .home-rail-link:not(.active):focus-visible,
  .home-rail-collapsed .home-utility-btn:not(.active):hover,
  .home-rail-collapsed .home-utility-btn:not(.active):focus-visible {
    border-color: var(--menu-hover-border, color-mix(in srgb, var(--accent) 50%, var(--line)));
    background:
      linear-gradient(112deg, transparent 32%, color-mix(in srgb, #fff 72%, transparent) 50%, transparent 68%),
      var(--control);
    background-size: 220% 100%, 100% 100%;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent),
      var(--menu-hover-shadow, 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 calc(18px * var(--ui-density)) color-mix(in srgb, var(--accent) 26%, transparent));
    animation: collapsed-rail-reflection 620ms ease-out both;
  }

  .sidebar-hidden .nav-parent:not(.active):hover .nav-icon,
  .sidebar-hidden .nav-parent:not(.active):focus-visible .nav-icon,
  .home-rail-collapsed .home-rail-link:not(.active):hover .home-rail-icon,
  .home-rail-collapsed .home-rail-link:not(.active):focus-visible .home-rail-icon,
  .home-rail-collapsed .home-utility-btn:not(.active):hover .home-utility-icon,
  .home-rail-collapsed .home-utility-btn:not(.active):focus-visible .home-utility-icon {
    color: var(--menu-active-icon, var(--accent));
    filter: drop-shadow(0 0 calc(8px * var(--ui-density)) color-mix(in srgb, var(--accent) 42%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-hidden .nav-parent,
  .home-rail-collapsed .home-rail-link,
  .home-rail-collapsed .home-utility-btn,
  .nav-children,
  .nav-children__inner,
  .nav-children .nav-child,
  .nav-disclosure-dot {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #printable,
  #printable * {
    visibility: visible;
  }
  #printable {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ===== V5-T-UX-02: shared chart adapter styles =====
   The chart adapter renders these class names. Colors come from the shared
   --chart-* / --text / --muted / --heading / --line / --accent tokens, never
   from page-private values. */

.chart-canvas {
  width: 100%;
  min-width: 0;
  /* Height is set inline by the adapter (explicit + computable). Do not apply
     overflow clipping here: tooltips, legends and labels must be able to draw
     without being cut off by the chart card. */
  position: relative;
}

/* Screen-reader-visible, visually-collapsed equivalent 2D table. Every chart
   carries one so screen-reader users have a table equivalent to the canvas.
   `table-layout: fixed` keeps the 1px box from expanding to its min-content
   width (long `white-space: nowrap` cells otherwise widen the collapsed table
   and create horizontal scroll overflow on calc(390px * var(--ui-density)) viewports). */
.chart-a11y-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  table-layout: fixed;
}

/* table_2d primary output: a normal readable table. */
.chart-table-2d {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-table);
}
.chart-table-2d caption {
  text-align: left;
  font-weight: 700;
  color: var(--heading);
  padding: calc(10px * var(--ui-density)) calc(2px * var(--ui-density));
}
.chart-table-2d th,
.chart-table-2d td {
  text-align: left;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
}
.chart-table-2d th {
  color: var(--muted-strong);
  font-weight: 600;
  background: var(--table-head);
}

/* KPI is the controlled `stat` chart output. It stays inside the global chart
   adapter so it inherits the same factual states and accessible data table as
   every ECharts-backed visualization. */
.chart-stat {
  min-height: calc(168px * var(--ui-density));
  display: grid;
  align-content: center;
  gap: calc(6px * var(--ui-density));
  padding: calc(20px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .78);
  background: var(--panel-2);
}
.chart-stat__label { color: var(--muted); font-size: var(--font-size-caption); }
.chart-stat__value { color: var(--heading); font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.04em; }
.chart-stat__hint { color: var(--muted); font-size: var(--font-size-hint); }

.chart-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--ui-density));
  width: 100%;
  min-height: calc(140px * var(--ui-density));
  padding: calc(24px * var(--ui-density)) calc(16px * var(--ui-density));
  text-align: center;
  color: var(--muted);
  font-size: var(--font-size-hint);
}
.chart-state strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}
.chart-state-source-unavailable { border: 1px dashed var(--line-strong); background: var(--panel-2); }
.chart-state-action {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--accent);
  font-size: var(--font-size-hint);
  font-weight: 600;
  padding: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.chart-state-action:hover,
.chart-state-action:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--accent-shadow);
}
.chart-state-spinner {
  width: calc(22px * var(--ui-density));
  height: calc(22px * var(--ui-density));
  border-radius: 50%;
  border: calc(3px * var(--ui-density)) solid var(--line-strong);
  border-top-color: var(--accent);
  animation: chart-spin 800ms linear infinite;
}
@keyframes chart-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chart-state-spinner {
    animation: none;
  }
  .chart-state-action {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * V5-T-M01-04 固定项目工作台决策视图（容器响应栅格 + 进度/列表/空态）
 * 主题 token 复用 --accent / --progress-track / --danger / --muted 等；
 * 无写死颜色/渐变，图表只经共享 chart-adapter。
 * ------------------------------------------------------------------------- */

.workbench {
	container-name: workbench;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: calc(28px * var(--ui-density));
}

.workbench-grid {
  display: grid;
  gap: calc(28px * var(--ui-density));
  grid-template-columns: 1fr;
}

.wb-block {
  min-width: 0;
}

.wb-icon {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  flex: 0 0 auto;
  color: var(--muted-strong);
}

.card-head h3.wb-title {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
}

/* 标题内图标后接文字，避免图标挤压换行 */
.card-head h3.wb-title span {
  min-width: 0;
}

/* ---- 空态 ---- */
.wb-empty {
  display: grid;
  justify-items: start;
  gap: calc(8px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) 0;
  color: var(--muted);
}

.wb-empty strong {
  color: var(--muted-strong);
  font-size: var(--font-size-title);
}

/* ---- 上下文摘要条 ---- */
.wb-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(180px * var(--ui-density)), 1fr));
  gap: calc(14px * var(--ui-density)) calc(24px * var(--ui-density));
}

.wb-context-fact {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.wb-context-fact strong {
  overflow-wrap: anywhere;
}

.wb-context-badges {
  display: inline-flex;
  gap: calc(8px * var(--ui-density));
  flex-wrap: wrap;
}

/* ---- 进度卡 ---- */
.wb-progress-overall {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
}

.wb-progress-overall-head {
  display: flex;
  align-items: baseline;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.wb-progress-value {
  font-weight: 800;
  color: var(--muted-strong);
  min-width: calc(46px * var(--ui-density));
}

.wb-progress-track {
  height: calc(13px * var(--ui-density));
  border-radius: calc(999px * var(--ui-density));
  background: var(--progress-track);
  overflow: hidden;
}

.wb-progress-track span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.wb-progress-facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(18px * var(--ui-density));
}

.wb-module-list {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
  max-height: calc(360px * var(--ui-density));
  overflow-y: auto;
}

.wb-module-row {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-density));
}

.wb-module-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.wb-module-row-head strong {
  overflow-wrap: anywhere;
}

/* ---- 紧凑列表 ---- */
.wb-compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-density));
  max-height: calc(360px * var(--ui-density));
  overflow-y: auto;
}

.wb-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.wb-list-row-main {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
  flex: 1 1 auto;
}

.wb-list-row-main strong {
  overflow-wrap: anywhere;
}

.wb-subhead {
  margin: calc(14px * var(--ui-density)) 0 calc(6px * var(--ui-density));
  font-size: var(--font-size-hint);
}

.wb-blocker {
  color: var(--danger);
  font-size: var(--font-size-hint);
}

/* ---- 趋势图 ---- */
.wb-trend-meta {
  margin-bottom: calc(8px * var(--ui-density));
  font-size: var(--font-size-hint);
}

.wb-trend-chart {
  min-width: 0;
}

.wb-trend-note {
  margin: calc(10px * var(--ui-density)) 0 0;
  font-size: var(--font-size-hint);
  color: var(--muted);
}

/* ---- 事实 ---- */
.wb-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--ui-density)), 1fr));
  gap: calc(14px * var(--ui-density)) calc(24px * var(--ui-density));
}

.wb-fact {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.wb-fact strong {
  overflow-wrap: anywhere;
}

.wb-facts summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.wb-facts-actions {
  margin-top: calc(12px * var(--ui-density));
}

/* ---- 脚注 ---- */
.wb-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(20px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

/* ---- M52 容器响应栅格（按内容容器宽度而非视口） ---- */

/* < calc(640px * var(--ui-density))：单列，所有块纵排 */
/* 640–calc(959px * var(--ui-density))：两列 */
@container workbench (min-width: 640px) {
  .workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb-block--full {
    grid-column: 1 / -1;
  }
  .wb-block--milestones,
  .wb-block--delivery,
  .wb-block--quality,
  .wb-block--risk { grid-column: span 1; }
  .wb-block--trend { grid-column: span 1; }
}

/* 960–calc(1279px * var(--ui-density))：三列，行动/风险/交付物 1 列，趋势/摘要/节点 2 列 */
@container workbench (min-width: 960px) {
  .workbench-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wb-block--milestones,
  .wb-block--delivery,
  .wb-block--quality,
  .wb-block--risk {
    grid-column: span 1;
  }
  .wb-block--trend {
    grid-column: span 2;
  }
}

/* M52 only: fixed 2×4 metric board, delivery 1+2 split and 3×2 chain. */
.workbench-m52 .wb-symbol {
  display: inline-flex;
  width: calc(20px * var(--ui-density));
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  font-size: calc(18px * var(--ui-density));
  line-height: 1;
}

.workbench-m52 .wb-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--ui-density)), 1fr));
  gap: calc(14px * var(--ui-density)) calc(22px * var(--ui-density));
}

.workbench-m52 .wb-overview-versions {
  min-width: 0;
}

.workbench-m52 .wb-overview-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-m52 .wb-data-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(10px * var(--ui-density));
}

.workbench-m52 .wb-metric-card {
  display: grid;
  align-content: start;
  gap: calc(5px * var(--ui-density));
  min-width: 0;
  min-height: calc(104px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.workbench-m52 .wb-metric-card > strong {
  color: var(--heading);
  font-size: calc(24px * var(--ui-density));
  overflow-wrap: anywhere;
}

.workbench-m52 .wb-metric-rate { color: var(--accent); font-weight: 700; }
.workbench-m52 .wb-metric-card small { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.workbench-m52 .wb-metric-card--empty { min-height: calc(104px * var(--ui-density)); }
.workbench-m52 .wb-metric-card--empty .wb-empty { padding: 0; }
.workbench-m52 .wb-metric-card--empty .wb-empty strong { display: none; }

.workbench-m52 .wb-delivery-progress-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(16px * var(--ui-density));
}

.workbench-m52 .wb-scope-bar {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.workbench-m52 .wb-scope-bar label {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.workbench-m52 .wb-scope-bar label > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.workbench-m52 .wb-scope-bar select {
  min-width: min(calc(300px * var(--ui-density)), 100%);
  color: var(--text);
  background: var(--control);
  border-color: var(--line);
  opacity: 1;
}

.workbench-m52 .wb-research-progress-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(16px * var(--ui-density));
}

.workbench-m52 .wb-chart-panel,
.workbench-m52 .wb-progress-milestones {
  min-width: 0;
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.workbench-m52 .wb-research-milestones,
.workbench-m52 .wb-research-trend {
  min-width: 0;
}

.workbench-m52 .wb-chart-panel h4,
.workbench-m52 .wb-progress-milestones h4,
.workbench-m52 .wb-research-milestones h4,
.workbench-m52 .wb-research-trend h4 {
  margin: 0 0 calc(10px * var(--ui-density));
  color: var(--heading);
  font-size: var(--font-size-body);
}

.workbench-m52 .wb-chart-panel .chart-host { min-width: 0; }
.workbench-m52 .wb-table-wrap { overflow-x: auto; }
.workbench-m52 .wb-table { min-width: calc(480px * var(--ui-density)); font-size: var(--font-size-table); }
.workbench-m52 .wb-table th,
.workbench-m52 .wb-table td { white-space: normal; overflow-wrap: anywhere; }
.workbench-m52 .wb-table + .wb-deep-link { margin-top: calc(12px * var(--ui-density)); }
.workbench-m52 .wb-milestone-table-wrap { max-height: calc(286px * var(--ui-density)); }
.workbench-m52 .wb-milestone-table th,
.workbench-m52 .wb-milestone-table td { white-space: nowrap; }

.workbench-m52 .wb-chart-empty-note {
  display: grid;
  gap: calc(4px * var(--ui-density));
  margin-top: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.workbench-m52 .wb-chart-empty-note strong { color: var(--muted-strong); }

.workbench-m52 .wb-block--summary .card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Delivery / quality / risk are a fixed-height comparison row.  Unlike
     general spacing, this product requirement must not shrink with the
     global density scale or the aligned action would be clipped on mobile. */
  height: 220px;
}

.workbench-m52 .wb-summary-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
}

.workbench-m52 .wb-summary-status {
  display: grid;
  gap: calc(6px * var(--ui-density));
  justify-items: start;
  min-height: calc(34px * var(--ui-density));
}

.workbench-m52 .wb-summary-detail {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.workbench-m52 .wb-summary-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8px * var(--ui-density));
}

.workbench-m52 .wb-summary-fact {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.workbench-m52 .wb-summary-fact strong { overflow-wrap: anywhere; }
.workbench-m52 .wb-summary-action { margin-top: auto; }
.workbench-m52 .wb-summary-action .wb-deep-link { width: 100%; }

.workbench-m52 .delivery-chain-steps {
  grid-template-columns: 1fr;
  min-height: 0;
  overflow: visible;
}

.delivery-chain-step {
  --delivery-chain-tone: var(--accent);
  display: flex;
  flex-direction: column;
  min-height: calc(174px * var(--ui-density));
  border-color: color-mix(in srgb, var(--delivery-chain-tone) 54%, var(--line));
  border-radius: calc(var(--radius) + calc(4px * var(--ui-density)));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--delivery-chain-tone) 15%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel-2) 88%, var(--delivery-chain-tone) 12%);
  box-shadow:
    0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) color-mix(in srgb, var(--delivery-chain-tone) 16%, transparent),
    0 0 calc(14px * var(--ui-density)) color-mix(in srgb, var(--delivery-chain-tone) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--delivery-chain-tone) 28%, rgba(255, 255, 255, 0.72));
}

.delivery-chain-step-completed { --delivery-chain-tone: var(--ok); }
.delivery-chain-step-blocked { --delivery-chain-tone: var(--danger); }
.delivery-chain-step-in_progress { --delivery-chain-tone: var(--accent); }
.delivery-chain-step-not_started { --delivery-chain-tone: var(--warn); }

.delivery-chain-step-top > strong { color: var(--heading); }
.delivery-chain-index {
  background: var(--delivery-chain-tone);
  box-shadow: 0 0 calc(10px * var(--ui-density)) color-mix(in srgb, var(--delivery-chain-tone) 45%, transparent);
}

.delivery-chain-status {
  border: 1px solid color-mix(in srgb, var(--delivery-chain-tone) 36%, transparent);
  color: var(--delivery-chain-tone);
  background: color-mix(in srgb, var(--delivery-chain-tone) 12%, var(--panel-strong));
}

.workbench-m52 .delivery-chain-description {
  min-height: calc(42px * var(--ui-density));
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.workbench-m52 .delivery-chain-status.ok { color: var(--ok); }
.workbench-m52 .delivery-chain-status.danger { color: var(--danger); }

@container workbench (min-width: 640px) {
  .workbench-m52 .wb-data-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-m52 .delivery-chain-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workbench-m52 .wb-delivery-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-m52 .wb-research-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container workbench (min-width: 960px) {
  .workbench-m52 .wb-data-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workbench-m52 .wb-delivery-progress-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .workbench-m52 .delivery-chain-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workbench-m52 .wb-research-progress-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@container workbench (min-width: 1200px) {
  .workbench-m52 .wb-overview-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .workbench-m52 .delivery-chain-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@container workbench (max-width: 639px) {
  .workbench-m52 .wb-scope-bar { justify-content: stretch; }
  .workbench-m52 .wb-scope-bar label { display: grid; width: 100%; }
  .workbench-m52 .wb-scope-bar select { width: 100%; min-width: 0; }
  /* Keep all three facts on one compact row.  A two-row fact grid pushes the
     aligned action out of the fixed 220px comparison card at phone widths. */
  .workbench-m52 .wb-summary-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workbench-m52 .wb-summary-fact .muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workbench-m52 .wb-summary-fact strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* M52 function catalog: customer-facing delivery subsystem/menu tree. */
.function-catalog-page {
  container-type: inline-size;
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.function-catalog-toolbar,
.function-catalog-subsystem-head,
.function-catalog-menu-title,
.function-catalog-menu-detail,
.function-catalog-menu-meta,
.function-catalog-import-result {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.function-catalog-toolbar,
.function-catalog-subsystem-head { justify-content: space-between; }
.function-catalog-toolbar { justify-content: flex-start; flex-wrap: wrap; padding: calc(2px * var(--ui-density)) 0; }
.function-catalog-scope { max-width: calc(680px * var(--ui-density)); margin: 0; color: var(--muted); font-size: var(--font-size-hint); line-height: 1.5; }

.function-catalog-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.function-catalog-summary span {
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.function-catalog-summary strong { color: var(--heading); }
.function-catalog-subsystems { display: grid; grid-template-columns: 1fr; gap: calc(16px * var(--ui-density)); }
.function-catalog-subsystem { min-width: 0; padding: calc(16px * var(--ui-density)); }
.function-catalog-subsystem-head { align-items: flex-start; min-width: 0; margin-bottom: calc(14px * var(--ui-density)); }
.function-catalog-subsystem-head h3,
.function-catalog-menu-card h4 { margin: 0; color: var(--heading); }
.function-catalog-subsystem-head .muted { margin: calc(4px * var(--ui-density)) 0 0; }
.function-catalog-eyebrow,
.function-catalog-depth { margin: 0 0 calc(4px * var(--ui-density)); color: var(--muted); font-size: var(--font-size-hint); }

.function-catalog-menu-tree,
.function-catalog-child-list { display: grid; gap: calc(10px * var(--ui-density)); padding: 0; margin: 0; list-style: none; }
.function-catalog-child-list { padding: calc(10px * var(--ui-density)) 0 0 calc(18px * var(--ui-density)); border-left: 1px solid var(--line); }
.function-catalog-menu-card { display: grid; gap: calc(10px * var(--ui-density)); min-width: 0; padding: calc(13px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.function-catalog-menu-title { min-width: 0; flex-wrap: wrap; }
.function-catalog-menu-title h4 { min-width: 0; overflow-wrap: anywhere; font-size: var(--font-size-body); }
.function-catalog-menu-title code { overflow-wrap: anywhere; color: var(--muted-strong); font-family: inherit; font-size: var(--font-size-hint); }
.function-catalog-menu-detail { align-items: flex-start; justify-content: space-between; min-width: 0; gap: calc(12px * var(--ui-density)); }
.function-catalog-menu-detail > p { min-width: 0; margin: 0; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.function-catalog-menu-meta { flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); font-size: var(--font-size-hint); }

.function-catalog-subsystem-empty,
.function-catalog-empty,
.function-catalog-access-state { display: grid; gap: calc(10px * var(--ui-density)); min-height: calc(132px * var(--ui-density)); align-content: center; }
.function-catalog-subsystem-empty { justify-items: start; padding: calc(18px * var(--ui-density)); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); }
.function-catalog-empty h3,
.function-catalog-access-state h3 { margin: 0; color: var(--heading); }
.function-catalog-empty p,
.function-catalog-access-state p { margin: 0; }
.function-catalog-import-result { align-items: baseline; flex-wrap: wrap; margin-bottom: calc(12px * var(--ui-density)); color: var(--muted); }
.function-catalog-import-result strong { color: var(--heading); }
.function-catalog-issues { max-height: min(44vh, calc(360px * var(--ui-density))); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.function-catalog-issues table { width: 100%; min-width: calc(440px * var(--ui-density)); border-collapse: collapse; font-size: var(--font-size-table); }
.function-catalog-issues th,
.function-catalog-issues td { padding: calc(9px * var(--ui-density)) calc(11px * var(--ui-density)); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.function-catalog-issues .is-error td:last-child { color: var(--danger); }
.function-catalog-issues .is-warning td:last-child { color: var(--warn); }

@container (min-width: 640px) {
  .function-catalog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .function-catalog-subsystems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .function-catalog-subsystem-head,
  .function-catalog-menu-detail { align-items: stretch; flex-direction: column; }
  .function-catalog-menu-meta { justify-content: flex-start; }
  .function-catalog-child-list { padding-left: calc(12px * var(--ui-density)); }
}

/* ---------------------------------------------------------------------------
 * V5-T-M22-03 度量报表 → 报表库（模板选择/受控配置/预览/草稿发布）
 * 主题 token 复用 --panel/--panel-strong/--line/--accent/--muted/--danger 等；
 * 无写死颜色/渐变，图表只经共享 chart-adapter，不新增私有图表样式。
 * ------------------------------------------------------------------------- */

.report-library {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--ui-density));
}

.rl-view {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--ui-density));
}

.rl-section {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--ui-density));
}

.rl-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--ui-density)), 1fr));
  gap: calc(14px * var(--ui-density));
}

.rl-template-card {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
}

.rl-template-card .card-head {
  align-items: flex-start;
}

.rl-meta {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-density));
  margin: 0;
}

.rl-meta > div {
  display: grid;
  grid-template-columns: calc(88px * var(--ui-density)) 1fr;
  gap: calc(8px * var(--ui-density));
  align-items: baseline;
}

.rl-meta dt {
  color: var(--muted);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.rl-meta dd {
  color: var(--text);
  margin: 0;
  font-size: var(--font-size-hint);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rl-table-wrap {
  overflow-x: auto;
}

.rl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-table);
}

.rl-table th,
.rl-table td {
  text-align: left;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  white-space: nowrap;
}

.rl-table th {
  color: var(--muted-strong);
  font-weight: 600;
  background: var(--table-head);
}

.rl-table-actions {
  text-align: right;
  white-space: nowrap;
}

.rl-table-actions .ghost {
  margin-left: calc(6px * var(--ui-density));
}

.rl-name {
  font-weight: 600;
  color: var(--heading);
}

.rl-danger {
  color: var(--danger);
}

.rl-wizard-head {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
}

.rl-wizard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(16px * var(--ui-density));
}

@container (min-width: 960px) {
  .rl-wizard-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

.rl-config-form {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-density));
}

.rl-preview {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
  position: sticky;
  top: calc(12px * var(--ui-density));
}

.rl-preview-chart {
  min-width: 0;
}

.rl-wizard-footer {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
  align-items: flex-start;
}

.rl-wizard-footer .page-actions {
  margin-left: auto;
}

.rl-errors {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-density));
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
}

.rl-error {
  color: var(--danger);
  font-size: var(--font-size-hint);
}

.rl-notice {
  margin: 0;
}

.rl-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(16px * var(--ui-density));
  align-items: center;
  font-size: var(--font-size-hint);
}

.rl-state-code {
  font-family: var(--font-mono, monospace);
  font-size: calc(11px * var(--ui-density));
  color: var(--muted-strong);
  border: 1px solid var(--line);
  border-radius: calc(6px * var(--ui-density));
  padding: 1px calc(6px * var(--ui-density));
}

.rl-filter-unavailable {
  color: var(--muted);
  font-size: var(--font-size-hint);
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.rl-detail .rl-meta > div {
  grid-template-columns: calc(96px * var(--ui-density)) 1fr;
}

@media (max-width: 640px) {
  .rl-template-grid {
    grid-template-columns: 1fr;
  }
  .rl-table-actions {
    white-space: normal;
  }
  .rl-preview {
    position: static;
  }
}

/* ---------------------------------------------------------------------------
 * V5-T-M23-02 个人仪表盘（浏览态 / 设计布局态、专用手柄拖拽、加卡抽屉）
 * 主题 token 复用 --panel/--panel-2/--line/--accent/--danger/--muted 等；
 * 无写死颜色/渐变，图表只经共享 chart-adapter，不新增私有图表样式。
 * ------------------------------------------------------------------------- */

.my-dashboard {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--ui-density));
}

.dash-head {
  align-items: flex-start;
}

.dash-board-switcher {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(14px * var(--ui-density));
}

.dash-switcher-label {
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.dash-switcher-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.dash-switcher-row select {
  min-width: calc(220px * var(--ui-density));
  max-width: calc(320px * var(--ui-density));
}

.dash-notice {
  margin: 0;
  padding: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.dash-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 卡片栅格（容器响应 1–4 列，full 独占整行） ---- */
.dash-grid {
  display: grid;
  gap: calc(24px * var(--ui-density));
  grid-template-columns: 1fr;
  align-items: start;
}

.dash-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  transition: box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.dash-card--full {
  grid-column: 1 / -1;
}

.dash-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
  box-shadow: var(--layer-accent-shadow);
}

.dash-card.is-drop-target {
  outline: calc(2px * var(--ui-density)) solid var(--accent);
  outline-offset: calc(2px * var(--ui-density));
}

.dash-card-head {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.dash-card-title {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
  flex: 1 1 auto;
}

.dash-card-title strong {
  overflow-wrap: anywhere;
  color: var(--heading);
  font-size: var(--font-size-title);
}

.dash-card-report {
  font-size: var(--font-size-hint);
}

.dash-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6px * var(--ui-density));
}

.dash-drag-handle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(34px * var(--ui-density));
  height: calc(34px * var(--ui-density));
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--muted-strong);
  cursor: grab;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.dash-drag-handle:hover,
.dash-drag-handle:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-shadow);
}

.dash-drag-handle svg {
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
}

.dash-card-body {
  min-width: 0;
}

.dash-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--ui-density)) calc(12px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
}

.dash-danger {
  color: var(--danger);
}

.dash-state-code {
  font-family: var(--font-mono, monospace);
  font-size: calc(11px * var(--ui-density));
  color: var(--muted-strong);
  border: 1px solid var(--line);
  border-radius: calc(6px * var(--ui-density));
  padding: 1px calc(6px * var(--ui-density));
}

/* ---- 加卡抽屉 ---- */
.dash-add-search input {
  width: 100%;
}

.dash-add-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
  margin-top: calc(12px * var(--ui-density));
}

.dash-add-list {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-density));
  margin-top: calc(12px * var(--ui-density));
  max-height: calc(320px * var(--ui-density));
  overflow-y: auto;
}

.dash-add-item {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
  text-align: left;
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--layer-field);
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.dash-add-item:hover,
.dash-add-item:focus-visible,
.dash-add-item.selected {
  border-color: var(--accent);
  box-shadow: var(--accent-shadow);
}

.dash-add-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dash-add-item-main {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.dash-add-item-main strong {
  overflow-wrap: anywhere;
}

.dash-add-preview {
  margin-top: calc(14px * var(--ui-density));
  border-top: 1px solid var(--line);
  padding-top: calc(14px * var(--ui-density));
}

.dash-add-preview-chart {
  min-width: 0;
}

/* ---- 全屏查看 ---- */
.dash-fullscreen-chart {
  min-width: 0;
}

.dash-fullscreen-meta {
  margin: calc(14px * var(--ui-density)) 0 0;
  font-size: var(--font-size-hint);
}

/* ---- 容器响应栅格（按内容容器宽度，非视口） ---- */
@container (min-width: 640px) {
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 960px) {
  .dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 1280px) {
  .dash-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
   v5.0 M25-02 AI 设置（系统设置 → AI 设置）与平台 AI 策略
   全部使用共享主题 token，不新增写死颜色/渐变。
   ============================================================ */

.ai-settings-section {
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.ai-settings-state {
  min-height: calc(160px * var(--ui-density));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-settings-state h3 {
  margin: 0 0 calc(10px * var(--ui-density));
}

.ai-settings-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.ai-settings-card .card-head {
  margin-bottom: calc(20px * var(--ui-density));
}

.ai-settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.ai-settings-summary-grid .field-shell {
  min-width: 0;
}

.ai-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.ai-settings-grid .field-shell {
  min-width: 0;
}

.ai-settings-note {
  margin: calc(18px * var(--ui-density)) 0 0;
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-size: var(--font-size-hint);
}

.ai-settings-note.ok {
  background: var(--ok-bg);
  color: var(--text);
}

.ai-settings-note.warn {
  background: var(--warn-bg);
  color: var(--text);
}

.ai-settings-global-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
  padding-top: calc(18px * var(--ui-density));
  border-top: 1px solid var(--line);
}

.ai-settings-global-switch strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.ai-settings-global-switch p {
  margin: calc(4px * var(--ui-density)) 0 0;
}

.ai-settings-card__actions {
  display: flex;
  gap: calc(12px * var(--ui-density));
  margin-top: calc(18px * var(--ui-density));
}

.ai-feature-matrix {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
}

.ai-feature-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.ai-feature-row__main {
  min-width: 0;
  flex: 1 1 auto;
}

.ai-feature-row__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density));
}

.ai-feature-row__title strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.ai-feature-row__main p {
  margin: calc(6px * var(--ui-density)) 0 0;
}

.ai-feature-reason {
  color: var(--warn);
  font-size: var(--font-size-hint);
}

.ai-feature-row__control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.ai-feature-lock {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.ai-settings-alerts {
  margin-top: calc(18px * var(--ui-density));
}

.ai-settings-alerts .field-shell__label {
  margin-bottom: calc(8px * var(--ui-density));
}

.ai-settings-readonly-note {
  padding: calc(16px * var(--ui-density));
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.ai-settings-save {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-density));
  padding-top: calc(6px * var(--ui-density));
}

.ai-settings-save__actions {
  justify-content: flex-end;
  display: flex;
}

/* 平台 AI 策略 shell */
.platform-ai-page {
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.platform-ai-page--access {
  gap: 0;
}

.platform-ai-access-state {
  min-height: calc(200px * var(--ui-density));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(12px * var(--ui-density));
}

.platform-ai-access-state h3 {
  margin: 0;
}

.platform-ai-page__notice h3 {
  margin: 0 0 calc(10px * var(--ui-density));
}

.platform-ai-page__notice p {
  margin: 0;
  line-height: 1.65;
}

.platform-ai-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.platform-ai-card .card-head {
  margin-bottom: calc(20px * var(--ui-density));
}

.platform-ai-runtime-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density));
}

.platform-ai-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.platform-ai-form .field-shell {
  min-width: 0;
}

.platform-ai-form .full {
  grid-column: 1 / -1;
}

.platform-ai-form .half {
  grid-column: span 1;
}

.platform-ai-form-error {
  min-height: calc(20px * var(--ui-density));
  color: var(--danger);
}

.platform-ai-form__actions {
  display: flex;
  justify-content: flex-end;
}

.platform-ai-feature-list {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-density));
}

.platform-ai-feature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.platform-ai-feature__main {
  min-width: 0;
  flex: 1 1 auto;
}

.platform-ai-feature__main strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.platform-ai-feature__main p {
  margin: calc(6px * var(--ui-density)) 0 0;
}

.platform-ai-feature__result {
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
}

.platform-ai-feature__actions {
  flex: 0 0 auto;
  display: flex;
  gap: calc(10px * var(--ui-density));
  align-items: center;
}

@media (max-width: 760px) {
  .ai-settings-summary-grid,
  .ai-settings-grid,
  .platform-ai-form {
    grid-template-columns: 1fr;
  }

  .platform-ai-form .half {
    grid-column: 1 / -1;
  }

  .ai-feature-row,
  .platform-ai-feature {
    flex-direction: column;
    gap: calc(12px * var(--ui-density));
  }

  .ai-feature-row__control,
  .platform-ai-feature__actions {
    width: 100%;
  }

  .platform-ai-feature__actions button {
    flex: 1 1 auto;
  }

  .ai-settings-global-switch {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
 * V5-T-M30-03 AI 工具连接向导（连接向导 + 连接列表）
 * 全部复用主题 token，无写死颜色/渐变；calc(390px * var(--ui-density)) 单列降级。
 * ------------------------------------------------------------------------- */
.ai-connections-page {
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.ai-connections-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12px * var(--ui-density));
}

.ai-connections-state h3 {
  margin: 0;
}

.ai-connections-state p {
  margin: 0;
  line-height: 1.65;
}

.ai-connections-state__actions {
  display: flex;
  gap: calc(12px * var(--ui-density));
  margin-top: calc(6px * var(--ui-density));
}

.ai-connections-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
}

.ai-connections-summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.ai-connections-summary__head h3 {
  margin: 0 0 calc(8px * var(--ui-density));
}

.ai-connections-summary__head p {
  margin: 0;
  line-height: 1.6;
}

.ai-connections-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  padding: calc(26px * var(--ui-density));
  min-width: 0;
}

.ai-connections-card .card-head {
  margin-bottom: calc(20px * var(--ui-density));
}

.ai-connections-wizard {
  min-width: 0;
}

.ai-connections-steps {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(18px * var(--ui-density));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-connections-steps li {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  white-space: nowrap;
}

.ai-connections-steps li.is-active {
  color: var(--heading);
  font-weight: 700;
}

.ai-connections-steps li.is-done {
  color: var(--muted-strong);
}

.ai-connections-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(24px * var(--ui-density));
  height: calc(24px * var(--ui-density));
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--control);
  color: var(--muted-strong);
  font-size: calc(13px * var(--ui-density));
}

.ai-connections-steps li.is-active .ai-connections-steps__dot {
  border-color: transparent;
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--accent-shadow);
}

.ai-connections-steps li.is-done .ai-connections-steps__dot {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.ai-connections-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.ai-connections-form .full {
  grid-column: 1 / -1;
}

.ai-connections-form .half {
  grid-column: span 1;
}

.ai-connections-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.ai-connections-tool {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  min-width: 0;
}

.ai-connections-tool input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-connections-tool strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.ai-connections-tool.is-selected {
  border-color: var(--accent);
  box-shadow: var(--layer-input-focus-shadow);
  background: var(--control-hover);
}

.ai-connections-note {
  margin: 0;
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  line-height: 1.6;
  font-size: var(--font-size-hint);
}

.ai-connections-scope-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-connections-step-nav {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  padding-top: calc(4px * var(--ui-density));
}

.ai-connections-form-error {
  color: var(--danger);
  font-size: var(--font-size-hint);
}

.ai-connections-token-panel {
  padding: calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.ai-connections-token-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin-bottom: calc(10px * var(--ui-density));
}

.ai-connections-token-panel__head strong {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.ai-connections-token-panel__actions {
  display: flex;
  gap: calc(12px * var(--ui-density));
  margin-top: calc(14px * var(--ui-density));
}

.ai-connections-token {
  display: block;
  margin-top: calc(12px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--heading);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: var(--font-size-hint);
  word-break: break-all;
  user-select: all;
}

.ai-connections-token.is-hidden {
  color: var(--muted);
  user-select: none;
}

.ai-connections-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16px * var(--ui-density));
}

.ai-connections-summary-grid .field-shell {
  min-width: 0;
}

.ai-connections-install h4,
.ai-connections-config h4 {
  margin: 0 0 calc(12px * var(--ui-density));
  color: var(--heading);
  font-size: var(--font-size-body);
}

.ai-connections-install ol {
  margin: 0;
  padding-left: calc(20px * var(--ui-density));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-density));
}

.ai-connections-install li {
  line-height: 1.65;
}

.ai-connections-install code,
.ai-connections-config__code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: var(--font-size-hint);
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ai-connections-install code {
  padding: calc(2px * var(--ui-density)) calc(6px * var(--ui-density));
}

.ai-connections-config__code {
  width: 100%;
  min-height: calc(120px * var(--ui-density));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  color: var(--text);
  resize: vertical;
  line-height: 1.6;
}

.ai-connections-validate {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-density));
}

.ai-connections-validate__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.ai-connections-validate__row strong {
  color: var(--heading);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: var(--font-size-hint);
  word-break: break-all;
}

.ai-connections-list-empty {
  padding: calc(20px * var(--ui-density)) 0;
  color: var(--muted);
}

.ai-connections-scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6px * var(--ui-density));
}

.ai-connections-row-actions {
  display: flex;
  gap: calc(8px * var(--ui-density));
  align-items: center;
}

.ai-connections-rotate-secret {
  margin-bottom: calc(20px * var(--ui-density));
  padding: calc(18px * var(--ui-density));
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10px * var(--ui-density));
}

.ai-connections-rotate-secret strong {
  color: var(--heading);
}

.ai-connections-rotate-secret code {
  width: 100%;
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--heading);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: var(--font-size-hint);
  word-break: break-all;
  user-select: all;
}

@media (max-width: 760px) {
  .ai-connections-summary-grid,
  .ai-connections-tool-grid,
  .ai-connections-scope-grid {
    grid-template-columns: 1fr;
  }

  .ai-connections-form .half {
    grid-column: 1 / -1;
  }

  .ai-connections-summary__head,
  .ai-connections-token-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-connections-steps {
    gap: calc(6px * var(--ui-density)) calc(12px * var(--ui-density));
  }
}

/* ---------------------------------------------------------------------------
 * V5-T-M24-02 首次使用引导（欢迎 / 快速开始 / coachmark / 帮助抽屉）
 * 复用 modal/drawer/backdrop/close-button 与主题 token，不建立私有视觉系统。
 * ------------------------------------------------------------------------- */

.onboarding-welcome {
  width: min(calc(560px * var(--ui-density)), 100%);
}

.onboarding-welcome-body {
  display: grid;
  gap: calc(14px * var(--ui-density));
}

.onboarding-welcome-body h2 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--heading);
}

.onboarding-welcome-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.onboarding-welcome-footer {
  justify-content: flex-end;
}

.onboarding-quick-start {
  margin-bottom: calc(18px * var(--ui-density));
}

.onboarding-quick-start-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  flex-wrap: wrap;
  margin-bottom: calc(12px * var(--ui-density));
}

.onboarding-quick-start-head h3 {
  margin: 0 0 calc(4px * var(--ui-density));
}

.onboarding-quick-start-head p {
  margin: 0;
}

.onboarding-quick-start-actions {
  display: flex;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

.onboarding-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(10px * var(--ui-density));
}

.onboarding-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.onboarding-task.is-completed {
  background: var(--panel-2);
}

.onboarding-task-main {
  display: grid;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
}

.onboarding-task-main strong {
  color: var(--heading);
  font-weight: 700;
}

.onboarding-task.is-completed .onboarding-task-main strong,
.onboarding-task.is-completed .onboarding-task-main .muted {
  color: var(--muted);
}

.onboarding-recovery {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex-wrap: wrap;
  margin-bottom: calc(18px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.onboarding-coachmark {
  position: fixed;
  z-index: 250;
  width: min(calc(320px * var(--ui-density)), calc(100vw - calc(24px * var(--ui-density))));
  padding: calc(14px * var(--ui-density)) calc(16px * var(--ui-density));
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), color-mix(in srgb, var(--accent-2) 12%, var(--panel))),
    var(--panel-strong);
  box-shadow: var(--layer-accent-shadow);
  backdrop-filter: var(--glass);
  color: var(--heading);
}

.onboarding-coachmark-arrow {
  position: absolute;
  left: calc(24px * var(--ui-density));
  width: calc(10px * var(--ui-density));
  height: calc(10px * var(--ui-density));
  background: var(--panel-strong);
  border-left: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transform: rotate(45deg);
}

.onboarding-coachmark[data-side="top"] .onboarding-coachmark-arrow {
  top: -6px;
}

.onboarding-coachmark[data-side="bottom"] .onboarding-coachmark-arrow {
  bottom: -6px;
  transform: rotate(225deg);
}

.onboarding-coachmark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
  margin-bottom: calc(6px * var(--ui-density));
}

.onboarding-coachmark-head strong {
  font-size: var(--font-size-title);
}

.onboarding-coachmark-close {
  flex: 0 0 auto;
  width: calc(28px * var(--ui-density));
  height: calc(28px * var(--ui-density));
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--ui-density));
  background: var(--control);
  color: var(--muted-strong);
  font-size: calc(18px * var(--ui-density));
  line-height: 1;
  cursor: pointer;
}

.onboarding-coachmark-copy {
  margin: 0 0 calc(12px * var(--ui-density));
  color: var(--muted);
  line-height: 1.6;
}

.onboarding-coachmark-actions {
  display: flex;
  justify-content: flex-end;
}

.onboarding-help {
  width: min(calc(480px * var(--ui-density)), 100vw);
}

.onboarding-help-body {
  display: grid;
  gap: calc(16px * var(--ui-density));
  align-content: start;
  overflow-y: auto;
}

.onboarding-help-scope {
  display: grid;
  gap: calc(10px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.onboarding-help-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-density));
}

.onboarding-help-scope-head h4 {
  margin: 0;
  color: var(--heading);
}

.onboarding-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(8px * var(--ui-density));
}

.onboarding-help-step {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
}

.onboarding-help-step-state {
  flex: 0 0 auto;
  width: calc(18px * var(--ui-density));
  text-align: center;
  color: var(--accent);
}

.onboarding-help-step.is-completed .onboarding-help-step-state {
  color: var(--ok);
}

.onboarding-help-step-main {
  display: grid;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
  flex: 1;
}

.onboarding-help-step-main strong {
  color: var(--heading);
}

.onboarding-help-actions {
  display: flex;
  gap: calc(10px * var(--ui-density));
  flex-wrap: wrap;
}

/* calc(390px * var(--ui-density)) 移动端降级：coachmark 不悬浮（改为帮助抽屉文字步骤），任务项单列 */
@media (max-width: 420px) {
  .onboarding-task {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-task .ghost {
    width: 100%;
  }

  .onboarding-quick-start-head {
    flex-direction: column;
  }

  .onboarding-help {
    width: 100vw;
    max-width: 100vw;
  }
}

/* M38：租户账单与平台发票工作台。宽表只在自身滚动，所有表面沿用主题 token。 */
.workspace-billing-page,
.platform-invoice-page {
  display: grid;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

/* 账单页是桌面工作区的唯一主内容：列表卡必须填满顶部栏以下的可用高度，
   与左侧导航共用同一底线；弹层根节点不参与常规网格排版。 */
.main:has(> .content > .workspace-billing-page) {
  grid-template-rows: auto minmax(0, 1fr);
}

.content:has(> .workspace-billing-page) {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding-bottom: 0;
}

.content > .workspace-billing-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  align-self: stretch;
}

.workspace-billing-page > #workspaceBillingLayerRoot { display: contents; }

/* M58 支付订单逐项复用消息管理普通列表：不再保留私有工具栏或分页表面。 */
.workspace-billing-page .workspace-billing-orders.list-page-shell {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.workspace-billing-orders__list-card {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-billing-orders__region {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(10px * var(--ui-density));
  min-height: 0;
  height: 100%;
  padding-bottom: calc(14px * var(--ui-density));
}

.workspace-billing-orders-toolbar .system-users-toolbar-form {
  width: 100%;
}

.workspace-billing-orders-toolbar .system-users-toolbar-search {
  min-width: calc(360px * var(--ui-density));
  width: min(28vw, calc(520px * var(--ui-density)));
}

.workspace-billing-orders-toolbar__summary {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workspace-billing-page--access,
.platform-invoice-page--access {
  min-height: min(calc(420px * var(--ui-density)), 58vh);
  align-content: center;
}

.workspace-billing-profile__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
  padding: calc(16px * var(--ui-density)) 0 calc(2px * var(--ui-density));
}

.workspace-billing-profile__summary > div {
  display: grid;
  gap: calc(5px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-profile__summary strong {
  min-width: 0;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.workspace-billing-detail__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) 0 calc(8px * var(--ui-density));
}

.workspace-billing-detail__facts > div {
  display: grid;
  gap: calc(5px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-detail__facts strong {
  min-width: 0;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.workspace-billing-detail__event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(4px * var(--ui-density)) calc(12px * var(--ui-density));
  align-items: baseline;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--ui-density));
  background: var(--panel-2);
}

.workspace-billing-detail__event + .workspace-billing-detail__event { margin-top: calc(8px * var(--ui-density)); }
.workspace-billing-detail__event > span { color: var(--muted); font-size: var(--font-size-hint); }
.workspace-billing-detail__event > small { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: var(--font-size-hint); white-space: nowrap; }

.workspace-billing-table > table { min-width: calc(980px * var(--ui-density)); }
.workspace-billing-modal-table > table { min-width: calc(620px * var(--ui-density)); }
.platform-invoice-table > table { min-width: calc(980px * var(--ui-density)); }

.modal:has(.workspace-billing-profile-form) {
  width: min(calc(860px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  max-height: min(calc(900px * var(--ui-density)), calc(100dvh - calc(32px * var(--ui-density))));
}

.workspace-billing-profile-form {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.workspace-billing-profile-form__section {
  display: grid;
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--layer-input-border) 82%, transparent);
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.workspace-billing-profile-form__section-head {
  display: grid;
  gap: calc(4px * var(--ui-density));
}

.workspace-billing-profile-form__section-head h4,
.workspace-billing-profile-form__section-head p {
  margin: 0;
}

.workspace-billing-profile-form__section-head h4 {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.workspace-billing-profile-form__section-head p {
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.workspace-billing-profile-form__type-options,
.workspace-billing-profile-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
}

.workspace-billing-profile-form__type-option {
  display: flex;
  align-items: flex-start;
  gap: calc(11px * var(--ui-density));
  min-width: 0;
  padding: calc(13px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  box-shadow: var(--layer-input-shadow);
  cursor: pointer;
}

.workspace-billing-profile-form__type-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--layer-field));
  box-shadow: var(--glow);
}

.workspace-billing-profile-form__type-option input {
  appearance: auto;
  flex: 0 0 calc(18px * var(--ui-density));
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  min-width: calc(18px * var(--ui-density));
  min-height: calc(18px * var(--ui-density));
  margin-top: calc(3px * var(--ui-density));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
}

.workspace-billing-profile-form__type-option > span {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-profile-form__type-option strong {
  color: var(--heading);
  font-size: var(--font-size-small);
}

.workspace-billing-profile-form__type-option small {
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: 1.45;
}

.workspace-billing-profile-form__grid .field-shell {
  display: grid;
  align-content: start;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-profile-form__grid .field-shell.full {
  grid-column: 1 / -1;
}

.workspace-billing-profile-form__grid input::placeholder,
.workspace-billing-profile-form__grid input.is-saved-value {
  color: var(--muted);
  opacity: 1;
}

.workspace-billing-profile-form [hidden] {
  display: none !important;
}

.modal:has(.workspace-billing-application) {
  width: min(calc(980px * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  max-height: min(calc(900px * var(--ui-density)), calc(100dvh - calc(32px * var(--ui-density))));
  padding: calc(22px * var(--ui-density)) calc(24px * var(--ui-density));
}

.modal:has(.workspace-billing-application) .modal-head {
  margin-bottom: calc(16px * var(--ui-density));
  padding-right: calc(44px * var(--ui-density));
}

.modal:has(.workspace-billing-application) .modal-title-group h3 {
  font-size: var(--font-size-body);
}

.modal:has(.workspace-billing-application) .modal-body {
  padding-right: 0;
}

.modal:has(.workspace-billing-application) .modal-footer {
  margin-top: calc(18px * var(--ui-density));
  padding-top: calc(16px * var(--ui-density));
}

.workspace-billing-application {
  display: grid;
  gap: calc(16px * var(--ui-density));
}

.workspace-billing-application__intro {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.workspace-billing-application__section {
  display: grid;
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--layer-input-border) 82%, transparent);
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.workspace-billing-application__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.workspace-billing-application__section-head > div {
  display: grid;
  gap: calc(3px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-application__section-head h4,
.workspace-billing-application__section-head p {
  margin: 0;
}

.workspace-billing-application__section-head h4 {
  color: var(--heading);
  font-size: var(--font-size-body);
}

.workspace-billing-application__section-head p,
.workspace-billing-application__section-head > span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.workspace-billing-application__profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-application__profile-grid .field-shell,
.workspace-billing-application__profile-field {
  display: grid;
  grid-template-rows: auto calc(42px * var(--ui-density));
  gap: calc(5px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-application__profile-grid .field-shell__label,
.workspace-billing-application__profile-field > span,
.workspace-billing-application__contact .field-shell__label {
  color: var(--muted-strong);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.workspace-billing-application__profile-grid select,
.workspace-billing-application__profile-field > strong {
  width: 100%;
  min-height: calc(42px * var(--ui-density));
}

.workspace-billing-application__profile-field--full {
  grid-column: 1 / -1;
}

.workspace-billing-application__profile-field > strong {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 calc(13px * var(--ui-density));
  border: 1px solid var(--layer-input-border);
  border-radius: var(--radius-sm);
  background: var(--layer-field);
  color: var(--heading);
  font-size: var(--font-size-small);
  font-weight: 600;
  box-shadow: var(--layer-input-shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-billing-application__profile-action {
  align-self: center;
  white-space: nowrap;
}

.workspace-billing-application__profile-status.is-ready {
  color: var(--ok);
}

.workspace-billing-application__profile-status.is-incomplete {
  color: var(--danger);
}

.workspace-billing-application__validation {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-density));
  margin: calc(-2px * var(--ui-density)) 0 0;
  padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--font-size-caption);
  line-height: 1.45;
}

.workspace-billing-application__profile-note {
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--ui-density));
  margin: 0;
  padding: calc(9px * var(--ui-density)) calc(11px * var(--ui-density));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--layer-hover) 72%, transparent);
  color: var(--muted-strong);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.workspace-billing-application__profile-note > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 calc(18px * var(--ui-density));
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}

.workspace-billing-application__validation > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 calc(18px * var(--ui-density));
  width: calc(18px * var(--ui-density));
  height: calc(18px * var(--ui-density));
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
}

.workspace-billing-application__orders {
  padding-bottom: calc(12px * var(--ui-density));
}

.workspace-billing-application__table-scroll.table-scroll {
  max-height: min(calc(230px * var(--ui-density)), 27dvh);
  border-radius: calc(14px * var(--ui-density));
  box-shadow: none;
}

.workspace-billing-application__table {
  width: 100% !important;
  min-width: 0 !important;
}

.workspace-billing-application__table th,
.workspace-billing-application__table td {
  padding: calc(11px * var(--ui-density)) calc(14px * var(--ui-density));
  font-size: var(--font-size-small);
  vertical-align: middle;
}

.workspace-billing-application__table th:nth-child(3),
.workspace-billing-application__table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.workspace-billing-application__orders-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(16px * var(--ui-density));
  padding-top: calc(2px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-small);
}

.workspace-billing-application__orders-total strong {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-variant-numeric: tabular-nums;
}

.workspace-billing-application__contact .field-shell {
  display: grid;
  gap: calc(6px * var(--ui-density));
}

.workspace-billing-application__contact input {
  min-height: calc(44px * var(--ui-density));
  height: calc(44px * var(--ui-density));
}

@media (max-width: 720px) {
  .modal:has(.workspace-billing-profile-form) {
    width: calc(100vw - calc(24px * var(--ui-density)));
    max-height: calc(100dvh - calc(24px * var(--ui-density)));
  }

  .workspace-billing-profile-form__type-options,
  .workspace-billing-profile-form__grid {
    grid-template-columns: 1fr;
  }

  .workspace-billing-profile-form__grid .field-shell.full {
    grid-column: auto;
  }

  .modal:has(.workspace-billing-application) {
    width: calc(100vw - calc(24px * var(--ui-density)));
    max-height: calc(100dvh - calc(24px * var(--ui-density)));
    padding: calc(16px * var(--ui-density));
  }

  .modal:has(.workspace-billing-application) .modal-head {
    margin-bottom: calc(12px * var(--ui-density));
    min-height: calc(24px * var(--ui-density));
  }

  .modal:has(.workspace-billing-application) .modal-body {
    min-height: calc(300px * var(--ui-density));
  }

  .modal:has(.workspace-billing-application) .modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--toolbar-popover-bg) 94%, transparent);
  }

  .workspace-billing-application__profile-grid {
    grid-template-columns: 1fr;
  }

  .workspace-billing-application__section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-billing-application__profile-action {
    align-self: start;
  }
}

.workspace-billing-selection-summary {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workspace-billing-orders th:first-child,
.workspace-billing-orders td:first-child {
  width: calc(56px * var(--ui-density));
  text-align: center;
}

/* 订单号与内容是扫描入口；金额、时间、状态和操作属于紧凑值列，沿用消息管理的居中阅读节奏。 */
.workspace-billing-orders-table th,
.workspace-billing-orders-table td:nth-child(1),
.workspace-billing-orders-table td:nth-child(4),
.workspace-billing-orders-table td:nth-child(5),
.workspace-billing-orders-table td:nth-child(6),
.workspace-billing-orders-table td:nth-child(7),
.workspace-billing-orders-table td:nth-child(8),
.workspace-billing-orders-table td:nth-child(9) {
  text-align: center;
}

.workspace-billing-orders-table td:nth-child(2),
.workspace-billing-orders-table td:nth-child(3) {
  text-align: left;
}

/* 分页是普通列表卡的第三轨：它必须始终留在表格下方，长数据只在表体视口滚动。 */
.workspace-billing-page .workspace-billing-orders__region > .workspace-billing-table {
  min-height: 0;
  height: 100%;
  max-height: none;
}

.workspace-billing-page .workspace-billing-orders-pagination {
  margin-top: calc(4px * var(--ui-density));
  padding-bottom: 0;
}

.workspace-billing-page .table-scroll,
.platform-invoice-page .table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.workspace-billing-page .table-card,
.platform-invoice-page .table-card {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-billing-detail,
.platform-invoice-detail {
  display: grid;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-detail section,
.platform-invoice-detail__section {
  display: grid;
  gap: calc(10px * var(--ui-density));
  min-width: 0;
}

.workspace-billing-detail h4,
.platform-invoice-detail h4 { margin: 0; color: var(--heading); }
.platform-invoice-total { margin: calc(12px * var(--ui-density)) 0 0; }

/* M51：新电子票交付只录入税务平台链接；链接正文不回显，视觉沿用主题令牌。 */
.platform-invoice-tax-portal-delivery {
  display: grid;
  gap: calc(14px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.platform-invoice-tax-portal-delivery h4 { margin: 0 0 calc(4px * var(--ui-density)); }

.platform-invoice-tax-portal-delivery input[type="url"] {
  width: 100%;
  min-width: 0;
  padding: calc(10px * var(--ui-density));
  color: var(--text);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.workspace-billing-delivery-note,
.workspace-billing-issued-note {
  margin: 0;
  color: var(--muted-strong);
}

.workspace-billing-delivery-note {
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.workspace-billing-issued-note {
  display: block;
  margin-top: calc(5px * var(--ui-density));
  white-space: normal;
}

.workspace-billing-tax-portal-link {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.workspace-billing-tax-portal-hint {
  display: block;
  margin-top: calc(5px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.5;
}

/* M58：税务平台免登录链接的二维码是动态交付物，只在开票详情弹窗内呈现。 */
.workspace-billing-invoice-status {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.workspace-billing-invoice-status:hover .workspace-billing-enum { filter: brightness(1.05); transform: translateY(calc(-1px * var(--ui-density))); }
.workspace-billing-invoice-status:focus-visible { outline: calc(2px * var(--ui-density)) solid var(--accent); outline-offset: calc(3px * var(--ui-density)); border-radius: calc(999px * var(--ui-density)); }

.workspace-billing-enum {
  justify-content: center;
  min-height: calc(28px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid transparent;
  color: var(--text);
  background: var(--panel-2);
  font-size: var(--font-size-table);
  font-weight: 600;
  line-height: 1.35;
  transition: filter 160ms ease, transform 160ms ease;
}

.workspace-billing-enum--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.workspace-billing-enum--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); background: var(--ok-bg); }
.workspace-billing-enum--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); background: var(--warn-bg); }
.workspace-billing-enum--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: var(--danger-bg); }
.workspace-billing-enum--muted { color: var(--muted); border-color: var(--line); background: var(--panel-2); }

/* Payment-order row actions intentionally read as text operations instead of
   a second layer of pill buttons inside a dense table. */
.workspace-billing-row-action {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: var(--font-size-table);
  font-weight: 600;
  line-height: 1.35;
}

.workspace-billing-row-action:hover,
.workspace-billing-row-action:focus-visible {
  background: transparent;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: calc(3px * var(--ui-density));
  transform: none;
}

/* Keep all actions in the invoice-detail footer equally sized.  The revoke
   path is destructive, therefore it uses the solid semantic danger token. */
.workspace-billing-detail-action {
  display: inline-flex;
  width: calc(116px * var(--ui-density));
  min-width: calc(116px * var(--ui-density));
  min-height: calc(42px * var(--ui-density));
  align-items: center;
  justify-content: center;
  padding: calc(9px * var(--ui-density)) calc(16px * var(--ui-density));
  font-size: var(--font-size-body);
}

.workspace-billing-detail-action--cancel {
  color: #fff;
  background: color-mix(in srgb, var(--danger) 78%, #ff3657);
  border-color: color-mix(in srgb, var(--danger) 78%, #ff3657);
  box-shadow: 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) color-mix(in srgb, var(--danger) 34%, transparent);
}

.workspace-billing-detail-action--cancel:hover,
.workspace-billing-detail-action--cancel:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--danger) 78%, #ff3657);
  border-color: color-mix(in srgb, var(--danger) 78%, #ff3657);
}

.workspace-billing-tax-portal-delivery-card {
  display: grid;
  gap: calc(12px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.workspace-billing-tax-portal-delivery-card h4 { margin: 0; }

.workspace-billing-tax-portal-delivery-card__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(20px * var(--ui-density));
}

.workspace-billing-qr {
  display: grid;
  gap: calc(8px * var(--ui-density));
  justify-items: center;
  margin: 0;
  padding: calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--muted);
  text-align: center;
  font-size: var(--font-size-hint);
}

.workspace-billing-qr img {
  display: block;
  width: min(calc(184px * var(--ui-density)), 42vw);
  aspect-ratio: 1;
  border-radius: calc(var(--radius-sm) * .75);
  background: var(--surface);
}

.platform-invoice-delivery-status {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(14px * var(--ui-density));
  color: var(--muted-strong);
}

@media (max-width: 980px) {
  /* 小屏由页面自然纵向滚动承接；不把桌面端的满高工作区强行压进有限视口。 */
  .main:has(> .content > .workspace-billing-page) { grid-template-rows: auto auto; }
  .content:has(> .workspace-billing-page) {
    height: auto;
    display: block;
    grid-template-rows: none;
    align-content: start;
    overflow: visible;
    padding-bottom: calc(8px * var(--ui-density));
  }
  .content > .workspace-billing-page {
    height: auto;
    grid-template-rows: auto;
  }
  .workspace-billing-page > #workspaceBillingLayerRoot { display: block; }
  .workspace-billing-page .workspace-billing-orders.list-page-shell {
    height: auto;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workspace-billing-profile__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-billing-detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .workspace-billing-page,
  .platform-invoice-page { gap: calc(12px * var(--ui-density)); }

  .workspace-billing-profile__summary { grid-template-columns: 1fr; }
  .workspace-billing-detail__facts { grid-template-columns: 1fr; }
  .workspace-billing-detail__event { grid-template-columns: 1fr; }
  .workspace-billing-detail__event > small { grid-column: 1; grid-row: auto; white-space: normal; }

  .workspace-billing-page .list-table-toolbar,
  .platform-invoice-page .list-table-toolbar,
  .workspace-billing-page .list-toolbar,
  .platform-invoice-page .list-toolbar {
    min-width: 0;
  }

  .workspace-billing-page .list-toolbar,
  .platform-invoice-page .list-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-billing-page .list-toolbar-section.center,
  .platform-invoice-page .list-toolbar-section.center {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: calc(2px * var(--ui-density));
  }

  .workspace-billing-page .inline-field,
  .platform-invoice-page .inline-field { flex: 0 0 auto; }

  .platform-invoice-tax-portal-delivery { padding: calc(12px * var(--ui-density)); }

  .platform-invoice-delivery-status { display: grid; gap: calc(6px * var(--ui-density)); }

  .workspace-billing-tax-portal-delivery-card__content { flex-direction: column; }
}

/* The desktop shell still has a sidebar, so its usable content width can be
   materially narrower than the viewport. Keep topbar actions inside the card. */
@media (min-width: 1181px) and (max-width: 1350px) {
  .topbar-actions {
    gap: calc(10px * var(--ui-density));
    flex-wrap: nowrap;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10px * var(--ui-density));
  }

  .topbar-home-action,
  .topbar-quick-action {
    min-width: 0;
    min-height: calc(48px * var(--ui-density));
    padding: 0 calc(12px * var(--ui-density));
  }

}

/* ---------------------------------------------------------------------------
 * V6.0 experiment: system delivery growth map.
 * The architecture diagram is a dedicated accessible Canvas + DOM surface;
 * explanatory charts still use the shared ECharts adapter and theme tokens.
 * ------------------------------------------------------------------------- */

.growth-map {
  --growth-stage-confirmed: var(--warn);
  --growth-stage-building: var(--accent);
  --growth-stage-verified: var(--ok);
  --growth-stage-review: var(--accent-2);
  --growth-stage-blocked: var(--danger);
  container-type: inline-size;
  display: grid;
  gap: calc(18px * var(--ui-density));
  min-width: 0;
}

.growth-map__hero,
.growth-map__toolbar,
.growth-map__layout,
.growth-map__charts {
  min-width: 0;
}

.growth-map__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density)) calc(28px * var(--ui-density));
}

.growth-map__hero > div:first-child {
  min-width: 0;
}

.growth-map__eyebrow {
  margin: 0 0 calc(6px * var(--ui-density));
  color: var(--accent);
  font-size: var(--font-size-tooltip);
  font-weight: 800;
  letter-spacing: .14em;
}

.growth-map__hero h3 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(calc(18px * var(--ui-density)), 2vw, calc(26px * var(--ui-density)));
  line-height: 1.25;
}

.growth-map__hero p:not(.growth-map__eyebrow) {
  max-width: calc(720px * var(--ui-density));
  margin: calc(8px * var(--ui-density)) 0 0;
  color: var(--muted);
  font-size: var(--font-size-body);
}

.growth-map__hero-actions,
.growth-map__live,
.growth-map__toolbar,
.growth-map__legend,
.growth-map__replay {
  display: flex;
  align-items: center;
}

.growth-map__hero-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(10px * var(--ui-density));
}

.growth-map__live {
  gap: calc(8px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.growth-map__live i {
  width: calc(8px * var(--ui-density));
  height: calc(8px * var(--ui-density));
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 calc(5px * var(--ui-density)) color-mix(in srgb, var(--ok) 14%, transparent);
  animation: growth-map-live-pulse 1.8s ease-in-out infinite;
}

.growth-map__toolbar {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(12px * var(--ui-density)) calc(20px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.growth-map__legend {
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-density)) calc(14px * var(--ui-density));
}

.growth-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-tooltip);
  font-weight: 700;
}

.growth-map__legend i,
.growth-map__activity li > i,
.growth-map__detail-stage::before {
  width: calc(8px * var(--ui-density));
  height: calc(8px * var(--ui-density));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--growth-stage-building);
}

[data-stage="confirmed"] { --growth-stage-color: var(--growth-stage-confirmed); }
[data-stage="building"] { --growth-stage-color: var(--growth-stage-building); }
[data-stage="verified"] { --growth-stage-color: var(--growth-stage-verified); }
[data-stage="review"] { --growth-stage-color: var(--growth-stage-review); }
[data-stage="blocked"] { --growth-stage-color: var(--growth-stage-blocked); }

.growth-map [data-stage] > i,
.growth-map__legend [data-stage] i,
.growth-map__detail-stage[data-stage]::before {
  background: var(--growth-stage-color);
}

.growth-map__replay {
  min-width: min(100%, calc(280px * var(--ui-density)));
  gap: calc(8px * var(--ui-density));
  color: var(--muted-strong);
  font-size: var(--font-size-tooltip);
  white-space: nowrap;
}

.growth-map__replay input {
  flex: 1 1 calc(110px * var(--ui-density));
  min-width: calc(90px * var(--ui-density));
  accent-color: var(--accent);
}

.growth-map__replay output {
  min-width: calc(62px * var(--ui-density));
  color: var(--accent);
  text-align: right;
  font-weight: 700;
}

.growth-map__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(250px * var(--ui-density)), .29fr);
  gap: calc(16px * var(--ui-density));
}

.growth-map__stage {
  position: relative;
  isolation: isolate;
  min-height: calc(690px * var(--ui-density));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
  border-radius: calc(var(--radius-lg) + calc(4px * var(--ui-density)));
  background:
    radial-gradient(calc(580px * var(--ui-density)) calc(360px * var(--ui-density)) at 50% 76%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 74%),
    radial-gradient(calc(360px * var(--ui-density)) calc(280px * var(--ui-density)) at 90% 12%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 72%),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 48%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line) 48%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-strong) 92%, var(--bg) 8%);
  background-size: auto, auto, calc(34px * var(--ui-density)) calc(34px * var(--ui-density)), calc(34px * var(--ui-density)) calc(34px * var(--ui-density)), auto;
  box-shadow: 0 calc(18px * var(--ui-density)) calc(42px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
}

.growth-map__stage::before {
  position: absolute;
  z-index: 0;
  inset: calc(18px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: calc(var(--radius-lg) - calc(2px * var(--ui-density)));
  content: "";
  pointer-events: none;
}

.growth-map__canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.growth-map__stage-caption {
  position: absolute;
  z-index: 2;
  top: calc(26px * var(--ui-density));
  left: calc(28px * var(--ui-density));
  display: grid;
  gap: calc(2px * var(--ui-density));
}

.growth-map__stage-caption span,
.growth-map__stage-caption strong {
  font-size: var(--font-size-tooltip);
}

.growth-map__stage-caption span { color: var(--muted); }
.growth-map__stage-caption strong { color: var(--heading); }

.growth-map__node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(calc(156px * var(--ui-density)), 20%, calc(220px * var(--ui-density)));
  min-height: calc(122px * var(--ui-density));
  padding: calc(13px * var(--ui-density)) calc(14px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--growth-stage-color) 40%, var(--line));
  border-radius: calc(18px * var(--ui-density));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--growth-stage-color) 13%, var(--panel-strong)), color-mix(in srgb, var(--panel) 94%, transparent)),
    var(--panel);
  color: var(--text);
  text-align: left;
  box-shadow: 0 calc(10px * var(--ui-density)) calc(28px * var(--ui-density)) color-mix(in srgb, var(--growth-stage-color) 8%, transparent);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.growth-map__node:hover,
.growth-map__node:focus-visible,
.growth-map__node.is-selected {
  border-color: var(--growth-stage-color);
  box-shadow: 0 0 0 calc(3px * var(--ui-density)) color-mix(in srgb, var(--growth-stage-color) 12%, transparent), 0 calc(14px * var(--ui-density)) calc(30px * var(--ui-density)) color-mix(in srgb, var(--growth-stage-color) 16%, transparent);
  transform: translateY(-3px);
}

.growth-map__node--north-west { top: 13%; left: 7%; }
.growth-map__node--north { top: 10%; left: 40%; }
.growth-map__node--north-east { top: 19%; right: 7%; }
.growth-map__node--west { top: 44%; left: 14%; }
.growth-map__node--east { top: 47%; right: 15%; }
.growth-map__node--south-east { top: 66%; right: 32%; }

.growth-map__node-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8px * var(--ui-density));
}

.growth-map__node-top small {
  color: var(--growth-stage-color);
  font-size: var(--font-size-tooltip);
  font-weight: 800;
}

.growth-map__node-top b {
  color: var(--heading);
  font-size: calc(var(--font-size-body) + calc(5px * var(--ui-density)));
}

.growth-map__node > strong {
  align-self: end;
  margin-top: calc(8px * var(--ui-density));
  color: var(--heading);
  font-size: var(--font-size-body);
}

.growth-map__node-meta {
  margin-top: calc(4px * var(--ui-density));
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-size-tooltip);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growth-map__node-meter,
.growth-map__summary-card > div {
  display: block;
  height: calc(5px * var(--ui-density));
  margin-top: calc(10px * var(--ui-density));
  overflow: hidden;
  border-radius: calc(999px * var(--ui-density));
  background: color-mix(in srgb, var(--growth-stage-color) 13%, var(--line));
}

.growth-map__node-meter i,
.growth-map__summary-card > div i {
  display: block;
  width: var(--growth-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--growth-stage-color);
  box-shadow: 0 0 calc(12px * var(--ui-density)) color-mix(in srgb, var(--growth-stage-color) 54%, transparent);
  transform-origin: left;
  animation: growth-map-meter 1.4s cubic-bezier(.2,.8,.2,1) both;
}

.growth-map__agent-source {
  position: absolute;
  z-index: 4;
  bottom: 5%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-density));
  width: calc(224px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--accent) 6%);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(34px * var(--ui-density)) color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateX(-50%);
}

.growth-map__agent-orb {
  width: calc(26px * var(--ui-density));
  height: calc(26px * var(--ui-density));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 calc(7px * var(--ui-density)) color-mix(in srgb, var(--accent) 12%, transparent), 0 0 calc(22px * var(--ui-density)) color-mix(in srgb, var(--accent-2) 56%, transparent);
  animation: growth-map-orb 2.2s ease-in-out infinite;
}

.growth-map__agent-source div { display: grid; gap: calc(2px * var(--ui-density)); }
.growth-map__agent-source small { color: var(--accent); font-size: var(--font-size-tooltip); font-weight: 800; letter-spacing: .08em; }
.growth-map__agent-source strong { color: var(--heading); font-size: var(--font-size-hint); }
.growth-map__agent-source span:last-child { color: var(--muted); font-size: var(--font-size-tooltip); }

.growth-map__rail {
  display: flex;
  min-width: 0;
  padding: calc(18px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + calc(4px * var(--ui-density)));
  background: color-mix(in srgb, var(--panel-strong) 93%, var(--bg) 7%);
  box-shadow: 0 calc(12px * var(--ui-density)) calc(30px * var(--ui-density)) color-mix(in srgb, var(--accent) 7%, transparent);
  flex-direction: column;
  gap: calc(18px * var(--ui-density));
}

.growth-map__rail-head,
.growth-map__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
}

.growth-map__rail-head > span,
.growth-map__section-head > span,
.growth-map__section-head > div > span {
  color: var(--muted);
  font-size: var(--font-size-tooltip);
}

.growth-map__rail-head small,
.growth-map__section-head small {
  color: var(--accent);
  font-size: var(--font-size-tooltip);
  font-weight: 700;
  white-space: nowrap;
}

.growth-map__node-detail {
  min-height: calc(230px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--ui-density));
  background: var(--panel-2);
}

.growth-map__detail-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-density));
}

.growth-map__detail-stage span {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  color: var(--growth-stage-color);
  font-size: var(--font-size-tooltip);
  font-weight: 800;
}

.growth-map__detail-stage strong {
  color: var(--heading);
  font-size: calc(26px * var(--ui-density));
  line-height: 1;
}

.growth-map__node-detail h4,
.growth-map__section-head h4 {
  margin: calc(8px * var(--ui-density)) 0 0;
  color: var(--heading);
  font-size: var(--font-size-body);
}

.growth-map__node-detail p {
  margin: calc(7px * var(--ui-density)) 0 calc(12px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-tooltip);
  line-height: 1.55;
}

.growth-map__node-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  margin: 0;
}

.growth-map__node-detail dl > div { min-width: 0; }
.growth-map__node-detail dt { color: var(--muted); font-size: var(--font-size-tooltip); }
.growth-map__node-detail dd { margin: calc(2px * var(--ui-density)) 0 0; overflow: hidden; color: var(--muted-strong); font-size: var(--font-size-tooltip); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.growth-map__activity {
  min-width: 0;
  padding-top: calc(2px * var(--ui-density));
}

.growth-map__activity .growth-map__section-head > span {
  color: var(--ok);
  font-size: var(--font-size-tooltip);
  font-weight: 800;
  letter-spacing: .08em;
}

.growth-map__activity ol {
  display: grid;
  gap: calc(10px * var(--ui-density));
  margin: calc(12px * var(--ui-density)) 0 0;
  padding: 0;
  list-style: none;
}

.growth-map__activity li {
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--ui-density));
}

.growth-map__activity li > i { margin-top: calc(4px * var(--ui-density)); }
.growth-map__activity li > i[data-stage] { background: var(--growth-stage-color); }
.growth-map__activity li > div { display: grid; gap: calc(2px * var(--ui-density)); min-width: 0; }
.growth-map__activity strong { color: var(--muted-strong); font-size: var(--font-size-hint); }
.growth-map__activity span { color: var(--muted); font-size: var(--font-size-tooltip); }

.growth-map__charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(calc(178px * var(--ui-density)), .46fr);
  gap: calc(16px * var(--ui-density));
}

.growth-map__chart-card { min-width: 0; }
.growth-map__chart-card .growth-map__section-head { margin-bottom: calc(4px * var(--ui-density)); }

.growth-map__summary-card {
  display: flex;
  min-width: 0;
  padding: calc(22px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(calc(180px * var(--ui-density)) calc(130px * var(--ui-density)) at 100% 0%, color-mix(in srgb, var(--accent-3) 15%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-strong) 94%, var(--bg) 6%);
  flex-direction: column;
  justify-content: center;
}

.growth-map__summary-card > span,
.growth-map__summary-card p { color: var(--muted); font-size: var(--font-size-hint); }
.growth-map__summary-card strong { margin-top: calc(8px * var(--ui-density)); color: var(--heading); font-size: clamp(calc(40px * var(--ui-density)), 4vw, calc(56px * var(--ui-density))); line-height: .9; }
.growth-map__summary-card strong small { color: var(--accent); font-size: var(--font-size-title); }
.growth-map__summary-card p { margin: calc(10px * var(--ui-density)) 0 0; }
.growth-map__summary-card > div { margin-top: calc(16px * var(--ui-density)); background: var(--progress-track); }
.growth-map__summary-card > div i { width: var(--growth-meter); background: var(--accent-gradient); }

@keyframes growth-map-live-pulse {
  50% { box-shadow: 0 0 0 calc(8px * var(--ui-density)) color-mix(in srgb, var(--ok) 2%, transparent); }
}

@keyframes growth-map-orb {
  50% { box-shadow: 0 0 0 calc(10px * var(--ui-density)) color-mix(in srgb, var(--accent) 4%, transparent), 0 0 calc(28px * var(--ui-density)) color-mix(in srgb, var(--accent-2) 68%, transparent); transform: scale(1.08); }
}

@keyframes growth-map-meter {
  from { transform: scaleX(.04); }
  to { transform: scaleX(1); }
}

@media (max-width: 1180px) {
  .growth-map__layout { grid-template-columns: minmax(0, 1fr); }
  .growth-map__rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .growth-map__rail-head { grid-column: 1 / -1; }
  .growth-map__charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .growth-map__summary-card { min-height: calc(180px * var(--ui-density)); grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .growth-map__hero { align-items: flex-start; flex-direction: column; }
  .growth-map__hero-actions { justify-content: flex-start; }
  .growth-map__stage { min-height: calc(780px * var(--ui-density)); }
  .growth-map__node { width: min(43%, calc(190px * var(--ui-density))); min-height: calc(108px * var(--ui-density)); padding: calc(10px * var(--ui-density)); }
  .growth-map__node--north-west { top: 13%; left: 6%; }
  .growth-map__node--north { top: 28%; left: 52%; }
  .growth-map__node--north-east { top: 43%; right: 7%; }
  .growth-map__node--west { top: 44%; left: 7%; }
  .growth-map__node--east { top: 59%; right: 7%; }
  .growth-map__node--south-east { top: 66%; right: 52%; }
  .growth-map__agent-source { bottom: 4%; }
  .growth-map__rail,
  .growth-map__charts { grid-template-columns: minmax(0, 1fr); }
  .growth-map__summary-card { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .growth-map *,
  .growth-map *::before,
  .growth-map *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * M63 功能导览：静态角色路径，不请求业务数据。
 * ------------------------------------------------------------------------- */

.topbar-docs-action {
  flex: 0 0 auto;
  align-self: center;
  min-width: calc(72px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: 0 calc(16px * var(--ui-density));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: calc(24px * var(--ui-density));
  background: var(--control);
  color: var(--muted-strong);
  box-shadow: var(--soft-shadow);
  font-size: var(--font-size-body);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-docs-action:hover,
.topbar-docs-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--control-hover) 78%, var(--accent) 22%);
  color: var(--accent);
  box-shadow: var(--accent-shadow);
}

.topbar-docs-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.function-guide-page {
  container: function-guide / inline-size;
  display: grid;
  gap: calc(22px * var(--ui-density));
  width: 100%;
  min-width: 0;
}

.function-guide-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(24px * var(--ui-density));
  min-width: 0;
  padding: calc(24px * var(--ui-density)) calc(28px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 36%),
    var(--panel);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.function-guide-intro__copy {
  display: grid;
  gap: calc(6px * var(--ui-density));
  min-width: 0;
}

.function-guide-eyebrow {
  width: max-content;
  padding: calc(4px * var(--ui-density)) calc(10px * var(--ui-density));
  border-radius: 999px;
  background: color-mix(in srgb, var(--control) 82%, var(--accent) 18%);
  color: var(--accent);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.function-guide-intro h3 {
  margin: 0;
  overflow: hidden;
  color: var(--heading);
  font-size: calc(24px * var(--ui-density));
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.function-guide-intro p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.function-guide-workbench,
.function-guide-help-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
  padding: 0 calc(18px * var(--ui-density));
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted-strong);
  box-shadow: none;
  font-size: var(--font-size-body);
  font-weight: 700;
  white-space: nowrap;
}

.function-guide-workbench:hover,
.function-guide-workbench:focus-visible,
.function-guide-help-placeholder:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: var(--control-hover);
  color: var(--accent);
  box-shadow: var(--accent-shadow);
}

.function-guide-workbench:focus-visible,
.function-guide-help-placeholder:focus-visible,
.function-guide-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.function-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
}

.function-guide-role {
  --guide-tone: var(--accent);
  display: grid;
  grid-template-rows: minmax(calc(146px * var(--ui-density)), 1fr) auto;
  align-content: start;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
  padding: calc(20px * var(--ui-density));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--guide-tone) 18%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-solid) 94%, var(--guide-tone) 6%);
  box-shadow: var(--soft-shadow);
}

.function-guide-role__head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: calc(18px * var(--ui-density)) calc(12px * var(--ui-density));
  text-align: center;
}

.function-guide-role__head > div {
  display: grid;
  justify-items: center;
  gap: calc(4px * var(--ui-density));
  min-width: 0;
}

.function-guide-role__head h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(21px * var(--ui-density));
  font-weight: 750;
  line-height: 1.24;
}

.function-guide-role__head p {
  margin: 0;
  color: var(--muted);
  max-width: 18em;
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.function-guide-flow {
  display: grid;
  align-content: start;
  gap: calc(10px * var(--ui-density));
  margin: 0;
  padding: 0;
  list-style: none;
}

.function-guide-step-item {
  position: relative;
  min-width: 0;
}

.function-guide-step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(42px * var(--ui-density));
  bottom: calc(-11px * var(--ui-density));
  left: calc(19px * var(--ui-density));
  width: 2px;
  background: color-mix(in srgb, var(--guide-tone) 44%, var(--line));
  pointer-events: none;
}

.function-guide-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(38px * var(--ui-density)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(11px * var(--ui-density));
  width: 100%;
  min-width: 0;
  min-height: calc(58px * var(--ui-density));
  padding: calc(9px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control) 92%, var(--guide-tone) 8%);
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.function-guide-step:hover {
  transform: translateY(calc(-1px * var(--ui-density)));
  border-color: color-mix(in srgb, var(--guide-tone) 54%, var(--line));
  background: color-mix(in srgb, var(--control-hover) 84%, var(--guide-tone) 16%);
  box-shadow: var(--soft-shadow);
}

.function-guide-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(38px * var(--ui-density));
  height: calc(38px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--guide-tone) 56%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel-strong) 72%, var(--guide-tone) 28%);
  color: var(--guide-tone);
  font-size: var(--font-size-body);
  font-weight: 800;
}

.function-guide-step__copy {
  display: grid;
  gap: calc(2px * var(--ui-density));
  min-width: 0;
}

.function-guide-step__copy strong,
.function-guide-step__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.function-guide-step__copy strong {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.function-guide-step__copy small {
  color: var(--muted);
  font-size: var(--font-size-tooltip);
  font-weight: 600;
}

.function-guide-step__arrow {
  color: var(--guide-tone);
  font-size: calc(18px * var(--ui-density));
  font-weight: 800;
}

.function-guide-faq {
  --guide-tone: var(--accent);
  display: grid;
  gap: calc(20px * var(--ui-density));
  min-width: 0;
  padding: calc(24px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--guide-tone) 18%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--guide-tone) 12%);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--glass);
}

.function-guide-faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
  min-width: 0;
}

.function-guide-faq__head > div {
  display: grid;
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.function-guide-faq__head h4 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--ui-density));
  font-weight: 750;
  line-height: 1.35;
}

.function-guide-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(12px * var(--ui-density));
  min-width: 0;
}

.function-guide-faq__item {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
  min-height: calc(158px * var(--ui-density));
  padding: calc(16px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--guide-tone) 14%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 92%, var(--guide-tone) 8%);
  box-shadow: 0 calc(8px * var(--ui-density)) calc(18px * var(--ui-density)) color-mix(in srgb, var(--guide-tone) 9%, transparent);
  backdrop-filter: var(--glass);
}

.function-guide-faq__item h5,
.function-guide-faq__item p {
  margin: 0;
}

.function-guide-faq__item h5 {
  color: var(--heading);
  font-size: var(--font-size-body);
  font-weight: 750;
  line-height: 1.45;
}

.function-guide-faq__item p {
  color: var(--muted);
  font-size: var(--font-size-hint);
  line-height: 1.55;
}

.function-guide-faq__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-density));
  width: max-content;
  max-width: 100%;
  min-height: calc(32px * var(--ui-density));
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--guide-tone);
  font-size: var(--font-size-hint);
  font-weight: 750;
  text-align: left;
}

.function-guide-faq__action:hover,
.function-guide-faq__action:focus-visible {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: calc(3px * var(--ui-density));
}

.function-guide-faq__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@container function-guide (min-width: 640px) {
  .function-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .function-guide-faq__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container function-guide (min-width: 1200px) {
  .function-guide-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .function-guide-faq__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .function-guide-faq__item {
    min-height: calc(184px * var(--ui-density));
  }
}

@container function-guide (min-width: 1500px) {
  .function-guide-faq__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .function-guide-faq__item {
    min-height: calc(198px * var(--ui-density));
  }
}

@container function-guide (max-width: 639px) {
  .function-guide-intro {
    grid-template-columns: minmax(0, 1fr);
    padding: calc(20px * var(--ui-density));
  }

  .function-guide-intro h3 {
    white-space: normal;
  }

  .function-guide-workbench,
  .function-guide-help-placeholder {
    width: 100%;
  }

  .function-guide-faq__head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .topbar-docs-action {
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-docs-action,
  .function-guide-workbench,
  .function-guide-help-placeholder,
  .function-guide-step {
    transition: none !important;
  }

  .function-guide-step:hover {
    transform: none;
  }
}

.function-guide-help-placeholder:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

/* V6.0 refinement: one immersive canvas, with facts and charts floating in it. */
.growth-map { display: block; }

.growth-map__stage {
  height: min(calc(840px * var(--ui-density)), calc(100dvh - calc(150px * var(--ui-density))));
  min-height: calc(560px * var(--ui-density));
  background:
    radial-gradient(calc(640px * var(--ui-density)) calc(430px * var(--ui-density)) at 51% 68%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 74%),
    radial-gradient(calc(420px * var(--ui-density)) calc(310px * var(--ui-density)) at 88% 16%, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 72%),
    radial-gradient(calc(360px * var(--ui-density)) calc(310px * var(--ui-density)) at 10% 44%, color-mix(in srgb, var(--ok) 9%, transparent), transparent 74%),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-strong) 88%, var(--bg) 12%);
  background-size: auto, auto, auto, calc(34px * var(--ui-density)) calc(34px * var(--ui-density)), calc(34px * var(--ui-density)) calc(34px * var(--ui-density)), auto;
}

.growth-map__overlay-head {
  position: absolute;
  z-index: 6;
  top: calc(28px * var(--ui-density));
  left: calc(30px * var(--ui-density));
  right: calc(30px * var(--ui-density));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density)) calc(26px * var(--ui-density));
  pointer-events: none;
}

.growth-map__overlay-head > * { pointer-events: auto; }
.growth-map__overlay-head > div:first-child { max-width: min(calc(620px * var(--ui-density)), 52vw); }
.growth-map__overlay-head h3 { margin: 0; color: var(--heading); font-size: clamp(calc(19px * var(--ui-density)), 2vw, calc(27px * var(--ui-density))); line-height: 1.25; }
.growth-map__overlay-head p:not(.growth-map__eyebrow) { margin: calc(7px * var(--ui-density)) 0 0; color: var(--muted); font-size: var(--font-size-body); }

.growth-map__stage-tools {
  position: absolute;
  z-index: 6;
  top: calc(118px * var(--ui-density));
  right: calc(30px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8px * var(--ui-density));
}

.growth-map__stage-tools .growth-map__legend {
  justify-content: flex-end;
  max-width: none;
  padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(14px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 68%, transparent);
  backdrop-filter: blur(calc(12px * var(--ui-density)));
}

.growth-map__stage-tools .growth-map__replay {
  padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(14px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 68%, transparent);
  backdrop-filter: blur(calc(12px * var(--ui-density)));
}

.growth-map__facts {
  position: absolute;
  z-index: 5;
  top: calc(150px * var(--ui-density));
  left: calc(26px * var(--ui-density));
  display: grid;
  width: min(calc(268px * var(--ui-density)), 25%);
  max-height: min(calc(440px * var(--ui-density)), 44%);
  gap: calc(12px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(36px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
  backdrop-filter: blur(calc(16px * var(--ui-density))) saturate(1.08);
}

.growth-map__facts .growth-map__node-detail {
  min-height: 0;
  padding: calc(10px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}

.growth-map__facts .growth-map__node-detail p { margin: calc(5px * var(--ui-density)) 0 calc(9px * var(--ui-density)); }
.growth-map__facts .growth-map__node-detail dl { gap: calc(6px * var(--ui-density)) calc(10px * var(--ui-density)); }
.growth-map__facts .growth-map__activity ol { gap: calc(8px * var(--ui-density)); margin-top: calc(8px * var(--ui-density)); }
.growth-map__facts .growth-map__activity li:last-child { display: none; }

.growth-map__stage-caption {
  z-index: 4;
  top: auto;
  bottom: calc(250px * var(--ui-density));
  left: 50%;
  padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: calc(12px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 66%, transparent);
  text-align: center;
  backdrop-filter: blur(calc(10px * var(--ui-density)));
  transform: translateX(-50%);
}

.growth-map__node { width: clamp(calc(158px * var(--ui-density)), 17.5%, calc(222px * var(--ui-density))); min-height: calc(112px * var(--ui-density)); padding: calc(11px * var(--ui-density)) calc(13px * var(--ui-density)); backdrop-filter: blur(calc(7px * var(--ui-density))); }
.growth-map__node--north-west { top: 27%; left: 31%; }
.growth-map__node--north { top: 17%; left: 52%; }
.growth-map__node--north-east { top: 29%; right: 5%; }
.growth-map__node--west { top: 51%; left: 32%; }
.growth-map__node--east { top: 50%; right: 7%; }
.growth-map__node--south-east { top: 52%; right: 31%; }

.growth-map__agent-source { z-index: 5; bottom: 27%; }
.growth-map__agent-source::before,
.growth-map__agent-source::after {
  position: absolute;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.growth-map__agent-source::before { inset: -12px; animation: growth-map-source-breathe 2.1s ease-in-out infinite; }
.growth-map__agent-source::after { inset: -25px; border-color: color-mix(in srgb, var(--accent-2) 22%, transparent); animation: growth-map-source-breathe 2.1s .52s ease-in-out infinite; }

.growth-map__chart-dock {
  position: absolute;
  z-index: 6;
  right: calc(20px * var(--ui-density));
  bottom: calc(18px * var(--ui-density));
  left: calc(20px * var(--ui-density));
  height: calc(194px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density)) calc(12px * var(--ui-density));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 74%, var(--accent) 26%);
  border-radius: calc(18px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(34px * var(--ui-density)) color-mix(in srgb, var(--accent) 8%, transparent);
  backdrop-filter: blur(calc(16px * var(--ui-density))) saturate(1.06);
}

.growth-map__chart-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-density));
  margin-bottom: calc(6px * var(--ui-density));
}

.growth-map__chart-dock-head span { display: block; color: var(--muted); font-size: var(--font-size-tooltip); }
.growth-map__chart-dock-head strong { color: var(--heading); font-size: var(--font-size-hint); }
.growth-map__chart-nav { display: inline-flex; gap: calc(6px * var(--ui-density)); }
.growth-map__chart-nav button { min-width: calc(30px * var(--ui-density)); padding: 0 calc(8px * var(--ui-density)); }

.growth-map__chart-scroller {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: color-mix(in srgb, var(--accent) 48%, transparent) transparent;
  scrollbar-width: thin;
}

.growth-map__chart-track { display: flex; gap: calc(10px * var(--ui-density)); width: max-content; padding-bottom: calc(4px * var(--ui-density)); }
.growth-map__chart-card,
.growth-map__summary-card {
  box-sizing: border-box;
  flex: 0 0 clamp(calc(280px * var(--ui-density)), 33vw, calc(408px * var(--ui-density)));
  height: calc(148px * var(--ui-density));
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: calc(14px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-2) 66%, transparent);
}

.growth-map__chart-card .growth-map__section-head { margin-bottom: -2px; }
.growth-map__chart-card .growth-map__section-head h4 { margin-top: calc(2px * var(--ui-density)); font-size: var(--font-size-hint); }
.growth-map__chart-card .growth-map__section-head small { font-size: calc(10px * var(--ui-density)); }
.growth-map__chart-card .chart { height: calc(138px * var(--ui-density)) !important; margin-top: -3px; }

.growth-map__summary-card { justify-content: center; }
.growth-map__summary-card strong { font-size: calc(42px * var(--ui-density)); }
.growth-map__summary-card p { margin: calc(7px * var(--ui-density)) 0 0; }
.growth-map__summary-card > div { margin-top: calc(11px * var(--ui-density)); }

@keyframes growth-map-source-breathe {
  50% { opacity: .18; transform: scale(1.34); }
}

@media (max-width: 1080px) {
  .growth-map__facts { width: calc(250px * var(--ui-density)); }
  .growth-map__node--north-west { left: 32%; }
  .growth-map__node--north { left: 53%; }
  .growth-map__node--west { left: 33%; }
}

@media (max-height: 800px) and (min-width: 761px) {
  .growth-map__overlay-head { top: calc(20px * var(--ui-density)); }
  .growth-map__overlay-head h3 { font-size: calc(20px * var(--ui-density)); }
  .growth-map__overlay-head p:not(.growth-map__eyebrow) { font-size: var(--font-size-hint); }
  .growth-map__stage-tools { top: calc(102px * var(--ui-density)); }
  .growth-map__facts { top: calc(132px * var(--ui-density)); max-height: 47%; }
  .growth-map__facts .growth-map__activity { display: none; }
  .growth-map__facts .growth-map__node-detail p { display: none; }
  .growth-map__stage-caption { display: none; }
  .growth-map__node { min-height: calc(96px * var(--ui-density)); padding: calc(9px * var(--ui-density)) calc(11px * var(--ui-density)); }
  .growth-map__node > strong { margin-top: calc(5px * var(--ui-density)); }
  .growth-map__node-meter { margin-top: calc(7px * var(--ui-density)); }
  .growth-map__node--north-west { top: 28%; }
  .growth-map__node--north { top: 20%; }
  .growth-map__node--north-east { top: 29%; }
  .growth-map__node--west { top: 51%; }
  .growth-map__node--east { top: 49%; }
  .growth-map__node--south-east { top: 50%; }
  .growth-map__agent-source { bottom: 31%; transform: translateX(-50%) scale(.88); }
  .growth-map__chart-dock { height: calc(154px * var(--ui-density)); padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density)); }
  .growth-map__chart-dock-head { margin-bottom: calc(3px * var(--ui-density)); }
  .growth-map__chart-card,
  .growth-map__summary-card { height: calc(112px * var(--ui-density)); padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density)); }
  .growth-map__chart-card .chart { height: calc(94px * var(--ui-density)) !important; }
  .growth-map__summary-card strong { font-size: calc(34px * var(--ui-density)); }
  .growth-map__summary-card p,
  .growth-map__summary-card > div { margin-top: calc(5px * var(--ui-density)); }
}

@media (max-width: 760px) {
  .growth-map__stage { min-height: calc(1210px * var(--ui-density)); }
  .growth-map__overlay-head { right: calc(18px * var(--ui-density)); left: calc(18px * var(--ui-density)); flex-direction: column; }
  .growth-map__overlay-head > div:first-child { max-width: none; }
  .growth-map__stage-tools { top: calc(182px * var(--ui-density)); right: calc(18px * var(--ui-density)); left: calc(18px * var(--ui-density)); display: grid; justify-items: stretch; }
  .growth-map__stage-tools .growth-map__legend { justify-content: flex-start; max-width: none; }
  .growth-map__facts { top: calc(282px * var(--ui-density)); left: calc(18px * var(--ui-density)); width: calc(100% - calc(36px * var(--ui-density))); max-height: calc(282px * var(--ui-density)); }
  .growth-map__node { width: min(42%, calc(190px * var(--ui-density))); min-height: calc(104px * var(--ui-density)); }
  .growth-map__node--north-west { top: 51%; left: 7%; }
  .growth-map__node--north { top: 48%; left: 53%; }
  .growth-map__node--north-east { top: 64%; right: 7%; }
  .growth-map__node--west { top: 65%; left: 7%; }
  .growth-map__node--east { top: 76%; right: 7%; }
  .growth-map__node--south-east { top: 78%; right: 53%; }
  .growth-map__agent-source { bottom: 19%; }
  .growth-map__stage-caption { bottom: calc(235px * var(--ui-density)); }
  .growth-map__chart-dock { right: calc(12px * var(--ui-density)); bottom: calc(12px * var(--ui-density)); left: calc(12px * var(--ui-density)); height: calc(178px * var(--ui-density)); }
  .growth-map__chart-card,
  .growth-map__summary-card { flex-basis: min(82vw, calc(340px * var(--ui-density))); height: calc(134px * var(--ui-density)); }
  .growth-map__chart-card .chart { height: calc(124px * var(--ui-density)) !important; }
}

/* V6.0 refinement: retain a disciplined right-side information rail. */
.growth-map__stage-tools {
  top: calc(118px * var(--ui-density));
  right: calc(26px * var(--ui-density));
  left: auto;
  display: grid;
  width: min(calc(282px * var(--ui-density)), 25%);
  justify-items: stretch;
}

.growth-map__stage-tools .growth-map__legend { justify-content: flex-start; max-width: none; }
.growth-map__stage-tools .growth-map__replay { min-width: 0; }

.growth-map__facts {
  top: calc(236px * var(--ui-density));
  right: calc(26px * var(--ui-density));
  left: auto;
  width: min(calc(282px * var(--ui-density)), 25%);
  max-height: min(calc(420px * var(--ui-density)), calc(100% - calc(236px * var(--ui-density))));
}

.growth-map__facts .growth-map__activity { display: block; }
.growth-map__node--north-west { top: 27%; left: 10%; }
.growth-map__node--north { top: 16%; left: 39%; }
.growth-map__node--north-east { top: 36%; right: 31%; }
.growth-map__node--west { top: 55%; left: 19%; }
.growth-map__node--east { top: 55%; right: 43%; }
.growth-map__node--south-east { top: 50%; right: 27%; }
.growth-map__agent-source { bottom: 7%; }
.growth-map__stage-caption { bottom: 14%; }

.growth-map__charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(10px * var(--ui-density));
  margin-top: calc(16px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 74%, var(--accent) 26%);
  border-radius: calc(var(--radius-lg) + calc(2px * var(--ui-density)));
  background: color-mix(in srgb, var(--panel-strong) 68%, transparent);
  box-shadow: 0 calc(14px * var(--ui-density)) calc(34px * var(--ui-density)) color-mix(in srgb, var(--accent) 7%, transparent);
  backdrop-filter: blur(calc(14px * var(--ui-density))) saturate(1.04);
}

.growth-map__charts .growth-map__chart-dock-head { display: block; margin: 0; }
.growth-map__charts .growth-map__chart-scroller {
  width: 100%;
  padding: calc(2px * var(--ui-density)) 1px calc(8px * var(--ui-density));
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.growth-map__charts .growth-map__chart-scroller:active { cursor: grabbing; }
.growth-map__charts .growth-map__chart-track { min-width: 100%; }
.growth-map__charts .growth-map__chart-card,
.growth-map__charts .growth-map__summary-card {
  flex: 0 0 max(calc(248px * var(--ui-density)), calc((100cqw - calc(72px * var(--ui-density))) / 4));
  height: calc(240px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(13px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-2) 74%, transparent);
}

.growth-map__charts .growth-map__chart-card .chart { height: calc(188px * var(--ui-density)) !important; }
.growth-map__charts .growth-map__summary-card { justify-content: center; }
.growth-map__charts .growth-map__summary-card strong { font-size: calc(46px * var(--ui-density)); }

@media (max-height: 800px) and (min-width: 761px) {
  .growth-map__stage-tools { top: calc(108px * var(--ui-density)); }
  .growth-map__facts { top: calc(220px * var(--ui-density)); max-height: calc(100% - calc(220px * var(--ui-density))); }
  .growth-map__facts .growth-map__activity { display: block; }
  .growth-map__node--north-west { top: 31%; left: 8%; }
  .growth-map__node--north { top: 22%; left: 38%; }
  .growth-map__node--north-east { top: 39%; right: 31%; }
  .growth-map__node--west { top: 56%; left: 17%; }
  .growth-map__node--east { top: 56%; right: 44%; }
  .growth-map__node--south-east { top: 53%; right: 27%; }
  .growth-map__agent-source { bottom: 5%; transform: translateX(-50%) scale(.88); }
  .growth-map__stage-caption { bottom: 17%; }
}

@media (max-width: 760px) {
  .growth-map__stage-tools { top: calc(182px * var(--ui-density)); right: calc(18px * var(--ui-density)); left: calc(18px * var(--ui-density)); width: auto; }
  .growth-map__facts { top: calc(282px * var(--ui-density)); right: calc(18px * var(--ui-density)); left: calc(18px * var(--ui-density)); width: auto; max-height: calc(282px * var(--ui-density)); }
  .growth-map__node--north-west { top: 51%; left: 7%; }
  .growth-map__node--north { top: 48%; left: 53%; }
  .growth-map__node--north-east { top: 64%; right: 7%; }
  .growth-map__node--west { top: 65%; left: 7%; }
  .growth-map__node--east { top: 76%; right: 7%; }
  .growth-map__node--south-east { top: 78%; right: 53%; }
  .growth-map__agent-source { bottom: 19%; }
  .growth-map__charts .growth-map__chart-card,
  .growth-map__charts .growth-map__summary-card { flex-basis: min(82vw, calc(340px * var(--ui-density))); height: calc(220px * var(--ui-density)); }
  .growth-map__charts .growth-map__chart-card .chart { height: calc(168px * var(--ui-density)) !important; }
}

/* V6.0 functional architecture: four coding-oriented system layers. */
.growth-map__architecture {
  position: absolute;
  z-index: 3;
  top: calc(112px * var(--ui-density));
  right: calc(25% + calc(48px * var(--ui-density)));
  bottom: calc(92px * var(--ui-density));
  left: calc(24px * var(--ui-density));
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(7px * var(--ui-density));
  min-width: 0;
}

.growth-map__architecture-layer {
  display: grid;
  min-width: 0;
  padding: calc(6px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
  border-radius: calc(15px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 34%, transparent);
  grid-template-columns: calc(80px * var(--ui-density)) minmax(0, 1fr);
  gap: calc(6px * var(--ui-density));
  backdrop-filter: blur(calc(3px * var(--ui-density)));
}

.growth-map__architecture-layer--gateway { border-color: color-mix(in srgb, var(--accent-2) 36%, var(--line)); }
.growth-map__architecture-layer--business { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.growth-map__architecture-layer--foundation { border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); }

.growth-map__layer-label {
  display: flex;
  min-width: 0;
  padding: calc(6px * var(--ui-density)) calc(7px * var(--ui-density));
  border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  flex-direction: column;
  justify-content: center;
}

.growth-map__layer-label span { color: var(--accent); font-size: calc(9px * var(--ui-density)); font-weight: 900; letter-spacing: .12em; }
.growth-map__layer-label strong { margin-top: calc(2px * var(--ui-density)); color: var(--heading); font-size: var(--font-size-hint); }
.growth-map__layer-label small { margin-top: calc(2px * var(--ui-density)); overflow: hidden; color: var(--muted); font-size: calc(9px * var(--ui-density)); line-height: 1.25; text-overflow: ellipsis; }

.growth-map__layer-nodes {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(var(--growth-layer-columns), minmax(0, 1fr));
  gap: calc(5px * var(--ui-density));
}

.growth-map__architecture .growth-map__node {
  position: relative;
  inset: auto;
  display: grid;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: calc(6px * var(--ui-density)) calc(7px * var(--ui-density));
  border-radius: calc(11px * var(--ui-density));
  grid-template-rows: auto 1fr auto auto;
  box-shadow: 0 calc(5px * var(--ui-density)) calc(14px * var(--ui-density)) color-mix(in srgb, var(--growth-stage-color) 7%, transparent);
  backdrop-filter: blur(calc(7px * var(--ui-density)));
  transform: none;
}

.growth-map__architecture .growth-map__node:hover,
.growth-map__architecture .growth-map__node:focus-visible,
.growth-map__architecture .growth-map__node.is-selected { transform: translateY(-1px); }
.growth-map__architecture .growth-map__node-top { gap: calc(4px * var(--ui-density)); }
.growth-map__architecture .growth-map__node-top small { overflow: hidden; font-size: calc(9px * var(--ui-density)); text-overflow: ellipsis; white-space: nowrap; }
.growth-map__architecture .growth-map__node-top b { font-size: calc(13px * var(--ui-density)); }
.growth-map__architecture .growth-map__node > strong { align-self: center; margin-top: calc(2px * var(--ui-density)); overflow: hidden; font-size: calc(11px * var(--ui-density)); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.growth-map__architecture .growth-map__node-meta { margin-top: 1px; font-size: calc(8px * var(--ui-density)); }
.growth-map__architecture .growth-map__node-meter { height: calc(3px * var(--ui-density)); margin-top: calc(4px * var(--ui-density)); }

.growth-map__agent-source {
  bottom: 3%;
  left: 36%;
  width: calc(236px * var(--ui-density));
}

.growth-map__facts .growth-map__node-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.growth-map__facts .growth-map__node-detail dl > div:last-child { grid-column: 1 / -1; }

@media (max-height: 800px) and (min-width: 761px) {
  .growth-map__architecture { top: calc(112px * var(--ui-density)); right: calc(25% + calc(48px * var(--ui-density))); bottom: calc(78px * var(--ui-density)); }
  .growth-map__architecture-layer { padding: calc(4px * var(--ui-density)); grid-template-columns: calc(72px * var(--ui-density)) minmax(0, 1fr); gap: calc(4px * var(--ui-density)); }
  .growth-map__layer-label { padding: calc(4px * var(--ui-density)) calc(5px * var(--ui-density)); }
  .growth-map__architecture .growth-map__node { min-height: 0; padding: calc(4px * var(--ui-density)) calc(6px * var(--ui-density)); }
  .growth-map__architecture .growth-map__node-meta { display: none; }
  .growth-map__architecture .growth-map__node-meter { margin-top: calc(2px * var(--ui-density)); }
  .growth-map__agent-source { bottom: 1.5%; left: 36%; transform: translateX(-50%) scale(.8); }
}

@media (max-width: 980px) and (min-width: 761px) {
  .growth-map__architecture { right: calc(304px * var(--ui-density)); }
  .growth-map__layer-label { width: calc(62px * var(--ui-density)); }
  .growth-map__architecture .growth-map__node-top small { display: none; }
}

@media (max-width: 760px) {
  .growth-map__stage { min-height: calc(1420px * var(--ui-density)); }
  .growth-map__architecture { top: calc(590px * var(--ui-density)); right: calc(18px * var(--ui-density)); bottom: calc(170px * var(--ui-density)); left: calc(18px * var(--ui-density)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .growth-map__architecture-layer { grid-template-columns: calc(70px * var(--ui-density)) minmax(0, 1fr); }
  .growth-map__layer-nodes { overflow-x: auto; grid-template-columns: none; grid-auto-columns: calc(124px * var(--ui-density)); grid-auto-flow: column; }
  .growth-map__agent-source { bottom: 6%; left: 50%; }
}

/* V6.0 refinement: reclaim the flexible center and render semantic energy routes above modules. */
.growth-map {
  --growth-facts-width: clamp(calc(282px * var(--ui-density)), 22cqw, calc(360px * var(--ui-density)));
  --growth-facts-gap: calc(12px * var(--ui-density));
  --growth-agent-rail-bottom: calc(8px * var(--ui-density));
}

.growth-map__stage-tools,
.growth-map__facts {
  box-sizing: border-box;
  width: var(--growth-facts-width);
}

.growth-map__information-rail {
  position: absolute;
  z-index: 6;
  top: calc(118px * var(--ui-density));
  right: calc(26px * var(--ui-density));
  bottom: var(--growth-agent-rail-bottom);
  display: grid;
  width: var(--growth-facts-width);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(12px * var(--ui-density));
}

.growth-map__information-rail .growth-map__stage-tools,
.growth-map__information-rail .growth-map__facts {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
}

.growth-map__information-rail .growth-map__stage-tools {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  grid-template-columns: minmax(0, 1fr);
}

.growth-map__information-rail .growth-map__facts {
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.growth-map__stage-tools .growth-map__replay {
  box-sizing: border-box;
  width: 100%;
}

.growth-map__architecture {
  right: calc(var(--growth-facts-width) + var(--growth-facts-gap) + calc(26px * var(--ui-density)));
}

.growth-map__canvas {
  z-index: 4;
}

.growth-map__architecture { z-index: 3; }
.growth-map__facts,
.growth-map__agent-source { z-index: 5; }
.growth-map__overlay-head,
.growth-map__stage-tools { z-index: 6; }

.growth-map__particle-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(6px * var(--ui-density)) calc(10px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(9px * var(--ui-density));
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: calc(12px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-2) 62%, transparent);
}

.growth-map__particle-legend small {
  color: var(--muted);
  font-size: calc(9px * var(--ui-density));
  font-weight: 800;
  letter-spacing: .04em;
}

.growth-map__particle-legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-density));
  color: var(--muted-strong);
  font-size: calc(9px * var(--ui-density));
  font-weight: 700;
}

.growth-map__particle-legend i {
  width: calc(6px * var(--ui-density));
  height: calc(6px * var(--ui-density));
  border-radius: 50%;
  background: var(--growth-particle-color);
  box-shadow: 0 0 calc(8px * var(--ui-density)) color-mix(in srgb, var(--growth-particle-color) 55%, transparent);
}

[data-particle-kind="story"] { --growth-particle-color: var(--accent); }
[data-particle-kind="task"] { --growth-particle-color: var(--accent-2); }
[data-particle-kind="bug"] { --growth-particle-color: var(--danger); }
[data-particle-kind="test"] { --growth-particle-color: var(--ok); }

@media (max-width: 980px) and (min-width: 761px) {
  .growth-map { --growth-facts-width: calc(282px * var(--ui-density)); }
  .growth-map__architecture { right: calc(var(--growth-facts-width) + var(--growth-facts-gap) + calc(26px * var(--ui-density))); }
}

@media (max-width: 760px) {
  .growth-map__stage-tools,
  .growth-map__facts { width: auto; }
  .growth-map__architecture { right: calc(18px * var(--ui-density)); }
}

/* V6.0 motion refinement: reserve an independent source zone below the architecture. */
@media (min-width: 761px) {
  .growth-map__architecture {
    bottom: clamp(calc(112px * var(--ui-density)), 13%, calc(156px * var(--ui-density)));
  }

  .growth-map__agent-source {
    bottom: calc(8px * var(--ui-density));
  }
}

/* V6.0 multi-Agent energy sources: three bright, theme-aware cable groups. */
.growth-map__agent-fleet {
  position: absolute;
  z-index: 5;
  bottom: var(--growth-agent-rail-bottom);
  left: 36%;
  display: grid;
  width: clamp(calc(490px * var(--ui-density)), 48%, calc(650px * var(--ui-density)));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(7px * var(--ui-density));
  transform: translateX(-50%);
}

@media (min-width: 761px) {
  .growth-map__facts {
    bottom: var(--growth-agent-rail-bottom);
    max-height: none;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
}

@media (max-height: 800px) and (min-width: 761px) {
  .growth-map__information-rail { top: calc(108px * var(--ui-density)); }
}

@media (max-width: 760px) {
  .growth-map__information-rail {
    top: calc(182px * var(--ui-density));
    right: calc(18px * var(--ui-density));
    bottom: auto;
    left: calc(18px * var(--ui-density));
    width: auto;
    grid-template-rows: auto calc(282px * var(--ui-density));
  }
}

.growth-map__agent-fleet .growth-map__agent-source {
  position: relative;
  inset: auto;
  display: flex;
  width: auto;
  min-width: 0;
  padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density));
  border-color: color-mix(in srgb, var(--growth-agent-color) 52%, var(--line));
  border-radius: calc(14px * var(--ui-density));
  background: color-mix(in srgb, var(--panel-strong) 90%, var(--growth-agent-color) 10%);
  box-shadow: 0 calc(10px * var(--ui-density)) calc(24px * var(--ui-density)) color-mix(in srgb, var(--growth-agent-color) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--growth-agent-color) 22%, transparent);
  transform: none;
}

.growth-map__agent-fleet .growth-map__agent-source::before,
.growth-map__agent-fleet .growth-map__agent-source::after { display: none; }
.growth-map__agent-fleet .growth-map__agent-orb {
  width: calc(22px * var(--ui-density));
  height: calc(22px * var(--ui-density));
  background: var(--growth-agent-color);
  box-shadow: 0 0 0 calc(6px * var(--ui-density)) color-mix(in srgb, var(--growth-agent-color) 14%, transparent), 0 0 calc(24px * var(--ui-density)) color-mix(in srgb, var(--growth-agent-color) 72%, transparent);
}
.growth-map__agent-fleet .growth-map__agent-source small { color: var(--growth-agent-color); }
.growth-map__agent-fleet .growth-map__agent-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-map__agent-fleet .growth-map__agent-source strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-map__agent-fleet .growth-map__agent-source span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-growth-agent="product"] { --growth-agent-color: var(--growth-agent-product); }
[data-growth-agent="development"] { --growth-agent-color: var(--growth-agent-development); }
[data-growth-agent="test"] { --growth-agent-color: var(--growth-agent-test); }

.growth-map__agent-legend-item i {
  background: var(--growth-agent-color);
  box-shadow: 0 0 calc(10px * var(--ui-density)) color-mix(in srgb, var(--growth-agent-color) 72%, transparent);
}

@media (max-height: 800px) and (min-width: 761px) {
  .growth-map__agent-fleet { width: clamp(calc(470px * var(--ui-density)), 47%, calc(600px * var(--ui-density))); }
  .growth-map__agent-fleet .growth-map__agent-source { padding: calc(6px * var(--ui-density)) calc(8px * var(--ui-density)); }
}

@media (max-width: 760px) {
  .growth-map__agent-fleet {
    right: calc(18px * var(--ui-density));
    left: calc(18px * var(--ui-density));
    width: auto;
    grid-template-columns: repeat(3, minmax(calc(112px * var(--ui-density)), 1fr));
    overflow-x: auto;
    transform: none;
  }
  .growth-map__agent-fleet .growth-map__agent-source { padding: calc(6px * var(--ui-density)) calc(7px * var(--ui-density)); }
  .growth-map__agent-fleet .growth-map__agent-orb { width: calc(18px * var(--ui-density)); height: calc(18px * var(--ui-density)); }
}

/* M53 需求采集与需求池：普通列表唯一母版为消息管理页。仅补充业务列宽、筛选字段和行操作，不重做列表壳。 */
.requirements-ordinary-page { min-width: 0; }
.requirements-ordinary-list-shell,
.requirements-ordinary-list-card { min-width: 0; }
.requirements-ordinary-toolbar { align-items: center; }
.requirements-ordinary-actions { flex: 0 0 auto; }
.requirements-ordinary-controls { min-width: 0; }
/* Direct reuse of the messages-management search control: no local icon wrapper
   or pill treatment. `type=search` preserves the browser clear affordance. */
.requirements-ordinary-controls .system-users-toolbar-search.requirements-ordinary-search {
  flex: 0 1 calc(420px * var(--ui-density));
  min-width: calc(280px * var(--ui-density));
  height: calc(48px * var(--ui-density));
  min-height: calc(48px * var(--ui-density));
}
.requirements-ordinary-balance { visibility: hidden; }
.requirements-ordinary-filter-anchor { flex: 0 0 auto; }
/* 筛选弹层沿用消息管理页同源浅紫字段与三段式规则编辑器；仅替换业务条件。 */
.requirements-ordinary-filter-popover {
  /* Keep the three-stage filter readable even where `calc(px * var())` is unsupported. */
  width: min(760px, calc(100vw - 48px));
}
.requirements-ordinary-toolbar .list-filter-anchor:has(.list-filter-popover) {
  /* The ordinary-list rule editor is anchored to its trigger, never the whole
     toolbar.  This keeps the speech-bubble point directly below “筛选”. */
  position: relative;
}
.requirements-ordinary-toolbar .requirements-ordinary-filter-popover {
  left: 0;
  right: auto;
  transform: none;
}
.requirements-ordinary-toolbar .requirements-ordinary-filter-popover::before {
  display: none;
}
.requirements-ordinary-toolbar .requirements-ordinary-filter-anchor:has(.list-filter-popover)::after {
  content: "";
  position: absolute;
  z-index: 71;
  top: calc(100% + calc(5px * var(--ui-density)));
  left: 50%;
  width: calc(14px * var(--ui-density));
  height: calc(14px * var(--ui-density));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--layer-surface);
  box-shadow: calc(-2px * var(--ui-density)) calc(-2px * var(--ui-density)) calc(7px * var(--ui-density)) color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.requirements-ordinary-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; }
.requirements-ordinary-table-scroll .table-scroll-viewport { min-width: 0; min-height: 0; }
.requirements-ordinary-table-scroll .requirements-ordinary-table {
  /* The message-management master fills the available scroll canvas on wide
     screens.  A page-specific `max-content` override left a false empty
     "operation area" to the right of the final column. */
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.requirements-workshop-table.requirements-ordinary-table { min-width: calc(1510px * var(--ui-density)); }
.requirements-candidate-table.requirements-ordinary-table { min-width: calc(1440px * var(--ui-density)); }
.requirements-ordinary-table tbody tr { cursor: pointer; }
.requirements-ordinary-table .list-sequence-cell { color: var(--muted-strong); font-weight: 700; }
.requirements-ordinary-table .title-link { display: block; max-width: calc(310px * var(--ui-density)); overflow: hidden; color: var(--heading); font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.requirements-ordinary-cell-text { display: block; max-width: calc(300px * var(--ui-density)); overflow: hidden; color: var(--muted-strong); text-overflow: ellipsis; white-space: nowrap; }
.requirements-ordinary-table td:last-child { min-width: calc(118px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(2), .requirements-workshop-table td:nth-child(2) { min-width: calc(112px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(3), .requirements-workshop-table td:nth-child(3) { min-width: calc(250px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(4), .requirements-workshop-table td:nth-child(4) { min-width: calc(120px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(5), .requirements-workshop-table td:nth-child(5) { min-width: calc(270px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(6), .requirements-workshop-table td:nth-child(6) { min-width: calc(132px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(7), .requirements-workshop-table td:nth-child(7), .requirements-workshop-table th:nth-child(8), .requirements-workshop-table td:nth-child(8), .requirements-workshop-table th:nth-child(9), .requirements-workshop-table td:nth-child(9) { min-width: calc(104px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(10), .requirements-workshop-table td:nth-child(10) { min-width: calc(164px * var(--ui-density)); }
.requirements-workshop-table th:nth-child(11), .requirements-workshop-table td:nth-child(11) { min-width: calc(164px * var(--ui-density)); }
.requirements-ordinary-pagination { margin-top: calc(2px * var(--ui-density)); }

/* M53 candidate pool: standard readonly field shells and scoped row-action overflow. */
.requirements-candidate-actions-menu { position: relative; display: inline-flex; align-items: center; }
.requirements-candidate-more-trigger { min-width: calc(24px * var(--ui-density)); padding-inline: calc(5px * var(--ui-density)); letter-spacing: calc(1px * var(--ui-density)); }
.requirements-candidate-action-menu { position: absolute; z-index: 32; top: calc(100% + calc(6px * var(--ui-density))); right: 0; display: grid; min-width: calc(132px * var(--ui-density)); padding: calc(6px * var(--ui-density)); border: 1px solid var(--toolbar-popover-border); border-radius: var(--radius-sm); background: var(--layer-surface); box-shadow: var(--layer-accent-shadow); backdrop-filter: var(--glass); }
.requirements-candidate-action-menu .link-like { min-height: calc(34px * var(--ui-density)); padding: calc(7px * var(--ui-density)) calc(10px * var(--ui-density)); border-radius: calc(8px * var(--ui-density)); color: var(--text); font-size: var(--font-size-body); text-align: left; white-space: nowrap; }
.requirements-candidate-action-menu .link-like:hover, .requirements-candidate-action-menu .link-like:focus-visible { color: var(--accent); background: var(--control-hover); }
.requirement-candidate-drawer--readonly { align-content: start; gap: calc(14px * var(--ui-density)); }
.requirement-candidate-drawer--readonly .requirement-candidate-detail-grid { gap: calc(12px * var(--ui-density)); }
.requirement-candidate-drawer--readonly .field-shell { min-width: 0; gap: calc(8px * var(--ui-density)); }
.requirement-candidate-drawer--readonly .work-item-display { min-height: calc(52px * var(--ui-density)); align-items: center; font-size: var(--font-size-body); line-height: 1.56; }
.requirement-candidate-drawer--readonly .requirement-candidate-readonly-prose .work-item-display { min-height: calc(84px * var(--ui-density)); align-items: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }
.requirement-candidate-formal-link { color: var(--accent); font-size: inherit; font-weight: 700; text-align: left; }
.requirement-candidate-edit-form { align-content: start; }
@media (max-width: 760px) {
  .requirements-candidate-action-menu { position: fixed; right: calc(16px * var(--ui-density)); left: calc(16px * var(--ui-density)); top: auto; bottom: calc(16px * var(--ui-density)); }
}
@media (max-width: 980px) {
  .requirements-ordinary-toolbar { align-items: flex-start; }
  .requirements-ordinary-controls { flex-basis: 100%; order: 3; }
}
@media (max-width: 760px) {
  .requirements-ordinary-controls { flex-wrap: wrap; }
  .requirements-ordinary-controls .system-users-toolbar-search.requirements-ordinary-search { flex-basis: 100%; min-width: 0; }
  .requirements-ordinary-filter-popover {
    position: fixed;
    top: 50%;
    right: calc(16px * var(--ui-density));
    bottom: auto;
    left: calc(16px * var(--ui-density));
    width: auto;
    max-height: calc(100dvh - calc(32px * var(--ui-density)));
    overflow-y: auto;
    transform: translateY(-50%);
  }
  .requirements-ordinary-filter-popover::before { display: none; }
  .requirements-ordinary-filter-anchor:has(.list-filter-popover)::after { display: none; }
  .requirements-ordinary-pagination { grid-template-columns: 1fr; row-gap: calc(8px * var(--ui-density)); }
  .requirements-ordinary-pagination .list-pagination-footer-spacer { display: none; }
  .requirements-ordinary-pagination .list-pagination-center,
  .requirements-ordinary-pagination .list-pagination-meta { justify-self: center; justify-content: center; flex-wrap: wrap; }
  .workshop-detail-grid { grid-template-columns: 1fr; }
}

/* M54 功能清单：沿用研发工作项的复杂列表外壳；宽表只在自身区域滚动。 */
.function-catalog-v54 { display: grid; gap: calc(14px * var(--ui-density)); min-width: 0; }
.function-catalog-v54-board { min-width: 0; }
.function-catalog-v54-toolbar { align-items: flex-start; }
.function-catalog-v54-filter-center { min-width: min(calc(620px * var(--ui-density)), 100%); }
.function-catalog-v54-filter-center .list-search-field { min-width: calc(260px * var(--ui-density)); }
.function-catalog-v54-search { flex: 0 1 calc(320px * var(--ui-density)); min-width: 0; }
.function-catalog-v54-search input { width: 0; flex: 1 1 auto; min-width: 0; max-width: none; }
.function-catalog-v54-search input::-webkit-search-cancel-button { appearance: none; }
.function-catalog-v54-search .list-search-clear { position: relative; z-index: 1; display: inline-grid; place-items: center; flex: 0 0 auto; width: calc(22px * var(--ui-density)); height: calc(22px * var(--ui-density)); margin-right: calc(-4px * var(--ui-density)); padding: 0; border: 0; border-radius: 50%; color: var(--muted-strong); background: transparent; font-size: calc(18px * var(--ui-density)); line-height: 1; cursor: pointer; }
.function-catalog-v54-search .list-search-clear:hover,
.function-catalog-v54-search .list-search-clear:focus-visible { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--control)); outline: 0; }
.function-catalog-v54-summary { align-items: center; }
.function-catalog-v54-summary .planning-summary { min-width: 0; }
.function-catalog-v54-summary .planning-stat-btn,
.function-catalog-v54-summary .planning-stat-btn strong { font-size: var(--font-size-table); }
.function-catalog-v54-table-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.function-catalog-v54-grid-scroll { min-width: 0; }
.function-catalog-v54-grid-scroll .gantt-fields-row { cursor: pointer; }
.function-catalog-v54-grid-scroll .gantt-fields-row:hover .gantt-fields > div { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.function-catalog-v54-grid-scroll .gantt-fields > .title-cell { background: var(--panel); }
.catalog-node-name { display: flex; align-items: center; gap: calc(7px * var(--ui-density)); min-width: 0; padding-left: calc(var(--catalog-depth, 0) * calc(20px * var(--ui-density))); }
.catalog-tree-toggle,
.catalog-tree-spacer,
.tree-toggle,
.tree-spacer { flex: 0 0 calc(18px * var(--ui-density)); width: calc(18px * var(--ui-density)); height: calc(18px * var(--ui-density)); }
.catalog-tree-toggle,
.tree-toggle { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: calc(5px * var(--ui-density)); color: var(--muted-strong); background: transparent; }
.catalog-tree-toggle:hover,
.tree-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.catalog-node-name .title-link,
.catalog-cell-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.catalog-cell-text { color: var(--muted-strong); }
.catalog-enum-badge { min-width: calc(76px * var(--ui-density)); justify-content: center; border-color: transparent; font-weight: 700; }
.catalog-row-actions { display: inline-flex; align-items: center; justify-content: flex-start; gap: calc(14px * var(--ui-density)); white-space: nowrap; }
.catalog-row-action { min-height: calc(30px * var(--ui-density)); color: var(--accent-2); font-size: var(--font-size-hint); font-weight: 700; }
.catalog-row-action:hover,
.catalog-row-action:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: calc(3px * var(--ui-density)); }
.catalog-row-action.danger-action { border: 0; color: var(--danger); background: transparent; box-shadow: none; }
.catalog-row-action.danger-action:hover,
.catalog-row-action.danger-action:focus-visible { color: var(--danger); background: transparent; }
.catalog-status-enabled { color: var(--ok); background: var(--ok-bg); }
.catalog-status-disabled { color: var(--warn); background: var(--warn-bg); }
.catalog-status-archived { color: var(--muted-strong); background: var(--control); border-color: var(--line); }
.function-catalog-v54-node-form textarea { min-height: calc(104px * var(--ui-density)); }
.drawer:has(.function-catalog-v54-node-form) .drawer-body,
.function-catalog-v54-node-form { align-content: start; align-items: start; }
.catalog-node-menu-fields { display: contents; }
.catalog-node-menu-fields[hidden] { display: none; }
.catalog-node-enabled-field { align-content: start; }
.function-catalog-v54-node-form[data-node-type="subsystem"] .catalog-node-enabled-field { grid-column: 1 / -1; }
.catalog-enabled-toggle { align-self: start; justify-self: start; width: max-content; }
.function-catalog-v54-column-filter { display: grid; gap: calc(8px * var(--ui-density)); max-height: calc(420px * var(--ui-density)); overflow: auto; }
.function-catalog-v54-column-filter label { display: flex; align-items: center; gap: calc(8px * var(--ui-density)); padding: calc(8px * var(--ui-density)); border-radius: var(--radius-sm); }
.function-catalog-v54-column-filter label:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.function-catalog-v54-column-popover { z-index: 58; width: min(calc(330px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density)))); max-height: min(calc(520px * var(--ui-density)), calc(100vh - calc(32px * var(--ui-density)))); overflow: auto; }
.function-catalog-v54-pagination .list-pagination-meta { display: inline-flex; align-items: center; gap: calc(10px * var(--ui-density)); }
.function-catalog-import-result { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12px * var(--ui-density)); }
.function-catalog-issues { max-height: calc(300px * var(--ui-density)); overflow: auto; margin-top: calc(12px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.function-catalog-issues table { width: 100%; min-width: calc(520px * var(--ui-density)); border-collapse: collapse; }
.function-catalog-issues th,
.function-catalog-issues td { padding: calc(8px * var(--ui-density)) calc(10px * var(--ui-density)); text-align: left; border-bottom: 1px solid var(--line); }

@media (max-width: 980px) {
  .function-catalog-v54-toolbar { align-items: flex-start; }
  .function-catalog-v54-filter-center { flex-basis: 100%; order: 3; }
  .function-catalog-v54-summary { align-items: flex-start; }
}

@media (max-width: 760px) {
  .function-catalog-v54-filter-center { flex-wrap: wrap; }
  .function-catalog-v54-filter-center .list-search-field { order: 4; flex-basis: 100%; min-width: 0; }
  .function-catalog-v54-summary { align-items: stretch; flex-direction: column; }
  .function-catalog-v54-summary .planning-summary { flex: 0 1 auto; flex-wrap: wrap; overflow: visible; }
  .function-catalog-v54-summary .planning-view-actions { flex-wrap: wrap; justify-content: flex-start; }
  .function-catalog-v54 .list-filter-popover { width: min(calc(560px * var(--ui-density)), calc(100vw - calc(32px * var(--ui-density)))); }
  .function-catalog-v54-pagination { grid-template-columns: 1fr; row-gap: calc(8px * var(--ui-density)); }
  .function-catalog-v54-pagination .list-pagination-footer-spacer { display: none; }
  .function-catalog-v54-pagination .list-pagination-center,
  .function-catalog-v54-pagination .list-pagination-meta { justify-self: center; justify-content: center; flex-wrap: wrap; }
}

/* M55 甲方范围确认：内部表格/抽屉与无后台导航的外部冻结快照页。 */
.scope-confirmations { display: grid; gap: calc(14px * var(--ui-density)); min-width: 0; }
.scope-confirmations-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8px * var(--ui-density)); }
.scope-confirmations-toolbar .list-search-field { flex: 1 1 calc(280px * var(--ui-density)); max-width: calc(380px * var(--ui-density)); }
.scope-confirmations-toolbar input { width: 100%; }
.scope-confirmations-table { padding: 0; overflow: hidden; }
.scope-confirmations-table .table-scroll { overflow: auto; overscroll-behavior-inline: contain; }
.scope-confirmations-table table { min-width: calc(1040px * var(--ui-density)); }
.scope-confirmations-table td small { display: block; margin-top: calc(3px * var(--ui-density)); }
.scope-node-picker { display: grid; gap: calc(8px * var(--ui-density)); max-height: calc(360px * var(--ui-density)); padding: calc(12px * var(--ui-density)); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.scope-node-picker legend { padding: 0 calc(5px * var(--ui-density)); color: var(--heading); font-weight: 800; }
.scope-node-picker label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(8px * var(--ui-density)); padding: calc(8px * var(--ui-density)); border-radius: var(--radius-sm); }
.scope-node-picker label:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.scope-node-picker small { grid-column: 2; color: var(--muted); }
.scope-detail dl,
.public-scope-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui-density)); }
.scope-detail dl > div,
.public-scope-summary > div { padding: calc(10px * var(--ui-density)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.scope-detail dt,
.public-scope-summary span { display: block; color: var(--muted); font-size: var(--font-size-hint); }
.scope-detail dd { margin: calc(4px * var(--ui-density)) 0 0; color: var(--heading); }
.scope-detail h4 { margin: calc(18px * var(--ui-density)) 0 calc(8px * var(--ui-density)); }
.scope-snapshot-list { display: grid; gap: calc(8px * var(--ui-density)); margin: 0; padding-left: calc(22px * var(--ui-density)); }
.scope-snapshot-list li { padding: calc(8px * var(--ui-density)); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.scope-snapshot-list p { margin: calc(4px * var(--ui-density)) 0 0; color: var(--muted-strong); }
.public-scope-page { min-height: 100vh; padding: clamp(20px, 5vw, 72px); background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%), var(--bg); }
.public-scope-panel { width: min(100%, calc(920px * var(--ui-density))); margin: 0 auto; padding: clamp(22px, 4vw, 46px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--shadow); }
.public-scope-panel header { max-width: calc(640px * var(--ui-density)); }
.public-scope-panel h1 { margin: calc(6px * var(--ui-density)) 0; color: var(--heading); }
.public-scope-panel h2 { margin-top: calc(28px * var(--ui-density)); color: var(--heading); }
.public-scope-list ol { display: grid; gap: calc(10px * var(--ui-density)); padding-left: calc(22px * var(--ui-density)); }
.public-scope-list li { padding: calc(10px * var(--ui-density)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 65%, transparent); }
.public-scope-list p { margin: calc(5px * var(--ui-density)) 0 0; color: var(--muted-strong); }
.public-scope-verify,
.public-scope-actions { display: grid; gap: calc(12px * var(--ui-density)); }
.public-scope-verify form,
.public-scope-actions { margin-top: calc(12px * var(--ui-density)); }
.public-scope-actions label { display: grid; gap: calc(5px * var(--ui-density)); color: var(--muted-strong); }
.public-scope-message { margin-top: calc(16px * var(--ui-density)); color: var(--muted-strong); }
@media (max-width: 760px) { body:has(#scopeCreateForm), body:has(.scope-detail) { overflow: hidden; } body:has(#scopeCreateForm) .mobile-navigation-toggle, body:has(.scope-detail) .mobile-navigation-toggle { display: none; } .drawer:has(#scopeCreateForm), .drawer:has(.scope-detail) { z-index: 70; width: 100vw; max-width: 100vw; padding: calc(16px * var(--ui-density)); } .drawer:has(#scopeCreateForm) .drawer-footer, .drawer:has(.scope-detail) .drawer-footer { flex-wrap: wrap; } .scope-detail dl, .public-scope-summary { grid-template-columns: 1fr; } .scope-confirmations-toolbar .list-search-field { order: 3; flex-basis: 100%; max-width: none; } .scope-confirmations-table table { min-width: calc(920px * var(--ui-density)); } .public-scope-page { padding: calc(16px * var(--ui-density)); } .public-scope-panel { padding: calc(20px * var(--ui-density)); } }

/* M60 测试用例工作台：严格沿用迭代规划的双卡片骨架，业务差异只落在卡片内部。 */
.quality-case-planning-shell {
  height: 100%;
  min-height: 0;
  position: relative;
  grid-template-columns: minmax(calc(338px * var(--ui-density)), calc(405px * var(--ui-density))) minmax(0, 1fr);
  transition: grid-template-columns 220ms ease;
}

.quality-case-planning-shell.directory-collapsed {
  grid-template-columns: calc(48px * var(--ui-density)) minmax(0, 1fr);
}

.quality-case-planning-shell .quality-case-directory {
  min-width: 0;
  padding: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms ease, width 220ms ease;
}

.quality-case-planning-shell .quality-case-sidebar-head {
  min-height: calc(48px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(12px * var(--ui-density));
}

.quality-case-planning-shell .quality-case-sidebar-head h3 {
  font-size: var(--font-size-body);
  font-weight: 600;
}

.quality-case-planning-shell .quality-case-sidebar-head .iteration-head-actions {
  gap: calc(6px * var(--ui-density));
}

.quality-case-add-button,
.quality-case-collapse-toggle {
  width: calc(31px * var(--ui-density));
  min-width: calc(31px * var(--ui-density));
  height: calc(31px * var(--ui-density));
  min-height: calc(31px * var(--ui-density));
  padding: 0;
}

.quality-case-collapse-toggle {
  display: inline-grid;
  place-items: center;
  border-color: var(--line);
  background: var(--control);
  color: var(--muted-strong);
}

.quality-case-collapse-toggle:hover,
.quality-case-collapse-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--control));
  color: var(--accent);
}

.quality-case-collapse-toggle .sidebar-toggle__icon {
  width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  flex-basis: calc(16px * var(--ui-density));
}

.quality-case-planning-shell.directory-collapsed .quality-case-sidebar-head {
  justify-content: center;
  padding-inline: calc(8px * var(--ui-density));
}

.quality-case-planning-shell.directory-collapsed .quality-case-sidebar-head h3,
.quality-case-planning-shell.directory-collapsed .quality-case-add-button {
  display: none;
}

.quality-case-planning-shell.directory-collapsed .quality-case-sidebar-head .iteration-head-actions {
  width: 100%;
  justify-content: center;
}

.quality-case-planning-shell.directory-collapsed .quality-case-sidebar-body {
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  opacity: 0;
}

.quality-case-planning-shell .quality-case-sidebar-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  padding: calc(6px * var(--ui-density)) calc(12px * var(--ui-density)) calc(16px * var(--ui-density));
  transition: opacity 160ms ease;
}

.quality-case-scope-selects {
  --quality-case-scope-control-height: calc(52px * var(--ui-density));
  display: grid;
  gap: calc(6px * var(--ui-density));
  padding: calc(4px * var(--ui-density)) 0 calc(9px * var(--ui-density));
  border-bottom: 1px solid var(--line);
}

.quality-case-scope-selects label {
  display: grid;
  grid-template-columns: calc(76px * var(--ui-density)) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: calc(35px * var(--ui-density));
  gap: calc(7px * var(--ui-density));
  color: var(--muted-strong);
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.quality-case-scope-selects label > span {
  white-space: nowrap;
}

.quality-case-scope-selects select,
.quality-case-scope-selects input {
  width: 100%;
  min-width: 0;
  height: var(--quality-case-scope-control-height);
  min-height: var(--quality-case-scope-control-height);
  padding: 0 calc(18px * var(--ui-density));
  border-color: var(--line);
  background: var(--control);
  color: var(--text);
  font-size: calc(14px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.quality-case-scope-selects .custom-select-trigger,
.quality-case-scope-selects input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--quality-case-scope-control-height);
  min-height: var(--quality-case-scope-control-height);
  padding: 0 calc(18px * var(--ui-density));
  font-size: calc(14px * var(--ui-density) + var(--font-size-offset));
  line-height: 1.2;
}

.quality-case-planning-shell .quality-directory-tabs {
  margin: calc(8px * var(--ui-density)) 0 calc(7px * var(--ui-density));
}

.quality-case-planning-shell .quality-directory-tabs button {
  min-height: calc(32px * var(--ui-density));
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.quality-case-planning-shell .quality-directory-tabs button.active,
.quality-case-planning-shell .quality-directory-tree > button.active,
.quality-case-planning-shell .quality-directory-tree .quality-tree-leaf.active {
  border-color: transparent;
  background: var(--accent-gradient);
  color: var(--menu-active-text);
  box-shadow: var(--accent-shadow);
}

.quality-case-planning-shell .quality-directory-tree {
  display: grid;
  min-height: 0;
  max-height: none;
  align-content: start;
  gap: calc(4px * var(--ui-density));
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(2px * var(--ui-density));
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
}

.quality-case-planning-shell .quality-directory-tree .quality-tree-row {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-density));
  width: 100%;
  min-width: 0;
  min-height: calc(38px * var(--ui-density));
  margin: 0;
  padding: calc(6px * var(--ui-density)) calc(8px * var(--ui-density));
  border: 1px solid transparent;
  border-radius: calc(9px * var(--ui-density));
  background: transparent;
  color: var(--text);
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.quality-case-planning-shell .quality-directory-tree button.quality-tree-row:hover,
.quality-case-planning-shell .quality-directory-tree button.quality-tree-row:focus-visible,
.quality-case-planning-shell .quality-directory-tree summary.quality-tree-row:hover,
.quality-case-planning-shell .quality-directory-tree summary.quality-tree-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--control));
}

/* “全部功能 / 全部 Story” is a stable aggregate, not a selected tree leaf.
   Keep it as an opaque summary in every state so its count stays scannable. */
.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all,
.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all.active,
.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all:hover,
.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-solid);
  color: var(--surface-solid-text);
  box-shadow: none;
  font-weight: 700;
}

.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all .quality-tree-label,
.quality-case-planning-shell .quality-directory-tree > button.quality-tree-all em {
  color: currentColor;
  font-weight: 700;
}

.quality-case-planning-shell .quality-directory-tree .quality-tree-row.active em {
  color: currentColor;
}

.quality-tree-branch {
  min-width: 0;
}

.quality-tree-branch > summary {
  cursor: pointer;
  list-style: none;
}

.quality-tree-branch > summary::-webkit-details-marker {
  display: none;
}

.quality-tree-toggle,
.quality-tree-spacer {
  display: inline-grid;
  place-items: center;
  flex: 0 0 calc(17px * var(--ui-density));
  width: calc(17px * var(--ui-density));
  height: calc(17px * var(--ui-density));
  border-radius: calc(4px * var(--ui-density));
  color: var(--muted-strong);
}

.quality-tree-toggle::before {
  content: "+";
}

.quality-tree-branch[open] > summary .quality-tree-toggle::before {
  content: "−";
}

.quality-tree-children {
  display: grid;
  gap: calc(4px * var(--ui-density));
  margin-left: calc(16px * var(--ui-density));
  padding-left: calc(6px * var(--ui-density));
  border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.quality-tree-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-tree-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(50px * var(--ui-density));
  width: calc(50px * var(--ui-density));
  min-height: calc(22px * var(--ui-density));
  padding: 0 calc(5px * var(--ui-density));
  border-radius: calc(5px * var(--ui-density));
  color: var(--menu-active-text);
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-weight: 500;
  line-height: 1.2;
}

.quality-tree-type--epic { background: var(--work-item-type-epic); }
.quality-tree-type--feature { background: var(--work-item-type-feature); }
.quality-tree-type--story { background: var(--work-item-type-story); }

.quality-tree-row em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
  font-style: normal;
  font-weight: 400;
}

.quality-case-planning-shell .quality-case-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  padding: calc(24px * var(--ui-density));
}

.quality-case-planning-shell .quality-case-main.is-report-open {
  grid-template-rows: auto auto minmax(calc(310px * var(--ui-density)), 1fr) auto minmax(calc(180px * var(--ui-density)), 1fr);
}

.quality-case-planning-shell .quality-case-heading {
  align-items: flex-start;
  padding: 0 0 calc(18px * var(--ui-density));
}

.quality-context-kicker {
  display: block;
  margin-bottom: calc(5px * var(--ui-density));
  color: var(--muted);
  font-size: var(--font-size-hint);
  font-weight: 700;
}

.quality-case-planning-shell .quality-case-report-slot {
  min-height: 0;
}

.quality-case-planning-shell .quality-case-statistics {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(14px * var(--ui-density));
  height: calc(100% - calc(20px * var(--ui-density)));
  min-height: calc(300px * var(--ui-density));
  margin: calc(14px * var(--ui-density)) 0;
  padding: calc(16px * var(--ui-density));
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.quality-case-planning-shell .quality-stat-grid {
  min-height: 0;
  grid-template-columns: minmax(calc(260px * var(--ui-density)), 0.8fr) minmax(calc(420px * var(--ui-density)), 1.2fr);
  gap: calc(18px * var(--ui-density));
}

.quality-case-stat-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(10px * var(--ui-density));
}

.quality-case-stat-kpis article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(3px * var(--ui-density)) calc(10px * var(--ui-density));
  align-items: baseline;
  min-width: 0;
  padding: calc(10px * var(--ui-density)) calc(12px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.quality-case-stat-kpis span,
.quality-case-stat-kpis small { color: var(--muted); }
.quality-case-stat-kpis strong { color: var(--heading); font-size: calc(20px * var(--ui-density)); }
.quality-case-stat-kpis small { grid-column: 1 / -1; font-size: var(--font-size-hint); }

.quality-stat-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(8px * var(--ui-density));
}

.quality-stat-panel h4 {
  margin: 0;
}

.quality-stat-chart {
  min-width: 0;
  min-height: calc(190px * var(--ui-density));
}

.quality-case-planning-shell .quality-case-toolbar {
  --quality-case-toolbar-control-height: calc(44px * var(--ui-density));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(24px * var(--ui-density));
  min-width: 0;
  padding: calc(18px * var(--ui-density)) 0;
}

.quality-case-toolbar .planning-actions {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-density));
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.quality-case-toolbar .planning-actions button,
.quality-case-filter-form > input,
.quality-case-filter-form > select,
.quality-case-filter-form > .custom-select,
.quality-case-filter-form .custom-select-trigger {
  height: var(--quality-case-toolbar-control-height);
  min-height: var(--quality-case-toolbar-control-height);
  max-height: var(--quality-case-toolbar-control-height);
}

.quality-case-filter-form {
  display: flex;
  align-items: center;
  align-self: center;
  gap: calc(12px * var(--ui-density));
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(720px * var(--ui-density));
  flex-wrap: nowrap;
  margin: 0;
}

.quality-case-filter-form > .custom-select,
.quality-case-filter-form > input,
.quality-case-toolbar .planning-actions { align-self: center; }

.quality-case-filter-form select {
  flex: 0 0 calc(150px * var(--ui-density));
  width: calc(150px * var(--ui-density));
}

.quality-case-filter-form > .custom-select {
  flex: 0 0 calc(150px * var(--ui-density));
  width: calc(150px * var(--ui-density));
  min-width: calc(150px * var(--ui-density));
}

.quality-case-filter-form .system-users-toolbar-search {
  flex: 1 1 calc(280px * var(--ui-density));
  width: auto;
  min-width: calc(220px * var(--ui-density));
  max-width: none;
}

.quality-case-table-region {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.quality-case-table-region > .quality-empty-state {
  grid-row: 1 / -1;
}

.quality-case-table-region .quality-cases-table-wrap {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}

.quality-case-table-region .work-items-pagination-footer {
  flex: 0 0 auto;
}

.quality-plan-scope-add-form {
  display: grid;
  gap: calc(12px * var(--ui-density));
  min-height: 0;
}

.quality-scope-add-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(calc(120px * var(--ui-density)), 1fr));
  width: min(100%, calc(320px * var(--ui-density)));
  padding: calc(3px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control);
}

.quality-scope-add-tabs button {
  min-height: calc(34px * var(--ui-density));
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.quality-scope-add-tabs button.active {
  background: var(--accent-gradient);
  color: var(--menu-active-text);
  box-shadow: var(--accent-shadow);
}

.quality-scope-add-panel {
  min-height: 0;
}

.quality-function-menu-create-form {
  align-content: start;
  gap: calc(14px * var(--ui-density));
}

.quality-function-menu-cascades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12px * var(--ui-density));
}

.quality-function-menu-cascades .field-shell,
.quality-plan-workitem-add-form .field-shell {
  min-width: 0;
  margin: 0;
}

.quality-plan-workitem-add-form .iteration-add-list label.is-selected {
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}

.quality-scope-added-badge {
  width: max-content;
  color: var(--muted);
  font-size: calc(11px * var(--ui-density));
  font-weight: 500;
}

/* 测试范围弹窗直接复用迭代“加入工作项”的稳定表格高度与紧凑字号。 */
.modal:has(#planScopeWorkItemForm) {
  height: min(calc(900px * var(--ui-density)), calc(100dvh - calc(48px * var(--ui-density))));
}

.modal:has(#planScopeWorkItemForm) .modal-head h3,
.modal:has(#planScopeWorkItemForm) .modal-body,
.modal:has(#planScopeWorkItemForm) .modal-footer,
.modal:has(#planScopeWorkItemForm) input,
.modal:has(#planScopeWorkItemForm) select,
.modal:has(#planScopeWorkItemForm) textarea,
.modal:has(#planScopeWorkItemForm) button:not(.layer-close-button),
.modal:has(#planScopeWorkItemForm) .field-shell__label,
.modal:has(#planScopeWorkItemForm) .field-shell__label-text,
.modal:has(#planScopeWorkItemForm) .iteration-add-list,
.modal:has(#planScopeWorkItemForm) .iteration-add-list-head,
.modal:has(#planScopeWorkItemForm) .iteration-add-list label,
.modal:has(#planScopeWorkItemForm) .type-badge,
.modal:has(#planScopeWorkItemForm) .status-badge,
.modal:has(#planScopeWorkItemForm) .priority-badge {
  font-size: calc(12px * var(--ui-density));
}

.modal:has(#planScopeWorkItemForm) .modal-head h3,
.modal:has(#planScopeWorkItemForm) .modal-footer button:not(.layer-close-button) {
  font-size: calc(14px * var(--ui-density));
}

.modal:has(#planScopeWorkItemForm) .modal-body,
.modal:has(#planScopeWorkItemForm) .quality-plan-scope-add-form,
.modal:has(#planScopeWorkItemForm) .quality-scope-add-panel,
.modal:has(#planScopeWorkItemForm) .quality-plan-workitem-add-form,
.modal:has(#planScopeWorkItemForm) .iteration-add-list {
  min-height: 0;
}

.modal:has(#planScopeWorkItemForm) .quality-plan-scope-add-form {
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.modal:has(#planScopeWorkItemForm) .quality-scope-add-panel.active {
  overflow: auto;
}

.modal:has(#planScopeWorkItemForm) .quality-plan-workitem-add-form {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* 需求范围候选表格：类型与其余枚举筛选保持桌面端单行，窄屏沿用下方断点折行。 */
.modal:has(#planScopeWorkItemForm) .iteration-add-filter-row {
  grid-template-columns:
    minmax(calc(180px * var(--ui-density)), 1.25fr)
    repeat(3, minmax(calc(120px * var(--ui-density)), 0.8fr))
    minmax(calc(155px * var(--ui-density)), 0.9fr)
    auto;
}

.modal:has(#planScopeWorkItemForm) .quality-plan-workitem-add-form .iteration-add-list {
  max-height: none;
  align-content: start;
  grid-auto-rows: max-content;
}

.modal:has(#planScopeWorkItemForm) .iteration-add-list .status-badge,
.modal:has(#planScopeWorkItemForm) .iteration-add-list .priority-badge {
  justify-self: start;
  width: max-content;
}

.quality-scope-picker {
  display: grid;
  align-content: start;
  gap: calc(5px * var(--ui-density));
  max-height: min(calc(430px * var(--ui-density)), 48vh);
  padding: calc(10px * var(--ui-density));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  font-size: calc(12px * var(--ui-density) + var(--font-size-offset));
}

.quality-scope-picker-branch {
  min-width: 0;
}

.quality-scope-picker-branch > summary {
  display: flex;
  align-items: center;
  min-height: calc(38px * var(--ui-density));
  padding: calc(5px * var(--ui-density)) calc(7px * var(--ui-density));
  cursor: pointer;
  list-style: none;
  border-radius: calc(8px * var(--ui-density));
}

.quality-scope-picker-branch > summary::-webkit-details-marker { display: none; }
.quality-scope-picker-branch > summary:hover { background: color-mix(in srgb, var(--accent) 8%, var(--control)); }
.quality-scope-picker-branch[open] > summary > .quality-tree-toggle::before { content: "−"; }

.quality-scope-picker-branch > div {
  display: grid;
  gap: calc(4px * var(--ui-density));
  margin-left: calc(18px * var(--ui-density));
  padding-left: calc(7px * var(--ui-density));
  border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.quality-scope-picker-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-density));
  min-width: 0;
  min-height: calc(38px * var(--ui-density));
  padding: calc(6px * var(--ui-density)) calc(8px * var(--ui-density));
  border-radius: calc(8px * var(--ui-density));
  color: var(--text);
  font-weight: 400;
}

.quality-scope-picker-row:hover { background: color-mix(in srgb, var(--accent) 8%, var(--control)); }
.quality-scope-picker-row input[type="checkbox"] {
  flex: 0 0 calc(16px * var(--ui-density));
  width: calc(16px * var(--ui-density));
  min-width: calc(16px * var(--ui-density));
  height: calc(16px * var(--ui-density));
  min-height: calc(16px * var(--ui-density));
  margin: 0;
  padding: 0;
}
.quality-scope-picker-row em { flex: 0 0 auto; color: var(--muted); font-style: normal; }
.quality-scope-picker-branch > summary .quality-scope-picker-row { flex: 1 1 auto; padding: 0; }

/* 测试用例创建：宽任务面采用 70/30 双面板，步骤独立滚动，右侧属性统一单列。 */
.modal.work-item-modal:has(#testCaseForm) {
  width: min(calc(92vw * var(--ui-density)), calc(100vw - calc(48px * var(--ui-density))));
  height: min(calc(920px * var(--ui-density)), calc(100dvh - calc(48px * var(--ui-density))));
}

.modal.work-item-modal:has(#testCaseForm) .modal-body {
  overflow: hidden;
}

.quality-case-create-form {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.quality-case-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(calc(280px * var(--ui-density)), 3fr);
  gap: calc(16px * var(--ui-density));
  min-height: 0;
  height: 100%;
}

.quality-case-create-main,
.quality-case-create-side {
  min-width: 0;
  min-height: 0;
  padding: calc(16px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-2) 74%, transparent);
}

.quality-case-create-main {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: calc(14px * var(--ui-density));
}

.quality-case-create-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(14px * var(--ui-density));
}

.quality-case-create-panel-head {
  min-height: calc(28px * var(--ui-density));
  padding-bottom: calc(10px * var(--ui-density));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.quality-case-create-panel-head h3 { margin: 0; color: var(--heading); font-size: calc(16px * var(--ui-density)); }

.quality-case-form-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(16px * var(--ui-density));
}

.quality-case-form-group-head h3,
.quality-case-form-group-head p { margin: 0; }
.quality-case-form-group-head h3 { color: var(--heading); font-size: calc(16px * var(--ui-density)); }
.quality-case-form-group-head p { margin-top: calc(4px * var(--ui-density)); color: var(--muted); font-size: var(--font-size-hint); font-weight: 400; }

.quality-case-create-primary-fields,
.quality-case-create-notes {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(calc(180px * var(--ui-density)), 0.9fr);
  gap: calc(14px * var(--ui-density));
}

.quality-case-create-notes { grid-template-columns: minmax(0, 1fr); }

.quality-case-create-primary-fields .field-shell,
.quality-case-create-notes .field-shell,
.quality-case-create-side-fields .field-shell { width: 100%; min-width: 0; margin: 0; }

.quality-case-create-form input:not([type="hidden"]),
.quality-case-create-form select,
.quality-case-create-form .custom-select-trigger {
  width: 100%;
  min-height: calc(52px * var(--ui-density));
  height: calc(52px * var(--ui-density));
}

.quality-case-create-form .custom-select { width: 100%; min-width: 0; }

.quality-case-create-side-fields {
  display: grid;
  align-content: start;
  gap: calc(10px * var(--ui-density));
  min-height: 0;
  padding-right: calc(3px * var(--ui-density));
  overflow: auto;
}

.quality-case-textarea-field textarea {
  width: 100%;
  min-height: calc(96px * var(--ui-density));
  height: calc(96px * var(--ui-density));
  resize: vertical;
}

.quality-case-steps-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(10px * var(--ui-density));
  min-height: 0;
  padding-top: calc(2px * var(--ui-density));
}

.quality-case-step-scroll {
  min-height: calc(170px * var(--ui-density));
  max-height: none;
  height: 100%;
  overflow: auto;
}

.quality-case-create-step-table {
  min-width: calc(680px * var(--ui-density));
  border-radius: var(--radius-sm);
}
.quality-case-create-step-table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.quality-case-create-step-table thead th:last-child { border-top-right-radius: var(--radius-sm); }
.quality-case-create-step-table th:nth-child(-n + 3),
.quality-case-create-step-table td:nth-child(-n + 3) { text-align: center; vertical-align: middle; }
.quality-case-create-step-table th:first-child,
.quality-case-create-step-table td:first-child { width: calc(64px * var(--ui-density)); text-align: center; }
.quality-case-create-step-table th:last-child,
.quality-case-create-step-table td:last-child { width: calc(76px * var(--ui-density)); text-align: center; }
.quality-case-create-step-table textarea {
  display: block;
  width: calc(100% - calc(16px * var(--ui-density)));
  min-height: calc(96px * var(--ui-density));
  margin-inline: auto;
  padding: calc(12px * var(--ui-density));
  text-align: left;
}
.quality-case-form-message { margin: 0; padding-inline: calc(4px * var(--ui-density)); }

/* “加入已有用例”复用迭代候选表格语言，并保持表头、筛选和列表高度稳定。 */
.modal.wide:has(#attachCaseForm) {
  height: min(calc(850px * var(--ui-density)), calc(100dvh - calc(48px * var(--ui-density))));
}

.modal.wide:has(#attachCaseForm) .modal-body { min-height: 0; overflow: hidden; }
.quality-attach-case-form { height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: calc(14px * var(--ui-density)); }

.quality-attach-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18px * var(--ui-density));
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel-2));
}

.quality-attach-context > div { display: grid; gap: calc(3px * var(--ui-density)); }
.quality-attach-context span,
.quality-attach-context p { color: var(--muted); font-size: var(--font-size-hint); }
.quality-attach-context strong { color: var(--heading); }
.quality-attach-context p { margin: 0; }

.quality-attach-filter-row { grid-template-columns: minmax(calc(210px * var(--ui-density)), 1.4fr) repeat(3, minmax(calc(130px * var(--ui-density)), 1fr)) auto; }
.quality-attach-case-list { min-height: 0; max-height: none; overflow: auto; align-content: start; }
.quality-attach-case-rows { display: grid; align-content: start; }
.quality-attach-list-grid {
  display: grid;
  grid-template-columns: calc(34px * var(--ui-density)) calc(128px * var(--ui-density)) minmax(calc(260px * var(--ui-density)), 1fr) calc(94px * var(--ui-density)) calc(132px * var(--ui-density)) calc(110px * var(--ui-density));
  gap: calc(12px * var(--ui-density));
  align-items: center;
}

.quality-attach-case-row {
  min-height: calc(52px * var(--ui-density));
  padding: calc(8px * var(--ui-density)) calc(12px * var(--ui-density));
  border-bottom: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}

.quality-attach-case-list .quality-attach-case-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}

.quality-attach-case-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--control)); }
.quality-attach-case-row.is-selected { opacity: 0.58; cursor: default; }
.quality-attach-case-row > span { min-width: 0; }
.quality-attach-case-row .iteration-add-title { display: flex; align-items: center; gap: calc(8px * var(--ui-density)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quality-attach-case-row .type-badge { flex: 0 0 auto; }
.quality-attach-case-row .quality-level-badge { width: max-content; }
.quality-attach-empty { padding: calc(48px * var(--ui-density)) calc(16px * var(--ui-density)); text-align: center; }

:root[data-theme="dark"] .quality-case-planning-shell .quality-case-statistics {
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}

@media (max-width: 980px) {
  .modal.work-item-modal:has(#testCaseForm),
  .modal.wide:has(#attachCaseForm) {
    width: calc(100vw - calc(32px * var(--ui-density)));
    height: calc(100dvh - calc(32px * var(--ui-density)));
    max-width: none;
  }

  .modal.work-item-modal:has(#testCaseForm) .modal-body { overflow: auto; }
  .quality-case-create-form { height: auto; overflow: visible; }
  .quality-case-create-layout { grid-template-columns: 1fr; height: auto; }
  .quality-case-create-main,
  .quality-case-create-side { min-height: auto; }
  .quality-case-create-side-fields { overflow: visible; }
  .quality-case-step-scroll { height: auto; max-height: calc(340px * var(--ui-density)); }

  .modal:has(#planScopeWorkItemForm) {
    width: calc(100vw - calc(48px * var(--ui-density)));
    max-width: none;
  }

  .quality-function-menu-cascades {
    grid-template-columns: 1fr;
  }

  .modal:has(#planScopeWorkItemForm) .iteration-add-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-case-planning-shell,
  .quality-case-planning-shell.directory-collapsed {
    height: auto;
    grid-template-columns: 1fr;
  }

  .quality-case-planning-shell .quality-case-directory {
    position: static;
    inset: auto;
    z-index: auto;
    width: auto;
    max-height: 62vh;
    opacity: 1;
    box-shadow: var(--soft-shadow);
  }

  .quality-case-planning-shell.directory-collapsed .quality-case-directory {
    max-height: calc(48px * var(--ui-density));
  }

  .quality-case-planning-shell .quality-case-main,
  .quality-case-planning-shell .quality-case-main.is-report-open {
    min-height: 72vh;
    grid-template-rows: auto auto auto auto minmax(calc(420px * var(--ui-density)), 1fr);
    overflow: visible;
  }

  .quality-case-planning-shell .quality-case-report-slot {
    overflow: visible;
  }

  .quality-case-planning-shell .quality-case-statistics {
    height: auto;
    overflow: visible;
  }

  .quality-case-planning-shell .quality-stat-grid {
    grid-template-columns: 1fr;
  }

  .quality-case-stat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .quality-case-planning-shell .quality-case-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .quality-case-filter-form {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .modal:has(#planScopeWorkItemForm) .iteration-add-list-head,
  .modal:has(#planScopeWorkItemForm) .iteration-add-list label {
    display: grid;
    grid-template-columns: calc(28px * var(--ui-density)) calc(130px * var(--ui-density)) minmax(calc(220px * var(--ui-density)), 1fr) calc(104px * var(--ui-density)) calc(92px * var(--ui-density)) calc(128px * var(--ui-density));
  }
}

@media (max-width: 480px) {
  body:has(#testCaseForm) .mobile-navigation-toggle,
  body:has(#attachCaseForm) .mobile-navigation-toggle { display: none; }

  .modal.work-item-modal:has(#testCaseForm),
  .modal.wide:has(#attachCaseForm) {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    padding: calc(16px * var(--ui-density));
  }

  .modal.work-item-modal:has(#testCaseForm) .modal-head,
  .modal.wide:has(#attachCaseForm) .modal-head {
    min-height: calc(42px * var(--ui-density));
    padding-left: 0;
  }

  .quality-case-create-main,
  .quality-case-create-side { padding: calc(12px * var(--ui-density)); }
  .quality-case-create-primary-fields,
  .quality-case-create-notes { grid-template-columns: 1fr; }
  .quality-case-form-group-head { align-items: flex-start; flex-direction: column; }
  .quality-case-form-group-head > button { width: 100%; }
  .quality-case-stat-kpis { grid-template-columns: 1fr; }
  .quality-attach-context { align-items: flex-start; flex-direction: column; }
  .quality-attach-filter-row { grid-template-columns: 1fr; }
  .quality-attach-filter-row > button { width: 100%; }
  .quality-attach-case-list .quality-attach-list-grid.iteration-add-list-head { display: none; }
  .quality-attach-case-row.quality-attach-list-grid { grid-template-columns: auto minmax(0, 1fr); }

  .modal:has(#planScopeWorkItemForm) {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
  }

  .modal:has(#planScopeWorkItemForm) .iteration-add-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(8px * var(--ui-density));
  }

  .modal:has(#planScopeWorkItemForm) #clearAddItemFilters {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .quality-case-toolbar .planning-actions,
  .quality-case-filter-form {
    flex-wrap: wrap;
  }

  .quality-case-filter-form select,
  .quality-case-filter-form .system-users-toolbar-search {
    flex: 1 1 calc(160px * var(--ui-density));
    width: auto;
    min-width: 0;
  }
}