:root {
  color-scheme: dark;
  --font-size-adjust: 0px;

  /* Core surface */
  --ui-page-bg: radial-gradient(ellipse 82% 62% at 12% -16%, rgba(32, 76, 132, .04) 0%, rgba(17, 46, 88, .02) 46%, transparent 76%), linear-gradient(145deg, #0d1219 0%, #0b1016 56%, #080c12 100%);
  --ui-rail-bg: #151615;
  --ui-sidebar-bg: #1d1f1e;
  --ui-panel-bg: #1f2120;
  --ui-card-bg: #0f151b;
  --ui-card-hover-bg: #18212a;

  /* Text */
  --ui-text: #f0f2ef;
  --ui-text-muted: #9ca39e;
  --ui-text-quiet: #6f7771;
  --ui-text-inverse: #ffffff;

  /* Lines */
  --ui-line: #333735;
  --ui-line-soft: #2b2f2c;
  --ui-line-visible: rgba(171, 181, 174, .34);
  --ui-field-line: rgba(255, 255, 255, .13);

  /* Brand/action */
  --ui-accent: #3f9db5;
  --ui-accent-soft: rgba(63, 157, 181, .12);
  --ui-accent-line: rgba(63, 157, 181, .58);
  --ui-accent-strong: rgba(63, 157, 181, .72);
  --ui-action-bg: linear-gradient(135deg, #2f879a 0%, #246979 48%, #1c4e5b 100%);
  --ui-action-bg-hover: linear-gradient(135deg, #3b9db1 0%, #2d7b8c 48%, #1c4e5b 100%);
  --ui-action-border: #2f879a;
  --ui-action-shadow: 0 7px 18px rgba(28, 78, 91, .32), inset 0 1px rgba(255, 255, 255, .18);
  --ui-action-outline-text: #75c5d7;
  --ui-timer-running-bg: linear-gradient(135deg, #38201f 0%, #261c1c 100%);
  --ui-timer-running-bg-hover: linear-gradient(135deg, #4a2725 0%, #321f1e 100%);
  --ui-timer-running-border: #7d3635;
  --ui-timer-running-text: #ffd9d6;

  /* Typography */
  --ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-size-body: 12px;
  --ui-font-size-section: 12px;
  --ui-font-weight-section: 650;
  --ui-letter-spacing-section: .055em;

  /* Component geometry */
  --ui-control-height: 36px;
  --ui-text-block-height: 136px;
  --ui-document-block-min-height: 220px;
  --ui-section-gap: 28px;
  --ui-section-padding: 20px;
  --ui-section-content-gap: 16px;
  --ui-section-header-height: 28px;

  /* Radius */
  --ui-radius-xs: 5px;
  --ui-radius-sm: 6px;
  --ui-radius-md: 7px;
  --ui-radius-lg: 8px;
  --ui-radius-pill: 999px;

  /*
   * Master component library. New UI uses these semantic classes instead of
   * one-off button, field, heading and box rules.
   */
  --ui-button-height: var(--ui-control-height);
  --ui-button-padding-x: 13px;
  --ui-button-gap: 8px;
  --ui-button-font-size: 12px;
  --ui-button-font-weight: 400;
  /* Fields and standard buttons share one silhouette in paired controls. */
  --ui-button-radius: var(--ui-field-radius);
  --ui-button-compact-height: 28px;
  --ui-button-compact-padding-x: 8px;
  /* Compact only changes density, never the button's visual language. */
  --ui-button-compact-font-size: var(--ui-button-font-size);
  --ui-button-compact-radius: var(--ui-button-radius);
  --ui-button-primary-bg: var(--ui-action-bg);
  --ui-button-primary-bg-hover: var(--ui-action-bg-hover);
  --ui-button-primary-border: var(--ui-action-border);
  --ui-button-primary-text: var(--ui-text-inverse);
  --ui-button-outline-border: var(--ui-action-border);
  --ui-button-outline-text: var(--ui-action-outline-text);
  --ui-button-secondary-bg: #20231f;
  --ui-button-secondary-border: var(--ui-line);
  --ui-button-secondary-text: var(--ui-text-muted);
  --ui-field-height: var(--ui-control-height);
  --ui-field-padding-x: 11px;
  --ui-field-radius: var(--ui-radius-lg);
  --ui-field-bg: rgba(255, 255, 255, .025);
  --ui-heading-label-size: 10px;
  --ui-heading-label-weight: 600;
  --ui-heading-label-tracking: .055em;
  --ui-box-radius: var(--ui-radius-lg);
  --ui-card-border: var(--ui-line);
  --ui-card-radius: var(--ui-radius-lg);
  --ui-card-padding: 12px;
  --ui-card-shadow: none;
  --ui-card-gap: 10px;
  --ui-card-title-size: 13px;
  --ui-card-title-weight: 650;
  --ui-status-card-min-height: 104px;
  --ui-status-card-accent-width: 10px;
  --ui-status-card-ok: #53d28b;
  --ui-status-card-attention: #f4a62a;
  --ui-status-card-danger: #ef3e38;
  --ui-status-card-info: #4878ff;
  --ui-badge-padding-x: 5px;
  --ui-badge-height: 20px;
  --ui-badge-radius: var(--ui-radius-pill);
  --ui-badge-font-size: 10px;
  --ui-badge-font-weight: 400;
  --ui-badge-tracking: .04em;
  --ui-badge-neutral-bg: rgba(156, 163, 158, .12);
  --ui-badge-neutral-text: var(--ui-text-muted);
  --ui-badge-active-bg: var(--status-active-soft);
  --ui-badge-active-text: var(--status-active);
  --ui-badge-danger-bg: var(--tag-red);
  --ui-badge-danger-text: #efc2bd;
  --ui-badge-working-bg: rgba(175, 126, 43, .14);
  --ui-badge-working-text: #e9c77c;
  --ui-icon-size: 16px;
  --ui-icon-control-size: 34px;
  --ui-icon-color: currentColor;
  --ui-icon-muted-color: var(--ui-text-muted);
  --ui-surface-border: var(--ui-line);
  --ui-surface-bg: var(--ui-panel-bg);
  --ui-surface-radius: var(--ui-radius-lg);
  --ui-surface-padding: 12px;

  /* Component aliases used by current CRM CSS */
  --app: var(--ui-page-bg);
  --rail: var(--ui-rail-bg);
  --nav: var(--ui-sidebar-bg);
  --nav-soft: #282b29;
  --panel: var(--ui-panel-bg);
  --card: var(--ui-card-bg);
  --card-hover: var(--ui-card-hover-bg);
  --text: var(--ui-text);
  --muted: var(--ui-text-muted);
  --quiet: var(--ui-text-quiet);
  --line: var(--ui-line);
  --line-soft: var(--ui-line-soft);
  --accent: var(--ui-accent);
  --radius: var(--ui-radius-sm);
  --nav-attention-bg: #2a2d2b;
  --nav-attention-text: var(--ui-text-inverse);
  --active-filter: #a6d996;

  /* Buttons */
  --action-primary-bg: var(--ui-action-bg);
  --action-primary-border: var(--ui-action-border);
  --action-primary-text: var(--ui-text-inverse);
  --action-secondary-bg: #20231f;
  --action-secondary-border: var(--ui-line);
  --action-secondary-text: var(--ui-text-muted);

  /* Forms */
  --form-border: var(--ui-line-visible);
  --form-border-hover: rgba(171, 181, 174, .52);
  --form-border-focus: var(--ui-accent-strong);
  --form-bg: rgba(255, 255, 255, .026);
  --form-bg-focus: rgba(255, 255, 255, .04);
  --form-text: #eef4f0;
  --form-muted: var(--ui-text-muted);

  /* Menus/dropdowns */
  --menu-bg: #202220;
  --menu-border: var(--ui-line-visible);
  --menu-border-strong: rgba(171, 181, 174, .46);
  --menu-hover-bg: rgba(255, 255, 255, .045);
  --menu-active-bg: var(--ui-accent-soft);
  --menu-active-border: rgba(63, 157, 181, .52);
  --menu-text: #e7ece8;
  --menu-muted: var(--ui-text-muted);
  --menu-danger: #f0b8b3;
  --menu-radius: var(--ui-radius-lg);
  --menu-shadow: 0 18px 55px rgba(0, 0, 0, .42);

  /* Status */
  --status-active: #8fd6ad;
  --status-active-soft: rgba(143, 214, 173, .10);
  --status-active-line: rgba(143, 214, 173, .42);
  --green: #6fbf7b;
  --yellow: #d8b85c;
  --red: #e46b61;

  /* Tags */
  --tag-red: rgba(228, 107, 97, .18);
  --tag-orange: rgba(233, 148, 69, .17);
  --tag-yellow: rgba(216, 184, 92, .17);
  --tag-green: rgba(111, 191, 123, .15);
  --tag-emerald: rgba(48, 199, 141, .16);
  --tag-mint: rgba(154, 199, 188, .14);
  --tag-blue: rgba(101, 134, 255, .14);
  --tag-purple: rgba(167, 139, 250, .15);
  --tag-cyan: rgba(63, 157, 181, .15);
  --tag-gray: rgba(140, 147, 142, .12);
}

.ui-button {
  min-height: var(--ui-button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-gap);
  border: 1px solid var(--ui-button-secondary-border);
  border-radius: var(--ui-button-radius);
  /* Keep the leading edge stable; give every label 2 px more room on its trailing edge. */
  padding: 0 calc(var(--ui-button-padding-x) + 2px) 0 var(--ui-button-padding-x);
  color: var(--ui-button-secondary-text);
  background: var(--ui-button-secondary-bg);
  font: inherit;
  /* A view may use a local text face, but actions always use the CRM face. */
  font-family: var(--ui-font-family);
  font-size: calc(var(--ui-button-font-size) + var(--font-size-adjust, 0px));
  font-weight: var(--ui-button-font-weight);
  line-height: 1.2;
  white-space: nowrap;
}

.ui-button--primary {
  border-color: var(--ui-button-primary-border);
  color: var(--ui-button-primary-text);
  background: var(--ui-button-primary-bg);
  box-shadow: var(--ui-action-shadow);
}

.ui-button--primary:hover { background: var(--ui-button-primary-bg-hover); }
.ui-button--compact {
  min-height: var(--ui-button-compact-height);
  border-radius: var(--ui-button-compact-radius);
  padding: 0 calc(var(--ui-button-compact-padding-x) + 2px) 0 var(--ui-button-compact-padding-x);
  font-size: calc(var(--ui-button-compact-font-size) + var(--font-size-adjust, 0px));
}
.ui-button--outline {
  border-color: var(--ui-button-outline-border);
  color: var(--ui-button-outline-text);
  background: transparent;
}
.ui-button--outline:hover {
  color: var(--ui-text-inverse);
  background: var(--ui-accent-soft);
}
.ui-button--timer-running {
  border-color: var(--ui-timer-running-border);
  color: var(--ui-timer-running-text);
  background: var(--ui-timer-running-bg);
}
.ui-button--timer-running:hover { background: var(--ui-timer-running-bg-hover); }
.ui-button:focus-visible { outline: 2px solid var(--ui-accent-strong); outline-offset: 3px; }

.ui-field {
  min-height: var(--ui-field-height);
  border: 1px solid var(--ui-field-line);
  border-radius: var(--ui-field-radius);
  padding: 0 var(--ui-field-padding-x);
  color: var(--ui-text);
  background: var(--ui-field-bg);
  font: inherit;
  font-size: calc(var(--ui-font-size-body) + var(--font-size-adjust, 0px));
  line-height: 1.2;
}

.ui-section-heading {
  margin: 0;
  color: var(--ui-text-quiet);
  font-size: calc(var(--ui-heading-label-size) + var(--font-size-adjust, 0px));
  font-weight: var(--ui-heading-label-weight);
  line-height: 1.2;
  letter-spacing: var(--ui-heading-label-tracking);
  text-transform: uppercase;
}

.ui-box {
  border: 1px solid var(--ui-field-line);
  border-radius: var(--ui-box-radius);
  background: var(--ui-field-bg);
}

.ui-card {
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  padding: var(--ui-card-padding);
  background: var(--ui-card-bg);
  box-shadow: var(--ui-card-shadow);
}

.ui-card--stack {
  display: grid;
  gap: var(--ui-card-gap);
}

.ui-card-title {
  margin: 0;
  color: var(--ui-text);
  font-size: calc(var(--ui-card-title-size) + var(--font-size-adjust, 0px));
  font-weight: var(--ui-card-title-weight);
  line-height: 1.2;
}

/* Shared status, icon and surface primitives. */
.ui-badge {
  min-height: var(--ui-badge-height);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--ui-badge-radius);
  padding: 0 var(--ui-badge-padding-x);
  color: var(--ui-badge-neutral-text);
  background: var(--ui-badge-neutral-bg);
  font-size: calc(var(--ui-badge-font-size) + var(--font-size-adjust, 0px));
  font-weight: var(--ui-badge-font-weight);
  line-height: 1;
  letter-spacing: var(--ui-badge-tracking);
  white-space: nowrap;
}

.ui-badge--active {
  color: var(--ui-badge-active-text);
  background: var(--ui-badge-active-bg);
}

.ui-badge--danger {
  color: var(--ui-badge-danger-text);
  background: var(--ui-badge-danger-bg);
}

.ui-badge--working {
  color: var(--ui-badge-working-text);
  background: var(--ui-badge-working-bg);
}

.ui-badge--working .tag-dot { color: var(--ui-badge-working-text); }

.ui-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 var(--ui-icon-size);
  color: var(--ui-icon-color);
  fill: none;
  stroke: currentColor;
}

.ui-icon--muted { color: var(--ui-icon-muted-color); }

.ui-icon-button {
  width: var(--ui-icon-control-size);
  min-width: var(--ui-icon-control-size);
  min-height: var(--ui-icon-control-size);
  padding: 0;
}

.ui-surface {
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--ui-surface-radius);
  padding: var(--ui-surface-padding);
  background: var(--ui-surface-bg);
}