/*
 * Fluent 2 (Microsoft) design tokens and components for the Zizukas ERP.
 * Token names and values follow Fluent 2's web light and dark themes
 * (brand ramp "communication blue", neutral greys, type ramp, radii, shadows).
 */

:root {
  /* Neutral backgrounds */
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground1Selected: #ebebeb;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #f0f0f0;
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorSubtleBackgroundPressed: #e0e0e0;
  /* Neutral foregrounds */
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralForegroundOnBrand: #ffffff;
  /* Strokes */
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStrokeAccessible: #616161;
  --colorStrokeFocus2: #000000;
  /* Brand */
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #ebf3fc;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;
  --colorBrandForegroundLink: #115ea3;
  --colorBrandForegroundLinkHover: #0f548c;
  --colorBrandStroke1: #0f6cbd;
  --colorCompoundBrandStroke: #0f6cbd;
  /* Status */
  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessForeground1: #0e700e;
  --colorStatusSuccessBorder1: #9fd89f;
  --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningForeground3: #bc4b09;
  --colorStatusWarningBorder1: #fdcfb4;
  --colorStatusDangerBackground1: #fdf3f4;
  --colorStatusDangerForeground1: #b10e1c;
  --colorStatusDangerBorder1: #eeacb2;
  --colorNeutralBackgroundInfo: #f5f5f5;

  /* Shape */
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadiusCircular: 10000px;
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;

  /* Elevation */
  --shadow2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --shadow8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);

  /* Typography */
  --fontFamilyBase: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --fontFamilyNumeric: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontSizeHero700: 28px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --lineHeightHero700: 36px;
  --fontWeightRegular: 400;
  --fontWeightSemibold: 600;

  /* Spacing */
  --spacingHorizontalXS: 4px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingVerticalXS: 4px;
  --spacingVerticalS: 8px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;

  /* Motion */
  --durationFaster: 100ms;
  --durationNormal: 200ms;
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --colorNeutralBackground1: #292929;
    --colorNeutralBackground1Hover: #3d3d3d;
    --colorNeutralBackground1Pressed: #1f1f1f;
    --colorNeutralBackground1Selected: #383838;
    --colorNeutralBackground2: #1f1f1f;
    --colorNeutralBackground3: #141414;
    --colorNeutralBackground4: #0a0a0a;
    --colorSubtleBackgroundHover: #383838;
    --colorSubtleBackgroundPressed: #2e2e2e;
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground2: #d6d6d6;
    --colorNeutralForeground3: #adadad;
    --colorNeutralForeground4: #999999;
    --colorNeutralForegroundDisabled: #5c5c5c;
    --colorNeutralStroke1: #666666;
    --colorNeutralStroke1Hover: #757575;
    --colorNeutralStroke2: #525252;
    --colorNeutralStroke3: #3d3d3d;
    --colorNeutralStrokeAccessible: #adadad;
    --colorStrokeFocus2: #ffffff;
    --colorBrandBackground: #115ea3;
    --colorBrandBackgroundHover: #0f6cbd;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandBackground2: #082338;
    --colorBrandForeground1: #479ef5;
    --colorBrandForeground2: #62abf5;
    --colorBrandForegroundLink: #479ef5;
    --colorBrandForegroundLinkHover: #62abf5;
    --colorBrandStroke1: #479ef5;
    --colorCompoundBrandStroke: #479ef5;
    --colorStatusSuccessBackground1: #052505;
    --colorStatusSuccessForeground1: #54b054;
    --colorStatusSuccessBorder1: #107c10;
    --colorStatusWarningBackground1: #4a1e04;
    --colorStatusWarningForeground3: #faa06b;
    --colorStatusWarningBorder1: #da3b01;
    --colorStatusDangerBackground1: #3b0509;
    --colorStatusDangerForeground1: #dc626d;
    --colorStatusDangerBorder1: #c50f1f;
    --colorNeutralBackgroundInfo: #333333;
    --shadow2: 0 0 2px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.28);
    --shadow4: 0 0 2px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28);
    --shadow8: 0 0 2px rgba(0,0,0,.24), 0 4px 8px rgba(0,0,0,.28);
    --shadow16: 0 0 2px rgba(0,0,0,.24), 0 8px 16px rgba(0,0,0,.28);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightRegular);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--colorBrandForegroundLink); text-decoration: none; }
a:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; }
:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; border-radius: var(--borderRadiusMedium); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--colorNeutralForeground3); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Type ramp */
.text-title2 { font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); font-weight: var(--fontWeightSemibold); margin: 0; }
.text-title3 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: var(--fontWeightSemibold); margin: 0; }
.text-subtitle1 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); margin: 0; }
.text-subtitle2 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); margin: 0; }
.text-body1 { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.text-body1-strong { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); }
.text-caption1 { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }

/* ------------------------------------------------------------------ layout */

.app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow4);
}
.app-header .bar { display: flex; align-items: center; gap: var(--spacingHorizontalXL); height: 48px; }
.app-brand { display: flex; align-items: center; gap: var(--spacingHorizontalS); font-weight: var(--fontWeightSemibold); white-space: nowrap; color: var(--colorNeutralForeground1); }
.app-brand:hover { text-decoration: none; color: var(--colorNeutralForeground1); }
.app-brand .mark { width: 24px; height: 24px; border-radius: var(--borderRadiusMedium); background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand); display: grid; place-items: center; font-size: 12px; }
.app-user { display: flex; align-items: center; gap: var(--spacingHorizontalS); margin-left: auto; white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: var(--borderRadiusCircular); background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2); display: grid; place-items: center; font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); text-transform: uppercase; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--spacingHorizontalL); }
main.container { padding-top: var(--spacingVerticalXXL); padding-bottom: 48px; }
.page-header { margin-bottom: var(--spacingVerticalXL); }
.page-header .text-body1 { color: var(--colorNeutralForeground3); margin: var(--spacingVerticalXS) 0 0; max-width: 760px; }
.breadcrumb { display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); margin-bottom: var(--spacingVerticalS); font-size: var(--fontSizeBase300); }
.stack { display: flex; flex-direction: column; gap: var(--spacingVerticalL); }
.row { display: flex; align-items: center; gap: var(--spacingHorizontalS); flex-wrap: wrap; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ TabList (top nav) */

.tablist { display: flex; align-items: stretch; height: 48px; gap: var(--spacingHorizontalXS); overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: flex; align-items: center; padding: 0 var(--spacingHorizontalM);
  color: var(--colorNeutralForeground2); border-radius: var(--borderRadiusMedium); white-space: nowrap; }
.tab:hover { color: var(--colorNeutralForeground1); text-decoration: none; background: var(--colorSubtleBackgroundHover); }
.tab[aria-current="page"] { color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--spacingHorizontalM); right: var(--spacingHorizontalM);
  bottom: 0; height: var(--strokeWidthThicker); border-radius: var(--borderRadiusCircular); background: var(--colorCompoundBrandStroke); }

/* ------------------------------------------------------------------ Card */

.card {
  background: var(--colorNeutralBackground1);
  border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow4);
  padding: var(--spacingVerticalL) var(--spacingHorizontalL);
}
.card + .card { margin-top: var(--spacingVerticalL); }
.card-header { display: flex; align-items: center; gap: var(--spacingHorizontalS); margin-bottom: var(--spacingVerticalM); flex-wrap: wrap; }
.card-header .text-caption1 { margin-left: auto; }
.card-divider { border: 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); margin: var(--spacingVerticalL) calc(-1 * var(--spacingHorizontalL)); }

/* ------------------------------------------------------------------ Button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; min-width: 96px; padding: 5px var(--spacingHorizontalM);
  font: inherit; font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300);
  color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase);
}
.btn:hover { background: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); color: var(--colorNeutralForeground1); text-decoration: none; }
.btn:active { background: var(--colorNeutralBackground1Pressed); }
.btn-primary { background: var(--colorBrandBackground); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); }
.btn-primary:hover { background: var(--colorBrandBackgroundHover); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); }
.btn-primary:active { background: var(--colorBrandBackgroundPressed); }
.btn.is-busy { cursor: progress; opacity: .7; pointer-events: none; }
.btn-subtle { background: transparent; border-color: transparent; min-width: 0; }
.btn-subtle:hover { background: var(--colorSubtleBackgroundHover); border-color: transparent; }
.btn-small { min-height: 24px; min-width: 64px; padding: 1px var(--spacingHorizontalS); font-size: var(--fontSizeBase200); }
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
form.inline { display: inline; }

/* ------------------------------------------------------------------ Inputs */

.field { display: flex; flex-direction: column; gap: var(--spacingVerticalXS); }
.field label, .label { font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); }
.input, .select {
  font: inherit; min-height: 32px; padding: 5px 10px; width: 100%;
  color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  outline: none;
}
.input:hover, .select:hover { border-color: var(--colorNeutralStroke1Hover); border-bottom-color: var(--colorNeutralStrokeAccessible); }
.input:focus, .select:focus { border-bottom: var(--strokeWidthThick) solid var(--colorCompoundBrandStroke); padding-bottom: 4px; }
.select { width: auto; max-width: 100%; padding-right: 28px; text-overflow: ellipsis; }
.input-inline { width: auto; flex: 1; min-width: 180px; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--colorBrandBackground); cursor: pointer; }
.hint { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
.field-error { font-size: var(--fontSizeBase200); color: var(--colorStatusDangerForeground1); }

/* Drop zone for file upload */
.dropzone {
  display: flex; align-items: center; gap: var(--spacingHorizontalM); flex-wrap: wrap;
  padding: var(--spacingVerticalL); border: var(--strokeWidthThin) dashed var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusLarge); background: var(--colorNeutralBackground2);
}
.dropzone input[type="file"] { font: inherit; color: var(--colorNeutralForeground2); max-width: 100%; }
.dropzone input[type="file"]::file-selector-button {
  font: inherit; font-weight: var(--fontWeightSemibold); margin-right: var(--spacingHorizontalM);
  min-height: 32px; padding: 5px var(--spacingHorizontalM); cursor: pointer;
  color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium);
}

/* ------------------------------------------------------------------ Badge */

.badge {
  display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px;
  font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold);
  border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThin) solid transparent; white-space: nowrap;
  background: var(--colorNeutralBackgroundInfo); color: var(--colorNeutralForeground2); border-color: var(--colorNeutralStroke2);
}
.badge-success, .badge-committed { background: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1); border-color: var(--colorStatusSuccessBorder1); }
.badge-warning, .badge-previewed { background: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground3); border-color: var(--colorStatusWarningBorder1); }
.badge-danger, .badge-error, .badge-failed { background: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1); border-color: var(--colorStatusDangerBorder1); }
.badge-brand { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); border-color: transparent; }
.badge-info, .badge-discarded { }

/* Tag (removable token) */
.tag {
  display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); height: 24px; padding: 0 2px 0 var(--spacingHorizontalS);
  border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase200); margin: 2px 4px 2px 0; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.tag button { border: 0; background: none; color: inherit; cursor: pointer; width: 20px; height: 20px; border-radius: var(--borderRadiusSmall); display: grid; place-items: center; padding: 0; }
.tag button:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.tag button svg { width: 12px; height: 12px; fill: currentColor; }

/* ------------------------------------------------------------------ MessageBar */

.message-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacingHorizontalS);
  padding: 10px var(--spacingHorizontalM); margin-bottom: var(--spacingVerticalL);
  border-radius: var(--borderRadiusMedium); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  background: var(--colorNeutralBackgroundInfo); color: var(--colorNeutralForeground1);
}
.message-bar svg { width: 20px; height: 20px; flex: none; fill: currentColor; color: var(--colorNeutralForeground3); }
.message-bar .body { flex: 1; min-width: 220px; }
.message-bar.success { background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); }
.message-bar.success svg { color: var(--colorStatusSuccessForeground1); }
.message-bar.warning { background: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); }
.message-bar.warning svg { color: var(--colorStatusWarningForeground3); }
.message-bar.error { background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); }
.message-bar.error svg { color: var(--colorStatusDangerForeground1); }
.message-bar.info svg { color: var(--colorBrandForeground1); }
.card .message-bar { margin-bottom: 0; }

/* ------------------------------------------------------------------ Stat tiles */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacingHorizontalM); }
.stat { padding: var(--spacingVerticalM) var(--spacingHorizontalM); border-radius: var(--borderRadiusLarge);
  background: var(--colorNeutralBackground2); border: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.stat .label { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); font-weight: var(--fontWeightRegular); }
.stat .value { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .meta { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); margin-top: 2px; }
.stat.attention { background: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); }
.stat.attention .meta { color: var(--colorStatusWarningForeground3); font-weight: var(--fontWeightSemibold); }

/* ------------------------------------------------------------------ ProgressBar */

.progress { height: 4px; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground4); overflow: hidden; margin-top: var(--spacingVerticalS); }
.progress > span { display: block; height: 100%; background: var(--colorCompoundBrandStroke); border-radius: inherit; transition: width var(--durationNormal) var(--curveEasyEase); }

/* ------------------------------------------------------------------ Table (DataGrid look) */

.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--spacingHorizontalL)); padding: 0 var(--spacingHorizontalL); }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground2); padding: var(--spacingVerticalS) var(--spacingHorizontalS);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); white-space: nowrap;
}
.table td { padding: var(--spacingVerticalS) var(--spacingHorizontalS); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3); vertical-align: middle; }
.table tbody tr:hover td { background: var(--colorSubtleBackgroundHover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table .cell-check { width: 32px; }

/* ------------------------------------------------------------------ Accordion */

details.accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--spacingHorizontalS);
  font-weight: var(--fontWeightSemibold); padding: var(--spacingVerticalXS) 0; }
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--durationFaster) var(--curveEasyEase); margin: 0 4px; }
details.accordion[open] > summary::before { transform: rotate(45deg); }

/* ------------------------------------------------------------------ Design review groups */

.group { background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusXLarge); box-shadow: var(--shadow4); margin-bottom: var(--spacingVerticalM);
  transition: opacity var(--durationNormal) var(--curveEasyEase); }
.group.off { opacity: .5; }
.group-head { display: flex; align-items: center; gap: var(--spacingHorizontalM); padding: var(--spacingVerticalM) var(--spacingHorizontalL);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); flex-wrap: wrap; }
.group-head .input { flex: 1; min-width: 200px; }
.group .table-wrap { margin: 0; padding: 0 var(--spacingHorizontalS); }

.command-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--spacingHorizontalS); flex-wrap: wrap;
  padding: var(--spacingVerticalM) var(--spacingHorizontalL); margin-top: var(--spacingVerticalL);
  background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusXLarge); box-shadow: var(--shadow16);
}

/* ------------------------------------------------------------------ Reorder plan */

.plan-head, .plan-row > summary {
  display: grid; align-items: center; gap: var(--spacingHorizontalS);
  grid-template-columns: minmax(220px, 2.4fr) 70px 70px 72px 72px 64px 90px 220px;
  padding: var(--spacingVerticalS) var(--spacingHorizontalS);
}
.plan-head { font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground2);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.plan-row { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.plan-row > summary { list-style: none; cursor: pointer; border-radius: var(--borderRadiusMedium); }
.plan-row > summary::-webkit-details-marker { display: none; }
.plan-row > summary:hover { background: var(--colorSubtleBackgroundHover); }
.plan-row[open] > summary { background: var(--colorNeutralBackground1Selected); }
.plan-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.plan-name { display: flex; flex-direction: column; min-width: 0; }
.plan-detail { padding: var(--spacingVerticalM) var(--spacingHorizontalM) var(--spacingVerticalL); background: var(--colorNeutralBackground2);
  border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium); }
.overdue { color: var(--colorStatusDangerForeground1); font-weight: var(--fontWeightSemibold); }
.spark svg { display: block; overflow: visible; }
.spark-hist { fill: none; stroke: var(--colorNeutralForeground3); stroke-width: 1.5; }
.spark-fut { fill: none; stroke: var(--colorBrandForeground1); stroke-width: 2; stroke-dasharray: 4 3; }
.spark-split { stroke: var(--colorNeutralStroke2); stroke-width: 1; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--spacingVerticalL); margin-top: var(--spacingVerticalL); }
.two-col .card + .card { margin-top: 0; }
.season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; }
.season-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.season-bar { width: 100%; max-width: 28px; background: var(--colorBrandBackground); border-radius: var(--borderRadiusSmall) var(--borderRadiusSmall) 0 0; min-height: 2px; }
.season-v, .season-m { font-size: var(--fontSizeBase100); line-height: 12px; color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .plan-head { display: none; }
  .plan-row > summary { grid-template-columns: 1fr 1fr 1fr; }
  .plan-row > summary .plan-name, .plan-row > summary .spark { grid-column: 1 / -1; }
  .plan-row > summary [data-label] { text-align: left; }
  .plan-row > summary [data-label]::before { content: attr(data-label); display: block; font-size: var(--fontSizeBase100); color: var(--colorNeutralForeground3); }
  .spark svg { width: 100%; }
}

/* ------------------------------------------------------------------ Channel charts
   Categorical slots in fixed order (validated: adjacent CVD ΔE ≥ 8.4, normal ≥ 19.3, light and dark). */
:root {
  --ch-1: #2a78d6; --ch-2: #eb6834; --ch-3: #1baf7a; --ch-4: #eda100; --ch-5: #e87ba4; --ch-6: #008300; --ch-7: #6250d6;
  --ch-8: #8a8886; --ch-9: #b3b3b3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ch-1: #3987e5; --ch-2: #d95926; --ch-3: #199e70; --ch-4: #c98500; --ch-5: #d55181; --ch-6: #008300; --ch-7: #9085e9;
    --ch-8: #8a8886; --ch-9: #666666;
  }
}
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: baseline; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); }
.legend-item { display: inline-flex; align-items: center; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--colorNeutralStroke3); stroke-width: 1; }
.chart .tick { font-size: 11px; fill: var(--colorNeutralForeground3); font-family: var(--fontFamilyBase); }
.chart .tick.faint { fill: var(--colorNeutralForeground4); font-size: 10px; }
.chart .hit { fill: transparent; }
.chart .bar { cursor: default; outline: none; }
.chart .bar:hover .hit, .chart .bar:focus .hit { fill: var(--colorSubtleBackgroundHover); }
.tooltip { position: absolute; pointer-events: none; min-width: 180px; padding: 8px 10px; border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1); box-shadow: var(--shadow16); font-size: var(--fontSizeBase200); z-index: 3; }
.tip-title { font-weight: var(--fontWeightSemibold); margin-bottom: 4px; }
.tip-row { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; color: var(--colorNeutralForeground2); }
.tip-total { border-top: 1px solid var(--colorNeutralStroke2); margin-top: 4px; padding-top: 4px; color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.share { height: 6px; background: var(--colorNeutralBackground4); border-radius: 3px; overflow: hidden; }
.share > span { display: block; height: 100%; background: var(--colorNeutralForeground3); border-radius: 3px; }
.total-row td { font-weight: var(--fontWeightSemibold); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom: 0; }
.delta { font-variant-numeric: tabular-nums; color: var(--colorNeutralForeground2); white-space: nowrap; }
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; }
.defs dt { font-weight: var(--fontWeightSemibold); }
.defs dd { margin: 0; color: var(--colorNeutralForeground2); }
@media (max-width: 640px) { .defs { grid-template-columns: 1fr; } .defs dd { margin-bottom: 8px; } }

.campaign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacingVerticalM) var(--spacingHorizontalL); }

/* ------------------------------------------------------------------ Login */

.login-card { max-width: 400px; margin: 64px auto; padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL); }
.login-card .stack { gap: var(--spacingVerticalM); }

@media (max-width: 640px) {
  .app-header .bar { gap: 0 var(--spacingHorizontalS); flex-wrap: wrap; height: auto; padding-top: var(--spacingVerticalS); }
  .app-header .tablist { order: 3; width: 100%; height: 40px; margin: 0 calc(-1 * var(--spacingHorizontalM)); }
  .app-user .name { display: none; }
  .btn { min-width: 0; }
  .text-title2 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); }
}