html {
  font-size: 16px;
}

@media (max-width: 1440px) {
  html {
    font-size: 13px;
  }
}

@media (max-width: 1280px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  html {
    font-size: 11px;
  }
}

@media (max-width: 47.5rem) {
  html {
    font-size: 10px;
  }
}

/* TTable is used only by the task table view. */
.ttable-original-host {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.ttable-original-host .tt-container {
  --tt-primary: var(--primary);
  --tt-primary-light: #8b5cf6;
  --tt-primary-dark: #5b21b6;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
}

.ttable-original-host .tt-header {
  min-height: 3.5rem;
  padding: 0.625rem 0.75rem;
  border-bottom-color: var(--border);
  background: var(--panel);
}

.ttable-original-host .tt-header-left,
.ttable-original-host .tt-header-right {
  gap: 0.45rem;
}

.ttable-original-host .tt-btn,
.ttable-original-host .tt-select,
.ttable-original-host .tt-search input {
  min-height: 2.125rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
}

.ttable-original-host .tt-count {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding-inline: 0.7rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.ttable-original-host .tt-canvas-table-panel {
  min-height: 18rem;
  border-top-color: var(--border);
  border-bottom-color: var(--border);
  background: var(--panel);
}

.ttable-original-host .tt-pagination {
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border-top: 0;
  background: var(--panel);
}

.ttable-original-host .tt-pagination-info {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.ttable-load-error {
  min-height: 16rem;
  display: grid;
  place-items: center;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 750;
}

[data-theme="dark"] .ttable-original-host,
[data-theme="dark"] .ttable-original-host .tt-header,
[data-theme="dark"] .ttable-original-host .tt-pagination {
  background: var(--panel);
}

@media (max-width: 47.5rem) {
  .ttable-original-host .tt-header {
    min-height: 3.25rem;
    padding: 0.5rem;
  }

  .ttable-original-host .tt-canvas-table-panel {
    min-height: 16rem;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 9px;
  }
}

@font-face {
  font-family: "FKGroteskNeue";
  src: url("/fonts/fk_grotesk_neue.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --sidebar-bg: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --control-bg: #f7faff;
  --input-bg: #ffffff;
  --line: rgba(31, 42, 55, 0.14);
  --line-soft: rgba(31, 42, 55, 0.1);
  --text: #414c5e;
  --muted: #607189;
  --label: #405168;
  --nav-text: #26384f;
  --nav-icon: #53657c;
  --section-label: #77869a;
  --card-detail: #53657c;
  --panel-title: #414c5e;
  --table-head: #53657c;
  --table-text: #132237;
  --shadow: 0 1.5rem 4.375rem rgba(15, 23, 42, 0.12);
  --primary: #7c3aed;
  --primary-strong: #6d28d9;
  --primary-soft: rgba(124, 58, 237, 0.18);
  --brand-mark: var(--primary);
  --brand-mark-text: var(--primary-strong);
  --chart-grid: rgba(31, 42, 55, 0.14);
  --chart-text: #53657c;
  --link: var(--primary);
  --bar-track: rgba(31, 42, 55, 0.1);
  --avatar-bg: #f1e9ff;
  --avatar-text: var(--primary-strong);
  --login-card-bg: rgba(255, 255, 255, 0.94);
  --tone-base: rgba(255, 255, 255, 0.92);
  --blue: #2563eb;
  --teal: #0ea5a4;
  --green: #2cc65d;
  --amber: #ff9e2c;
  --purple: #8b5cf6;
  --red: #ef4444;
}

[data-theme="dark"] {
  --bg: #06101a;
  --surface: #0d1826;
  --surface-2: #111e2d;
  --sidebar-bg: #081421;
  --topbar-bg: rgba(6, 16, 26, 0.88);
  --control-bg: #111f31;
  --input-bg: #0a1420;
  --line: rgba(155, 176, 205, 0.18);
  --line-soft: rgba(155, 176, 205, 0.13);
  --text: #edf4ff;
  --muted: #9fb1c9;
  --label: #c6d3e6;
  --nav-text: #d9e5f7;
  --nav-icon: #c9d8ec;
  --section-label: #74869e;
  --card-detail: #c5d3e7;
  --panel-title: #edf4ff;
  --table-head: #b9c8dc;
  --table-text: #eef5ff;
  --shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.36);
  --primary: #8b5cf6;
  --primary-strong: #a78bfa;
  --primary-soft: rgba(139, 92, 246, 0.2);
  --brand-mark: var(--primary);
  --brand-mark-text: var(--primary-strong);
  --chart-grid: rgba(155, 176, 205, 0.18);
  --chart-text: #c4d2e5;
  --link: var(--primary-strong);
  --bar-track: rgba(155, 176, 205, 0.12);
  --avatar-bg: #1d3151;
  --avatar-text: #ffffff;
  --login-card-bg: rgba(13, 24, 38, 0.92);
  --tone-base: rgba(17, 30, 45, 0.8);
  --blue: #3b82f6;
  --teal: #14b8a6;
}

* {
  box-sizing: border-box;
}

::placeholder {
  color: var(--muted);
  opacity: 1; /* Garante a mesma opacidade em todos os navegadores */
}

.visually-hidden {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: -0.0625rem !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "FKGroteskNeue", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-user-select: text;
  user-select: text;
}

::selection {
  background: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--text);
}

body :where(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span:not(.material-symbols-rounded),
  strong,
  small,
  code,
  pre,
  td,
  th,
  dt,
  dd,
  li,
  blockquote,
  input,
  textarea,
  [contenteditable="true"],
  .cm-content,
  .cm-line,
  .api-response-panel,
  .log-json-panel,
  .task-detail-editor-panel,
  .routing-field-help-content
) {
  -webkit-user-select: text;
  user-select: text;
}

body :where(
  button,
  button *,
  select,
  option,
  .material-symbols-rounded,
  .nav-item,
  .nav-item *,
  .api-response-resizer,
  .inspection-drawer-resizer,
  .td-table-resize-handle,
  canvas,
  .drawflow-canvas,
  .drawflow-canvas *,
  .drawflow-controls,
  .drawflow-controls *
) {
  -webkit-user-select: none;
  user-select: none;
}

button,
input,
select {
  font: inherit;
}

input[type="checkbox"] {
  accent-color: var(--primary);
}

button {
  cursor: pointer;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.hidden {
  display: none !important;
}

.boot-loading-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(120deg, var(--primary-soft), transparent 36%),
    var(--bg);
}

.boot-loading-spinner {
  width: 5rem;
  height: 5rem;
  display: block;
  border: 0.5rem solid rgba(124, 58, 237, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: boot-loading-spin 0.9s linear infinite;
}

@keyframes boot-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(120deg, var(--primary-soft), transparent 36%),
    var(--bg);
}

.login-card {
  width: min(35rem, 100%);
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  padding: 2.125rem;
  background: var(--login-card-bg);
  box-shadow: var(--shadow);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-row strong {
  display: block;
  font-size: 1.125rem;
}

.brand-row span {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

.brand-mark {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border: 0.125rem solid var(--brand-mark);
  border-radius: 0.5rem;
  color: var(--brand-mark-text);
  font-weight: 800;
  align-self: center;
}

.login-card h1 {
  margin: 2.125rem 0 0.625rem;
  font-size: 2.875rem;
  line-height: 1;
}

.login-card p {
  margin: 0 0 1.75rem;
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}

.login-development-button {
  width: 100%;
  min-height: 2.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 45%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
}

.login-development-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
}

.login-development-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.login-form label {
  color: var(--label);
  font-size: 0.8125rem;
  font-weight: 700;
}

.input-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.625rem;
}

.input-line input,
select {
  min-height: 2.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  color: var(--text);
  background: var(--input-bg);
  padding: 0 0.875rem;
  outline: none;
}

.input-line input:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.input-line button {
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.4375rem;
  background: var(--primary);
  color: white;
  font-weight: 800;
  padding: 0 1.25rem;
}

.notice {
  min-height: 1.5rem;
  margin-top: 1.125rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.notice.ok {
  color: var(--green);
}

.notice.error {
  color: var(--red);
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17.625rem 1fr;
  transition: grid-template-columns 180ms ease;
}

.app.sidebar-collapsed {
  grid-template-columns: 5.125rem 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 301;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 0.0625rem solid var(--line);
  background: var(--sidebar-bg);
  padding: 1.5rem 1rem;
  overflow: visible;
  gap: 0.5rem;
}

.sidebar-brand {
  display: grid;
  grid-template-columns: 2.625rem 1fr 2.625rem;
  padding: 0 0 1.5rem;
  min-width: 0;
}

.brand-copy,
.user-copy,
.nav-label,
.nav p {
  transition: opacity 140ms ease, width 140ms ease;
  line-height: 1.5;
}

.sidebar-toggle {
  justify-self: end;
}

.nav {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
  scrollbar-color: rgba(155, 176, 205, 0.38) transparent;
}

.nav p {
  margin: 1.375rem 0.625rem 0.5625rem;
  color: var(--section-label);
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 800;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 2.625rem;
  padding: 0 0.75rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 0.4375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.nav-item span {
  width: 1.375rem;
  height: 1.375rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--nav-icon);
  font-size: 1.3125rem;
  font-weight: 500;
}

.nav-item.active,
.nav-item:hover {
  background: var(--primary);
  color: white;
}

.nav-item.active span,
.nav-item:hover span {
  color: white;
}

.user-menu {
  position: relative;
  z-index: 80;
  min-width: 0;
}

.mobile-account-actions {
  display: contents;
}

.user-box {
  width: 100%;
  display: grid;
  grid-template-columns: 2.625rem 1fr auto;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: var(--control-bg);
  color: var(--text);
  min-width: 0;
  text-align: left;
  cursor: pointer;
}

.avatar {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-weight: 800;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 14%, transparent);
}

.avatar.has-image {
  color: transparent;
}

.user-box strong {
  display: block;
  font-size: 0.875rem;
}

.user-box span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-box-chevron {
  color: var(--muted);
  font-size: 1.25rem;
  transition: transform var(--ease-ui), color var(--ease-ui);
}

.user-box[aria-expanded="true"] .user-box-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 90;
  display: grid;
  gap: 0.3125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.375rem;
  box-shadow: 0 1.125rem 2.625rem rgba(15, 23, 42, 0.16);
}

.user-dropdown button {
  min-width: 0;
  height: 2.375rem;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  padding: 0 0.5625rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: left;
}

.user-dropdown button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.user-dropdown .material-symbols-rounded {
  font-size: 1.125rem;
}

.user-dropdown-separator {
  height: 0.0625rem;
  margin: 0.1875rem 0.125rem;
  background: var(--line-soft);
}

.icon-button {
  min-width: 2.625rem;
  height: 2.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  background: var(--control-bg);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.icon-button .material-symbols-rounded {
  font-size: 1.375rem;
}

.app.sidebar-collapsed .sidebar {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.app.sidebar-collapsed .sidebar-brand {
  grid-template-columns: 2.625rem;
  justify-content: center;
  gap: 0;
}

.app.sidebar-collapsed .brand-copy,
.app.sidebar-collapsed .user-copy,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav p {
  display: none;
}

.app.sidebar-collapsed .brand-copy,
.app.sidebar-collapsed .user-copy,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav p {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.app.sidebar-collapsed .nav {
  padding-right: 0;
  padding-top: 0px;
}

.app.sidebar-collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0;
}

.app.sidebar-collapsed .user-box {
  grid-template-columns: 2.625rem;
  justify-content: center;
  padding: 0.625rem;
}

.app.sidebar-collapsed .user-copy,
.app.sidebar-collapsed .user-box-chevron {
  display: none;
}

.app.sidebar-collapsed .user-dropdown {
  left: 0;
  right: auto;
  min-width: 11.875rem;
}

.content {
  min-width: 0;
}

.topbar {
  min-height: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border-bottom: 0.0625rem solid var(--line);
  padding: 1.25rem 1.5rem;
  background: var(--topbar-bg);
  backdrop-filter: blur(1.125rem);
  position: sticky;
  top: 0;
  z-index: 4;
}

.topbar h2 {
  margin: 0 0 0.25rem;
  font-size: 1.625rem;
}

.topbar p {
  margin: 0;
  color: var(--muted);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.period {
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  background: var(--control-bg);
  padding: 0 0.875rem;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.period small {
  color: var(--muted);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(10.625rem, 1fr));
  gap: 1.125rem;
  padding: 1.375rem 1.5rem;
}

.stat-card {
  min-height: 8.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  padding: 1.125rem;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}

.stat-card h3 {
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.stat-card strong {
  display: block;
  font-size: 1.9375rem;
  line-height: 1;
}

.stat-card p {
  margin: 0.75rem 0 0;
  color: var(--card-detail);
  font-size: 0.8125rem;
}

.stat-card canvas {
  position: absolute;
  right: 0.8125rem;
  bottom: 0.875rem;
  width: 7.25rem;
  height: 2.625rem;
}

.stat-card .round {
  position: absolute;
  right: 1.125rem;
  top: 1.125rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 900;
}

.tone-primary {
  background: linear-gradient(135deg, var(--primary-soft), var(--tone-base));
}

.tone-primary h3 {
  color: var(--primary);
}

.tone-blue {
  background: linear-gradient(135deg, var(--primary-soft), var(--tone-base));
}

.tone-blue h3 {
  color: var(--primary);
}

.tone-green {
  background: linear-gradient(135deg, rgba(44, 198, 93, 0.18), var(--tone-base));
}

.tone-green h3 {
  color: var(--green);
}

.tone-amber {
  background: linear-gradient(135deg, rgba(255, 158, 44, 0.18), var(--tone-base));
}

.tone-amber h3 {
  color: var(--amber);
}

.tone-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), var(--tone-base));
}

.tone-purple h3 {
  color: var(--purple);
}

.tone-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), var(--tone-base));
}

.tone-red h3 {
  color: var(--red);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.98fr;
  gap: 1.125rem;
  padding: 0 1.5rem 1.75rem;
}

.page-view {
  min-width: 0;
}

.overview-shell {
  display: grid;
  gap: 1rem;
  padding: var(--page-pad-y) var(--page-pad-x) 1.75rem;
}

.overview-hero {
  min-height: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 58%),
    var(--surface);
  padding: 1.125rem;
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.05);
}

.overview-hero span,
.overview-card-head span {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-hero h2 {
  margin: 0.25rem 0 0;
  color: var(--panel-title);
  font-size: 1.5rem;
  line-height: 1.12;
}

.overview-hero p {
  max-width: 47.5rem;
  margin: 0.375rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.overview-health-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.overview-health-strip div {
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.5rem 0.625rem;
}

.overview-health-strip .material-symbols-rounded {
  grid-row: span 2;
  color: var(--primary);
  font-size: 1.375rem;
}

.overview-health-strip small {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 750;
  line-height: 1.15;
}

.overview-health-strip strong {
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.1;
}

.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(9.375rem, 1fr));
  gap: 0.75rem;
}

.overview-kpi {
  min-width: 0;
  min-height: 7rem;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  padding: 0.875rem;
  text-align: left;
  transition:
    border-color var(--ease-ui),
    box-shadow var(--ease-ui),
    transform var(--ease-ui);
}

.overview-kpi:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: 0 0.875rem 1.875rem rgba(80, 45, 140, 0.12);
  transform: translateY(-0.0625rem);
}

.overview-kpi span {
  max-width: calc(100% - 1.875rem);
  color: var(--label);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-kpi strong {
  color: var(--panel-title);
  font-size: 1.75rem;
  line-height: 1;
}

.overview-kpi p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7375rem;
  line-height: 1.35;
}

.overview-kpi i {
  position: absolute;
  right: 0.875rem;
  top: 0.875rem;
  width: 0.625rem;
  height: 2.375rem;
  border-radius: 62.4375rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.92fr) minmax(20rem, 0.92fr);
  gap: 1rem;
  align-items: stretch;
}

.overview-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.875rem;
  height: 100%;
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.05);
}

.overview-card .chart-medium {
  min-height: 15.25rem;
  height: 100%;
}

.overview-card-wide {
  grid-column: span 2;
}

.overview-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.overview-card-head h3 {
  margin: 0.1875rem 0 0;
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.25;
}

.google-chart {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  overflow: hidden;
}

.chart-tall {
  height: 19.5rem;
}

.chart-medium {
  height: 15.25rem;
}

.chart-empty {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  color: var(--muted);
  text-align: center;
}

.chart-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 2rem;
}

.chart-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.fallback-chart {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem 0.5rem;
}

.fallback-chart svg {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.fallback-chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.fallback-chart-label {
  fill: var(--chart-text);
  font-size: 0.625rem;
  font-weight: 700;
}

.fallback-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
}

.fallback-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.fallback-chart-legend i,
.fallback-donut-list i {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 62.4375rem;
}

.fallback-donut {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
}

.fallback-donut-ring {
  width: min(9.375rem, 100%);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 62.4375rem;
  box-shadow: inset 0 0 0 0.0625rem var(--line-soft);
}

.fallback-donut-ring > div {
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  text-align: center;
}

.fallback-donut-ring strong {
  display: block;
  color: var(--panel-title);
  font-size: 1.25rem;
  font-weight: 950;
}

.fallback-donut-ring span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.fallback-donut-list,
.fallback-flow-list,
.fallback-hbar-list {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.fallback-donut-list button,
.fallback-flow-list button,
.fallback-hbar-list button {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--ease-ui), transform var(--ease-ui), box-shadow var(--ease-ui);
}

.fallback-donut-list button:hover,
.fallback-flow-list button:hover,
.fallback-hbar-list button:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: 0 0.5rem 1.375rem rgba(124, 58, 237, 0.09);
  transform: translateY(-0.0625rem);
}

.fallback-donut-list button {
  min-height: 2.125rem;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5625rem;
  text-align: left;
}

.fallback-donut-list span,
.fallback-flow-list span,
.fallback-flow-list strong,
.fallback-hbar-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fallback-donut-list span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
}

.fallback-donut-list strong,
.fallback-hbar-list strong,
.fallback-flow-list b {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 950;
}

.fallback-flow-list,
.fallback-hbar-list {
  height: 100%;
  align-content: center;
  padding: 0.75rem;
}

.fallback-flow-list button {
  min-height: 2.375rem;
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.65fr) minmax(5.625rem, 1fr) minmax(5.625rem, 1fr) auto;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.5rem 0.5625rem;
  text-align: left;
}

.fallback-flow-list span {
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
}

.fallback-flow-list i,
.fallback-hbar-list i {
  height: 0.4375rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: var(--bar-track);
}

.fallback-flow-list em,
.fallback-hbar-list em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--green)));
}

.fallback-flow-list strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
  font-weight: 850;
}

.fallback-flow-list b {
  justify-self: end;
}

.fallback-hbar-list button {
  min-height: 2.375rem;
  display: grid;
  grid-template-columns: minmax(3.625rem, 0.52fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.5625rem;
  text-align: left;
}

.fallback-hbar-list span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
}

.overview-legend {
  display: grid;
  gap: 0.4375rem;
}

.overview-legend div {
  min-height: 1.75rem;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.overview-legend i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.1875rem;
}

.overview-legend strong {
  color: var(--panel-title);
  font-size: 0.75rem;
}

.overview-mini-list {
  display: grid;
  gap: 0.5rem;
}

.overview-mini-list button,
.overview-empty-line {
  width: 100%;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: inherit;
  font: inherit;
  padding: 0.5rem 0.625rem;
  text-align: left;
}

.overview-mini-list button {
  cursor: pointer;
}

.overview-mini-list button:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--control-bg));
}

.overview-mini-list .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.25rem;
}

.overview-mini-list strong {
  display: block;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.7812rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-mini-list small {
  display: block;
  overflow: hidden;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.7063rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-empty-line {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-size: 0.75rem;
}

.overview-segment {
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.1875rem;
}

.overview-segment button {
  min-height: 1.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.5625rem;
  font-size: 0.7188rem;
  font-weight: 800;
}

.overview-segment button.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 0.375rem 0.75rem rgba(80, 45, 140, 0.08);
}

.overview-drill-panel {
  overflow: auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.overview-drill-table {
  width: 100%;
  min-width: 47.5rem;
  border-collapse: collapse;
}

.overview-drill-table th,
.overview-drill-table td {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}

.overview-drill-table th {
  background: var(--control-bg);
  color: var(--table-head);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-drill-table td strong {
  display: block;
  color: var(--panel-title);
  font-weight: 800;
}

.overview-drill-table td span:not(.badge) {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(22.5rem, 0.9fr) minmax(28.75rem, 1.35fr);
  gap: 1.125rem;
  padding: 1.375rem 1.5rem 1.75rem;
}

.page-panel-full {
  grid-column: 1 / -1;
}

.panel {
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 1.125rem;
  min-width: 0;
}

.panel-table {
  grid-column: span 2;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.panel h3,
.panel-head h3 {
  margin: 0;
  color: var(--panel-title);
  font-size: 0.8125rem;
  text-transform: uppercase;
}

.panel select {
  min-height: 2.125rem;
  font-size: 0.75rem;
}

.donut-row {
  display: grid;
  grid-template-columns: minmax(10.625rem, 15rem) 1fr;
  gap: 1.125rem;
  align-items: center;
}

.legend,
.process-list,
.alerts,
.schedule-list {
  display: grid;
  gap: 0.75rem;
}

.legend-item,
.process-item,
.alert-item,
.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.625rem;
}

.legend-item:last-child,
.process-item:last-child,
.alert-item:last-child,
.schedule-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.1875rem;
}

.legend-item strong,
.process-item strong,
.alert-item strong,
.schedule-item strong {
  font-size: 0.8125rem;
  font-weight: 700;
}

.legend-item span,
.process-item span,
.alert-item span,
.schedule-item span {
  color: var(--muted);
  font-size: 0.75rem;
}

.process-time {
  font-weight: 800;
}

.text-green {
  color: var(--green);
}

.text-amber {
  color: var(--amber);
}

.text-red {
  color: var(--red);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 56.25rem;
}

th,
td {
  padding: 0.75rem 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  text-align: left;
  font-size: 0.8125rem;
  white-space: nowrap;
}

th {
  color: var(--table-head);
  font-weight: 800;
}

td {
  color: var(--table-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  border-radius: 0.375rem;
  padding: 0 0.5625rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.badge.completed {
  color: #65e68d;
  background: rgba(44, 198, 93, 0.18);
}

.badge.processing {
  color: #ffb45a;
  background: rgba(255, 158, 44, 0.18);
}

.badge.waiting {
  color: #b292ff;
  background: rgba(139, 92, 246, 0.18);
}

.badge.error {
  color: #ff7777;
  background: rgba(239, 68, 68, 0.18);
}

.badge.info {
  color: var(--blue);
  background: rgba(37, 99, 235, 0.14);
}

.badge.warning {
  color: var(--amber);
  background: rgba(255, 158, 44, 0.18);
}

.badge.success {
  color: var(--green);
  background: rgba(44, 198, 93, 0.18);
}

.badge.pendente,
.badge.inativa {
  color: var(--amber);
  background: rgba(255, 158, 44, 0.18);
}

.badge.falha {
  color: var(--red);
  background: rgba(239, 68, 68, 0.18);
}

.badge.executado,
.badge.ativa,
.badge.concluida {
  color: var(--green);
  background: rgba(44, 198, 93, 0.18);
}

.badge.aguardando {
  color: var(--purple);
  background: rgba(139, 92, 246, 0.18);
}

.table-action {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  color: var(--text);
  background: var(--control-bg);
  font-size: 0.6875rem;
  font-weight: 900;
}

.table-link-action {
  max-width: 100%;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--panel-title);
  padding: 0;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.table-link-action:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--link);
  padding: 0;
  font-size: 0.8125rem;
}

.primary-button,
.secondary-button {
  min-height: 2.5rem;
  border-radius: 0.4375rem;
  padding: 0 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 0.5rem;
}

.primary-button {
  border: 0;
  background: var(--primary);
  color: white;
}

.secondary-button {
  border: 0.0625rem solid var(--line);
  background: var(--control-bg);
  color: var(--text);
}

.panel-table .link-button {
  margin-top: 0.875rem;
}

.alert-item {
  grid-template-columns: 0.875rem 1fr auto;
  align-items: start;
}

.alert-mark {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-top: 0.25rem;
}

.alert-item p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.compact-panel {
  min-height: 10rem;
}

.compact-panel h3 {
  margin-bottom: 1rem;
}

.resource-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.75rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8125rem;
  font-size: 0.8125rem;
}

.bar {
  height: 0.5rem;
  border-radius: 6.1875rem;
  background: var(--bar-track);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.metric {
  min-width: 0;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.metric strong {
  display: block;
  font-size: 1.5rem;
}

.schedule-item {
  grid-template-columns: 1fr auto;
}

.api-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.api-form label {
  display: grid;
  gap: 0.4375rem;
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 800;
}

.api-form input,
.api-form textarea,
.api-form select {
  width: 100%;
  min-height: 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.75rem;
  outline: none;
}

.api-form textarea {
  min-height: 6rem;
  padding: 0.625rem 0.75rem;
  resize: vertical;
}

.api-form input:focus,
.api-form textarea:focus,
.api-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.form-wide,
.form-actions {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.inline-notice {
  margin-top: 0.75rem;
}

.api-list,
.routes-grid,
.logs-list,
.demand-list {
  display: grid;
  gap: 0.75rem;
}

.api-card,
.route-card,
.log-card {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--control-bg);
  padding: 0.875rem;
}

.logs-panel-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}

.logs-panel-head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.7812rem;
}

.logs-filter-bar {
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.logs-filter-bar label {
  display: grid;
  gap: 0.3125rem;
  color: var(--label);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.logs-filter-bar select,
.logs-filter-bar input {
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.625rem;
  font-size: 0.75rem;
}

.logs-filter-bar select {
  min-width: 10.75rem;
}

#logDemandFilter,
#logRouteFilter {
  min-width: 13.75rem;
}

.logs-filter-bar > button {
  min-height: 2.125rem;
  align-self: end;
}

.logs-filter-bar input {
  width: 8.25rem;
}

.logs-filter-bar select:focus,
.logs-filter-bar input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.logs-pagination {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.logs-pagination > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.api-card-head,
.route-card-head,
.log-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.log-card {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color var(--ease-ui),
    background-color var(--ease-ui),
    box-shadow var(--ease-ui),
    transform var(--ease-ui);
}

.log-card:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--control-bg));
  box-shadow: inset 0.1875rem 0 0 var(--primary);
}

.log-card:focus-visible {
  outline: 0.1875rem solid var(--primary-soft);
  outline-offset: 0.125rem;
}

.api-card h4,
.route-card h4,
.log-card h4 {
  margin: 0;
  font-size: 0.9375rem;
}

.api-card p,
.route-card p,
.log-card p {
  margin: 0.375rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.log-card-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-card-message.is-collapsed {
  display: block;
  max-height: 3em;
  overflow: hidden;
}

.log-card-message.is-expanded {
  display: block;
  max-height: none;
}

.log-message-toggle {
  margin-top: 0.25rem;
  min-height: auto;
  padding: 0;
  font-size: 0.7188rem;
  font-weight: 700;
}

.log-card-foot {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.32fr) minmax(0, 0.68fr);
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.7188rem;
}

.log-card-foot > span {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.log-card-foot-text {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-card-foot .material-symbols-rounded {
  color: var(--primary);
  font-size: 0.9375rem;
}

.log-empty {
  min-height: 13.75rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--muted);
  text-align: center;
  padding: 1.5rem;
}

.log-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.875rem;
}

.log-empty strong {
  color: var(--panel-title);
}

.api-card code,
.route-card code {
  display: block;
  margin-top: 0.5rem;
  color: var(--text);
  background: var(--surface);
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  padding: 0.5rem;
  overflow-wrap: anywhere;
}


.mini-button {
  min-height: 1.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 0.625rem;
}

.api-workbench {
  height: calc(100vh - 4.75rem);
  min-height: 51.25rem;
  display: grid;
  grid-template-columns: minmax(17.5rem, 20.625rem) minmax(0, 1fr);
  gap: 0.875rem;
  padding: var(--page-pad-y) var(--page-pad-x);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.055), transparent 19.375rem),
    var(--bg);
}

.api-collection,
.api-request-console {
  min-width: 0;
  min-height: 0;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 95%, var(--control-bg));
  box-shadow: 0 1.125rem 3.125rem rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.api-request-console {
  position: relative;
}

.api-console-empty-state {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  background:
    radial-gradient(circle at 24% 12%, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--control-bg) 72%, var(--surface))),
    var(--surface);
  padding: 1.75rem;
  text-align: center;
}

.api-request-console.is-empty .api-console-empty-state {
  display: grid;
}

.api-request-console.is-empty .api-request-form,
.api-request-console.is-empty .api-response-resizer,
.api-request-console.is-empty .api-response-panel {
  visibility: hidden;
  pointer-events: none;
}

.api-console-empty-state > .material-symbols-rounded {
  width: 3.625rem;
  height: 3.625rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 1.125rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.875rem;
}

.api-console-empty-state strong {
  color: var(--panel-title);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.18;
}

.api-console-empty-state p {
  max-width: 39rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.api-console-empty-state div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.api-collection {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  padding: 0.75rem;
}

.api-collection-head {
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.125rem 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.api-collection-mark {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(124, 58, 237, 0.24);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.api-collection-head span:not(.api-collection-mark):not(.api-collection-count) {
  display: block;
  color: var(--primary);
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.api-collection-head strong {
  display: block;
  overflow: hidden;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-collection-count {
  min-width: 1.875rem;
  min-height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0 0.5rem;
}

.api-collection-tools {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.25rem;
  margin: 0.75rem 0 0.5rem;
  align-items: center;
}

.api-collection-tools .icon-button {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
}

.api-collection-tools .icon-button .material-symbols-rounded {
  font-size: 1rem;
}

.api-search-field {
  min-width: 0;
  min-height: var(--control-h);
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
}

.api-search-field .material-symbols-rounded {
  justify-self: center;
  font-size: 1.125rem;
}

.api-search-field input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 0 0.625rem 0 0;
  font-size: 0.7812rem;
}

.api-new-button {
  width: 100%;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 0.0625rem solid rgba(124, 58, 237, 0.24);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 64%, var(--surface));
  color: var(--primary);
  font-size: 0.7812rem;
  font-weight: 800;
}

.api-new-button:hover {
  border-color: rgba(124, 58, 237, 0.44);
  background: var(--primary);
  color: #fff;
}

.api-workbench .api-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow: auto;
  padding: 0 0.125rem 0.125rem 0;
}

.api-workbench .api-card {
  display: grid;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 0.6875rem;
  background: var(--surface);
  box-shadow: 0 0.625rem 1.875rem rgba(15, 23, 42, 0.045);
}

.api-workbench .api-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
}

.api-workbench .api-card.is-active {
  border-color: rgba(124, 58, 237, 0.54);
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.09), transparent 64%),
    var(--surface);
  box-shadow:
    inset 0.1875rem 0 0 var(--primary),
    0 0 0 0.1875rem rgba(124, 58, 237, 0.11),
    0 1rem 2.25rem rgba(80, 45, 140, 0.13);
}

.api-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.875rem minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.api-method-pill {
  min-height: 1.6875rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0;
}

.api-method-pill.method-get {
  background: #16a34a;
}

.api-method-pill.method-post {
  background: var(--primary);
}

.api-method-pill.method-put,
.api-method-pill.method-patch {
  background: #2563eb;
}

.api-method-pill.method-delete {
  background: var(--red);
}

.api-method-pill.method-head,
.api-method-pill.method-options {
  background: #64748b;
}

.api-card-main h4 {
  overflow: visible;
  margin: 0;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-card-main p {
  overflow: hidden;
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-request-console {
  display: grid;
  grid-template-rows: minmax(32.5rem, 1fr) minmax(17.5rem, 0.55fr);
}

.api-request-form {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem;
  overflow: auto;
  overflow-x: hidden;
}

.api-request-head,
.api-request-line,
.api-config-tabs,
.api-editor-grid,
.api-response-grid {
  min-width: 0;
  display: grid;
  gap: 0.625rem;
}

.api-request-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.api-request-title {
  min-width: 0;
}

.api-request-kicker,
.api-request-form label span,
.api-response-panel label > span,
.api-response-panel header span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.api-status-cluster {
  display: flex;
  align-items: end;
  gap: 0.5rem;
}

.api-request-line {
  grid-template-columns: 7.375rem minmax(0, 1fr);
  align-items: stretch;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.5rem;
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.055);
}

.api-url-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(9.375rem, 0.9fr) minmax(7.5rem, 1fr);
  gap: 0;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
}

.api-url-fields input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.api-url-fields input + input {
  border-left: 0.0625rem solid var(--line-soft) !important;
}

.api-tabbar,
.api-response-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.api-tabbar span,
.api-response-tabs span {
  position: relative;
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 0.625rem;
  white-space: nowrap;
}

.api-tabbar span.is-active,
.api-response-tabs span.is-active {
  color: var(--primary);
}

.api-tabbar span.is-active::after,
.api-response-tabs span.is-active::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: -0.0625rem;
  left: 0.5rem;
  height: 0.125rem;
  border-radius: 0.125rem 0.125rem 0 0;
  background: var(--primary);
}

.api-config-tabs {
  grid-template-columns: minmax(7.5rem, 0.7fr) minmax(10.625rem, 1fr) minmax(6.875rem, 0.65fr) minmax(10.625rem, 1.1fr);
  align-items: end;
}

.api-editor-grid,
.api-response-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.api-request-form label,
.api-response-panel label {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
  color: var(--label);
}

.api-request-form input,
.api-request-form select,
.api-request-form textarea,
.api-response-panel textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.6875rem;
  font-size: 0.8rem;
}

.api-request-form select {
  font-weight: 800;
}

.api-request-form textarea,
.api-response-panel textarea {
  min-height: 16.25rem;
  padding: 0.8125rem;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7688rem;
  line-height: 1.55;
  tab-size: 2;
}

.api-editor-card {
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.api-editor-card > span {
  min-height: 2.375rem;
  display: flex !important;
  align-items: center;
  gap: 0.4375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0 0.75rem;
}

.api-editor-card > span .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.0625rem;
}

.api-editor-card textarea {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--input-bg) 92%, var(--control-bg));
  box-shadow: none;
}

.api-request-form input:focus,
.api-request-form select:focus,
.api-request-form textarea:focus,
.api-response-panel textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.api-editor-card textarea:focus {
  box-shadow: inset 0 0 0 0.125rem rgba(124, 58, 237, 0.28);
}

.api-response-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.625rem;
  border-top: 0.0625rem solid var(--line);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.045), transparent 11.25rem),
    var(--control-bg);
  padding: 0.875rem 1rem;
  overflow: auto;
  overflow-x: hidden;
}

.api-response-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.api-response-panel header strong {
  display: block;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.875rem;
}

.api-response-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.api-response-meta span {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 820;
  text-transform: none;
}

.api-response-meta .ok {
  color: var(--green);
}

.api-response-meta .error {
  color: var(--red);
}

/* Integrations request-builder skin */
.content.integrations-builder-mode {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.content.integrations-builder-mode > .topbar {
  display: none;
}

.content.integrations-builder-mode .topbar h2 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--panel-title);
}

.content.integrations-builder-mode .topbar p {
  font-size: 0.75rem;
}

.content.integrations-builder-mode .page-view:not(.hidden) {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.content.integrations-builder-mode .toolbar {
  gap: 0.4375rem;
}

.api-workbench {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 18.25rem minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-top: 0;
  background: var(--surface);
}

.api-collection,
.api-request-console {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.api-collection {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-right: 0.0625rem solid var(--line);
  padding: 0;
}

.api-collection-head {
  min-height: 3.625rem;
  grid-template-columns: 2.125rem minmax(0, 1fr) auto;
  gap: 0.5625rem;
  border-bottom: 0.0625rem solid var(--line);
  padding: 0.6875rem 0.875rem;
}

.api-collection-mark {
  width: 2.125rem;
  height: 2.125rem;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  color: var(--primary);
  font-size: 1.1875rem;
}

.api-collection-head span:not(.api-collection-mark):not(.api-collection-count) {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.0375rem;
}

.api-collection-head strong {
  margin-top: 0.0625rem;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 850;
}

.api-collection-count {
  min-width: 1.75rem;
  min-height: 1.5rem;
  border-color: var(--line);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.6875rem;
}

.api-collection-tools {
  margin: 0;
  padding: 0.75rem 0.875rem 0.5rem;
}

.api-search-field {
  min-height: 2.25rem;
  border-color: var(--line);
  border-radius: 0.5rem;
  background: var(--control-bg);
}

.api-search-field input {
  font-size: 0.7812rem;
}

.api-search-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem rgba(124, 58, 237, 0.1);
}

.api-new-button {
  min-height: 2.25rem;
  margin: 0 0.875rem 0.5625rem;
  width: calc(100% - 1.75rem);
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
  font-size: 0.7812rem;
  box-shadow: none;
}

.api-workbench .api-list {
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.5rem 0.625rem 1rem;
  scroll-padding: 0.5rem;
}

.api-folder-row {
  width: 100%;
  min-height: 2.125rem;
  display: grid;
  grid-template-columns: 1.125rem 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.375rem 0 0;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.api-folder-row:hover {
  background: color-mix(in srgb, var(--primary-soft) 48%, transparent);
}

.api-folder-row .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}

.api-folder-row .api-folder-chevron {
  color: var(--muted);
  font-size: 1.0625rem;
  transition: transform 0.16s ease;
}

.api-folder-row:not(.is-collapsed) .api-folder-chevron {
  transform: translateY(0.0625rem);
}

.api-folder-content {
  display: grid;
  gap: 0.5rem;
}

.api-folder-content.is-collapsed {
  display: none;
}

.api-folder-row strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  letter-spacing: 0.0344rem;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-folder-row small {
  min-width: 1.5rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  padding: 0.125rem 0.4375rem;
}

.api-folder-row.is-general {
  color: var(--primary);
}

.api-folder-row.is-general strong,
.api-folder-row.is-general .api-folder-icon {
  color: var(--primary);
}

.api-folder-empty {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  margin: 0 0 0.125rem;
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.5rem;
  color: var(--muted);
  padding: 0 0.625rem 0 2.1875rem;
  font-size: 0.7188rem;
}

.api-workbench .api-card {
  position: relative;
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "meta";
  align-items: center;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui),
    color var(--ease-ui);
}

.api-workbench .api-card:hover {
  z-index: 1;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  background: var(--control-bg);
  box-shadow: inset 0.1875rem 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.api-workbench .api-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  box-shadow: inset 0.1875rem 0 0 var(--primary);
}

.api-card-main {
  grid-area: main;
  width: 100%;
  min-height: 1.75rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  cursor: pointer;
}

.api-method-pill {
  min-height: 1.4375rem;
  border-radius: 0.3125rem;
  background: color-mix(in srgb, var(--primary) 11%, var(--surface));
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
}

.api-method-pill.method-get {
  background: rgba(3, 105, 161, 0.12);
  color: #0369a1;
}

.api-method-pill.method-post {
  background: rgba(21, 128, 61, 0.13);
  color: #15803d;
}

.api-method-pill.method-put,
.api-method-pill.method-patch {
  background: rgba(124, 58, 237, 0.13);
  color: var(--primary);
}

.api-method-pill.method-delete {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.api-method-pill.method-head,
.api-method-pill.method-options {
  background: rgba(100, 116, 139, 0.14);
  color: #64748b;
}

.api-card-main h4 {
  max-width: 100%;
  font-size: 0.8125rem;
  font-weight: 760;
  line-height: 1.2;
}

.api-card-main p {
  max-width: 100%;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.675rem;
}

.api-card-meta {
  grid-area: meta;
  min-width: 0;
  width: 100%;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4375rem;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding-left: 3.625rem;
  overflow: visible;
}

.api-card-context-menu {
  position: fixed;
  z-index: 17080;
  min-width: 10.5rem;
  display: grid;
  gap: 0.25rem;
  padding: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 70%, var(--primary));
  border-radius: 0.625rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--control-bg) 94%, transparent)),
    var(--surface);
  box-shadow: 0 1.125rem 2.875rem rgba(15, 23, 42, 0.24);
}

.api-card-context-menu.hidden {
  display: none;
}

.api-card-context-menu button {
  width: 100%;
  min-height: 2.125rem;
  display: inline-grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  padding: 0 0.5625rem;
  cursor: pointer;
}

.api-card-context-menu button > .material-symbols-rounded {
  font-size: 1rem;
  color: var(--muted);
}

.api-card-context-menu button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.api-card-context-menu #apiContextMenuDeleteBtn > .material-symbols-rounded,
.api-card-context-menu #apiContextMenuDeleteBtn:hover:not(:disabled) {
  color: var(--red);
}

.api-card-context-menu button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.api-folder-context-menu {
  min-width: 9.75rem;
}

.api-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 1.25rem;
  border-color: var(--line);
  background: var(--surface);
  font-size: 0.6562rem;
  padding: 0 0.4375rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
}

.api-status-chip > i {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 0.4375rem;
  border-radius: 62.4375rem;
  background: var(--muted);
}

.api-status-chip.is-ok {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: color-mix(in srgb, var(--green) 90%, #143a24);
}

.api-status-chip.is-ok > i {
  background: var(--green);
}

.api-status-chip.is-error,
.api-status-chip.is-muted {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: color-mix(in srgb, var(--red) 90%, #4b1616);
}

.api-status-chip.is-error > i,
.api-status-chip.is-muted > i {
  background: var(--red);
}

.api-latency {
  min-width: 0;
  overflow: hidden;
  font-size: 0.6562rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.api-request-console {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(13.125rem, 0.42fr);
  min-height: 0;
  overflow: hidden;
}

.api-request-form {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.api-request-head {
  min-height: 3.625rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  border-bottom: 0.0625rem solid var(--line);
  padding: 0.5625rem 1rem;
}

.api-request-kicker {
  display: none;
}

.api-name-field {
  display: grid;
  grid-template-columns: auto minmax(0, 22.5rem);
  align-items: center;
  gap: 0.5rem;
}

.api-name-field > span {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.api-name-field input {
  min-height: 2.125rem;
  border-color: transparent;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
}

.api-name-field input:hover,
.api-name-field input:focus {
  border-color: var(--line);
  background: var(--control-bg);
}

.api-status-cluster {
  align-items: center;
  gap: 0.5rem;
}

.api-status-cluster .secondary-button,
.api-status-cluster .primary-button {
  min-height: 2.125rem;
}

.api-status-cluster .api-save-button,
.api-status-cluster .api-test-button,
.api-status-cluster .api-select-button,
.api-status-cluster .api-download-button,
.api-status-cluster .api-delete-current-button {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: 1.125rem auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
  line-height: 1;
}

.api-status-cluster .api-save-button .material-symbols-rounded,
.api-status-cluster .api-test-button .material-symbols-rounded,
.api-status-cluster .api-select-button .material-symbols-rounded,
.api-status-cluster .api-download-button .material-symbols-rounded,
.api-status-cluster .api-delete-current-button .material-symbols-rounded {
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.api-request-line {
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: stretch;
  border: 0;
  border-bottom: 0.0625rem solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  padding: 0.875rem 1rem;
}

.api-request-line > select {
  min-height: 2.375rem;
  border-radius: 0.5625rem;
  background: var(--control-bg);
  font-size: 0.7812rem;
  font-weight: 850;
}

.api-url-fields {
  border-color: var(--line);
  border-radius: 0.5625rem;
  background: var(--control-bg);
}

.api-url-fields input {
  min-height: 2.375rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7625rem;
}


.api-tabbar {
  gap: 0.125rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
  padding: 0 1rem;
}

.api-tabbar span,
.api-response-tabs span {
  min-height: 2.4375rem;
  color: var(--muted);
  font-size: 0.7812rem;
  font-weight: 650;
  padding: 0 0.75rem;
}

.api-tabbar span.is-active,
.api-response-tabs span.is-active {
  color: var(--primary);
  font-weight: 760;
}

.api-config-tabs {
  grid-template-columns: 8.75rem minmax(11.25rem, 1fr) 8rem minmax(13.75rem, 1.05fr);
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
  padding: 0.75rem 1rem;
}

.api-request-form label span,
.api-response-panel label > span,
.api-response-panel header span {
  font-size: 0.6562rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
}

.api-request-form input,
.api-request-form select,
.api-request-form textarea,
.api-response-panel textarea {
  min-height: 2.25rem;
  border-color: var(--line);
  border-radius: 0.5rem;
  background: var(--control-bg);
  font-size: 0.7812rem;
}

.api-editor-grid {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 1rem 1rem;
  overflow: hidden;
}

.api-editor-card {
  min-height: 0;
  display: grid;
  grid-template-rows: 2.25rem minmax(0, 1fr);
  border-color: var(--line);
  border-radius: 0.5625rem;
  background: var(--surface);
  box-shadow: none;
}

.api-editor-card > span {
  min-height: 2.25rem;
  border-bottom-color: var(--line);
  background: var(--control-bg);
  padding: 0 0.75rem;
  font-size: 0.6562rem;
}

.api-editor-card textarea,
.api-request-form textarea,
.api-response-panel textarea {
  min-height: 0;
  height: 100%;
  resize: none;
  background: var(--surface);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7625rem;
  line-height: 1.65;
}

.api-json-source {
  display: none !important;
}

.content.integrations-builder-mode .api-json-editor-card {
  min-height: 0;
}

.content.integrations-builder-mode .api-codemirror-host {
  min-height: 0;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.content.integrations-builder-mode .td-json-editor-shell {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 0 0 0.5625rem 0.5625rem;
  background: var(--surface);
  overflow: hidden;
}

.content.integrations-builder-mode .td-json-editor-toolbar {
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 0.0625rem solid var(--line);
  background: color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  padding: 0.375rem 0.625rem;
}

.content.integrations-builder-mode .td-json-editor-status,
.content.integrations-builder-mode .td-json-editor-detail {
  min-height: 1.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.5rem;
  font-size: 0.6562rem;
  font-weight: 850;
  white-space: nowrap;
}

.content.integrations-builder-mode .td-json-editor-status .material-symbols-rounded {
  font-size: 0.9375rem;
}

.content.integrations-builder-mode .td-json-editor-status.is-ok {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
}

.content.integrations-builder-mode .td-json-editor-status.is-error {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
  color: var(--red);
}

.content.integrations-builder-mode .td-json-editor-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.content.integrations-builder-mode .td-json-editor-actions button {
  min-height: 1.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  background: var(--surface);
  color: var(--text);
  padding: 0 0.5625rem;
  font-size: 0.6562rem;
  font-weight: 850;
}

.content.integrations-builder-mode .td-json-editor-actions button:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  color: var(--primary);
}

.content.integrations-builder-mode .td-json-editor-shell .cm-editor {
  height: 100%;
  min-height: 0;
  background: var(--surface);
}

.content.integrations-builder-mode .td-json-editor-shell .cm-focused {
  outline: none;
}

.content.integrations-builder-mode .td-json-editor-shell .cm-scroller {
  overflow: auto;
}

.content.integrations-builder-mode .td-json-editor-shell .cm-diagnostic {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
}

.api-response-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  border-top: 0.375rem solid var(--line);
  background: var(--surface);
  padding: 0;
}

.api-response-panel header {
  min-height: 2.875rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
  padding: 0.5rem 1rem;
}

.api-response-panel header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.api-response-meta span {
  min-height: 1.5rem;
  border-color: var(--line);
  background: var(--control-bg);
  font-size: 0.6875rem;
}

.api-response-tabs {
  display: none;
}

.api-response-grid {
  min-height: 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.875rem;
  overflow: hidden;
}

.api-response-grid .api-editor-card {
  min-height: 9.375rem;
}

.api-response-panel .inline-notice {
  margin: 0;
  border-top: 0.0625rem solid var(--line);
  padding: 0.5rem 1rem;
}

[data-theme="dark"] .api-collection,
[data-theme="dark"] .api-request-console,
[data-theme="dark"] .api-request-form,
[data-theme="dark"] .api-response-panel,
[data-theme="dark"] .api-response-panel header,
[data-theme="dark"] .api-tabbar,
[data-theme="dark"] .api-config-tabs,
[data-theme="dark"] .content.integrations-builder-mode > .topbar {
  background: var(--surface);
}

.content.integrations-builder-mode .api-request-console {
  grid-template-rows: minmax(0, 1fr) 0.375rem var(--api-response-height, 14.875rem);
}

.content.integrations-builder-mode .api-request-form {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.content.integrations-builder-mode .api-request-head {
  min-height: 2.75rem;
  gap: 0.75rem;
  padding: 0.7rem 0.875rem 0.3125rem;
}

.content.integrations-builder-mode .api-request-title {
  min-width: 0;
  display: grid;
  justify-items: start;
}

.content.integrations-builder-mode .api-name-field {
  width: min(26.25rem, 100%);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 0.5rem;
}

.content.integrations-builder-mode .api-name-field > span {
  font-size: 0.625rem;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-name-field input,
.content.integrations-builder-mode .api-status-cluster .secondary-button,
.content.integrations-builder-mode .api-status-cluster .primary-button {
  min-height: 2rem;
  height: 2rem;
}

.content.integrations-builder-mode .api-status-cluster .api-save-button,
.content.integrations-builder-mode .api-status-cluster .api-test-button,
.content.integrations-builder-mode .api-status-cluster .api-select-button,
.content.integrations-builder-mode .api-status-cluster .api-download-button,
.content.integrations-builder-mode .api-status-cluster .api-delete-current-button {
  min-width: 5.75rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
}

.content.integrations-builder-mode .api-status-cluster .api-delete-current-button {
  color: var(--red);
}

.content.integrations-builder-mode .api-status-cluster .api-delete-current-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
}

.content.integrations-builder-mode .api-name-field input {
  width: 100%;
  padding: 0 0.625rem;
}

.content.integrations-builder-mode .api-status-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.content.integrations-builder-mode .api-request-line {
  padding: 0.75rem 1rem;
}

.content.integrations-builder-mode .api-tabbar {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0 1.125rem;
  overflow-x: auto;
}

.content.integrations-builder-mode .api-tabbar button,
.content.integrations-builder-mode .api-response-tabs button {
  position: relative;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 0;
  border-bottom: 0.125rem solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 0.8125rem;
  font-size: 0.7812rem;
  font-weight: 650;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-tabbar button .material-symbols-rounded {
  font-size: 1rem;
}

.content.integrations-builder-mode .api-tabbar button:hover,
.content.integrations-builder-mode .api-response-tabs button:hover {
  color: var(--text);
}

.content.integrations-builder-mode .api-tabbar button.is-active,
.content.integrations-builder-mode .api-response-tabs button.is-active {
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 760;
}

.content.integrations-builder-mode .api-tabbar button.is-active::after,
.content.integrations-builder-mode .api-response-tabs button.is-active::after {
  display: none;
}

.content.integrations-builder-mode .api-editor-grid {
  display: block;
  min-height: 0;
  padding: 1rem 1.25rem;
  overflow: auto;
}

.content.integrations-builder-mode .api-tab-panel {
  display: none;
  min-height: 100%;
}

.content.integrations-builder-mode .api-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}

.content.integrations-builder-mode .api-tab-panel.is-active[data-api-tab-panel="auth"].is-custom-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  align-items: start;
}

.content.integrations-builder-mode .api-tab-panel.is-active[data-api-tab-panel="auth"].is-custom-auth-layout .api-auth-grid {
  grid-column: 1;
}

.content.integrations-builder-mode .api-tab-panel.is-active[data-api-tab-panel="auth"].is-custom-auth-layout .api-helper-box {
  grid-column: 2;
  max-width: none;
}

.content.integrations-builder-mode .api-auth-grid,
.content.integrations-builder-mode .api-options-grid {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}

.content.integrations-builder-mode .api-request-line .searchable-select__trigger,
.content.integrations-builder-mode .api-auth-grid .searchable-select__trigger,
.content.integrations-builder-mode .api-options-grid .searchable-select__trigger,
.content.integrations-builder-mode .api-auth-fields .searchable-select__trigger {
  min-height: 2.375rem;
  border-radius: 0.5625rem;
  background: var(--control-bg);
  font-size: 0.7812rem;
  padding: 0 0.625rem;
}

.content.integrations-builder-mode .api-request-line .searchable-select.is-open .searchable-select__trigger,
.content.integrations-builder-mode .api-auth-grid .searchable-select.is-open .searchable-select__trigger,
.content.integrations-builder-mode .api-options-grid .searchable-select.is-open .searchable-select__trigger,
.content.integrations-builder-mode .api-auth-fields .searchable-select.is-open .searchable-select__trigger {
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.content.integrations-builder-mode .api-request-line .searchable-select__option-label,
.content.integrations-builder-mode .api-auth-grid .searchable-select__option-label,
.content.integrations-builder-mode .api-options-grid .searchable-select__option-label,
.content.integrations-builder-mode .api-auth-fields .searchable-select__option-label {
  font-size: 0.7812rem;
}

.content.integrations-builder-mode .api-auth-grid {
  grid-template-columns: minmax(13.75rem, 17.5rem) minmax(17.5rem, 1fr);
}

.content.integrations-builder-mode .api-options-grid {
  grid-template-columns: minmax(11.25rem, 15rem) minmax(13.75rem, 18.75rem) minmax(17.5rem, 1fr);
}

.content.integrations-builder-mode .api-options-action {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
}

.content.integrations-builder-mode .api-auth-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 0.75rem;
  align-items: end;
  align-self: end;
}

.content.integrations-builder-mode .api-auth-grid label,
.content.integrations-builder-mode .api-options-grid label,
.content.integrations-builder-mode .api-auth-field {
  display: grid;
  gap: 0.375rem;
}

.content.integrations-builder-mode .api-auth-empty {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--control-bg);
  color: var(--muted);
  padding: 0 0.75rem;
  font-size: 0.7812rem;
}

.content.integrations-builder-mode .api-helper-box {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  max-width: 45rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5625rem;
  background: var(--control-bg);
  color: var(--muted);
  padding: 0.6875rem 0.8125rem;
}

.content.integrations-builder-mode .api-helper-box .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.3125rem;
}

.content.integrations-builder-mode .api-auth-hint-content {
  margin: 0;
  font-size: 0.7812rem;
  line-height: 1.55;
}

.content.integrations-builder-mode .api-auth-custom-help {
  display: grid;
  gap: 0.5rem;
}

.content.integrations-builder-mode .api-auth-custom-help p {
  margin: 0;
}

.content.integrations-builder-mode .api-auth-custom-help > div {
  display: grid;
  gap: 0.3125rem;
}

.content.integrations-builder-mode .api-auth-custom-help b {
  color: var(--panel-title);
  font-size: 0.75rem;
}

.content.integrations-builder-mode .api-auth-custom-help code {
  width: fit-content;
}

.content.integrations-builder-mode .api-auth-custom-help pre {
  margin: 0;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
  overflow-x: auto;
}

.content.integrations-builder-mode .api-auth-custom-help pre code {
  width: auto;
  display: block;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.7188rem;
  line-height: 1.45;
  padding: 0.5rem 0.625rem;
}

.content.integrations-builder-mode .api-helper-box code {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 0.3125rem;
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  color: var(--primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  padding: 0.0625rem 0.3125rem;
}

.content.integrations-builder-mode .api-editor-card-single {
  min-height: min(26.25rem, calc(100vh - 21.25rem));
  height: 100%;
}

.content.integrations-builder-mode .api-editor-card > span {
  color: var(--muted);
}

.content.integrations-builder-mode .api-editor-card textarea {
  padding: 0.875rem 0.9375rem;
}

.content.integrations-builder-mode .api-headers-builder {
  min-height: min(26.25rem, calc(100vh - 21.25rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  overflow: hidden;
}

.content.integrations-builder-mode .api-builder-head {
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  padding: 0.4375rem 0.75rem 0.4375rem 0.875rem;
}

.content.integrations-builder-mode .api-builder-head div {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.content.integrations-builder-mode .api-builder-head span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}

.content.integrations-builder-mode .api-builder-head strong {
  color: var(--panel-title);
  font-size: 0.8rem;
  font-weight: 780;
}

.content.integrations-builder-mode .api-add-header-row {
  min-height: 2rem;
  height: 2rem;
  padding: 0 0.625rem;
}

.content.integrations-builder-mode .api-add-header-row .material-symbols-rounded {
  font-size: 1.0625rem;
}

.content.integrations-builder-mode .api-headers-table-wrap {
  min-height: 0;
  overflow: auto;
}

.content.integrations-builder-mode .api-headers-table {
  width: 100%;
  min-width: 47.5rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.content.integrations-builder-mode .api-headers-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 90%, var(--surface));
  color: var(--muted);
  padding: 0.5625rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-align: left;
  text-transform: uppercase;
}

.content.integrations-builder-mode .api-headers-table td {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.375rem 0.5rem;
  vertical-align: middle;
}

.content.integrations-builder-mode .api-headers-table tr:last-child td {
  border-bottom: 0;
}

.content.integrations-builder-mode .api-headers-table tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 28%, transparent);
}

.content.integrations-builder-mode .api-header-enabled-col {
  width: 4rem;
  text-align: center !important;
}

.content.integrations-builder-mode .api-header-actions-col {
  width: 3rem;
  text-align: center;
}

.content.integrations-builder-mode .api-header-check {
  width: 1rem;
  height: 1rem;
  min-height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.content.integrations-builder-mode .api-header-input {
  width: 100%;
  min-height: 2rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.4375rem;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 0 0.5625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui);
}

.content.integrations-builder-mode .api-header-input:hover {
  border-color: var(--line);
  background: var(--input-bg);
}

.content.integrations-builder-mode .api-header-input:focus {
  border-color: var(--primary);
  background: var(--input-bg);
  box-shadow: 0 0 0 0.1875rem rgba(124, 58, 237, 0.1);
}

.content.integrations-builder-mode .api-header-input::placeholder {
  color: var(--muted);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
}

.content.integrations-builder-mode .api-header-description {
  font-family: "Inter", system-ui, sans-serif;
}

.content.integrations-builder-mode .api-header-delete {
  width: 1.875rem;
  height: 1.875rem;
  min-width: 1.875rem;
  color: var(--muted);
}

.content.integrations-builder-mode .api-header-delete:hover {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.content.integrations-builder-mode .api-header-delete .material-symbols-rounded {
  font-size: 1.0625rem;
}

.content.integrations-builder-mode .api-headers-json-preview {
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 62%, var(--surface));
}

.content.integrations-builder-mode .api-headers-json-preview summary {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  color: var(--primary);
  cursor: pointer;
  padding: 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 760;
}

.content.integrations-builder-mode .api-headers-json-preview pre {
  max-height: 11.25rem;
  overflow: auto;
  margin: 0;
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--input-bg) 94%, var(--control-bg));
  color: var(--text);
  padding: 0.75rem 0.875rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
}

.content.integrations-builder-mode .api-template-variables-panel {
  min-height: min(26.25rem, calc(100vh - 21.25rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  overflow: hidden;
}

.content.integrations-builder-mode .api-template-variables-panel .api-builder-head small {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 850;
}

.content.integrations-builder-mode .api-template-table-wrap {
  min-height: 0;
  overflow: auto;
}

.content.integrations-builder-mode .api-template-table {
  width: 100%;
  min-width: 43.75rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.content.integrations-builder-mode .api-template-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 90%, var(--surface));
  color: var(--muted);
  padding: 0.5625rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-align: left;
  text-transform: uppercase;
}

.content.integrations-builder-mode .api-template-table td {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.375rem 0.5rem;
  vertical-align: top;
}

.content.integrations-builder-mode .api-template-table tr:last-child td {
  border-bottom: 0;
}

.content.integrations-builder-mode .api-template-table tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 26%, transparent);
}

.content.integrations-builder-mode .api-template-table code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-template-input {
  width: 100%;
  min-height: 2rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.4375rem;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 0 0.5625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui);
}

.content.integrations-builder-mode .api-template-type {
  width: 100%;
  min-height: 2rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.4375rem;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui);
}

.content.integrations-builder-mode .api-template-type:hover {
  border-color: var(--line);
  background: var(--input-bg);
}

.content.integrations-builder-mode .api-template-type:focus {
  border-color: var(--primary);
  background: var(--input-bg);
  box-shadow: 0 0 0 0.1875rem rgba(124, 58, 237, 0.1);
}

.content.integrations-builder-mode .api-template-json-input {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  border: 0.0625rem solid transparent;
  border-radius: 0.4375rem;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 0.5rem 0.5625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui);
}

.content.integrations-builder-mode .api-template-json-input:hover {
  border-color: var(--line);
  background: var(--input-bg);
}

.content.integrations-builder-mode .api-template-json-input:focus {
  border-color: var(--primary);
  background: var(--input-bg);
  box-shadow: 0 0 0 0.1875rem rgba(124, 58, 237, 0.1);
}

.content.integrations-builder-mode .api-template-input:hover {
  border-color: var(--line);
  background: var(--input-bg);
}

.content.integrations-builder-mode .api-template-input:focus {
  border-color: var(--primary);
  background: var(--input-bg);
  box-shadow: 0 0 0 0.1875rem rgba(124, 58, 237, 0.1);
}

.content.integrations-builder-mode .api-template-input::placeholder {
  color: var(--muted);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
}

.content.integrations-builder-mode .api-template-empty-row td {
  border-bottom: 0;
  padding: 0.875rem;
}

.content.integrations-builder-mode .api-template-empty {
  min-height: 11.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  border: 0.0625rem dashed var(--line);
  border-radius: 0.625rem;
  color: var(--muted);
  padding: 1.125rem;
  text-align: center;
}

.content.integrations-builder-mode .api-template-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.875rem;
}

.content.integrations-builder-mode .api-template-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.content.integrations-builder-mode .api-template-empty p {
  max-width: 27.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.content.integrations-builder-mode .api-template-empty code {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 0.3125rem;
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  color: var(--primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  padding: 0.0625rem 0.3125rem;
}

.content.integrations-builder-mode .api-known-keys-panel {
  min-height: min(26.25rem, calc(100vh - 21.25rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  overflow: hidden;
}

.content.integrations-builder-mode .api-known-keys-panel .api-builder-head small {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 850;
}

.content.integrations-builder-mode .api-known-keys-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.content.integrations-builder-mode .api-known-keys-actions .secondary-button {
  min-height: 1.9375rem;
  padding: 0 0.625rem;
}

.content.integrations-builder-mode .api-known-keys-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
  gap: 0.5625rem;
  align-content: start;
  overflow: auto;
  padding: 0.875rem;
}

.content.integrations-builder-mode .api-known-key-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  padding: 0.5625rem 0.625rem;
}

.content.integrations-builder-mode .api-known-key-card code {
  overflow: hidden;
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-known-key-card span {
  min-height: 1.375rem;
  display: inline-flex;
  align-items: center;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.5rem;
  font-size: 0.6562rem;
  font-weight: 850;
}

.content.integrations-builder-mode .api-known-keys-empty {
  grid-column: 1 / -1;
  min-height: 11.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  border: 0.0625rem dashed var(--line);
  border-radius: 0.625rem;
  color: var(--muted);
  padding: 1.125rem;
  text-align: center;
}

.content.integrations-builder-mode .api-known-keys-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.875rem;
}

.content.integrations-builder-mode .api-known-keys-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.content.integrations-builder-mode .api-known-keys-empty p {
  max-width: 26.25rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.content.integrations-builder-mode .api-response-resizer {
  min-height: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--line) 72%, var(--surface));
  cursor: row-resize;
  touch-action: none;
  transition: background-color var(--ease-ui);
}

.content.integrations-builder-mode .api-response-resizer::after {
  content: "";
  width: 2.75rem;
  height: 0.125rem;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary) 52%, var(--line));
}

.content.integrations-builder-mode .api-response-resizer:hover,
body.api-resizing .content.integrations-builder-mode .api-response-resizer {
  background: color-mix(in srgb, var(--primary) 18%, var(--line));
}

body.api-resizing {
  cursor: row-resize;
  user-select: none;
}

.content.integrations-builder-mode .api-response-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-top: 0;
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}

.content.integrations-builder-mode .api-response-panel header {
  min-height: 2.6875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1rem;
}

.content.integrations-builder-mode .api-response-title {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.0312rem;
  text-transform: uppercase;
}

.content.integrations-builder-mode .api-response-panel header strong {
  margin: 0;
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 800;
}

.content.integrations-builder-mode .api-response-spacer {
  flex: 1;
}

.content.integrations-builder-mode .api-response-tabs {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  border-bottom: 0;
  overflow: visible;
}

.content.integrations-builder-mode .api-response-tabs button {
  min-height: 2.6875rem;
  padding: 0 0.625rem;
}

.content.integrations-builder-mode .api-response-meta {
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.content.integrations-builder-mode .api-response-meta span {
  min-height: 1.5rem;
  padding: 0 0.5625rem;
}

.content.integrations-builder-mode .api-response-meta .pending {
  color: var(--muted);
}

.content.integrations-builder-mode .api-response-body {
  min-height: 0;
  overflow: auto;
  padding: 0.875rem 1.25rem;
}

.content.integrations-builder-mode .api-response-pane {
  display: none;
  height: 100%;
  min-height: 0;
}

.content.integrations-builder-mode .api-response-pane.is-active {
  display: block;
}

.content.integrations-builder-mode .api-response-pane-body-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.content.integrations-builder-mode .api-response-pane-body-layout.has-image-preview {
  grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 12rem);
  gap: 0.875rem;
}

.content.integrations-builder-mode #apiResponseJsonViewer {
  grid-column: 1 / -1;
}

.content.integrations-builder-mode .api-response-pane-body-layout.has-image-preview #apiResponseJsonViewer {
  grid-column: 1;
}

.content.integrations-builder-mode .api-response-image-preview {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.375rem;
  align-content: start;
}

.content.integrations-builder-mode .api-response-image-preview .task-comment-image-grid {
  grid-template-columns: 1fr;
}

.content.integrations-builder-mode .api-response-image-preview .task-comment-image-grid img {
  height: 7rem;
}

.content.integrations-builder-mode .api-response-image-preview .task-comment-image-trigger {
  border-radius: 0.625rem;
}

.content.integrations-builder-mode .api-response-image-preview small {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.content.integrations-builder-mode .api-response-pane textarea {
  width: 100%;
  height: 100%;
  min-height: 7.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5625rem;
  background: var(--control-bg);
  color: var(--text);
  resize: none;
  outline: none;
  padding: 0.75rem 0.875rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.65;
}

.content.integrations-builder-mode .api-json-viewer {
  width: 100%;
  height: 100%;
  min-height: 7.875rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--control-bg) 72%, transparent), transparent 7.5rem),
    var(--surface);
  overflow: hidden;
}

.content.integrations-builder-mode .api-json-toolbar {
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line);
  background: color-mix(in srgb, var(--control-bg) 86%, var(--surface));
  padding: 0.4375rem 0.625rem;
}

.content.integrations-builder-mode .api-json-toolbar-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.content.integrations-builder-mode .api-json-toolbar-tools {
  margin-left: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.content.integrations-builder-mode .api-response-copy-button {
  min-height: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5625rem;
  font-size: 0.6562rem;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-response-copy-button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.content.integrations-builder-mode .api-response-view-mode {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  padding: 0.125rem;
}

.content.integrations-builder-mode .api-response-view-mode button {
  min-height: 1.375rem;
  border: 0;
  border-radius: 62.4375rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 0.5rem;
  cursor: pointer;
}

.content.integrations-builder-mode .api-response-view-mode button.is-active {
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface));
  color: var(--primary);
}

.content.integrations-builder-mode .api-response-body-search {
  min-width: 12.75rem;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.25rem;
}

.content.integrations-builder-mode .api-response-body-search input {
  height: 1.75rem;
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.6875rem;
  padding: 0 0.5625rem;
  outline: none;
}

.content.integrations-builder-mode .api-response-body-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-soft));
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--primary-soft) 58%, transparent);
}

.content.integrations-builder-mode .api-response-body-search > small {
  min-width: 2.375rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  text-align: center;
}

.content.integrations-builder-mode .api-response-body-search > .icon-button {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
}

.content.integrations-builder-mode .api-response-body-search > .icon-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line-soft));
  color: var(--primary);
}

.content.integrations-builder-mode .api-response-body-search > .icon-button:disabled {
  opacity: 0.5;
}

.content.integrations-builder-mode .api-response-body-search > .icon-button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.content.integrations-builder-mode .api-json-status,
.content.integrations-builder-mode .api-json-info {
  min-width: 0;
  min-height: 1.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.5rem;
  font-size: 0.6562rem;
  font-weight: 850;
  white-space: nowrap;
}

.content.integrations-builder-mode .api-json-status .material-symbols-rounded {
  font-size: 0.9375rem;
}

.content.integrations-builder-mode .api-json-status.is-ok {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
}

.content.integrations-builder-mode .api-json-status.is-warning {
  border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  color: var(--amber);
}

.content.integrations-builder-mode .api-json-status.is-muted {
  color: var(--muted);
}

.content.integrations-builder-mode .api-json-code {
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 0.8125rem 0.9375rem 1rem;
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.68;
  tab-size: 2;
  white-space: pre;
}

.content.integrations-builder-mode .api-json-code code {
  font-family: inherit;
}

.content.integrations-builder-mode .api-json-viewer.is-empty .api-json-code {
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  white-space: normal;
}

.content.integrations-builder-mode .api-json-viewer.is-plain .api-json-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.content.integrations-builder-mode .api-searchable-code mark {
  border-radius: 0.1875rem;
  background: color-mix(in srgb, #facc15 84%, #fff);
  color: #111827;
  padding: 0 0.0625rem;
}

.content.integrations-builder-mode .api-searchable-code mark.is-active {
  background: color-mix(in srgb, #f97316 86%, #fff);
  color: #111827;
  box-shadow: 0 0 0 0.0625rem rgba(249, 115, 22, 0.28);
}

.content.integrations-builder-mode .api-response-preview-tree {
  min-height: 0;
  padding: 0.625rem 0.75rem;
  overflow: auto;
}

.content.integrations-builder-mode .api-response-preview-content {
  max-height: none;
}

.content.integrations-builder-mode .api-response-preview-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 0.375rem;
  text-align: center;
  color: var(--muted);
}

.content.integrations-builder-mode .api-response-preview-empty .material-symbols-rounded {
  justify-self: center;
  font-size: 1.125rem;
  color: var(--blue);
}

.content.integrations-builder-mode .api-response-preview-empty strong {
  color: var(--panel-title);
  font-size: 0.75rem;
}

.content.integrations-builder-mode .api-response-preview-empty small {
  font-size: 0.6875rem;
}

.content.integrations-builder-mode .api-json-code .json-key {
  color: var(--primary);
}

.content.integrations-builder-mode .api-json-code .json-string {
  color: #15803d;
}

.content.integrations-builder-mode .api-json-code .json-number {
  color: #2563eb;
}

.content.integrations-builder-mode .api-json-code .json-boolean {
  color: #be185d;
}

.content.integrations-builder-mode .api-json-code .json-null,
.content.integrations-builder-mode .api-json-code .json-empty {
  color: var(--muted);
  font-style: italic;
}

.content.integrations-builder-mode .api-response-panel .inline-notice {
  min-height: 0;
  margin: 0;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
}

@media (max-width: 61.25rem) {
  .content.integrations-builder-mode .api-json-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .content.integrations-builder-mode .api-json-toolbar-tools {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .content.integrations-builder-mode .api-response-body-search {
    min-width: 0;
    flex: 1;
  }
}

.log-card-head span,
.route-card-head span {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.route-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.route-meta div {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  padding: 0.5625rem;
  background: var(--surface);
}

.route-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  margin-bottom: 0;
}

.route-meta strong {
  font-size: 0.8125rem;
}

canvas {
  max-width: 100%;
}

@media (max-width: 73.75rem) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(11.875rem, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }

  .panel-table {
    grid-column: span 2;
  }
}

@media (max-width: 82.5rem) {
  .stat-card canvas {
    display: none;
  }

  .donut-row {
    grid-template-columns: 1fr;
  }

  .donut-row canvas {
    justify-self: center;
  }
}

@media (max-width: 61.25rem) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .nav p {
    grid-column: 1 / -1;
  }

  .stats-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .page-grid {
    grid-template-columns: 1fr;
  }

  .demand-entry-grid,
  .demand-object-preview {
    grid-template-columns: 1fr;
  }

  .panel-wide,
  .panel-table {
    grid-column: auto;
  }
}

@media (max-width: 40rem) {
  .login-card {
    padding: 1.5rem;
  }

  .input-line,
  .donut-row,
  .metric-row,
  .api-form,
  .route-meta {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .dashboard-grid,
  .page-grid,
  .topbar {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .period {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* Polished responsive shell */
:root {
  --sidebar-open: 17rem;
  --sidebar-closed: 4.5rem;
  --page-pad-x: 1.5rem;
  --page-pad-y: 1.25rem;
  --panel-pad: 1rem;
  --radius-xs: 0.3125rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --control-h: 2.375rem;
  --control-h-lg: 2.625rem;
  --ease-ui: 180ms ease;
}

html {
  background: var(--bg);
}

body {
  font-size: 0.875rem;
  line-height: 1.45;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    color var(--ease-ui),
    box-shadow var(--ease-ui),
    transform var(--ease-ui);
}

button:active {
  transform: translateY(0.0625rem);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  outline-offset: 0.125rem;
}

.material-symbols-rounded {
  font-size: 1.25rem;
  font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 24;
}

.login-view {
  padding: 1.75rem;
  background:
    radial-gradient(circle at top left, var(--primary-soft), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), transparent 42%),
    var(--bg);
}

.login-card {
  width: min(31.25rem, 100%);
  padding: 2rem;
  border-radius: var(--radius-md);
}

.brand-row {
  gap: 0.6875rem;
}

.brand-row strong {
  font-size: 1rem;
  letter-spacing: 0;
}

.brand-row span {
  font-size: 0.75rem;
  line-height: 1.35;
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.login-card h1 {
  margin: 1.875rem 0 0.625rem;
  font-size: 2.625rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.login-card p {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.login-form {
  gap: 0.5rem;
}

.login-form label,
.api-form label {
  font-size: 0.75rem;
  letter-spacing: 0;
}

.input-line {
  gap: 0.5rem;
}

.input-line input,
select,
.api-form input,
.api-form textarea,
.api-form select {
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.input-line input {
  min-width: 0;
}

.api-form .searchable-select,
.modal-field .searchable-select,
.task-detail-field .searchable-select,
.task-import-field .searchable-select,
.settings-field .searchable-select,
.settings-user-row .searchable-select,
.condition-rule-row .searchable-select,
.start-filter-row .searchable-select,
.save-info-row .searchable-select,
.file-import-match-row .searchable-select,
.schema-row .searchable-select,
.status-row .searchable-select,
.api-request-line .searchable-select,
.api-auth-grid .searchable-select,
.api-options-grid .searchable-select,
.api-auth-fields .searchable-select {
  width: 100%;
  min-width: 0;
}

.api-form .searchable-select__trigger,
.modal-field .searchable-select__trigger,
.task-detail-field .searchable-select__trigger,
.task-import-field .searchable-select__trigger,
.settings-field .searchable-select__trigger,
.settings-user-row .searchable-select__trigger,
.condition-rule-row .searchable-select__trigger,
.start-filter-row .searchable-select__trigger,
.save-info-row .searchable-select__trigger,
.file-import-match-row .searchable-select__trigger,
.schema-row .searchable-select__trigger,
.status-row .searchable-select__trigger,
.api-request-line .searchable-select__trigger,
.api-auth-grid .searchable-select__trigger,
.api-options-grid .searchable-select__trigger,
.api-auth-fields .searchable-select__trigger {
  width: 100%;
}

.input-line button,
.primary-button,
.secondary-button {
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
}

.notice {
  min-height: 1.25rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
}

.app {
  --topbar-left-offset: var(--sidebar-open);
  --topbar-top-offset: 0;
  height: 100vh;
  overflow: hidden;
  grid-template-columns: var(--sidebar-open) minmax(0, 1fr);
  background: var(--bg);
}

.app.sidebar-collapsed {
  --topbar-left-offset: var(--sidebar-closed);
  grid-template-columns: var(--sidebar-closed) minmax(0, 1fr);
}

.sidebar {
  padding: 1.125rem 0.875rem;
}

.sidebar-brand {
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.375rem;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 1.125rem;
}

.sidebar-toggle {
  justify-self: end;
}

.nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.25rem;
  padding: 0.25rem 0.125rem 0.75rem 0;
  scrollbar-width: thin;
}

.nav p {
  position: relative;
  margin: 1.125rem 0.5rem 0.375rem;
  padding-left: 0.625rem;
  color: var(--section-label);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}

.nav-item {
  position: relative;
  min-height: 2.5rem;
  gap: 0.4375rem;
  padding: 0 0.625rem 0 0.5625rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-md);
  color: var(--nav-text);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    color var(--ease-ui),
    box-shadow var(--ease-ui);
  text-decoration: none;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0.4375rem auto 0.4375rem 0;
  width: 0.1875rem;
  border-radius: 0 6.1875rem 6.1875rem 0;
  background: var(--primary);
  opacity: 0;
  transform: scaleY(0.55);
  transition:
    opacity var(--ease-ui),
    transform var(--ease-ui);
}

.nav-item > .material-symbols-rounded {
  position: relative;
  z-index: 1;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--nav-icon);
  background: transparent;
  font-size: 1.1875rem;
  transition:
    background-color var(--ease-ui),
    color var(--ease-ui),
    transform var(--ease-ui);
}

.nav-item .nav-label {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  flex: 1 1 auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  border-color: var(--line-soft);
  background: var(--primary-soft) ;
  color: var(--primary);
}

.nav-item:hover > .material-symbols-rounded {
  color: var(--primary);
}

.nav-item.active,
.nav-item.active:hover {
  border-color: rgba(124, 58, 237, 0.24);
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.06)),
    var(--control-bg);
  color: var(--primary);
}

.nav-item.active {
  box-shadow: 0 0.625rem 1.625rem rgba(124, 58, 237, 0.13);
}

.nav-item.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-item.active > .material-symbols-rounded {
  color: white;
  background: var(--primary);
  box-shadow: 0 0.5rem 1.125rem rgba(124, 58, 237, 0.24);
}

.nav-item:hover .nav-label,
.nav-item.active .nav-label {
  color: var(--avatar-text);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.nav-item:hover,
.nav-item:focus,
.nav-item:active,
.nav-item:visited {
  text-decoration: none;
}

.user-box {
  grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem;
  gap: 0.5625rem;
  padding: 0.625rem;
  border-radius: var(--radius-md);
}

.avatar {
  width: 2.375rem;
  height: 2.375rem;
  font-size: 0.8125rem;
}

.user-box strong {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.user-box span {
  font-size: 0.6875rem;
}

.icon-button {
  min-width: var(--control-h);
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-sm);
}

.icon-button:hover,
.secondary-button:hover,
.table-action:hover,
.mini-button:hover {
  border-color: rgba(124, 58, 237, 0.38);
  color: var(--primary);
}

.table-action:disabled,
.table-action.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted);
}

.table-action:disabled:hover,
.table-action.is-disabled:hover {
  border-color: var(--line);
  color: var(--muted);
}

.primary-button:hover,
.input-line button:hover {
  background: var(--primary-strong);
}

.icon-button .material-symbols-rounded {
  font-size: 1.25rem;
}

.app.sidebar-collapsed .sidebar {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.app.sidebar-collapsed .sidebar-brand {
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

.app.sidebar-collapsed .nav {
  align-items: stretch;
  gap: 0.5rem;
  padding-top: 0px;
}

.app.sidebar-collapsed .nav-item {
  width: 100%;
  min-height: 2.625rem;
  gap: 0;
  margin: 0.125rem 0;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-md);
}

.app.sidebar-collapsed .nav-item::before {
  inset: auto 0.625rem 0.25rem;
  width: auto;
  height: 0.1875rem;
  border-radius: 6.1875rem;
  transform: scaleX(0.5);
}

.app.sidebar-collapsed .nav-item.active {
  color: white;
}

.app.sidebar-collapsed .nav-item.active::before {
  transform: scaleX(1);
}

.app.sidebar-collapsed .nav-item.active:hover::before {
  opacity: 0;
  transform: scaleX(0);
}

.app.sidebar-collapsed .nav-item > .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
  flex-basis: 2.5rem;
  font-size: 1.5rem;
}

.app.sidebar-collapsed .user-box {
  display: flex;
  width: 2.625rem;
  height: 2.625rem;
  justify-content: center;
  align-items: center;
  border-color: transparent;
  background: transparent;
  padding: 0;
}

.app.sidebar-collapsed .avatar {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
}

.sidebar-brand {
  position: relative;
  min-height: 2.625rem;
  padding-right: 0;
}

.sidebar-toggle.icon-button {
  position: absolute;
  top: 0.3125rem;
  right: -1.75rem;
  z-index: 24;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 62.4375rem;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface) 88%, var(--control-bg));
  color: var(--muted);
  box-shadow: 0 0.5rem 1.375rem rgba(15, 23, 42, 0.12);
  opacity: 0.82;
}

.sidebar-toggle.icon-button:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background: var(--surface);
  color: var(--primary);
  opacity: 1;
}

.sidebar-toggle.icon-button .material-symbols-rounded {
  font-size: 1.0625rem;
}

.user-menu {
  flex: 0 0 auto;
}

.app.sidebar-collapsed .sidebar {
  align-items: center;
}

.app.sidebar-collapsed .sidebar-brand {
  width: 100%;
  min-height: 2.625rem;
  display: flex;
  justify-content: center;
}

.app.sidebar-collapsed .brand-mark {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
}

.app.sidebar-collapsed .sidebar-toggle.icon-button {
  right: -1.5rem;
}

.app.sidebar-collapsed .user-menu {
  width: 100%;
  display: flex;
  justify-content: center;
}

.app.sidebar-collapsed .user-box {
  width: 2.625rem;
  height: 2.625rem;
}

.content {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  --topbar-fixed-space: 0;
  padding-top: var(--topbar-fixed-space);
}

.topbar {
  min-height: 4.75rem;
  padding: 1rem var(--page-pad-x);
  gap: 1rem;
  position: fixed;
  top: var(--topbar-top-offset, 0);
  left: var(--topbar-left-offset, 0);
  right: 0;
  width: auto;
  box-sizing: border-box;
  z-index: 280;
}

.content:not(.tasks-board-mode):not(.routing-builder-mode):not(.integrations-builder-mode):not(.shared-tasks-mode) .page-view:not(.hidden) {
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.topbar h2 {
  margin-bottom: 0.1875rem;
  font-size: 1.375rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.topbar p {
  max-width: 45rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.toolbar {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-overview-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dashboard-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.1875rem;
  border-radius: 999px;
  border: 0.0625rem solid var(--border);
  background: var(--surface-soft);
}

.dashboard-mode-toggle button {
  border: 0;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-mode-toggle button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0.1875rem 0.75rem rgba(15, 23, 42, 0.14);
}

.dashboard-refresh {
  position: relative;
}

.dashboard-refresh > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.dashboard-refresh > summary::-webkit-details-marker {
  display: none;
}

.dashboard-refresh > summary strong {
  font-size: 0.75rem;
  font-weight: 850;
}

.dashboard-refresh > summary small {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
}

.dashboard-refresh-caret {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.dashboard-refresh[open] .dashboard-refresh-caret {
  transform: rotate(180deg);
}

.dashboard-refresh-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  min-width: 13rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--border);
  background: var(--surface);
  box-shadow: 0 0.625rem 2.25rem rgba(15, 23, 42, 0.16);
}

.dashboard-refresh-list button {
  width: 100%;
  border: 0;
  min-height: 2rem;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 0.625rem;
  cursor: pointer;
}

.dashboard-refresh-list button:hover {
  background: var(--surface-soft);
}

.dashboard-refresh-list button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.period {
  min-height: var(--control-h);
  gap: 0.625rem;
  border-radius: var(--radius-sm);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.dashboard-period {
  gap: 0.5rem;
  padding: 0.25rem 0.3125rem 0.25rem 0.625rem;
}

.dashboard-period label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-period input {
  width: 8.25rem;
  min-height: 2rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.4375rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 750;
}

.dashboard-period input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.dashboard-period .icon-button {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  border-radius: 0.4375rem;
}

.dashboard-period .icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(11.125rem, 1fr));
  gap: 0.875rem;
  padding: var(--page-pad-y) var(--page-pad-x) 1.125rem;
}

.stat-card {
  min-height: 7.25rem;
  padding: 0.9375rem;
  border-radius: var(--radius-md);
}

.stat-card h3 {
  max-width: calc(100% - 3rem);
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.stat-card strong {
  font-size: 1.75rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.stat-card p {
  margin-top: 0.5625rem;
  font-size: 0.75rem;
  line-height: 1.35;
}

.stat-card .round {
  right: 0.875rem;
  top: 0.875rem;
  width: 2.375rem;
  height: 2.375rem;
  font-size: 0.75rem;
}

.stat-card canvas {
  right: 0.75rem;
  bottom: 0.75rem;
  width: 6rem;
  height: 2.125rem;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(21.25rem, 0.95fr) minmax(21.25rem, 0.95fr);
  gap: 1rem;
  padding: 0 var(--page-pad-x) 1.5rem;
  align-items: start;
}

.page-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem;
  padding: var(--page-pad-y) var(--page-pad-x) 1.5rem;
}

.demands-list-shell,
.routing-list-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: var(--page-pad-y) var(--page-pad-x) 1.75rem;
}

.routing-list-panel {
  min-height: min(42rem, calc(100vh - 8rem));
}

.routing-table {
  min-width: 70rem;
  table-layout: fixed;
}

.routing-table th:nth-child(1) { width: 22%; }
.routing-table th:nth-child(2) { width: 17%; }
.routing-table th:nth-child(3) { width: 13%; }
.routing-table th:nth-child(4) { width: 22%; }
.routing-table th:nth-child(5) { width: 10%; }
.routing-table th:nth-child(6) { width: 16%; }

.routing-table tbody tr {
  transition: background-color var(--ease-ui);
}

.routing-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.routing-name-cell,
.routing-schedule-cell,
.routing-start-mode {
  min-width: 0;
  display: grid;
  align-items: center;
}

.routing-name-cell {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.6875rem;
}

.routing-name-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.125rem;
}

.routing-name-cell > div,
.routing-schedule-cell > div,
.routing-start-mode > div {
  min-width: 0;
}

.routing-name-cell button {
  max-width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--panel-title);
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 820;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-name-cell button:hover {
  color: var(--primary);
}

.routing-name-cell small,
.routing-schedule-cell small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-list-active-cell {
  text-align: center;
}

.routing-list-active-switch {
  display: inline-grid;
  grid-template-columns: 2.25rem minmax(0, auto);
  align-items: center;
  gap: 0.4375rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.25rem;
  cursor: pointer;
}

.routing-list-active-switch:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.routing-list-active-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  display: block;
  border: 0.0625rem solid color-mix(in srgb, var(--muted) 24%, var(--line));
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--muted) 14%, var(--control-bg));
  transition: background-color var(--ease-ui), border-color var(--ease-ui);
}

.routing-list-active-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0.125rem 0.375rem rgba(15, 23, 42, 0.22);
  transition: transform var(--ease-ui);
}

.routing-list-active-switch strong {
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
}

.routing-list-active-switch.is-active {
  color: var(--green);
}

.routing-list-active-switch.is-active .routing-list-active-track {
  border-color: color-mix(in srgb, var(--green) 72%, var(--line));
  background: var(--green);
}

.routing-list-active-switch.is-active .routing-list-active-thumb {
  transform: translateX(1rem);
}

.routing-list-active-switch.is-pending .routing-list-active-thumb {
  animation: routing-list-switch-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes routing-list-switch-pulse {
  to { opacity: 0.45; }
}

.routing-demand-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.7812rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-schedule-cell {
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.625rem;
}

.routing-start-mode {
  grid-template-columns: 1.875rem minmax(0, 1fr);
  gap: 0.5rem;
}

.routing-start-mode > .material-symbols-rounded {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.routing-start-mode strong,
.routing-start-mode small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-start-mode strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 780;
}

.routing-start-mode small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.routing-start-mode.is-search > .material-symbols-rounded {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.routing-start-mode.is-execution > .material-symbols-rounded {
  background: color-mix(in srgb, var(--green) 13%, var(--surface));
  color: var(--green);
}

.routing-schedule-cell > .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 1rem;
}

.routing-schedule-cell strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-schedule-cell.is-scheduled > .material-symbols-rounded {
  background: color-mix(in srgb, #f59e0b 13%, var(--surface));
  color: #b56a00;
}

.routing-schedule-cell.is-scheduled strong {
  color: #9a5b00;
}

.routing-row-actions {
  flex-wrap: nowrap;
}

.routing-table-action {
  min-height: 2rem;
  gap: 0.375rem;
  padding: 0 0.625rem;
  font-size: 0.7188rem;
  white-space: nowrap;
}

.routing-table-action .material-symbols-rounded {
  font-size: 1rem;
}

.routing-table-empty {
  min-height: 20rem;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

.routing-table-empty > .material-symbols-rounded {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.625rem;
}

.routing-table-empty strong {
  margin-top: 0.875rem;
  color: var(--panel-title);
  font-size: 0.875rem;
}

.routing-table-empty p {
  max-width: 28rem;
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.panel {
  padding: var(--panel-pad);
  border-radius: var(--radius-md);
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.05);
}

[data-theme="dark"] .panel {
  box-shadow: none;
}

.panel-head {
  gap: 0.75rem;
  margin-bottom: 0.8125rem;
}

.panel h3,
.panel-head h3 {
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.panel select {
  min-height: 2rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.donut-row {
  grid-template-columns: minmax(8.75rem, 11.875rem) minmax(7.5rem, 1fr);
  gap: 1rem;
}

.legend,
.process-list,
.alerts,
.schedule-list,
.api-list,
.routes-grid,
.logs-list {
  gap: 0.625rem;
}

.legend-item,
.process-item,
.alert-item,
.schedule-item {
  min-height: 2.25rem;
  gap: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.legend-item strong,
.process-item strong,
.alert-item strong,
.schedule-item strong {
  min-width: 0;
  font-size: 0.7812rem;
  line-height: 1.25;
}

.legend-item span,
.process-item span,
.alert-item span,
.schedule-item span {
  font-size: 0.7188rem;
}

.legend-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-item span,
.process-time {
  white-space: nowrap;
}

.dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 0.1875rem;
}

.table-wrap {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

table {
  min-width: 51.25rem;
}

th,
td {
  padding: 0.625rem 0.5625rem;
  font-size: 0.7812rem;
  line-height: 1.35;
}

th {
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

td strong {
  font-weight: 700;
}

.badge {
  min-height: 1.4375rem;
  border-radius: var(--radius-xs);
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 800;
}

.table-action {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  font-size: 0;
}

.table-action .material-symbols-rounded {
  font-size: 1.125rem;
}

.link-button {
  font-size: 0.7812rem;
  font-weight: 700;
}

.link-button:hover {
  color: var(--primary-strong);
}

.alert-item {
  grid-template-columns: 0.75rem minmax(0, 1fr) auto;
}

.alert-mark {
  width: 0.625rem;
  height: 0.625rem;
}

.alert-item p {
  font-size: 0.7188rem;
}

.compact-panel {
  min-height: 8.875rem;
}

.compact-panel h3 {
  margin-bottom: 0.875rem;
}

.resource-row {
  grid-template-columns: 4.25rem minmax(5rem, 1fr) 2.5rem;
  gap: 0.625rem;
  margin-bottom: 0.6875rem;
  font-size: 0.7812rem;
}

.bar {
  height: 0.4375rem;
}

.metric-row {
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: 0.625rem;
}

.metric span {
  margin-bottom: 0.375rem;
  font-size: 0.7188rem;
}

.metric strong {
  font-size: 1.3125rem;
  line-height: 1.1;
}

.api-form {
  gap: 0.75rem;
}

.api-form textarea {
  min-height: 5.5rem;
  line-height: 1.45;
}

.form-actions {
  gap: 0.5rem;
}

.api-card,
.route-card,
.log-card {
  padding: 0.8125rem;
  border-radius: var(--radius-md);
}

.api-card-head,
.route-card-head,
.log-card-head {
  gap: 0.625rem;
}

.api-card h4,
.route-card h4,
.log-card h4 {
  font-size: 0.875rem;
  line-height: 1.25;
}

.api-card p,
.route-card p,
.log-card p {
  font-size: 0.7812rem;
  line-height: 1.42;
}

.api-card code,
.route-card code {
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.45;
}


.mini-button {
  min-height: 1.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.7188rem;
  font-weight: 700;
}

.log-card-head span,
.route-card-head span {
  font-size: 0.7188rem;
}

.route-meta {
  gap: 0.5rem;
}

.route-meta div {
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}

.route-meta span {
  font-size: 0.6562rem;
}

.route-meta strong {
  font-size: 0.7812rem;
}

.content.integrations-builder-mode .api-card h4 {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.content.integrations-builder-mode .api-card p {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.675rem;
  line-height: 1.35;
}

.demand-entry-grid {
  grid-template-columns: minmax(22.5rem, 0.82fr) minmax(32.5rem, 1.18fr);
}

.demand-form textarea {
  font-family: inherit;
}

#demandTaskSchema,
#taskImportJson {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

.demand-card {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.875rem;
}

.demand-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.demand-card-head span:not(.badge) {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demand-card h4 {
  margin: 0;
  color: var(--panel-title);
  font-size: 0.9375rem;
  line-height: 1.25;
}

.demand-card p {
  margin: 0.375rem 0 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.45;
}

.demand-object-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 0.5625rem;
}

.demand-object-preview div {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.5625rem;
}

.demand-object-preview span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demand-object-preview code,
.demand-object-preview strong {
  display: block;
  max-height: 5.75rem;
  color: var(--text);
  font-size: 0.7188rem;
  line-height: 1.45;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.demand-object-preview code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.table-toolbar h3 {
  margin: 0;
  color: var(--panel-title);
  font-size: 0.8125rem;
  text-transform: uppercase;
}

.table-toolbar p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.4;
}

.table-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.table-toolbar-actions .primary-button,
.table-toolbar-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.table-toolbar-actions .material-symbols-rounded {
  font-size: 1.125rem;
}

.search-box {
  min-width: 17.5rem;
  min-height: var(--control-h);
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
}

.search-box .material-symbols-rounded {
  justify-self: center;
  font-size: 1.125rem;
}

.search-box input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
}

.topbar-task-search {
  position: relative;
  flex: 1 1 23rem;
  min-width: 0;
  max-width: 36rem;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.global-task-search-box {
  width: min(100%, 31rem);
  min-width: 0;
}

.global-task-search-popover {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  width: min(100vw - 1.5rem, 46rem);
  max-height: min(34rem, 70vh);
  overflow: auto;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.875rem 2.5rem rgba(15, 23, 42, 0.16);
  z-index: 420;
}

.global-task-search-state {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.875rem;
  color: var(--muted);
  font-size: 0.7812rem;
}

.global-task-search-state.is-error {
  color: var(--danger);
}

.global-task-search-list {
  display: grid;
}

.global-task-search-result {
  width: 100%;
  border: 0;
  border-bottom: 0.0625rem solid var(--line);
  background: transparent;
  text-align: left;
  padding: 0.75rem 0.875rem;
  display: grid;
  gap: 0.3125rem;
  cursor: pointer;
}

.global-task-search-result:last-child {
  border-bottom: 0;
}

.global-task-search-result:hover,
.global-task-search-result:focus-visible {
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface));
  outline: none;
}

.global-task-search-result-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.global-task-search-result-head strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
}

.global-task-search-result-head .badge {
  flex-shrink: 0;
}

.global-task-search-result-meta {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-task-search-result-snippet {
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-task-search-snippet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  white-space: normal;
}

.global-task-search-snippet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.1875rem 0.4375rem;
  border-radius: 999px;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.global-task-search-snippet-badge b {
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
  font-weight: 700;
}

.global-task-search-snippet-badge span {
  color: color-mix(in srgb, var(--primary) 35%, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 13rem;
}

.demand-table {
  min-width: 53.75rem;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.table-subtext {
  display: block;
  max-width: 20rem;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.35;
  white-space: normal;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
  border-radius: var(--radius-xs);
  padding: 0 0.4375rem;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 0.6875rem;
  font-weight: 800;
}

.inline-code {
  display: inline-block;
  max-width: 16.25rem;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7188rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.demand-modal .flow-modal-body {
  display: grid;
  overflow: auto;
}

.demand-modal .flow-modal-footer {
  align-items: center;
}

.demand-modal .flow-modal-footer .notice {
  flex: 1;
  margin: 0;
}

.demand-modal {
  position: relative;
  width: min(70rem, calc(100vw - 2.5rem));
  max-height: min(88vh, 53.75rem);
}

.demand-modal-processing-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 31, 0.42);
  backdrop-filter: blur(0.125rem);
}

.demand-modal.is-processing .demand-modal-processing-overlay {
  display: flex;
}

.demand-modal-processing-card {
  min-width: min(24rem, calc(100% - 2rem));
  max-width: 30rem;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 32%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, white);
  box-shadow: 0 1.125rem 2.25rem rgba(12, 18, 31, 0.24);
  text-align: center;
}

.demand-modal-processing-card strong {
  color: var(--panel-title);
  font-size: 0.88rem;
}

.demand-modal-processing-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.demand-modal-processing-icon,
.processing-spin {
  animation: tdSpin 1s linear infinite;
}

@keyframes tdSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.demand-modal-body {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
  overflow: auto;
}

.demand-form-section,
.demand-complex-area {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.demand-complex-area {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.demand-complex-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(9.375rem, 1fr));
  gap: 0.25rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0.625rem;
}

.demand-complex-tabs button {
  min-height: 2.25rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.demand-complex-tabs button.active {
  border-color: rgba(124, 58, 237, 0.34);
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 0.625rem 1.375rem rgba(124, 58, 237, 0.1);
}

.demand-form-main {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.875rem;
}

.demand-description-field textarea {
  min-height: 7.25rem;
  font-family: inherit;
}

.demand-alias-action {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.875rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 46%, transparent), transparent 62%),
    color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  padding: 0.75rem;
}

.demand-alias-action .secondary-button {
  min-height: 2.125rem;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: var(--surface);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.demand-alias-action small {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

.demand-status-builder {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
}

.status-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface) 80%, var(--primary-soft));
}

.status-builder-head span {
  display: block;
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-builder-head strong {
  display: block;
  margin-top: 0.1875rem;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.15;
}

.status-grid-head,
.status-row {
  display: grid;
  grid-template-columns: minmax(11.25rem, 1fr) 11.25rem 5.125rem 2.375rem;
  gap: 0.625rem;
  align-items: center;
}

.status-grid-head {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.625rem 1rem;
  color: var(--table-head);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.status-rows {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 0.875rem 1rem 1rem;
  overflow: auto;
  scrollbar-gutter: stable;
}

.status-row {
  box-sizing: border-box;
  min-height: 3.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.5625rem;
}

.status-row.is-recently-created {
  border-color: #34c759;
  background: #d9fbe7;
  box-shadow: inset 0 0 0 0.125rem rgba(52, 199, 89, 0.55);
  animation: td-status-row-created-highlight 1500ms ease-out 1;
}

@keyframes td-status-row-created-highlight {
  0% {
    border-color: #22b455;
    background: #c6f6db;
    box-shadow: inset 0 0 0 0.125rem rgba(52, 199, 89, 0.72);
  }

  70% {
    border-color: rgba(52, 199, 89, 0.45);
    background: rgba(198, 246, 219, 0.85);
  }

  100% {
    border-color: var(--line-soft);
    background: var(--control-bg);
    box-shadow: inset 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

.status-row input,
.status-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.5rem;
  font-size: 0.7188rem;
}

.status-row input:focus,
.status-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.status-initial-toggle {
  box-sizing: border-box;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
}

.status-initial-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.status-initial-toggle span {
  font-size: 1.125rem;
}

.status-initial-toggle:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.42);
  background: var(--primary-soft);
  color: var(--primary);
}

.demand-schema-builder {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  background: var(--surface);
}

.schema-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.875rem;
  background: var(--control-bg);
}

.schema-builder-head span {
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schema-builder-head h4 {
  margin: 0.1875rem 0 0;
  color: var(--panel-title);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.schema-builder-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.segmented-control {
  min-height: 2.125rem;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  padding: 0.1875rem;
}

.segmented-control-tenant {
  grid-template-columns: repeat(2, minmax(4.75rem, 1fr));
}

.segmented-control button {
  border: 0;
  border-radius: calc(var(--radius-sm) - 0.1875rem);
  background: transparent;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 800;
}

.segmented-control button.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0.5rem 1.125rem rgba(124, 58, 237, 0.22);
}

.compact-action {
  min-height: 2.125rem;
  padding: 0 0.6875rem;
  font-size: 0.7188rem;
}

.secondary-button:disabled,
.primary-button:disabled,
.compact-action:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.schema-builder-view {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.magic-schema-panel {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(13.75rem, 0.72fr);
  gap: 0.875rem;
  align-items: stretch;
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 76%, var(--surface)), transparent 58%),
    var(--surface);
  padding: 0.875rem 1rem;
}

.magic-schema-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0.75rem 1.625rem rgba(124, 58, 237, 0.12);
}

.magic-schema-icon .material-symbols-rounded {
  font-size: 1.6875rem;
}

.magic-schema-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.25rem;
}

.magic-schema-copy span {
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 900;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.magic-schema-copy strong {
  color: var(--panel-title);
  font-size: 0.9375rem;
  line-height: 1.25;
}

.magic-schema-copy p {
  max-width: 53.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.55;
}

.magic-schema-steps {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
  align-content: center;
}

.magic-schema-steps div {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--primary-soft));
  padding: 0.4375rem 0.5625rem;
}

.magic-schema-steps b {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 62.4375rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.6875rem;
}

.magic-schema-steps span {
  min-width: 0;
  color: var(--label);
  font-size: 0.7188rem;
  font-weight: 800;
}

.schema-empty-state {
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface));
  padding: 0.875rem;
}

.schema-empty-state > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.4375rem;
}

.schema-empty-state strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.schema-empty-state p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.schema-grid-head,
.schema-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.05fr) minmax(5.875rem, 7rem) 2.0625rem 2.0625rem minmax(6.25rem, 0.76fr) minmax(7.5rem, 0.92fr) minmax(8.25rem, 1.12fr) minmax(3.625rem, 4.625rem) 2.375rem;
  gap: 0.625rem;
  align-items: center;
  min-width: 0;
}

.schema-grid-head {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.625rem 1rem;
  color: var(--table-head);
  font-size: 0.6562rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schema-rows {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 0.625rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.schema-row {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 3.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.625rem 0.75rem;
  overflow: hidden;
}

.schema-row.is-recently-created {
  border-color: #34c759;
  background: #d9fbe7;
  box-shadow: inset 0 0 0 0.125rem rgba(52, 199, 89, 0.55);
  animation: td-schema-row-created-highlight 1500ms ease-out 1;
}

@keyframes td-schema-row-created-highlight {
  0% {
    border-color: #22b455;
    background: #c6f6db;
    box-shadow: inset 0 0 0 0.125rem rgba(52, 199, 89, 0.72);
  }

  70% {
    border-color: rgba(52, 199, 89, 0.45);
    background: rgba(198, 246, 219, 0.85);
  }

  100% {
    border-color: var(--line-soft);
    background: var(--control-bg);
    box-shadow: inset 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

.schema-row input,
.schema-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.5625rem;
  font-size: 0.75rem;
}

.schema-row .searchable-select,
.status-row .searchable-select {
  --searchable-border: var(--line);
  --searchable-border-soft: var(--line);
  --searchable-bg: var(--input-bg);
  --searchable-surface: var(--input-bg);
  --searchable-radius: var(--radius-xs);
  --searchable-control-h: 2.125rem;
}

.schema-row .searchable-select__trigger,
.status-row .searchable-select__trigger {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 2.125rem;
  min-height: 2.125rem;
  padding: 0 0.5625rem;
}

.schema-row .searchable-select__trigger-label,
.schema-row .searchable-select__placeholder,
.status-row .searchable-select__trigger-label,
.status-row .searchable-select__placeholder {
  font-size: 0.75rem;
}

.schema-row input:focus,
.schema-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.schema-required-toggle {
  box-sizing: border-box;
  width: 2.0625rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
}

.schema-required-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schema-required-toggle span {
  font-size: 1rem;
}

.schema-required-toggle:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.42);
  background: var(--primary-soft);
  color: var(--primary);
}

.schema-kanban-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 13%, var(--input-bg));
}

.schema-row.is-aggregated {
  border-style: dashed;
  background: color-mix(in srgb, var(--primary) 3%, var(--control-bg));
}

.schema-row.is-aggregated input:disabled,
.schema-row.is-aggregated select:disabled {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 68%, var(--control-bg));
  opacity: 0.82;
}

.schema-origin-badge {
  box-sizing: border-box;
  min-width: 0;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 800;
  overflow: hidden;
}

.schema-origin-badge .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 0.875rem;
}

.schema-aggregate-lock {
  justify-self: center;
  color: var(--muted);
  font-size: 1rem;
}

.schema-config-btn {
  width: 100%;
  min-width: 0;
  height: 2.125rem;
  justify-content: center;
  gap: 0.3125rem;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    var(--surface);
  color: var(--primary);
}

.schema-config-btn small {
  max-width: 3.725rem;
  overflow: hidden;
  color: inherit;
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-config-btn.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.schema-config-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  box-shadow: 0 0.625rem 1.375rem color-mix(in srgb, var(--primary) 13%, transparent);
  transform: translateY(-0.0625rem);
}

.schema-config-placeholder {
  width: 100%;
  height: 2.125rem;
}

.schema-list-items-modal {
  width: min(40rem, calc(100vw - 1.75rem));
}

.schema-list-items-body {
  padding: 0;
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
}

.schema-list-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.75rem 1rem;
}

.schema-list-items-toolbar strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.schema-list-items-toolbar span {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 760;
}

.schema-list-items-rows {
  display: flex;
  flex-direction: column;
  max-height: min(26.875rem, 52vh);
  overflow: auto;
  padding: 0;
}

.schema-list-item-row {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.5625rem 0.75rem 0.5625rem 1rem;
  transition: background var(--ease-ui), border-color var(--ease-ui);
}

.schema-list-item-row:last-child {
  border-bottom: 0;
}

.schema-list-item-row:focus-within,
.schema-list-item-row:hover {
  background: color-mix(in srgb, var(--primary-soft) 22%, var(--surface));
}

.schema-list-item-index {
  flex: 0 0 auto;
  width: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.schema-list-name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 780;
}

.schema-list-name-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.125rem var(--primary-soft);
}

.schema-list-color-field {
  flex: 0 0 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  padding: 0.1875rem;
}

.schema-list-color-dot {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 0.0625rem rgba(15, 23, 42, 0.14);
}

.schema-list-color-dot::-webkit-color-swatch-wrapper {
  padding: 0;
}

.schema-list-color-dot::-webkit-color-swatch {
  border: 0;
  border-radius: 62.4375rem;
}

.schema-list-color-dot::-moz-color-swatch {
  border: 0;
  border-radius: 62.4375rem;
}

.schema-list-color-field em {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-list-remove-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 18%, var(--line-soft));
  border-radius: 0.5625rem;
  background: transparent;
  color: color-mix(in srgb, var(--red) 64%, var(--muted));
  cursor: pointer;
  transition: border-color var(--ease-ui), background var(--ease-ui), color var(--ease-ui);
}

.schema-list-remove-btn:hover {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 11%, var(--surface));
  color: var(--red);
}

.schema-list-remove-btn .material-symbols-rounded {
  font-size: 1.125rem;
}

.schema-list-empty {
  display: grid;
  place-items: center;
  gap: 0.375rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  color: var(--muted);
  padding: 1.625rem 0.875rem;
  text-align: center;
}

.schema-list-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.75rem;
}

.schema-list-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.schema-list-empty p {
  max-width: 20rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.schema-object-source-modal {
  width: min(47.5rem, calc(100vw - 1.75rem));
}

.flow-modal-body.schema-object-source-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.schema-object-source-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  gap: 0.75rem;
  border: 0;
  border-right: 0.0625rem solid var(--line-soft);
  border-radius: 0;
  background: color-mix(in srgb, var(--control-bg) 54%, var(--surface));
  padding: 1rem;
}

.schema-object-source-row label {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.schema-object-source-row span {
  color: var(--label);
  font-size: 0.6562rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.schema-object-source-row select {
  height: 2.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 760;
}

.schema-object-source-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.125rem var(--primary-soft);
}

.schema-object-face-builder {
  display: grid;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  padding: 0.625rem;
}

.schema-object-face-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.schema-object-face-head strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
  font-weight: 900;
}

.schema-object-face-head .secondary-button {
  min-height: 2rem;
  padding: 0 0.625rem;
  font-size: 0.6562rem;
}

.schema-object-face-rows {
  display: grid;
  gap: 0.5rem;
}

.schema-object-face-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.25rem 2.125rem;
  gap: 0.5rem;
  align-items: center;
}

.schema-object-face-row select {
  height: 2rem;
  font-size: 0.6875rem;
}

.schema-object-face-row .table-action {
  min-height: 2rem;
}

.schema-object-face-empty {
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 650;
}

.schema-object-face-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.6562rem;
  line-height: 1.4;
}

.schema-object-values-panel {
  min-width: 0;
  min-height: 13.75rem;
  display: flex;
  flex-direction: column;
}

@media (max-width: 40rem) {
  .flow-modal-body.schema-object-source-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .schema-object-source-row {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }
}

.schema-object-values-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.6875rem 1rem;
}

.schema-object-values-panel strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 950;
}

.schema-object-values-panel header span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
}

.schema-object-values-list {
  max-height: min(20rem, 42vh);
  overflow: auto;
}

.schema-object-values-list .task-import-relation-carousel {
  padding: 0.75rem 1rem 1rem;
}

.schema-object-values-list .task-import-relation-carousel-track {
  padding: 0.125rem;
}

.schema-object-values-list .task-import-relation-carousel-card {
  cursor: default;
}

.schema-object-values-list .task-import-relation-carousel-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  align-items: start;
}

.schema-object-values-list .task-import-relation-carousel-line {
  display: block;
  color: var(--text);
  font-size: 0.7188rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schema-object-values-list .task-import-relation-carousel-card em {
  justify-self: flex-start;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 900;
}

.schema-object-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.625rem 1rem;
}

.schema-object-value-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-object-value-row em {
  flex: 0 0 auto;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 900;
}

.schema-object-values-empty {
  display: grid;
  place-items: center;
  min-height: 11.875rem;
  color: var(--muted);
  padding: 1.5rem;
  text-align: center;
}

.schema-object-values-empty strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.schema-json-view {
  min-height: 0;
  padding: 0.875rem;
}

.schema-json-view textarea {
  min-height: 27.5rem;
  resize: none;
}

.content.routing-builder-mode {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr;
}

.content.routing-builder-mode > .topbar {
  display: none;
}

.content.routing-builder-mode .page-view:not(.hidden),
.content.routing-builder-mode .routing-workbench {
  min-height: 100vh;
}

.routing-workbench {
  --routing-header-height: 3.0625rem;
  --routing-sidebar-width: 16.5rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.05), transparent 16.25rem),
    var(--bg);
}

.routing-row-header {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  min-height: var(--routing-header-height);
  padding: 0 1.125rem 0 calc(var(--routing-sidebar-width) + 1.125rem);
  border-bottom: 0.0625rem solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(1.125rem);
}

.routing-editor-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.routing-editor-heading > div {
  min-width: 0;
}

.routing-back-button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  padding: 0 0.625rem;
  font-size: 0.7188rem;
  font-weight: 760;
  white-space: nowrap;
}

.routing-back-button:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.routing-back-button .material-symbols-rounded {
  font-size: 1rem;
}

.builder-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 1.125rem;
  margin-bottom: 0.125rem;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.routing-row-header h2 {
  max-width: 24rem;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-row-header p {
  display: none;
}

.builder-actions {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.builder-actions .primary-button,
.builder-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.25rem;
  white-space: nowrap;
}

.builder-actions .material-symbols-rounded {
  font-size: 1.125rem;
}

.route-active-switch {
  min-height: 2.375rem;
  display: inline-grid;
  grid-template-columns: 3rem minmax(0, auto);
  align-items: center;
  gap: 0.5625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 62.4375rem;
  padding: 0.25rem 0.75rem 0.25rem 0.3125rem;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(15, 23, 42, 0.03)),
    var(--surface);
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.08), 0 0.75rem 1.625rem rgba(15, 23, 42, 0.08);
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), color var(--ease-ui);
}

.route-active-switch:hover:not(:disabled) {
  transform: translateY(-0.0625rem);
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  box-shadow: 0 0.875rem 1.75rem rgba(44, 198, 93, 0.12);
}

.route-active-switch:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.route-active-switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.625rem;
  display: inline-flex;
  align-items: center;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--muted) 22%, var(--line-soft));
  box-shadow: inset 0 0.125rem 0.375rem rgba(15, 23, 42, 0.16);
  transition: background-color var(--ease-ui);
}

.route-active-switch-thumb {
  position: absolute;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 62.4375rem;
  background: var(--surface);
  box-shadow: 0 0.1875rem 0.5625rem rgba(15, 23, 42, 0.24);
  transition: transform var(--ease-ui), background-color var(--ease-ui);
}

.route-active-switch-copy {
  display: grid;
  gap: 0.0625rem;
  text-align: left;
}

.route-active-switch-copy strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
  line-height: 1.1;
  white-space: nowrap;
}

.route-active-switch-copy small {
  color: var(--muted);
  font-size: 0.5938rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.route-active-switch.is-active {
  border-color: color-mix(in srgb, var(--green) 44%, var(--line));
  background:
    linear-gradient(135deg, rgba(44, 198, 93, 0.16), rgba(37, 99, 235, 0.08)),
    var(--surface);
  color: var(--green);
}

.route-active-switch.is-active .route-active-switch-track {
  background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--blue) 56%, var(--green)));
}

.route-active-switch.is-active .route-active-switch-thumb {
  transform: translateX(1.125rem);
  background: var(--surface);
}

.route-active-switch.is-active .route-active-switch-copy strong,
.route-active-switch.is-active .route-active-switch-copy small {
  color: var(--green);
}

.inspection-toggle-button {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
}

.inspection-toggle-button.is-active {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  background:
    linear-gradient(135deg, rgba(44, 198, 93, 0.18), rgba(37, 99, 235, 0.12)),
    var(--surface);
  color: var(--green);
  box-shadow: 0 0.625rem 1.5rem rgba(44, 198, 93, 0.16);
}

.inspection-toggle-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.routing-row-canvas {
  min-height: 0;
  height: 100%;
  padding: 0;
}

.content.tasks-board-mode > .topbar {
  display: none;
}

.content.tasks-board-mode {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.content.tasks-board-mode .page-view:not(.hidden),
.content.tasks-board-mode .tasks-workbench {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tasks-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.05), transparent 16.25rem),
    var(--bg);
}

.tasks-board-header {
  position: relative;
  z-index: 300;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(11.25rem, 0.9fr) minmax(0, 1.7fr);
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.3125rem 0.75rem;
  border-bottom: 0.0625rem solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(1.125rem);
}

.tasks-board-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(5.75rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.tasks-board-nav {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.125rem;
}

.tasks-board-nav .builder-kicker {
  font-size: 0.5625rem;
  line-height: 1;
  white-space: nowrap;
}

.tasks-board-title {
  min-width: 0;
}

.tasks-board-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.tasks-demand-edit-button {
  width: 1.875rem;
  height: 1.875rem;
  min-width: 1.875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 80%, var(--primary));
  border-radius: 0.625rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  color: var(--primary);
  box-shadow: 0 0.5rem 1.125rem rgba(15, 23, 42, 0.06);
  transition: transform var(--ease-ui), border-color var(--ease-ui), box-shadow var(--ease-ui), background var(--ease-ui);
}

.tasks-demand-edit-button .material-symbols-rounded {
  font-size: 1.0625rem;
}

.tasks-demand-edit-button:not(:disabled):hover {
  transform: translateY(-0.0625rem);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 62%),
    var(--surface);
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--primary) 14%, transparent);
}

.tasks-demand-edit-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.tasks-board-header h2 {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-board-header p {
  max-width: 48.75rem;
  margin: 0.0625rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.1;
}

.tasks-board-side {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) minmax(0, max-content) auto;
  align-items: center;
  justify-content: end;
  gap: 0.5rem;
}

.tasks-board-header .builder-actions {
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.tasks-board-header .builder-actions .secondary-button {
  min-height: 2rem;
  padding: 0 0.625rem;
}

.tasks-board-header .builder-actions .material-symbols-rounded {
  font-size: 1.0625rem;
}

.tasks-mobile-controls-toggle {
  display: none;
}

.tasks-share-anchor {
  position: relative;
  z-index: 420;
}

@media (max-width: 86rem) {
  .tasks-board-header {
    grid-template-columns: minmax(9.375rem, 0.72fr) minmax(0, 1.9fr);
    gap: 0.5rem;
  }

  .tasks-board-main {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
  }

  .tasks-board-nav .builder-kicker,
  .tasks-board-header p {
    display: none;
  }

  .tasks-board-side {
    grid-template-columns: minmax(10.375rem, auto) minmax(0, max-content) auto;
    gap: 0.375rem;
  }

  .tasks-board-header .builder-actions .secondary-button,
  .tasks-data-button,
  .tasks-share-button {
    padding-inline: 0.5rem;
  }
}

@media (max-width: 64rem) and (min-width: 47.5625rem) {
  .tasks-board-header {
    grid-template-columns: minmax(7.375rem, 0.56fr) minmax(0, 2fr);
  }

  .tasks-board-nav .back-button {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    padding: 0 !important;
    text-indent: -62.4375rem;
  }

  .tasks-board-nav .back-button .material-symbols-rounded {
    text-indent: 0;
  }

  .tasks-board-header h2 {
    font-size: 0.8125rem;
  }

  .tasks-board-side {
    grid-template-columns: minmax(9.375rem, auto) minmax(0, max-content) auto;
  }
}

.tasks-data-anchor {
  position: relative;
  z-index: 410;
}

.tasks-data-button {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 64%),
    var(--surface);
  color: var(--panel-title);
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.08);
  font-size: 0.8125rem;
  font-weight: 900;
}

.tasks-data-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  color: var(--primary);
}

.tasks-data-menu {
  position: absolute;
  top: calc(100% + 0.5625rem);
  right: 0;
  z-index: 900;
  width: 17.875rem;
  display: grid;
  gap: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 72%, var(--primary));
  border-radius: 0.875rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 36%, transparent), transparent 52%),
    var(--surface);
  padding: 0.5rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.22);
}

.tasks-data-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid transparent;
  background: transparent;
  color: var(--text);
  padding: 0.5625rem;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.tasks-data-menu button:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface));
  transform: translateY(-0.0625rem);
  border-radius: 0.6875rem;
}

.tasks-data-menu button > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.tasks-data-menu button div {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.tasks-data-menu button strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 900;
}

.tasks-data-menu button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-data-menu button.is-danger {
  border-top: 0.0625rem solid color-mix(in srgb, var(--red) 16%, var(--line-soft));
}

.tasks-data-menu button.is-danger > .material-symbols-rounded {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  color: var(--red);
}

.tasks-data-menu button.is-danger:hover {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
}

.tasks-data-menu button.is-danger:hover strong {
  color: var(--red);
}

.task-delete-confirm-modal {
  width: min(40rem, calc(100vw - 2.5rem));
  max-width: min(40rem, calc(100vw - 2.5rem));
}

.task-delete-confirm-body {
  grid-template-columns: 1fr !important;
  gap: 0.875rem;
  padding: 1.125rem;
}

.task-delete-confirm-body .remove-all-tasks-warning strong {
  overflow-wrap: anywhere;
}

.remove-all-tasks-body {
  grid-template-columns: 1fr;
  gap: 0.875rem;
  padding: 1.125rem;
}

.remove-all-tasks-warning {
  display: grid;
  grid-template-columns: 2.875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8125rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 26%, var(--line));
  border-radius: 0.75rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 76%),
    var(--control-bg);
  padding: 0.875rem;
}

.remove-all-tasks-warning > .material-symbols-rounded {
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--red) 13%, var(--surface));
  color: var(--red);
  font-size: 1.5625rem;
}

.remove-all-tasks-warning strong {
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 900;
}

.remove-all-tasks-warning p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.remove-all-confirm-field {
  max-width: 26.25rem;
}

.remove-all-confirm-field span strong {
  color: var(--red);
}

#confirmRemoveAllTasksBtn {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 72%, #7f1d1d);
  border-radius: 0.75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--red) 94%, #ef4444), color-mix(in srgb, var(--red) 86%, #7f1d1d));
  color: #fff;
  padding: 0 1rem;
  font-size: 0.7812rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  box-shadow:
    0 0.875rem 1.875rem color-mix(in srgb, var(--red) 26%, transparent),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--ease-ui), box-shadow var(--ease-ui), filter var(--ease-ui), opacity var(--ease-ui);
}

#confirmRemoveAllTasksBtn .material-symbols-rounded {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.16);
  color: currentColor;
  font-size: 1.125rem;
}

#confirmRemoveAllTasksBtn:not(:disabled):hover {
  transform: translateY(-0.0625rem);
  border-color: color-mix(in srgb, var(--red) 84%, #450a0a);
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--red) 92%, #f87171), color-mix(in srgb, var(--red) 92%, #7f1d1d));
  box-shadow:
    0 1.125rem 2.375rem color-mix(in srgb, var(--red) 34%, transparent),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.24);
}

#confirmRemoveAllTasksBtn:disabled {
  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--red) 18%, var(--control-bg)), color-mix(in srgb, var(--red) 10%, var(--surface)));
  color: color-mix(in srgb, var(--red) 58%, var(--muted));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

#confirmTaskDeleteBtn {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 72%, #7f1d1d);
  border-radius: 0.75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--red) 94%, #ef4444), color-mix(in srgb, var(--red) 86%, #7f1d1d));
  color: #fff;
  padding: 0 1rem;
  font-size: 0.7812rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  box-shadow:
    0 0.875rem 1.875rem color-mix(in srgb, var(--red) 26%, transparent),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--ease-ui), box-shadow var(--ease-ui), filter var(--ease-ui), opacity var(--ease-ui);
}

#confirmTaskDeleteBtn .material-symbols-rounded {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.16);
  color: currentColor;
  font-size: 1.125rem;
}

#confirmTaskDeleteBtn:not(:disabled):hover {
  transform: translateY(-0.0625rem);
  border-color: color-mix(in srgb, var(--red) 84%, #450a0a);
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--red) 92%, #f87171), color-mix(in srgb, var(--red) 92%, #7f1d1d));
  box-shadow:
    0 1.125rem 2.375rem color-mix(in srgb, var(--red) 34%, transparent),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.24);
}

#confirmTaskDeleteBtn:disabled {
  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--red) 18%, var(--control-bg)), color-mix(in srgb, var(--red) 10%, var(--surface)));
  color: color-mix(in srgb, var(--red) 58%, var(--muted));
  box-shadow: none;
  cursor: progress;
  opacity: 0.72;
}

.tasks-share-button {
  border-color: color-mix(in srgb, var(--line) 82%, var(--text));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--text) 4%, transparent),
      color-mix(in srgb, var(--surface) 94%, transparent)
    ),
    var(--surface);
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.08);
}

.tasks-share-button:not(:disabled):hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.12);
}

.tasks-share-popover {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  z-index: 9999;
  width: min(30rem, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 72%, var(--text));
  border-radius: 0.75rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 98%, transparent),
      color-mix(in srgb, var(--control-bg) 96%, transparent)
    ),
    var(--surface);
  padding: 0.75rem;
  box-shadow:
    0 1.625rem 4.375rem rgba(15, 23, 42, 0.20),
    0 0.0625rem 0 color-mix(in srgb, var(--surface) 86%, transparent) inset;
}

.tasks-share-popover.hidden {
  display: none;
}

.tasks-share-head,
.tasks-share-footer,
.tasks-share-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.tasks-share-head strong {
  display: block;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.15;
}

.tasks-share-head span,
.tasks-share-config p,
.tasks-share-footer span {
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.tasks-share-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.25rem 2.25rem;
  gap: 0.375rem;
}

.tasks-share-url-row input,
.tasks-share-password-field input {
  min-width: 0;
  height: 2.25rem;
  border: 0.0625rem solid rgba(148, 163, 184, 0.36);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.04);
}

.share-icon-button {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid rgba(148, 163, 184, 0.36);
  border-radius: 0.5625rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.04);
}

.share-icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.share-icon-button:not(:disabled):hover {
  border-color: rgba(15, 23, 42, 0.24);
  transform: translateY(-0.0625rem);
}

.tasks-share-divider {
  height: 0.0625rem;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.42), transparent);
}

.tasks-share-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  padding: 0.25rem;
}

.tasks-share-tabs button {
  min-width: 0;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 850;
  cursor: pointer;
}

.tasks-share-tabs button.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 0.0625rem 0 rgba(15, 23, 42, 0.06), 0 0.5rem 1.125rem rgba(124, 58, 237, 0.12);
}

.tasks-share-tabs .material-symbols-rounded {
  font-size: 1.0625rem;
}

.tasks-share-panel {
  display: grid;
  gap: 0.625rem;
}

.tasks-share-panel.hidden {
  display: none;
}

.share-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.share-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.share-switch > span {
  width: 2.875rem;
  height: 1.625rem;
  display: block;
  border-radius: 62.4375rem;
  background: #e5e7eb;
  box-shadow: 0 0.625rem 1.375rem rgba(15, 23, 42, 0.12) inset;
  transition: background var(--ease-ui), box-shadow var(--ease-ui);
}

.share-switch > span::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.125rem rgba(15, 23, 42, 0.22);
  transition: transform var(--ease-ui);
}

.share-switch input:checked + span {
  background: var(--primary);
}

.share-switch input:checked + span::after {
  transform: translateX(1.25rem);
}

.share-switch-small > span {
  width: 2.5rem;
  height: 1.4375rem;
}

.share-switch-small > span::after {
  width: 1.0625rem;
  height: 1.0625rem;
}

.share-switch-small input:checked + span::after {
  transform: translateX(1.0625rem);
}

.tasks-share-toggle-row {
  justify-content: flex-start;
  font-size: 0.75rem;
}

.tasks-share-password-field {
  display: grid;
  gap: 0.375rem;
}

.tasks-share-password-field span,
.tasks-share-config strong {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 850;
}

.tasks-share-config {
  display: grid;
  gap: 0.5rem;
}

.tasks-share-validity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
}

.tasks-share-validity label {
  min-width: 0;
  cursor: pointer;
}

.tasks-share-validity input {
  position: absolute;
  opacity: 0;
}

.tasks-share-validity span {
  min-height: 1.875rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(148, 163, 184, 0.38);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
}

.tasks-share-validity input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
}

.tasks-share-footer {
  align-items: center;
  padding-top: 0.125rem;
}

.tasks-share-footer span.is-ok {
  color: var(--green);
}

.tasks-share-footer span.is-error {
  color: var(--red);
}

.tasks-share-footer .primary-button {
  min-height: 2.125rem;
  padding: 0 0.8125rem;
  font-size: 0.75rem;
}

.tasks-form-customize-button {
  width: 100%;
  min-height: 2.125rem;
  justify-content: center;
  border-radius: 0.5625rem;
  font-size: 0.75rem;
}

.task-form-customize-modal {
  width: min(65rem, calc(100vw - 2rem));
  max-height: min(53.75rem, calc(100vh - 2rem));
}

.task-form-customize-body {
  overflow: auto;
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
}

.task-form-brand-grid,
.task-form-completion-card {
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  padding: 0.875rem;
}

.task-form-custom-section {
  display: grid;
  gap: 0.625rem;
}

.task-form-custom-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-form-custom-section > header strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 950;
}

.task-form-custom-section > header span {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

.task-form-fields-builder {
  display: grid;
  gap: 0.5rem;
}

.task-form-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11.875rem;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0.75rem;
}

.task-form-field-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.55fr) minmax(11.25rem, 1fr) minmax(11.25rem, 1.2fr);
  gap: 0.625rem;
}

.task-form-field-main label,
.task-form-field-options {
  min-width: 0;
  display: grid;
  gap: 0.3125rem;
}

.task-form-field-main span,
.task-form-field-options em {
  color: var(--muted);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.task-form-field-main strong {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--control-bg) 86%, var(--surface));
  color: var(--panel-title);
  padding: 0 0.625rem;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-form-field-main input {
  min-width: 0;
  height: 2.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.75rem;
}

.task-form-field-options {
  align-content: center;
}

.compact-check {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
}

.compact-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.task-form-completion-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 51.25rem) {
  .task-form-field-row,
  .task-form-field-main {
    grid-template-columns: 1fr;
  }
}

/* T-Demand share popover polish. */
.tasks-share-popover {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 1.375rem;
  background:
    radial-gradient(circle at 12% -4%, color-mix(in srgb, var(--primary-soft) 92%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--control-bg)), color-mix(in srgb, var(--surface-2) 42%, var(--surface))),
    var(--surface);
  padding: 1rem;
  box-shadow:
    0 1.875rem 5.375rem rgba(15, 23, 42, 0.22),
    0 0 0 0.0625rem color-mix(in srgb, #fff 32%, transparent) inset;
}

.tasks-share-head {
  align-items: flex-start;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 1.125rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface) 84%, var(--control-bg));
  padding: 0.875rem;
}

.tasks-share-head strong {
  color: var(--panel-title);
  font-size: 1.125rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.tasks-share-head span {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.7188rem;
  font-weight: 700;
}

.tasks-share-url-row input,
.tasks-share-password-field input {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--input-bg) 86%, var(--surface));
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
}

.share-icon-button {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 0.875rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--primary-soft)), var(--surface));
  color: var(--primary);
}

.share-icon-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
  color: var(--primary);
}

.tasks-share-toggle-row,
.tasks-share-config,
.tasks-share-password-field {
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 80%, var(--control-bg));
  padding: 0.75rem;
}

.tasks-share-toggle-row strong,
.tasks-share-config strong,
.tasks-share-password-field span {
  color: var(--panel-title);
}

.share-switch > span {
  background: color-mix(in srgb, var(--muted) 18%, var(--control-bg));
}

.share-switch input:checked + span {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 0.75rem 1.625rem color-mix(in srgb, var(--primary) 28%, transparent) inset;
}

.tasks-share-validity span {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 0.8125rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--control-bg));
  color: var(--label);
  font-weight: 900;
}

.tasks-share-validity input:checked + span {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--primary) 24%, transparent);
}

.tasks-share-footer {
  border-top: 0.0625rem solid color-mix(in srgb, var(--primary) 12%, var(--line-soft));
  padding-top: 0.75rem;
}

.tasks-share-footer .primary-button {
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 0.875rem 1.75rem color-mix(in srgb, var(--primary) 22%, transparent);
}

.app.shared-tasks-mode {
  grid-template-columns: 1fr;
}

.app.shared-tasks-mode .sidebar,
.app.shared-tasks-mode .topbar,
.app.shared-tasks-mode #backToDemandsBtn,
.app.shared-tasks-mode #shareTasksBoardBtn,
.app.shared-tasks-mode #importTasksFromBoardBtn,
.app.shared-tasks-mode #openRemoveAllTasksBtn {
  display: none !important;
}

.app.shared-dashboard-mode {
  grid-template-columns: 1fr;
}

.app.shared-dashboard-mode .sidebar {
  display: none !important;
}

.app.shared-dashboard-mode .content {
  min-height: 100vh;
}

.app.shared-tasks-mode .content {
  min-height: 100vh;
}

.app.shared-tasks-mode .tasks-workbench {
  min-height: 100vh;
}

.task-detail-modal.is-shared-readonly .flow-modal-head p {
  color: var(--muted);
}

.task-detail-modal.is-shared-readonly #saveTaskDetailBtn,
.task-detail-modal.is-shared-readonly button[form="taskDetailForm"],
.task-detail-modal.is-shared-readonly #openTaskDeleteConfirmBtn,
.task-detail-modal.is-shared-readonly [data-task-detail-file-clear],
.task-detail-modal.is-shared-readonly .task-file-dropzone {
  display: none !important;
}

.task-detail-rich-text-field {
  align-content: start;
}

.task-rich-text-hidden {
  display: none !important;
}

.task-rich-text-host {
  min-width: 0;
}

.task-rich-text-shell {
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 78%, var(--primary));
  border-radius: 0.75rem;
  background: var(--input-bg);
  box-shadow: inset 0 0.0625rem 0 color-mix(in srgb, #fff 8%, transparent);
}

.task-rich-text-shell.is-readonly {
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
}

.task-rich-text-toolbar {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 42%, transparent), transparent 70%),
    color-mix(in srgb, var(--control-bg) 88%, var(--surface));
  padding: 0.3125rem 0.4375rem;
}

.task-rich-text-toolbar button {
  width: 1.875rem;
  height: 1.625rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
}

.task-rich-text-toolbar button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
}

.task-rich-text-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.task-rich-text-surface {
  position: relative;
}

.task-rich-text-content {
  min-height: 10.625rem;
  max-height: 20rem;
  overflow: auto;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.55;
  padding: 0.75rem 0.8125rem;
  outline: none;
}

.task-rich-text-content p {
  margin: 0 0 0.625rem;
}

.task-rich-text-placeholder {
  position: absolute;
  top: 0.75rem;
  left: 0.8125rem;
  color: var(--muted);
  font-size: 0.8125rem;
  pointer-events: none;
  opacity: 0.72;
}

.task-rich-text-bold {
  font-weight: 800;
}

.task-rich-text-italic {
  font-style: italic;
}

.task-rich-text-underline {
  text-decoration: underline;
}

.task-detail-modal.is-shared-readonly .task-detail-field input,
.task-detail-modal.is-shared-readonly .task-detail-field select,
.task-detail-modal.is-shared-readonly .task-detail-field textarea {
  background: rgba(248, 250, 252, 0.92);
  color: var(--text);
  cursor: default;
}

.task-detail-modal.is-shared-readonly .task-detail-field span em {
  background: rgba(15, 23, 42, 0.08);
  color: var(--muted);
}

.task-field-technical-name {
  color: var(--muted) !important;
  font-family: var(--mono);
  font-size: 0.6562rem !important;
  font-weight: 700;
}

.tasks-board-summary {
  width: auto;
  min-height: 2.125rem;
}

.tasks-board-summary:empty {
  display: none;
}

.tasks-board-summary-grid {
  display: grid;
  grid-template-columns: auto auto repeat(2, minmax(4.375rem, max-content)) auto;
  justify-content: end;
  align-items: center;
  gap: 0.375rem;
}

.tasks-presence {
  position: relative;
  justify-self: end;
  min-width: 0;
}

.tasks-presence-trigger {
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 62.4375rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--primary-soft)), var(--control-bg));
  color: var(--text);
  padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;
  box-shadow: 0 0.75rem 1.625rem rgba(15, 23, 42, 0.08);
}

.tasks-presence-trigger:not(:disabled):hover,
.tasks-presence-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  background: var(--surface);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary) 12%, transparent);
}

.tasks-presence-trigger:disabled {
  cursor: default;
  opacity: 0.68;
}

.tasks-presence-label {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.tasks-presence-stack {
  display: flex;
  align-items: center;
}

.tasks-presence-avatar,
.tasks-presence-more {
  width: 1.6875rem;
  height: 1.6875rem;
  display: grid;
  place-items: center;
  flex: 0 0 1.6875rem;
  margin-left: -0.5rem;
  border: 0.125rem solid var(--surface);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--primary-soft) 80%, transparent), transparent 58%),
    var(--avatar-bg);
  color: var(--avatar-text);
  font-size: 0.5938rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.125rem rgba(15, 23, 42, 0.16);
}

.tasks-presence-avatar:first-child {
  margin-left: 0;
}

.tasks-presence-avatar img,
.tasks-presence-person-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tasks-presence-avatar.is-empty .material-symbols-rounded {
  color: var(--muted);
  font-size: 0.9375rem;
}

.tasks-presence-more {
  z-index: 1;
  background: var(--panel-title);
  color: var(--surface);
  font-size: 0.5625rem;
}

.tasks-presence-popover {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  z-index: 920;
  width: min(20rem, calc(100vw - 1.5rem));
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 1.125rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--primary-soft)), var(--surface));
  box-shadow: 0 1.5rem 4.375rem rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.tasks-presence-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.75rem 0.875rem;
}

.tasks-presence-popover header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 950;
}

.tasks-presence-popover header span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
}

.tasks-presence-list {
  max-height: 17rem;
  display: grid;
  gap: 0.25rem;
  overflow: auto;
  padding: 0.5rem;
}

.tasks-presence-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.8125rem;
  padding: 0.5rem;
}

.tasks-presence-person:hover {
  background: color-mix(in srgb, var(--primary-soft) 40%, transparent);
}

.tasks-presence-person-avatar {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-size: 0.75rem;
  font-weight: 950;
  overflow: hidden;
}

.tasks-presence-person strong,
.tasks-presence-person small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-presence-person strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 900;
}

.tasks-presence-person small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.tasks-board-search {
  position: relative;
  justify-self: start;
  min-width: 0;
}

.tasks-board-search-trigger {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 62.4375rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--primary-soft)), var(--control-bg));
  color: var(--primary);
  padding: 0;
  box-shadow: 0 0.625rem 1.375rem rgba(15, 23, 42, 0.08);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.tasks-board-search-trigger:hover:not(:disabled),
.tasks-board-search.is-open .tasks-board-search-trigger {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  background: var(--surface);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary) 14%, transparent);
}

.tasks-board-search.has-value .tasks-board-search-trigger::after {
  content: "";
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border: 0.125rem solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
}

.tasks-board-search-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.tasks-board-search-trigger .material-symbols-rounded {
  font-size: 1.125rem;
}

.tasks-board-search-popover {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  z-index: 940;
  width: min(22.5rem, calc(100vw - 1.5rem));
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 1.125rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--primary-soft)), var(--surface));
  box-shadow: 0 1.5rem 4.375rem rgba(15, 23, 42, 0.22);
  padding: 0.625rem;
}

.tasks-board-search-popover label {
  min-height: 2.375rem;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: 0.8125rem;
  background: var(--input-bg);
  padding: 0 0.5625rem;
}

.tasks-board-search-popover label:focus-within {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary) 12%, transparent);
}

.tasks-board-search-popover label > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}

.tasks-board-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1;
}

.tasks-board-search input::placeholder {
  color: var(--muted);
  font-weight: 700;
}

.tasks-board-search input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.tasks-board-search-popover button {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.tasks-board-search-popover button:hover {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.tasks-board-search-popover button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.tasks-board-search-popover small {
  display: block;
  margin: 0.5rem 0.25rem 0;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 750;
}

.tasks-board-stat {
  min-width: 0;
  min-height: 2.125rem;
  display: grid;
  align-content: center;
  gap: 0.0625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--surface) 90%, var(--primary-soft));
  padding: 0.3125rem 0.5rem;
  box-shadow: none;
}

.tasks-board-stat span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tasks-board-stat strong {
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-bottom: 0.125rem;
}

.back-button .material-symbols-rounded {
  font-size: 1.0625rem;
}

.tasks-board-shell {
  min-height: 0;
  overflow: hidden;
  padding: 0.875rem;
}

#tasksKanbanRoot {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#automationFlowRoot {
  width: 100%;
  height: calc(100vh - var(--routing-header-height, 3.0625rem));
  min-height: 38.75rem;
}

.automation-builder-shell {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--routing-sidebar-width, 16.5rem) minmax(0, 1fr);
  gap: 0;
  overflow: visible;
}

.automation-builder-shell.is-inspection-mode {
  grid-template-columns: 0 minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--inspection-drawer-height, 18.75rem);
  overflow: hidden;
}

.automation-builder-shell.is-inspection-mode .command-palette {
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.automation-builder-shell.is-inspection-mode .flow-stage {
  grid-column: 2;
  grid-row: 1;
}

.automation-builder-shell.is-inspection-mode .inspection-drawer {
  grid-column: 2;
  grid-row: 2;
}

.command-palette,
.flow-stage {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

[data-theme="dark"] .command-palette,
[data-theme="dark"] .flow-stage {
  box-shadow: none;
}

.command-palette {
  position: relative;
  top: calc(-1 * var(--routing-header-height, 3.0625rem));
  z-index: 4;
  height: calc(100% + var(--routing-header-height, 3.0625rem));
  padding: 0.625rem;
  border-right: 0.0625rem solid var(--line);
}

.palette-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  padding-bottom: 0.8125rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.route-select-button {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  padding: 0.5rem;
  text-align: left;
}

.route-select-button > div {
  min-width: 0;
}

.route-select-button:hover {
  border-color: rgba(124, 58, 237, 0.34);
  background: var(--surface);
}

.route-select-button > .material-symbols-rounded,
.palette-command-title > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--primary);
  background: var(--primary-soft);
}

.palette-head strong,
.palette-command-title strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-command-title p {
  margin: 0.125rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-add-button {
  width: 2.25rem;
  height: 3.375rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(124, 58, 237, 0.32);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
}

.route-add-button .material-symbols-rounded {
  font-size: 1.25rem;
}

.route-commands-button {
  min-width: 7.25rem;
  height: 3.375rem;
  display: none;
  grid-template-columns: 1.5rem auto;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.route-commands-button:hover {
  border-color: rgba(124, 58, 237, 0.34);
  background: var(--surface);
}

.route-commands-button .material-symbols-rounded {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1rem;
}

.command-palette-modal {
  width: min(38rem, 100%);
}

.command-palette-modal-body {
  display: grid;
  gap: 0.75rem;
}

.command-palette-modal .palette-command-title {
  padding-top: 0;
}

.command-palette-modal .palette-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0;
}

.palette-command-title {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.8125rem;
}

.palette-list {
  display: grid;
  gap: 0.4375rem;
  padding-top: 0.5625rem;
}

.palette-command {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  color: var(--text);
  background: var(--control-bg);
  text-align: left;
}

.palette-command:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: var(--surface);
  box-shadow: 0 0.625rem 1.5rem rgba(124, 58, 237, 0.1);
}

.palette-command:disabled,
.palette-command.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.palette-command:disabled:hover,
.palette-command.is-disabled:hover {
  border-color: var(--line-soft);
  background: var(--control-bg);
  box-shadow: none;
}

.palette-command > .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 1.1875rem;
}

.palette-command strong {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.palette-command small {
  display: none;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tone-purple > .material-symbols-rounded,
.flow-modal-icon.tone-purple {
  color: var(--primary);
  background: rgba(124, 58, 237, 0.16);
}

.tone-amber > .material-symbols-rounded,
.flow-modal-icon.tone-amber {
  color: var(--amber);
  background: rgba(255, 158, 44, 0.18);
}

.tone-green > .material-symbols-rounded,
.flow-modal-icon.tone-green {
  color: var(--green);
  background: rgba(44, 198, 93, 0.16);
}

.tone-blue > .material-symbols-rounded,
.flow-modal-icon.tone-blue {
  color: var(--blue);
  background: rgba(37, 99, 235, 0.14);
}

.flow-modal-icon.tone-red {
  color: var(--red);
  background: rgba(220, 38, 38, 0.12);
}

.flow-stage {
  position: relative;
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.12) 0.0625rem, transparent 0.0625rem),
    linear-gradient(0deg, rgba(124, 58, 237, 0.12) 0.0625rem, transparent 0.0625rem),
    radial-gradient(circle at 22% 18%, rgba(124, 58, 237, 0.1), transparent 28rem),
    radial-gradient(circle at 78% 20%, rgba(37, 99, 235, 0.07), transparent 24rem),
    var(--surface);
  background-size: 2.75rem 2.75rem, 2.75rem 2.75rem, auto, auto, auto;
}

.automation-builder-shell.is-inspection-mode .flow-stage {
  min-height: 0;
}

.automation-builder-shell.is-inspection-mode .drawflow-canvas {
  cursor: grab;
}

.automation-builder-shell.is-inspection-mode .drawflow-canvas:active {
  cursor: grabbing;
}

[data-theme="dark"] .flow-stage {
  background:
    linear-gradient(90deg, rgba(167, 139, 250, 0.11) 0.0625rem, transparent 0.0625rem),
    linear-gradient(0deg, rgba(167, 139, 250, 0.11) 0.0625rem, transparent 0.0625rem),
    radial-gradient(circle at 22% 18%, rgba(139, 92, 246, 0.14), transparent 28rem),
    radial-gradient(circle at 78% 20%, rgba(59, 130, 246, 0.1), transparent 24rem),
    var(--surface);
  background-size: 2.75rem 2.75rem, 2.75rem 2.75rem, auto, auto, auto;
}

.flow-stage-status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.875rem 2rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(0.875rem);
}

[data-theme="dark"] .flow-stage-status {
  background: rgba(13, 24, 38, 0.84);
  box-shadow: none;
}

.flow-stage-status .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.1875rem;
}

.flow-stage-status strong {
  min-width: 0;
  margin-right: auto;
  color: var(--panel-title);
  font-size: 0.75rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-stage-status small {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  white-space: nowrap;
}

.flow-stage .drawflow-canvas {
  background: transparent;
}

.flow-stage .drawflow-canvas {
  cursor: grab;
}

.flow-stage .drawflow-canvas:active {
  cursor: grabbing;
}

.flow-stage .drawflow-canvas .main-path {
  stroke: var(--primary);
  stroke-width: 2;
}

.flow-stage .drawflow-controls,
.flow-stage .drawflow-minimap {
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.1);
}

.flow-stage .drawflow-controls button {
  border-bottom-color: var(--line-soft);
  background: var(--surface);
  color: var(--text);
}

.flow-stage .drawflow-minimap {
  background: var(--surface);
}

.node-delete-context-button {
  position: absolute;
  z-index: 8;
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(239, 68, 68, 0.36);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 88%, rgba(239, 68, 68, 0.18));
  color: var(--red);
  box-shadow: 0 1rem 2.125rem rgba(239, 68, 68, 0.18), 0 0.5rem 1.25rem rgba(15, 23, 42, 0.1);
  transform: translate(0.5rem, -50%);
  cursor: pointer;
}

.node-delete-context-button:hover {
  border-color: rgba(239, 68, 68, 0.58);
  background: var(--red);
  color: #fff;
}

.node-delete-context-button .material-symbols-rounded {
  font-size: 1.3125rem;
}

.connection-delete-context-button {
  border-radius: 50%;
  animation: connection-delete-context-in 140ms ease-out both;
}

@keyframes connection-delete-context-in {
  from {
    opacity: 0;
    transform: translate(0.5rem, -50%) scale(0.84);
  }
  to {
    opacity: 1;
    transform: translate(0.5rem, -50%) scale(1);
  }
}

.flow-command-node {
  width: 14.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  padding: 0.75rem;
  background: var(--surface);
  box-shadow: 0 1.125rem 2.625rem rgba(15, 23, 42, 0.12);
}

.drawflow-canvas .drawflow-node.drawflow-command-condition .flow-command-node {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
}

.flow-command-node.is-inspectable {
  position: relative;
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  box-shadow: 0 1.125rem 2.625rem rgba(37, 99, 235, 0.13);
}

.flow-command-node.is-inspected {
  border-color: color-mix(in srgb, var(--green) 58%, var(--line));
  box-shadow: 0 0 0 0.25rem rgba(44, 198, 93, 0.13), 0 1.125rem 2.625rem rgba(44, 198, 93, 0.16);
}

.flow-command-node.is-executed:not(.is-inspected) {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.flow-command-node.is-inspectable.is-executed {
  cursor: pointer;
}

.flow-command-node.is-start-node {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background:
    linear-gradient(90deg, rgba(44, 198, 93, 0.12), transparent 70%),
    var(--surface);
  box-shadow: 0 0 0 0.1875rem rgba(44, 198, 93, 0.08), 0 1.125rem 2.625rem rgba(15, 23, 42, 0.1);
}

[data-theme="dark"] .flow-command-node {
  box-shadow: 0 1.125rem 2.625rem rgba(0, 0, 0, 0.32);
}

.flow-command-node.is-selected {
  border-color: rgba(124, 58, 237, 0.58);
  box-shadow: 0 0 0 0.25rem var(--primary-soft), 0 1.125rem 2.625rem rgba(124, 58, 237, 0.16);
}

.command-node-head {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
}

.command-node-head > .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 1.3125rem;
}

.command-node-head strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.command-node-head p {
  display: -webkit-box;
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.command-node-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--line-soft);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

.drawflow-canvas .drawflow-node.drawflow-command-condition .command-node-meta {
  margin-top: auto;
}

.command-node-inspection-footer {
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem -0.125rem -0.125rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--line-soft);
}

.flow-command-node.is-inspectable .command-node-meta {
  padding-right: 5.25rem;
}

.flow-command-node.is-inspectable .command-node-inspection-footer {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.command-inspection-play {
  min-height: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 62.4375rem;
  padding: 0.25rem 0.5625rem;
  background:
    linear-gradient(135deg, rgba(44, 198, 93, 0.16), rgba(37, 99, 235, 0.1)),
    var(--surface);
  color: var(--green);
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0.625rem 1.5rem rgba(44, 198, 93, 0.14);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.command-inspection-play:hover {
  border-color: var(--green);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.875rem 1.75rem rgba(44, 198, 93, 0.2);
}

.flow-command-node.inspection-state-blocked {
  opacity: 0.62;
  filter: grayscale(0.3);
}

.command-inspection-play:disabled {
  border-color: var(--line);
  background: var(--control-bg);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.command-inspection-play:disabled:hover {
  border-color: var(--line);
  transform: none;
  box-shadow: none;
}

.command-inspection-play .material-symbols-rounded {
  font-size: 0.9375rem;
}

.inspection-drawer {
  position: relative;
  z-index: 7;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-top: 0.0625rem solid color-mix(in srgb, var(--blue) 26%, var(--line));
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.12), transparent 24rem),
    radial-gradient(circle at 92% 14%, rgba(44, 198, 93, 0.1), transparent 20rem),
    color-mix(in srgb, var(--surface) 94%, var(--control-bg));
  box-shadow: 0 -1.5rem 3.75rem rgba(15, 23, 42, 0.14);
  animation: inspectionDrawerIn 0.26s ease-out both;
  overflow: hidden;
}

.inspection-drawer-resizer {
  min-height: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--line) 72%, var(--surface));
  cursor: row-resize;
  touch-action: none;
  transition: background-color var(--ease-ui);
}

.inspection-drawer-resizer::after {
  content: "";
  width: 2.75rem;
  height: 0.125rem;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--blue) 52%, var(--line));
}

.inspection-drawer-resizer:hover,
body.route-inspection-resizing .inspection-drawer-resizer {
  background: color-mix(in srgb, var(--blue) 18%, var(--line));
}

body.route-inspection-resizing {
  cursor: row-resize;
  user-select: none;
}

@keyframes inspectionDrawerIn {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inspection-drawer-head {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.inspection-drawer-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5625rem;
}

.inspection-drawer-title > .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.12);
  font-size: 1.125rem;
}

.inspection-drawer-title strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.inspection-drawer-title p {
  margin: 0.0625rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.inspection-drawer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.inspection-view-mode {
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--surface) 86%, var(--control-bg));
  padding: 0.125rem;
}

.inspection-view-mode > button {
  min-height: 1.625rem;
  border: 0;
  border-radius: 62.4375rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 0.5625rem;
  cursor: pointer;
}

.inspection-view-mode > button:hover {
  color: var(--text);
}

.inspection-view-mode > button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 0.3125rem 0.875rem rgba(15, 23, 42, 0.1);
}

.inspection-drawer-meta > span {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  padding: 0 0.5625rem;
  color: var(--muted);
  background: var(--control-bg);
  font-size: 0.6562rem;
  font-weight: 900;
}

.inspection-drawer-meta .secondary-button {
  min-height: 1.75rem;
  padding: 0 0.5625rem;
  font-size: 0.6875rem;
}

.inspection-drawer-meta .secondary-button .material-symbols-rounded {
  font-size: 1rem;
}

.inspection-drawer-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
}

.inspection-json-card {
  --inspection-card-head-height: 2.625rem;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--input-bg));
  overflow: hidden;
}

.inspection-json-card header {
  height: var(--inspection-card-head-height);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--panel-title);
}

.inspection-json-card-head-search {
  justify-content: space-between;
}

.inspection-json-card-head-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.inspection-json-card header .material-symbols-rounded {
  color: var(--blue);
  font-size: 1rem;
}

.inspection-json-card header strong {
  font-size: 0.6562rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inspection-json-card-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.inspection-json-card-actions .secondary-button {
  min-height: 1.625rem;
  padding: 0 0.5rem;
  font-size: 0.625rem;
}

.inspection-json-card-actions .secondary-button.is-copy-icon {
  width: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.inspection-json-card-actions .secondary-button.is-copy-icon .material-symbols-rounded {
  margin: 0;
  font-size: 0.9375rem;
}

.inspection-json-search {
  min-width: 17rem;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.3125rem;
  border-radius: 0.5rem;
}

.inspection-json-search input {
  height: 1.75rem;
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.6875rem;
  padding: 0 0.5625rem;
  outline: none;
}

.inspection-json-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-soft));
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--primary-soft) 58%, transparent);
}

.inspection-json-search input::placeholder {
  color: var(--muted);
}

.inspection-json-search > small {
  min-width: 2.5rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  text-align: center;
}

.inspection-json-search > .icon-button {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
}

.inspection-json-search > .icon-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line-soft));
  color: var(--primary);
}

.inspection-json-search > .icon-button:disabled {
  opacity: 0.5;
}

.inspection-json-search > .icon-button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.inspection-json-card pre {
  min-height: 0;
  margin: 0;
  padding: 0.625rem 0.75rem;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0.0625rem, transparent 0.0625rem),
    linear-gradient(0deg, rgba(148, 163, 184, 0.08) 0.0625rem, transparent 0.0625rem),
    #0b1220;
  background-size: 1.5rem 1.5rem;
  color: #d8e4ff;
  font-size: 0.7188rem;
  line-height: 1.45;
  tab-size: 2;
}

.inspection-json-card code {
  font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", monospace;
  white-space: pre;
}

.inspection-searchable-code mark {
  border-radius: 0.1875rem;
  background: color-mix(in srgb, #facc15 82%, #fff);
  color: #1f2937;
  padding: 0 0.0625rem;
}

.inspection-searchable-code mark.is-active {
  background: color-mix(in srgb, #f97316 86%, #fff);
  color: #111827;
  box-shadow: 0 0 0 0.0625rem rgba(249, 115, 22, 0.28);
}

.inspection-structured-content.task-detail-structured-content {
  min-height: 0;
  max-height: none;
}

.flow-stage .drawflow-node .input,
.flow-stage .drawflow-node .output {
  width: 0.625rem;
  height: 0.625rem;
  border: 0.125rem solid var(--surface);
  background: var(--primary);
}

.flow-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(0.625rem);
}

.flow-modal {
  width: min(86.25rem, 100%);
  max-height: min(92vh, 57.5rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  box-shadow: 0 1.875rem 5.625rem rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.api-create-modal,
.api-delete-modal,
.api-select-modal,
.tenant-modal,
.api-keys-modal {
  width: min(35rem, 100%);
  max-height: min(92vh, 35rem);
}

.integration-secret-modal {
  width: min(32rem, 100%);
  max-height: min(92vh, 28rem);
}

.api-select-modal {
  width: min(56rem, 100%);
  max-height: min(92vh, 42rem);
}

.api-select-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  overflow: hidden;
}

.api-select-search-field {
  min-height: 2.75rem;
  border-radius: 0.75rem;
}

.api-select-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  overflow: auto;
  padding-right: 0.125rem;
}

.api-select-group {
  display: grid;
  gap: 0.5rem;
}

.api-select-group-head {
  min-height: 1.875rem;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  padding: 0.375rem 0.625rem;
}

.api-select-group-head .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.0625rem;
}

.api-select-group-head strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 900;
}

.api-select-group-head small {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 900;
}

.api-select-group-list {
  display: grid;
  gap: 0.4375rem;
}

.api-select-row {
  width: 100%;
  min-height: 3.375rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.6875rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.5625rem 0.6875rem;
  text-align: left;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), background var(--ease-ui);
}

.api-select-row:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface));
  box-shadow: 0 0.75rem 1.75rem rgba(124, 58, 237, 0.12);
  transform: translateY(-0.0625rem);
}

.api-select-row strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.api-select-row small {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.api-select-empty {
  min-height: 13.75rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 86%, var(--surface));
  text-align: center;
  padding: 1rem;
}

.api-select-empty .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: var(--surface);
  color: var(--primary);
}

.api-select-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.api-select-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.api-keys-modal {
  width: min(53.75rem, 100%);
  max-height: min(92vh, 47.5rem);
}

.tenant-switch-modal {
  width: min(42.5rem, 100%);
  max-height: min(92vh, 42.5rem);
}

.api-create-body,
.tenant-modal-body,
.api-keys-body {
  min-height: 0;
  display: grid;
  gap: 1rem;
  padding: 1.125rem;
  overflow: auto;
}

.api-import-dropzone {
  min-height: 5.75rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8125rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 0.875rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 62%),
    var(--control-bg);
  padding: 0.875rem;
  cursor: pointer;
  transition: border-color var(--ease-ui), background var(--ease-ui), transform var(--ease-ui);
}

.api-import-dropzone input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.api-import-dropzone > .material-symbols-rounded {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.08);
}

.api-import-dropzone strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8438rem;
}

.api-import-dropzone small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.api-import-dropzone:hover,
.api-import-dropzone.is-dragging,
.api-import-dropzone.has-file {
  border-color: color-mix(in srgb, var(--primary) 56%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 82%, transparent), transparent 64%),
    var(--surface);
  transform: translateY(-0.0625rem);
}

.api-import-dropzone.has-file > .material-symbols-rounded {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.api-key-create {
  display: grid;
  grid-template-columns: minmax(13.75rem, 0.7fr) minmax(22.5rem, 1.3fr) auto;
  gap: 0.75rem;
  align-items: end;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--control-bg);
  padding: 0.75rem;
}

.api-key-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.api-key-scope-box {
  min-height: 2.625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  padding: 0.625rem 0.6875rem;
}

.api-key-scope-box summary {
  flex: 0 0 100%;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.api-key-scope-box summary::-webkit-details-marker {
  display: none;
}

.api-key-scope-box:not([open]) label {
  display: none;
}

.api-key-scope-box label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
}


.api-key-created {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--green) 32%, var(--line-soft));
  border-radius: 0.625rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 64%),
    var(--surface);
  padding: 0.75rem;
}

.api-key-created > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--green) 13%, transparent);
  color: var(--green);
}

.api-key-created strong {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
}

.api-key-created p {
  margin: 0.1875rem 0 0.4375rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.api-key-created code {
  display: block;
  max-width: 100%;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--primary);
  padding: 0.5rem 0.625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  overflow-wrap: anywhere;
}

.api-keys-list {
  display: grid;
  gap: 0.625rem;
}

.api-key-row {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.25rem 2.25rem;
  gap: 0.6875rem;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  padding: 0.6875rem;
  cursor: pointer;
}

.api-key-row button {
  cursor: pointer;
}

.api-key-details {
  grid-column: 1 / -1;
  border-top: 0.0625rem solid var(--line-soft);
  padding-top: 0.625rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.api-key-details strong {
  color: var(--text);
}

.api-key-row.is-revoked {
  opacity: 0.66;
}

.api-key-row > .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: var(--primary-soft);
  color: var(--primary);
}

.api-key-row strong {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
}

.api-key-row small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.35;
}

.api-key-row em {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  padding: 0.3125rem 0.5625rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.api-key-row:not(.is-revoked) em {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.api-keys-empty {
  min-height: 10.625rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  border: 0.0625rem dashed var(--line);
  border-radius: 0.625rem;
  color: var(--muted);
  text-align: center;
}

.api-keys-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.875rem;
}

.api-keys-empty strong {
  color: var(--text);
  font-size: 0.8125rem;
}

.api-keys-empty p {
  max-width: 23.75rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.api-create-body .modal-field,
.tenant-modal-body .modal-field {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--control-bg);
  padding: 0.75rem;
}

.api-create-body .modal-field input,
.api-create-body .modal-field select,
.tenant-modal-body .modal-field input {
  min-height: 2.625rem;
  border-radius: 0.5625rem;
  background: var(--input-bg);
  font-size: 0.8125rem;
}

.tenant-preview,
.tenant-current {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: linear-gradient(135deg, var(--primary-soft), transparent 68%), var(--control-bg);
  padding: 0.8125rem;
}

.tenant-preview > .material-symbols-rounded,
.tenant-current > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: var(--surface);
  color: var(--primary);
  box-shadow: inset 0 0 0 0.0625rem var(--line-soft);
}

.tenant-preview strong,
.tenant-current strong {
  display: block;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.tenant-preview small,
.tenant-current small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.tenant-list {
  display: grid;
  gap: 0.625rem;
}

.tenant-row {
  width: 100%;
  min-height: 4.125rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6875rem;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.625rem 0.75rem;
  text-align: left;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), background var(--ease-ui);
}

.tenant-row:not(:disabled):hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0.75rem 1.875rem rgba(124, 58, 237, 0.16);
  transform: translateY(-0.0625rem);
}

.tenant-row:disabled {
  cursor: default;
  opacity: 0.78;
}

.tenant-row > .material-symbols-rounded {
  color: var(--primary);
}

.tenant-row strong {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
}

.tenant-row small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  overflow-wrap: anywhere;
}

.tenant-row em {
  justify-self: end;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  padding: 0.3125rem 0.5625rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.tenant-row:not(:disabled):hover em {
  border-color: transparent;
  background: var(--primary);
  color: white;
}

.tenant-empty,
.settings-tenant-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  padding: 1.375rem;
  text-align: center;
}

.tenant-empty .material-symbols-rounded,
.settings-tenant-empty .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.tenant-empty strong,
.settings-tenant-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.tenant-empty p,
.settings-tenant-empty p {
  max-width: 22.5rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.danger-soft-button {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line-soft));
  color: var(--red);
}

.danger-soft-button:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.api-delete-body {
  min-height: 0;
  padding: 1.125rem;
}

.api-delete-warning {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8125rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 22%, var(--line));
  border-radius: 0.625rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 9%, transparent), transparent 72%),
    var(--control-bg);
  padding: 0.875rem;
}

.api-delete-warning > .material-symbols-rounded {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: rgba(220, 38, 38, 0.12);
  color: var(--red);
  font-size: 1.5rem;
}

.api-delete-warning strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.25;
}

.api-delete-warning p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.settings-modal {
  width: min(73.75rem, calc(100vw - 2.5rem));
  max-height: min(92vh, 56.25rem) !important;
}

.my-plan-modal .settings-modal-body {
  grid-template-columns: minmax(0, 1fr);
}

.settings-mobile-tabs-toggle {
  display: none;
}

.log-detail-modal {
  width: min(112rem, calc(100vw - 1.25rem));
  height: min(92vh, 61.25rem);
  max-height: calc(100dvh - 1.25rem);
}

.log-detail-modal .flow-modal-head > div:nth-child(2),
.log-detail-modal .flow-modal-head h3 {
  min-width: 0;
}

.log-detail-modal .flow-modal-head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-executions-modal {
  width: min(112rem, calc(100vw - 1.25rem));
  height: min(92vh, 61.25rem);
  max-height: calc(100dvh - 1.25rem);
  grid-template-rows: auto minmax(0, 1fr);
}

.route-settings-modal {
  width: min(55rem, calc(100vw - 2.125rem));
}

.route-schedule-button {
  position: relative;
  transition: border-color var(--ease-ui), background var(--ease-ui), color var(--ease-ui), box-shadow var(--ease-ui);
}

.route-schedule-button.is-scheduled {
  border-color: color-mix(in srgb, #f59e0b 58%, var(--line));
  background: color-mix(in srgb, #fef3c7 76%, var(--surface));
  color: #a16207;
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, #f59e0b 10%, transparent);
}

.route-schedule-button.is-scheduled::after {
  content: '';
  position: absolute;
  right: 0.3125rem;
  top: 0.3125rem;
  width: 0.375rem;
  height: 0.375rem;
  border: 0.0625rem solid var(--surface);
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, #f59e0b 20%, transparent);
}

.route-schedule-modal {
  width: min(78rem, calc(100vw - 1.5rem));
  height: min(88vh, 52rem);
  max-height: calc(100dvh - 1.25rem);
}

.route-schedule-modal > .route-schedule-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.route-schedule-editor {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem 1.125rem 1.25rem;
  overflow: auto;
}

.route-schedule-master-switch {
  min-width: 0;
  min-height: 4rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.625rem;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, #f59e0b 28%, var(--line-soft));
  border-radius: 0.5rem;
  background: color-mix(in srgb, #fef3c7 30%, var(--surface));
  padding: 0.625rem 0.75rem;
  cursor: pointer;
}

.route-schedule-master-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: color-mix(in srgb, #f59e0b 15%, var(--surface));
  color: #b45309;
  font-size: 1.25rem;
}

.route-schedule-master-switch strong,
.route-schedule-master-switch small {
  display: block;
}

.route-schedule-master-switch strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.route-schedule-master-switch small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.route-schedule-master-switch input,
.route-schedule-day-toggle input,
.route-schedule-mini-toggle input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.route-schedule-master-switch > i {
  position: relative;
  width: 2.625rem;
  height: 1.5rem;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--muted) 34%, var(--line-soft));
  transition: background var(--ease-ui);
}

.route-schedule-master-switch > i::after {
  content: '';
  position: absolute;
  left: 0.1875rem;
  top: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.125rem 0.375rem rgba(15, 23, 42, 0.2);
  transition: transform var(--ease-ui);
}

.route-schedule-master-switch:has(input:checked) > i {
  background: #f59e0b;
}

.route-schedule-master-switch:has(input:checked) > i::after {
  transform: translateX(1.125rem);
}

.route-schedule-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.route-schedule-mode-tabs button {
  min-width: 0;
  min-height: 3.75rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.0625rem 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0.5rem 0.625rem;
  text-align: left;
  cursor: pointer;
}

.route-schedule-mode-tabs button > .material-symbols-rounded {
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  background: var(--control-bg);
  font-size: 1rem;
}

.route-schedule-mode-tabs button strong,
.route-schedule-mode-tabs button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-schedule-mode-tabs button strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
}

.route-schedule-mode-tabs button small {
  font-size: 0.625rem;
}

.route-schedule-mode-tabs button:hover,
.route-schedule-mode-tabs button.is-active {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--line-soft));
  background: color-mix(in srgb, #fef3c7 38%, var(--surface));
  color: #a16207;
}

.route-schedule-mode-tabs button.is-active > .material-symbols-rounded {
  background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  color: #b45309;
}

.route-schedule-mode-panel {
  display: grid;
  align-content: start;
  gap: 0.875rem;
}

.route-schedule-mode-panel > header {
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.route-schedule-mode-panel > header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.route-schedule-mode-panel > header p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.route-schedule-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.75rem;
}

.route-schedule-end-toggle {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: auto 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--control-bg);
  padding: 0.4375rem 0.625rem;
  cursor: pointer;
}

.route-schedule-end-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #f59e0b;
}

.route-schedule-end-toggle > .material-symbols-rounded {
  color: #b45309;
  font-size: 1rem;
}

.route-schedule-end-toggle strong,
.route-schedule-end-toggle small {
  display: block;
}

.route-schedule-end-toggle strong {
  color: var(--panel-title);
  font-size: 0.6875rem;
}

.route-schedule-end-toggle small {
  color: var(--muted);
  font-size: 0.5938rem;
}

.route-schedule-end-field.is-disabled {
  opacity: 0.5;
}

.route-schedule-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}

.route-schedule-weekdays label {
  cursor: pointer;
}

.route-schedule-weekdays input {
  position: absolute;
  opacity: 0;
}

.route-schedule-weekdays span {
  min-height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
}

.route-schedule-weekdays input:checked + span {
  border-color: color-mix(in srgb, #f59e0b 52%, var(--line-soft));
  background: color-mix(in srgb, #fef3c7 64%, var(--surface));
  color: #a16207;
}

.route-schedule-custom-head,
.route-schedule-custom-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.4fr) minmax(6.5rem, 0.8fr) minmax(5.5rem, 0.7fr) minmax(6.5rem, 0.8fr);
  align-items: center;
  gap: 0.625rem;
}

.route-schedule-custom-head {
  color: var(--muted);
  padding: 0 0.625rem;
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-schedule-custom-list {
  display: grid;
  gap: 0.375rem;
}

.route-schedule-custom-row {
  min-height: 2.875rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--control-bg) 70%, var(--surface));
  padding: 0.375rem 0.625rem;
  opacity: 0.58;
}

.route-schedule-custom-row.is-enabled {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--line-soft));
  background: var(--surface);
  opacity: 1;
}

.route-schedule-custom-row > input {
  min-width: 0;
  height: 2rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.375rem;
  background: var(--control-bg);
  color: var(--text);
  padding: 0 0.5rem;
}

.route-schedule-day-toggle {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.route-schedule-day-toggle > span,
.route-schedule-mini-toggle > span {
  position: relative;
  display: block;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--muted) 32%, var(--line-soft));
}

.route-schedule-day-toggle > span {
  width: 2rem;
  height: 1.125rem;
}

.route-schedule-day-toggle > span::after,
.route-schedule-mini-toggle > span::after {
  content: '';
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.0625rem 0.25rem rgba(15, 23, 42, 0.2);
  transition: transform var(--ease-ui);
}

.route-schedule-day-toggle > span::after {
  width: 0.875rem;
  height: 0.875rem;
}

.route-schedule-day-toggle input:checked + span,
.route-schedule-mini-toggle input:checked + span {
  background: #f59e0b;
}

.route-schedule-day-toggle input:checked + span::after {
  transform: translateX(0.875rem);
}

.route-schedule-day-toggle strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
}

.route-schedule-mini-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.route-schedule-mini-toggle > span {
  width: 1.875rem;
  height: 1.0625rem;
}

.route-schedule-mini-toggle > span::after {
  width: 0.8125rem;
  height: 0.8125rem;
}

.route-schedule-mini-toggle input:checked + span::after {
  transform: translateX(0.8125rem);
}

.route-schedule-preview {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  border-left: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fef3c7 42%, transparent), transparent 16rem),
    var(--control-bg);
  padding: 1.25rem;
  overflow: auto;
}

.route-schedule-preview-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, #f59e0b 34%, var(--line-soft));
  border-radius: 0.5rem;
  background: color-mix(in srgb, #fef3c7 66%, var(--surface));
  color: #b45309;
}

.route-schedule-preview > span {
  color: #a16207;
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-schedule-preview > strong {
  color: var(--panel-title);
  font-size: 1rem;
  line-height: 1.35;
}

.route-schedule-preview > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.5;
}

.route-schedule-preview dl {
  display: grid;
  gap: 0;
  margin: 0.5rem 0 0;
  border-top: 0.0625rem solid var(--line-soft);
}

.route-schedule-preview dl div {
  display: grid;
  gap: 0.1875rem;
  padding: 0.625rem 0;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.route-schedule-preview dt {
  color: var(--muted);
  font-size: 0.5938rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-schedule-preview dd {
  margin: 0;
  color: var(--panel-title);
  font-size: 0.7188rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.route-schedule-manual-note {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 0.625rem;
}

.route-schedule-manual-note > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}

.route-schedule-manual-note p,
.route-schedule-manual-note strong {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.route-schedule-manual-note strong {
  display: block;
  color: var(--panel-title);
}

.route-schedule-manual-note p {
  color: var(--muted);
}

.route-schedule-save-button {
  background: #d97706;
  box-shadow: none;
}

.route-schedule-save-button:hover {
  background: #b45309;
}

@media (max-width: 52rem) {
  .route-schedule-modal {
    height: calc(100dvh - 1.25rem);
  }

  .route-schedule-modal > .route-schedule-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .route-schedule-editor {
    overflow: visible;
  }

  .route-schedule-preview {
    border-top: 0.0625rem solid var(--line-soft);
    border-left: 0;
    overflow: visible;
  }
}

@media (max-width: 47.5rem) {
  .route-schedule-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-schedule-fields-grid {
    grid-template-columns: 1fr;
  }

  .route-schedule-custom-head {
    display: none;
  }

  .route-schedule-custom-row {
    grid-template-columns: minmax(9rem, 1fr) minmax(6.75rem, 0.8fr);
  }

  .route-schedule-custom-row .route-schedule-mini-toggle {
    justify-content: flex-start;
  }
}

.route-settings-modal .route-settings-body {
  display: block;
  min-height: 0;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.route-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 25%) minmax(0, 75%);
  min-height: 24.375rem;
  max-height: min(64vh, 38.75rem);
  width: 100%;
  min-width: 0;
}

.route-settings-tabs {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.875rem;
  border-right: 0.0625rem solid var(--line);
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
}

.route-settings-tab {
  display: grid;
  grid-template-columns: 1.875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-md);
  padding: 0.5625rem;
  text-align: left;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.route-settings-tab:hover,
.route-settings-tab.is-active {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text);
}

.route-settings-tab > .material-symbols-rounded {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: currentColor;
  font-size: 1.125rem;
}

.route-settings-tab strong {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--panel-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-settings-tab small {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.625rem;
  line-height: 1.2;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-settings-panels {
  min-width: 0;
  max-width: 100%;
  padding: 1.125rem;
  overflow: auto;
  min-height: 100%;
  height: 0;
}

.route-settings-panel {
  display: grid;
  gap: 0.875rem;
}

.route-settings-section-head {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.route-settings-section-head > .material-symbols-rounded,
.route-settings-action-card > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  font-size: 1.375rem;
}

.route-settings-section-head strong,
.route-settings-action-card strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.25;
}

.route-settings-section-head p,
.route-settings-action-card p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.route-settings-form-grid {
  display: grid;
  gap: 0.8125rem;
}

.route-error-policy-field {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.route-error-policy-field > legend {
  padding: 0;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.route-error-policy-field > p {
  margin: 0.25rem 0 0.625rem;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.route-error-policy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.route-error-policy-option {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr) 1.125rem;
  align-items: start;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color var(--ease-ui), background var(--ease-ui), box-shadow var(--ease-ui);
}

.route-error-policy-option:hover,
.route-error-policy-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
  box-shadow: 0 0.625rem 1.5rem rgba(124, 58, 237, 0.1);
}

.route-error-policy-option > input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.route-error-policy-icon {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.route-error-policy-icon.is-warning {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  color: #b45309;
}

.route-error-policy-icon .material-symbols-rounded {
  font-size: 1.125rem;
}

.route-error-policy-option strong,
.route-error-policy-option small {
  display: block;
}

.route-error-policy-option strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  line-height: 1.3;
}

.route-error-policy-option small {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6563rem;
  line-height: 1.4;
}

.route-error-policy-check {
  color: var(--primary);
  font-size: 1.125rem;
  opacity: 0;
  transition: opacity var(--ease-ui);
}

.route-error-policy-option:has(input:checked) .route-error-policy-check {
  opacity: 1;
}

.route-error-policy-option:has(input:disabled) {
  cursor: default;
  box-shadow: none;
}

.route-settings-notification-grid {
  display: grid;
  gap: 0.5625rem;
}

@media (max-width: 47.5rem) {
  .route-error-policy-options {
    grid-template-columns: 1fr;
  }
}

.route-settings-notification-option {
  min-width: 0;
  min-height: 3.125rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 42%, transparent), transparent 55%),
    var(--surface);
  padding: 0.625rem 0.75rem;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), background var(--ease-ui), transform var(--ease-ui);
}

.route-settings-notification-option:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 62%, transparent), transparent 55%),
    var(--surface);
  box-shadow: 0 0.75rem 1.875rem rgba(124, 58, 237, 0.12);
  transform: translateY(-0.0625rem);
}

.route-settings-notification-option:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 78%, transparent), transparent 55%),
    var(--surface);
}

.route-settings-notification-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
}

.route-settings-notification-copy > .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 1.0625rem;
}

.route-settings-notification-copy strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
  line-height: 1.2;
}

.route-settings-notification-copy small {
  display: block;
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.route-settings-notification-option input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

.route-settings-action-card {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.875rem;
}

.route-settings-action-card > div {
  min-width: 0;
}

.route-settings-action-card .secondary-button,
.route-settings-action-card .danger-button {
  grid-column: 2;
  justify-self: start;
  display: inline-grid;
  grid-template-columns: 1.5rem auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.125rem;
  min-width: 0;
  border-radius: var(--radius-sm);
  padding: 0 0.75rem 0 0.4375rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.route-settings-action-card .secondary-button {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.route-settings-action-card .secondary-button:hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.route-settings-action-card .danger-button {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}

.route-settings-action-card .danger-button:hover {
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.route-settings-action-card .secondary-button .material-symbols-rounded,
.route-settings-action-card .danger-button .material-symbols-rounded {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  font-size: 1.0625rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.route-settings-danger-card {
  border-color: color-mix(in srgb, var(--red) 16%, var(--line));
  background: color-mix(in srgb, var(--red) 3%, var(--control-bg));
}

.route-settings-danger-card > .material-symbols-rounded {
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
  color: var(--red);
}

.route-settings-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0.75rem 0 0;
}

.route-settings-meta div {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.5625rem;
  background: var(--surface);
}

.route-settings-meta dt {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
}

.route-settings-meta dd {
  margin: 0.25rem 0 0;
  color: var(--text);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.route-settings-modal .flow-modal-footer {
  gap: 0.5rem;
}

.route-settings-modal .flow-modal-footer .secondary-button,
.route-settings-modal .flow-modal-footer .primary-button {
  min-height: 2.125rem;
  border-radius: var(--radius-sm);
  padding: 0 0.8125rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.route-settings-modal .flow-modal-footer .primary-button {
  display: inline-grid;
  grid-template-columns: 1.375rem auto;
  align-items: center;
  gap: 0.4375rem;
  padding-left: 0.4375rem;
}

.route-settings-modal .flow-modal-footer .primary-button .material-symbols-rounded {
  width: 1.375rem;
  height: 1.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1rem;
}

.route-delete-confirm-modal {
  width: min(50rem, calc(100vw - 2.125rem));
}

.route-delete-confirm-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-height: 0;
  padding: 1.125rem;
}

.route-delete-summary {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.875rem;
}

.route-delete-summary > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 1.4375rem;
}

.route-delete-summary strong {
  min-width: 0;
  color: var(--panel-title);
  font-size: 0.9375rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.route-delete-note {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 18%, var(--line-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red) 5%, var(--surface));
  padding: 0.75rem;
}

.route-delete-note > .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  font-size: 1.25rem;
}

.route-delete-note strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.25;
}

.route-delete-note p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

#confirmRouteDeleteBtn {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 46%, #991b1b 100%);
  color: #fff;
  padding: 0 1.125rem 0 0.75rem;
  font-size: 0.7812rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow:
    0 0.9375rem 1.875rem rgba(220, 38, 38, 0.26),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.22);
  transition: transform var(--ease-ui), box-shadow var(--ease-ui), filter var(--ease-ui);
}

#confirmRouteDeleteBtn .material-symbols-rounded {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.0625rem;
}

#confirmRouteDeleteBtn:not(:disabled):hover {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 44%, #7f1d1d 100%);
  box-shadow:
    0 1.125rem 2.375rem rgba(220, 38, 38, 0.34),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25);
  filter: saturate(1.04);
  transform: translateY(-0.0625rem);
}

#confirmRouteDeleteBtn:disabled {
  cursor: progress;
  filter: grayscale(0.08);
  opacity: 0.78;
  transform: none;
  box-shadow: 0 0.625rem 1.375rem rgba(127, 29, 29, 0.18);
}

.route-executions-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(18.75rem, 32%) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.route-execution-list {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 42%, transparent), transparent 16.25rem),
    var(--control-bg);
  overflow: hidden;
}

.route-execution-list > header {
  display: grid;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.8125rem 0.875rem;
}

.route-execution-list > header strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

#routingExecutionsNotice:empty {
  display: none;
}

#routingExecutionsNotice:not(:empty) {
  display: block;
  margin: 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
}

.route-execution-list-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.route-execution-list-title small {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.route-execution-search {
  min-width: 0;
  height: 2.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  background: var(--surface);
  padding: 0 0.3125rem 0 0.625rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.route-execution-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line-soft));
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary) 11%, transparent);
}

.route-execution-search > .material-symbols-rounded {
  color: var(--muted);
  font-size: 1rem;
}

.route-execution-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.7188rem;
}

.route-execution-search input::placeholder {
  color: var(--muted);
}

.route-execution-search .icon-button {
  width: 1.625rem;
  height: 1.625rem;
  min-height: 0;
  border: 0;
  background: transparent;
}

.route-execution-search .icon-button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.route-execution-filters {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
}

.route-execution-filter {
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 999rem;
  background: var(--surface);
  color: var(--label);
  font-size: 0.6688rem;
  font-weight: 680;
  padding: 0.125rem 0.625rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.route-execution-filter .material-symbols-rounded {
  font-size: 0.875rem;
}

.route-execution-filter:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line-soft));
  color: var(--panel-title);
}

.route-execution-filter.is-active,
.route-execution-filter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface));
  color: var(--panel-title);
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 24%, transparent);
}

#routingExecutionRows {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow: auto;
}

.route-execution-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0.6875rem 0.75rem;
  text-align: left;
  box-shadow: 0 0.5rem 1.375rem rgba(15, 23, 42, 0.04);
}

.route-execution-row:hover,
.route-execution-row.is-active {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface));
}

.route-execution-row strong,
.route-execution-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-execution-row strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.route-execution-row-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.route-execution-row-head strong {
  flex: 1;
}

.route-execution-row small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.7063rem;
}

.route-execution-row > div > span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.3125rem;
  overflow: hidden;
  color: var(--label);
  font-size: 0.6375rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-execution-mode {
  flex: 0 0 auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.125rem 0.3125rem;
  font-size: 0.5625rem;
  font-weight: 900;
  line-height: 1;
}

.route-execution-mode.is-inspection {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary);
}

.route-execution-row em {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.25rem 0.4375rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.route-execution-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 62.4375rem;
  background: var(--muted);
}

.route-execution-dot.concluida {
  background: var(--green);
}

.route-execution-dot.processing,
.route-execution-dot.processando,
.route-execution-dot.em-processamento {
  background: var(--primary);
}

.route-execution-dot.aguardando {
  background: var(--orange);
}

.route-execution-dot.falha {
  background: var(--red);
}

.route-execution-detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.route-execution-detail > .route-execution-detail-head,
.route-execution-detail > .route-execution-error,
.route-execution-detail > .route-execution-flow-focus,
.route-execution-detail > .route-execution-data-focus,
.route-execution-detail > .route-execution-operational,
.route-execution-detail > .route-execution-json {
  flex: 0 0 auto;
}

.route-execution-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent 58%),
    var(--surface);
  padding: 0.875rem;
}

.route-execution-detail-head span {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-execution-detail-head strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--panel-title);
  font-size: 1.125rem;
}

.route-execution-detail-head p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.route-execution-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.625rem;
}

.route-execution-metrics div {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.6875rem;
}

.route-execution-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-execution-metrics strong {
  display: block;
  margin-top: 0.3125rem;
  color: var(--panel-title);
  font-size: 1.125rem;
}

.route-execution-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 36%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
  padding: 0.625rem 0.75rem;
  font-size: 0.7812rem;
  font-weight: 760;
}

.route-execution-flow-focus {
  min-width: 0;
  min-height: 23rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 0.875rem 2.25rem rgba(44, 24, 78, 0.06);
}

.route-execution-flow-focus > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  padding: 0.75rem 0.875rem;
}

.route-execution-flow-focus > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.route-execution-flow-focus > header .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.375rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.0625rem;
}

.route-execution-flow-focus > header strong,
.route-execution-flow-focus > header small {
  display: block;
}

.route-execution-flow-focus > header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.route-execution-flow-focus > header small {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.route-execution-flow-focus > header b {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.route-history-flow-shell {
  position: relative;
}

.route-history-flow-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: clamp(20rem, 39vh, 28rem);
  overflow: hidden;
  background-color: var(--surface);
  background:
    radial-gradient(circle at 0.0625rem 0.0625rem, color-mix(in srgb, var(--muted) 24%, transparent) 0.0719rem, transparent 0) 0 0 / 1.375rem 1.375rem,
    transparent;
  overscroll-behavior: contain;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.route-history-flow-viewport.is-panning {
  cursor: grabbing;
  scroll-behavior: auto;
}

.route-history-flow-viewport.is-panning * {
  cursor: grabbing !important;
}

.route-history-flow-viewport.is-panning .route-history-node {
  pointer-events: none;
}

.route-history-flow-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.route-history-flow-controls {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: fit-content;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(0.5rem);
}

.route-history-flow-controls button {
  width: 100%;
  min-width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.route-history-flow-controls button:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.route-history-flow-controls button:last-of-type {
  border-bottom: 0;
}

.route-history-flow-controls .material-symbols-rounded {
  font-size: 1.125rem;
}

.route-history-flow-controls small {
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 88%, var(--primary-soft));
  color: var(--muted);
  padding: 0.25rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 760;
  text-align: center;
}

.route-history-flow-edges {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.route-history-flow-edges path {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 48%, var(--line));
  stroke-linecap: round;
  stroke-width: 2;
}

.route-history-node {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: minmax(2.5rem, auto) auto;
  align-items: start;
  gap: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.6875rem;
  text-align: left;
  box-shadow: 0 0.875rem 2rem rgba(15, 23, 42, 0.11);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.route-history-node:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  transform: translateY(-0.0625rem);
}

.route-history-node.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem var(--primary-soft), 0 1rem 2.25rem rgba(124, 58, 237, 0.16);
}

.route-history-node.is-success {
  border-top: 0.125rem solid var(--green);
}

.route-history-node.is-error {
  border-color: color-mix(in srgb, var(--red) 68%, var(--line));
  border-top: 0.1875rem solid var(--red);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--red) 9%, transparent), 0 1rem 2.25rem rgba(220, 38, 38, 0.12);
}

.route-history-node.is-waiting {
  opacity: 0.68;
}

.route-history-node-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.1875rem;
}

.route-history-node.tone-green .route-history-node-icon {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.route-history-node.tone-amber .route-history-node-icon {
  background: color-mix(in srgb, var(--orange) 13%, var(--surface));
  color: var(--orange);
}

.route-history-node-copy {
  min-width: 0;
}

.route-history-node-copy strong,
.route-history-node-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-history-node-copy strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.route-history-node-copy small {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6375rem;
}

.route-history-node em {
  grid-column: 1 / -1;
  border-top: 0.0625rem solid var(--line-soft);
  color: var(--muted);
  padding-top: 0.4375rem;
  font-size: 0.6375rem;
  font-style: normal;
  font-weight: 780;
}

.route-history-node.is-error em {
  color: var(--red);
}

.route-history-node-error {
  position: absolute;
  top: -0.6875rem;
  right: -0.6875rem;
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border: 0.1875rem solid var(--surface);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.375rem 1rem rgba(220, 38, 38, 0.28);
}

.route-execution-data-focus {
  min-width: 0;
  min-height: 25rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 0.875rem 2.25rem rgba(44, 24, 78, 0.06);
}

.route-execution-command-focus {
  min-height: 31rem;
}

.route-execution-data-focus > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  padding: 0.75rem 0.875rem;
}

.route-execution-data-focus > header > div,
.route-task-payload-panel > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.route-execution-data-focus > header .material-symbols-rounded,
.route-task-payload-panel > header .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.375rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.0625rem;
}

.route-execution-data-focus > header strong,
.route-execution-data-focus > header small,
.route-task-payload-panel > header strong,
.route-task-payload-panel > header small {
  display: block;
}

.route-execution-data-focus > header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.route-execution-data-focus > header small {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.route-execution-data-focus > header b {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.route-execution-task-area {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(15rem, 31%) minmax(0, 1fr);
}

.route-task-log-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.route-execution-task-area .route-task-log-panel {
  border: 0;
  border-right: 0.0625rem solid var(--line-soft);
  border-radius: 0;
}

.route-task-log-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0.6875rem 0.75rem;
}

.route-task-log-panel strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.route-task-log-panel small {
  color: var(--muted);
  font-size: 0.6875rem;
}

.route-task-log-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.625rem;
  overflow: auto;
}

.route-task-log-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(8.75rem, 26%);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-left: 0.1875rem solid var(--green);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0.625rem;
  text-align: left;
  cursor: pointer;
}

.route-task-log-row.error {
  border-left-color: var(--red);
}

.route-task-log-row:hover,
.route-task-log-row.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface));
}

.route-execution-task-area .route-task-log-row {
  grid-template-columns: minmax(0, 1fr);
}

.route-execution-task-area .route-task-log-row span,
.route-execution-task-area .route-task-log-row em {
  text-align: left;
  white-space: normal;
}

.route-task-log-row strong,
.route-task-log-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-task-log-row strong {
  color: var(--panel-title);
  font-size: 0.75rem;
}

.route-task-log-row small,
.route-task-log-row span,
.route-task-log-row em {
  color: var(--muted);
  font-size: 0.7188rem;
}

.route-task-log-row span {
  white-space: nowrap;
}

.route-task-log-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-style: normal;
}

.route-task-payload-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(12rem, 1fr) auto;
  background: var(--surface);
  overflow: hidden;
}

.route-command-trace-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: var(--surface);
  overflow: hidden;
}

.route-command-trace-panel > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.6875rem 0.8125rem;
}

.route-command-trace-panel > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.route-command-trace-panel > header .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.0625rem;
}

.route-command-trace-panel > header small,
.route-command-trace-panel > header strong {
  display: block;
}

.route-command-trace-panel > header small {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-command-trace-panel > header strong {
  max-width: min(34rem, 54vw);
  margin-top: 0.125rem;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-command-trace-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0.5rem 0.75rem;
}

.route-command-trace-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.3125rem;
  background: var(--surface);
  color: var(--label);
  padding: 0.25rem 0.4375rem;
  font-size: 0.6563rem;
}

.route-command-trace-meta b {
  color: var(--muted);
  font-size: 0.5938rem;
  text-transform: uppercase;
}

.route-command-trace-error {
  margin: 0.625rem 0.75rem 0;
}

.route-command-trace-error strong,
.route-command-trace-error p {
  display: block;
  margin: 0;
}

.route-command-trace-error p {
  margin-top: 0.125rem;
  color: var(--text);
  font-size: 0.7188rem;
  font-weight: 560;
}

.route-command-io-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  padding: 0.625rem 0.75rem 0.75rem;
  overflow: hidden;
}

.route-command-io-card {
  min-width: 0;
  min-height: 15rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.route-command-io-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  color: var(--panel-title);
  padding: 0.5rem 0.625rem;
  font-size: 0.7188rem;
}

.route-command-io-card > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.route-command-io-card > header .material-symbols-rounded {
  color: var(--primary);
  font-size: 1rem;
}

.route-command-io-copy-button {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid transparent;
  border-radius: 0.3125rem;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.route-command-io-copy-button:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
}

.route-command-io-copy-button.is-copied {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.route-command-io-copy-button .material-symbols-rounded {
  color: inherit !important;
  font-size: 0.875rem !important;
}

.route-command-io-card > .task-detail-structured-content {
  min-height: 0;
  max-height: 28rem;
  overflow: auto;
  padding: 0.5rem 0.625rem 0.75rem;
}

.route-command-error-stack {
  margin: 0 0.75rem 0.75rem;
}

.route-task-payload-panel > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.6875rem 0.8125rem;
}

.route-task-payload-panel > header small {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-task-payload-panel > header strong {
  max-width: min(34rem, 56vw);
  margin-top: 0.125rem;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-task-payload-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0.5rem 0.75rem;
}

.route-task-payload-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.3125rem;
  background: var(--surface);
  color: var(--label);
  padding: 0.25rem 0.4375rem;
  font-size: 0.6563rem;
}

.route-task-payload-meta b {
  color: var(--muted);
  font-size: 0.5938rem;
  text-transform: uppercase;
}

.route-task-payload-content.task-detail-structured-content {
  min-height: 0;
  max-height: min(45vh, 31.25rem);
  overflow: auto;
  padding: 0.625rem 0.75rem 1rem;
}

.route-task-command-outputs {
  border-width: 0.0625rem 0 0;
  border-radius: 0;
}

.route-execution-operational {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.route-execution-detail > .route-execution-operational[open],
.route-execution-detail > .route-execution-json[open] {
  overflow: visible;
}

.route-execution-operational > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--label);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 850;
}

.route-execution-operational > summary .material-symbols-rounded {
  color: var(--primary);
  font-size: 1rem;
}

.route-execution-operational .route-execution-metrics {
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.625rem;
}

.route-execution-json {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  overflow: hidden;
}

.route-execution-json summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--label);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 850;
}

.route-execution-copy-button {
  min-width: 5.25rem;
  min-height: 1.875rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  color: var(--primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.route-execution-copy-button:hover {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
}

.route-execution-copy-button.is-copied {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line-soft));
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.route-execution-copy-button .material-symbols-rounded {
  font-size: 0.9375rem;
}

.route-execution-copy-button b {
  font-size: 0.6875rem;
  font-weight: 800;
}

.route-execution-json pre {
  max-height: 15rem;
  overflow: auto;
  margin: 0;
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.75rem;
}

.route-execution-detail > .route-execution-json > pre {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.route-execution-json code {
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  line-height: 1.5;
}

.route-execution-empty {
  min-height: 13.75rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  color: var(--muted);
  text-align: center;
}

.route-execution-empty.compact {
  min-height: 9.375rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  padding: 1.125rem;
}

.route-execution-empty .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.route-execution-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.route-execution-empty p {
  max-width: 20rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (max-width: 61.25rem) {
  .route-executions-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(11.25rem, 34vh) minmax(0, 1fr);
  }

  .route-execution-list {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }

  .route-execution-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-execution-task-area {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(10rem, 16rem) minmax(21.875rem, auto);
  }

  .route-command-io-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .route-command-trace-panel {
    overflow: visible;
  }

  .route-execution-task-area .route-task-log-panel {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }

  .route-task-log-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-task-log-row em,
  .route-task-log-row span {
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 67.5rem) {
  .route-executions-modal {
    height: calc(100dvh - 1.25rem);
  }
}

@media (max-width: 40rem) {
  .settings-execution-grid,
  .settings-system-grid {
    grid-template-columns: 1fr;
  }

  .settings-tenant-client-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-tenant-toolbar,
  .settings-tenant-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .settings-tenant-toolbar,
  .settings-tenant-actions {
    flex-direction: column;
  }

  .settings-tenant-row > .material-symbols-rounded {
    display: none;
  }

  .route-execution-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .route-execution-metrics {
    grid-template-columns: 1fr;
  }
}

.log-detail-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(12.5rem, 18%) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.log-detail-side {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  border-right: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 1.125rem;
}

.log-detail-side div {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.75rem;
}

.log-detail-side span {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.log-detail-side strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--panel-title);
  font-size: 0.7812rem;
  line-height: 1.35;
}

.log-detail-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.875rem;
  padding: 1.125rem;
}

.log-change-list {
  min-height: 0;
  max-height: min(29vh, 18rem);
  display: grid;
  align-content: start;
  gap: 0.5rem;
  overflow: auto;
  padding-right: 0.25rem;
}

.log-detail-message-card,
.log-detail-collapse {
  min-width: 0;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface));
}

.log-detail-message-card {
  padding: 0.6875rem 0.75rem;
}

.log-detail-message-card > span,
.log-detail-collapse summary span {
  display: block;
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
}

.log-detail-message-card p,
.log-detail-collapse summary p {
  margin: 0.25rem 0 0;
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.log-detail-collapse summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.log-detail-collapse summary::-webkit-details-marker {
  display: none;
}

.log-detail-collapse summary p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-detail-collapse summary em::after {
  content: 'Ver tudo';
  color: var(--primary);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.log-detail-collapse[open] summary em::after {
  content: 'Recolher';
}

.log-detail-collapse[open] summary {
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line-soft));
}

.log-detail-collapse-content {
  max-height: min(34vh, 21rem);
  overflow: auto;
  padding: 0.75rem;
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.log-change-collapse {
  border-color: var(--line-soft);
  background: var(--surface);
}

.log-change-collapse .log-detail-collapse-content p {
  margin: 0;
}

.log-change-row {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.625rem 0.75rem;
}

.log-change-row strong {
  display: block;
  color: var(--primary);
  font-size: 0.75rem;
  margin-bottom: 0.3125rem;
}

.log-change-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.45;
}

.log-change-row code {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.125rem 0.3125rem;
  overflow-wrap: anywhere;
}

.log-change-row.is-empty strong {
  color: var(--muted);
}

.log-json-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.log-json-grid article {
  min-width: 0;
  min-height: 21.25rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.log-json-grid header {
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  color: var(--panel-title);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 850;
}

.log-json-grid pre {
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 0.75rem;
}

.log-json-grid code {
  display: block;
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  line-height: 1.5;
  white-space: pre;
}

.log-json-line {
  display: block;
  min-width: max-content;
  margin: 0 -0.375rem;
  border-left: 0.1875rem solid transparent;
  padding: 0 0.375rem 0 0.5rem;
}

.log-json-line.is-added {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.log-json-line.is-removed {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.log-json-line.is-changed {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

[data-theme="dark"] .log-json-line.is-added {
  background: color-mix(in srgb, var(--green) 18%, transparent);
}

[data-theme="dark"] .log-json-line.is-removed {
  background: color-mix(in srgb, var(--red) 18%, transparent);
}

[data-theme="dark"] .log-json-line.is-changed {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.settings-modal-body {
  min-height: min(66vh, 38.75rem);
  display: grid;
  grid-template-columns: minmax(13.75rem, 25%) minmax(0, 75%);
  overflow: hidden;
}

.settings-tabs {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border-right: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent 17.5rem),
    var(--control-bg);
  padding: 0.875rem;
}

.settings-tabs button {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  padding: 0.625rem;
  text-align: left;
}

.settings-tabs button:hover,
.settings-tabs button.is-active {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  background: var(--surface);
  box-shadow: 0 0.625rem 1.5rem rgba(124, 58, 237, 0.08);
}

.settings-tabs .material-symbols-rounded {
  grid-row: span 2;
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3125rem;
}

.settings-tabs strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.settings-tabs small {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-panels {
  min-width: 0;
  min-height: 0;
  display: grid;
  background: var(--surface);
  overflow: hidden;
}

.settings-panel {
  min-width: 0;
  min-height: 0;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.settings-panel.is-active {
  display: grid;
}

.settings-panel[data-settings-panel="integrations"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.settings-panel[data-settings-panel="general"] {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

#settingsTeamForm.settings-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.settings-panel[data-settings-panel="system"] {
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-panel[data-settings-panel="system"] .settings-panel-footer {
  display: none;
}

.settings-feature-flags-form .settings-panel-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.875rem 0;
}

.settings-panel[data-settings-panel="experience"] {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.settings-panel-head {
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 86%, var(--control-bg));
  padding: 1rem 1.125rem;
}

.settings-panel-head-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
}

.settings-panel-head-action .secondary-button {
  align-self: center;
  white-space: nowrap;
}

.settings-panel-head span {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.settings-panel-head strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--panel-title);
  font-size: 1.0625rem;
}

.settings-panel-head p {
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.45;
}

.settings-form-grid,
.settings-execution-grid,
.settings-team-grid,
.settings-system-grid {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.125rem;
  overflow: auto;
}

.settings-form-grid {
  grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
}

.settings-system-grid {
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
}

.settings-system-grid-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.settings-system-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.settings-system-tabs {
  margin: 0.75rem 1.125rem 0;
  grid-template-columns: repeat(3, minmax(7.5rem, 1fr));
}

.settings-system-panels {
  min-height: 0;
  overflow: hidden;
}

.settings-system-subpanel {
  min-height: 0;
  display: none;
}

.settings-system-subpanel.is-active {
  display: block;
}

.settings-system-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line-soft));
  border-radius: 1rem;
  padding: 0.875rem;
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.06);
}

.settings-system-health-card {
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-system-health-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-system-health-card > header strong {
  color: var(--panel-title);
  font-size: 0.875rem;
}

.settings-system-health-card > header small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-system-badge {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.375rem 0.625rem;
  font-size: 0.6562rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-system-badge.is-ok {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line-soft));
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.settings-system-badge.is-degraded {
  border-color: color-mix(in srgb, var(--orange) 42%, var(--line-soft));
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange);
}

.settings-system-badge.is-down {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  color: var(--red);
}

.settings-system-health-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  overflow: auto;
}

.settings-system-health-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.625rem 0.6875rem;
}

.settings-system-health-item > i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 62.4375rem;
  background: var(--muted);
}

.settings-system-health-item.is-ok > i {
  background: var(--green);
}

.settings-system-health-item.is-down > i {
  background: var(--red);
}

.settings-system-health-item.is-degraded > i {
  background: var(--orange);
}

.settings-system-health-item strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.settings-system-health-item small {
  display: block;
  margin-top: 0.2188rem;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.settings-system-health-item em {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--label);
  padding: 0.25rem 0.4375rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.settings-system-empty {
  margin: 1.125rem;
  min-height: 13.75rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--line-soft) 80%, var(--primary));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem;
}

.settings-system-empty .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
}

.settings-system-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.settings-system-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.settings-system-routines-card {
  margin: 1.125rem;
}

.settings-system-routines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-system-routines-head strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
}

.settings-system-routines-head small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-system-routines-wrap {
  max-height: 18.75rem;
}

.settings-system-routines-table {
  font-size: 0.78rem;
}

.settings-system-routines-table code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.7rem;
}

.settings-system-routines-table td strong {
  font-size: 0.8rem;
}

.settings-system-routine-actions {
  display: flex;
  gap: 0.5rem;
}

.settings-system-routine-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
}

.settings-system-routine-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-system-routine-switch-track {
  width: 2.25rem;
  height: 1.25rem;
  position: relative;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 80%, var(--muted));
  transition: background-color 180ms ease, border-color 180ms ease;
}

.settings-system-routine-switch-track::after {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.25rem 0.625rem rgba(15, 23, 42, 0.24);
  transition: transform 180ms ease;
}

.settings-system-routine-switch-text {
  color: var(--green);
}

.settings-system-routine-switch input:not(:checked) + .settings-system-routine-switch-track {
  background: color-mix(in srgb, var(--amber) 34%, transparent);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line-soft));
}

.settings-system-routine-switch input:checked + .settings-system-routine-switch-track {
  background: color-mix(in srgb, var(--green) 48%, transparent);
  border-color: color-mix(in srgb, var(--green) 50%, var(--line-soft));
}

.settings-system-routine-switch input:checked + .settings-system-routine-switch-track::after {
  transform: translateX(1rem);
}

.settings-system-routine-switch input:not(:checked) + .settings-system-routine-switch-track + .settings-system-routine-switch-text {
  color: var(--amber);
}

.settings-system-routine-run {
  min-height: 1.875rem;
  padding: 0.25rem 0.625rem;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 850;
}

.settings-system-routine-run .material-symbols-rounded {
  font-size: 1rem;
}

.settings-feature-flags-form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 1.125rem;
}

.settings-feature-flag-card {
  align-content: start;
}

.settings-feature-flag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-feature-flag-head strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8438rem;
}

.settings-feature-flag-head small {
  display: block;
  margin-top: 0.3125rem;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.4;
}

.settings-feature-flag-toggle {
  cursor: pointer;
}

.settings-feature-flag-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-feature-flag-toggle > span {
  min-width: 6.75rem;
  display: grid;
  grid-template-columns: auto 2.375rem;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--control-bg) 76%, var(--surface));
  padding: 0.3125rem 0.375rem 0.3125rem 0.6875rem;
}

.settings-feature-flag-toggle em {
  color: var(--label);
  font-size: 0.6562rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-feature-flag-toggle b {
  width: 2.375rem;
  height: 1.3125rem;
  position: relative;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.settings-feature-flag-toggle b::after {
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.3125rem 0.75rem rgba(15, 23, 42, 0.26);
  transition: transform 180ms ease;
}

.settings-feature-flag-toggle input:checked + span em {
  color: var(--green);
}

.settings-feature-flag-toggle input:checked + span b {
  background: color-mix(in srgb, var(--green) 46%, transparent);
}

.settings-feature-flag-toggle input:checked + span b::after {
  transform: translateX(1.0625rem);
}

@media (max-width: 47.5rem) {
  .settings-feature-flags-form {
    padding: 0.875rem;
  }

  .settings-system-routines-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-feature-flag-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-feature-flag-toggle > span {
    width: 100%;
  }
}

.settings-avatar-card {
  margin: 1.125rem 1.125rem 0;
  display: grid;
  grid-template-columns: 4.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line-soft));
  border-radius: 1.125rem;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--control-bg) 78%, var(--surface)), var(--surface));
  padding: 0.875rem;
  box-shadow: 0 1.125rem 2.5rem rgba(15, 23, 42, 0.06);
}

.settings-avatar-preview {
  width: 4.625rem;
  height: 4.625rem;
  display: grid;
  place-items: center;
  border: 0.1875rem solid var(--surface);
  border-radius: 50%;
  background: var(--avatar-bg);
  background-size: cover;
  background-position: center;
  color: var(--avatar-text);
  font-size: 1.75rem;
  font-weight: 950;
  box-shadow:
    0 0.875rem 1.625rem rgba(15, 23, 42, 0.14),
    0 0 0 0.0625rem color-mix(in srgb, var(--primary) 18%, transparent);
}

.settings-avatar-preview.has-image {
  color: transparent;
}

.settings-avatar-copy {
  min-width: 0;
}

.settings-avatar-copy strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 950;
}

.settings-avatar-copy p {
  max-width: 54ch;
  margin: 0.3125rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.settings-avatar-actions {
  display: flex;
  justify-content: flex-end;
}

.settings-avatar-actions .secondary-button {
  min-height: 2.5rem;
  white-space: nowrap;
}

.settings-execution-grid {
  grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
  align-content: start;
}

.settings-tenant-area {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.125rem;
  overflow: hidden;
}

.settings-tenant-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-tenant-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  overflow: auto;
  padding-right: 0.125rem;
}

.settings-tenant-client {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--panel));
  padding: 0.625rem;
  display: grid;
  gap: 0.625rem;
}

.settings-tenant-client.is-unmatched-client {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line-soft));
}

.settings-tenant-client-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.125rem 0.25rem;
}

.settings-tenant-client-head strong,
.settings-tenant-client-head small {
  display: block;
}

.settings-tenant-client-head strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
}

.settings-tenant-client-head small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-tenant-client-head em {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.settings-tenant-client-list {
  display: grid;
  gap: 0.5rem;
}

.settings-tenant-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.6875rem 0.75rem;
}

.settings-tenant-row.is-current {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface));
}

.settings-tenant-row.is-inactive {
  background: color-mix(in srgb, var(--control-bg) 76%, var(--surface));
}

.settings-tenant-row > .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3125rem;
}

.settings-tenant-row.is-inactive > .material-symbols-rounded {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

.settings-tenant-row strong,
.settings-tenant-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tenant-row strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
}

.settings-tenant-row small {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7188rem;
}

.settings-tenant-row em {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.3125rem 0.5rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-tenant-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4375rem;
}

.settings-tenant-actions .compact-action {
  min-height: 2rem;
  padding: 0 0.5625rem;
  font-size: 0.7188rem;
}

.settings-plans-area {
  min-height: 0;
  overflow: auto;
  padding: 1.125rem;
}

.settings-plans-grid {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}

.settings-overage-card {
  margin-top: 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, var(--primary));
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 78%, var(--control-bg)));
  box-shadow: 0 0.75rem 1.625rem rgba(15, 23, 42, 0.05);
}

.settings-overage-card > header {
  padding: 0.875rem;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.settings-overage-card > header > span {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-overage-card > header > strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.settings-benefits-card {
  margin-top: 1rem;
}

.settings-benefits-description {
  margin: 0;
  padding: 0.75rem 0.875rem 0;
  color: var(--muted);
  font-size: 0.7188rem;
}

.settings-plan-limit-notification-card {
  margin-top: 1rem;
  padding-bottom: 0.75rem;
}

.settings-plan-limit-summary {
  margin: 0;
  padding: 0.75rem 0.875rem 0.5rem;
  color: var(--muted);
  font-size: 0.7188rem;
}

.settings-plan-limit-notification-grid {
  padding: 0 0.875rem;
  max-height: 15rem;
  overflow: auto;
}

.settings-plan-limit-notification-option.is-inactive {
  opacity: 0.72;
}

.settings-plan-limit-notification-option .route-settings-notification-copy small {
  margin-top: 0.125rem;
}

.settings-plan-limit-notification-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 0.875rem 0;
}

.settings-plan-limit-notification-actions .primary-button {
  min-height: 2rem;
}

.settings-overage-table-wrap {
  overflow-x: visible;
  overflow-y: visible;
  max-height: none;
}

.settings-overage-table {
  min-width: 0;
}

.settings-overage-table th,
.settings-overage-table td {
  white-space: normal;
}

.settings-overage-table td {
  font-size: 0.75rem;
}

.settings-overage-action-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-overage-action-cell label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-overage-action-cell input {
  width: 4.25rem;
  min-height: 1.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.375rem;
  font-size: 0.75rem;
}

.settings-plan-card {
  min-width: 0;
  flex: 0 0 19rem;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--primary-soft) 62%, transparent), transparent 44%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 82%, var(--control-bg)));
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.06);
  padding: 0.875rem;
}

.settings-plan-card.is-contracted {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line-soft));
}

.settings-plan-card.is-disabled {
  opacity: 0.72;
}

.settings-plan-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
}

.settings-plan-card > header strong {
  color: var(--panel-title);
  font-size: 1rem;
}

.settings-plan-card > header small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.4;
}

.settings-plan-badge {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--label);
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-plan-badge.is-contracted {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line-soft));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.settings-plan-badge.is-open {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line-soft));
  color: var(--primary);
}

.settings-plan-badge.is-locked {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--line-soft));
  color: var(--orange);
}

.settings-plan-price em {
  display: block;
  color: var(--panel-title);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 900;
}

.settings-plan-price small {
  color: var(--muted);
  font-size: 0.6875rem;
}

.settings-plan-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.375rem;
}

.settings-plan-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 74%, var(--control-bg));
  padding: 0.375rem 0.5rem;
}

.settings-plan-card li span {
  color: var(--muted);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-plan-card li b {
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 800;
  text-align: right;
}

.settings-plan-card li.is-feature {
  justify-content: flex-start;
}

.settings-plan-card li.is-feature > span.material-symbols-rounded {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 62.4375rem;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--green) 18%, var(--surface));
  color: var(--green);
}

.settings-plan-card li.is-feature > b {
  text-align: left;
}

.settings-plans-empty {
  min-height: 12.5rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--line-soft) 80%, var(--primary));
  border-radius: 1rem;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.375rem;
  padding: 1rem;
}

.settings-plans-empty .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}

.settings-plans-empty strong {
  color: var(--panel-title);
}

.settings-plans-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.settings-field {
  display: grid;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.75rem;
}

.settings-field span {
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 850;
}

.settings-field small {
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.45;
}

.settings-field input,
.settings-user-row input,
.settings-user-row select,
.settings-user-static {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.625rem;
  font-size: 0.7812rem;
}

.settings-user-static {
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  cursor: default;
}

.settings-field input:focus,
.settings-user-row input:focus,
.settings-user-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.settings-integration-actions {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.125rem;
  box-sizing: border-box;
  min-height: 0;
  overflow: auto;
  align-content: start;
}

.settings-integration-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 1.125rem;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--primary-soft) 82%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface), var(--control-bg));
  padding: 1rem;
  box-shadow: 0 1.25rem 2.875rem rgba(15, 23, 42, 0.08);
}

.settings-integration-card > .material-symbols-rounded,
.settings-integration-card > .settings-icon-badge {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--primary) 22%, transparent);
}

.settings-icon-badge svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.settings-integration-card strong {
  display: block;
  color: var(--panel-title);
  font-size: 1.25rem;
  line-height: 1.1;
}

.settings-integration-card p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.settings-integration-card > div {
  width: 100%;
}

.settings-integration-card button {
  justify-self: start;
  min-height: 2.5rem;
}

.settings-integration-card > button,
.settings-integration-card > form,
.settings-integration-card > .settings-integration-configured {
  margin-top: auto;
}

#settingsChatIntegrationNotice,
#settingsVoiceIntegrationNotice {
  margin-top: 0;
  min-height: 0;
}

#settingsChatIntegrationNotice:empty,
#settingsVoiceIntegrationNotice:empty {
  display: none;
}

@media (max-width: 76rem) {
  .settings-integration-actions {
    grid-template-columns: 1fr;
  }
}

.settings-integration-upload {
  display: grid;
  gap: 0.5rem;
}

.settings-integration-configured {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-integration-configured-summary {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.settings-integration-configured-badge {
  border: 0.0625rem solid color-mix(in srgb, var(--green) 36%, var(--line-soft));
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-integration-configured small {
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 700;
}

.settings-integration-configured > button {
  margin-left: auto;
  flex-shrink: 0;
}

.integration-secret-body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
}

.integration-secret-file {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.settings-integration-card > .settings-integration-upload {
  width: 100%;
}

.settings-integration-upload input[type="file"] {
  width: 100%;
  min-height: 2.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 78%, var(--primary-soft));
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--control-bg));
  color: var(--text);
  font-size: 0.7812rem;
  line-height: 1.2;
  padding: 0.375rem;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
}

.settings-integration-upload input[type="file"]:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 80%, var(--primary-soft));
}

.settings-integration-upload input[type="file"]:focus-visible {
  outline: 0.125rem solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 0.0625rem;
  border-color: var(--primary);
}

.settings-integration-upload input[type="file"]::file-selector-button {
  appearance: none;
  border: 0;
  border-radius: 0.625rem;
  background: var(--control-bg);
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.75rem;
  margin-right: 0.625rem;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.settings-integration-upload input[type="file"]:hover::file-selector-button,
.settings-integration-upload input[type="file"]:focus-visible::file-selector-button {
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--control-bg));
  color: var(--primary-strong);
}

.settings-integration-card-chat {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line-soft));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 36%),
    linear-gradient(180deg, var(--surface), var(--control-bg));
}

.settings-integration-card-chat > .material-symbols-rounded {
  background: var(--blue);
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--blue) 26%, transparent);
}

.settings-integration-card-voice {
  border-color: color-mix(in srgb, var(--teal, #0ea5a4) 24%, var(--line-soft));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--teal, #0ea5a4) 16%, transparent), transparent 36%),
    linear-gradient(180deg, var(--surface), var(--control-bg));
}

.settings-integration-card-voice > .material-symbols-rounded {
  background: var(--teal, #0ea5a4);
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--teal, #0ea5a4) 24%, transparent);
}

.settings-integration-card-voice > .settings-icon-badge {
  background: var(--teal, #0ea5a4);
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--teal, #0ea5a4) 24%, transparent);
}

.settings-integration-card-docs {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line-soft));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 36%),
    linear-gradient(180deg, var(--surface), var(--control-bg));
}

.settings-integration-card-docs > .material-symbols-rounded {
  background: var(--green);
  box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--green) 22%, transparent);
}

.api-docs-workbench {
  min-height: calc(100vh - 5.75rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.125rem;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary-soft) 76%, transparent), transparent 30%),
    var(--bg);
  padding: 1.125rem;
}

.api-docs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 1.375rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 62%, transparent), transparent 62%),
    var(--surface);
  padding: 1.25rem;
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.08);
}

.api-docs-hero span {
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
  text-transform: uppercase;
}

.api-docs-hero h2 {
  margin: 0.25rem 0 0;
  color: var(--panel-title);
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  line-height: 1.02;
}

.api-docs-hero p {
  max-width: 47.5rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.api-docs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

.settings-api-docs {
  min-height: 0;
  max-height: 100%;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.125rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.api-docs-page-docs {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.625rem;
  overflow: visible;
  padding: 0;
}

.api-docs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.625rem;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.9375rem;
  background: var(--surface);
  padding: 0.6875rem;
}

.api-docs-search {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.6875rem;
  background: var(--control-bg);
  padding: 0.4375rem 0.625rem;
}

.api-docs-search .material-symbols-rounded {
  color: var(--muted);
  font-size: 1.125rem;
}

.api-docs-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
}

.api-docs-search input:focus {
  outline: none;
}

.api-docs-method-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.api-docs-method-filters button {
  min-height: 2.0625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.8125rem;
  font-size: 0.7188rem;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.api-docs-method-filters button.is-active {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
}

.api-docs-toolbar > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.api-docs-empty {
  display: grid;
  justify-items: center;
  gap: 0.4375rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--line) 86%, var(--primary));
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  padding: 0.875rem;
  text-align: center;
}

.api-docs-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.5rem;
}

.api-docs-empty strong {
  color: var(--panel-title);
  font-size: 0.875rem;
}

.api-docs-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.api-docs-page-docs .settings-doc-hero {
  grid-column: 1 / -1;
}

.api-docs-page-docs .settings-doc-collapse[open] {
  min-height: 0;
}

.api-docs-page-docs .settings-doc-body {
  max-height: none;
}

.api-docs-page-docs .settings-doc-body pre {
  max-height: min(52vh, 33.75rem);
}

.api-docs-page-docs .settings-doc-collapse {
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--control-bg) 64%, transparent)),
    var(--surface);
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.055);
}

.api-docs-page-docs .settings-doc-collapse[open] {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  box-shadow: 0 1.125rem 2.625rem rgba(15, 23, 42, 0.085);
}

.api-docs-page-docs .settings-doc-collapse summary {
  min-height: 4.25rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(16.25rem, auto) 1.75rem;
  padding: 0.75rem 0.875rem;
}

.api-docs-page-docs .settings-doc-collapse summary::after {
  content: "expand_more";
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1.25rem;
  font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 24;
  transition: transform var(--ease-ui), background var(--ease-ui), color var(--ease-ui);
}

.api-docs-page-docs .settings-doc-collapse[open] summary::after {
  background: var(--primary-soft);
  color: var(--primary);
  transform: rotate(180deg);
}

.api-docs-page-docs .settings-doc-collapse summary > .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
}

.api-docs-page-docs .settings-doc-collapse summary code {
  justify-self: end;
  min-width: min(22.5rem, 42vw);
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5625rem;
  border-radius: 0.75rem;
  padding: 0.375rem 0.625rem 0.375rem 0.4375rem;
}

.api-docs-page-docs .settings-doc-collapse summary code b {
  display: inline-grid;
  place-items: center;
  min-width: 3.125rem;
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  color: var(--primary);
  padding: 0.3125rem 0.5rem;
  font-size: 0.625rem;
  line-height: 1;
}

.api-docs-page-docs .settings-doc-collapse summary code span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
}

.api-docs-page-docs .settings-doc-collapse summary:hover code {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line-soft));
}

.api-docs-page-docs .settings-doc-body {
  border-top: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--control-bg) 82%, transparent), transparent 42%),
    var(--control-bg);
  padding: 1rem;
}

.settings-doc-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 62%),
    var(--control-bg);
  padding: 0.875rem;
}

.settings-doc-hero > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-doc-hero .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-size: 1.4375rem;
}

.settings-doc-hero strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
}

.settings-doc-hero p {
  max-width: 40rem;
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.45;
}

.settings-doc-hero > code {
  flex-shrink: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--primary);
  padding: 0.4375rem 0.625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 800;
}

.settings-doc-collapse {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.settings-doc-collapse[open] {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line-soft));
  box-shadow: 0 0.875rem 1.75rem rgba(80, 45, 140, 0.07);
}

.settings-doc-collapse summary {
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  list-style: none;
  padding: 0.625rem 0.75rem;
}

.settings-doc-collapse[open] summary {
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 68%, transparent), transparent 62%),
    var(--surface);
}

.settings-doc-collapse summary::-webkit-details-marker {
  display: none;
}

.settings-doc-collapse summary > .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3125rem;
}

.settings-doc-collapse summary strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8438rem;
  line-height: 1.2;
}

.settings-doc-collapse summary small {
  display: block;
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.25;
}

.settings-doc-collapse summary code {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--primary);
  padding: 0.375rem 0.5625rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6562rem;
  font-weight: 800;
  white-space: nowrap;
}

.settings-doc-body {
  min-height: 0;
  max-height: min(46vh, 26.25rem);
  display: grid;
  gap: 0.625rem;
  background: var(--control-bg);
  padding: 0.75rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.settings-doc-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7812rem;
  line-height: 1.45;
}

.settings-doc-body > span,
.settings-doc-grid span {
  color: var(--label);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.settings-doc-body pre {
  max-height: min(30vh, 17.5rem);
  overflow: auto;
  margin: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.75rem;
}

.settings-doc-body code {
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7188rem;
  line-height: 1.5;
  white-space: pre;
}

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

.settings-doc-grid > div {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
}

.settings-team-head,
.settings-user-row {
  display: grid;
  grid-template-columns: minmax(9.375rem, 1fr) minmax(11.875rem, 1.15fr) 7.25rem 4.375rem 2.375rem;
  gap: 0.625rem;
  align-items: center;
}

.settings-team-head {
  color: var(--table-head);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
  padding: 0 0.625rem;
}

.settings-user-row {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.625rem;
}

.settings-user-active {
  height: 2.375rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--muted) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--muted) 8%, var(--input-bg));
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--ease-ui), background var(--ease-ui), color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
}

.settings-user-active input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-user-active .material-symbols-rounded {
  font-size: 1.75rem;
  font-weight: 900;
  font-variation-settings: "FILL" 1, "wght" 800, "GRAD" 0, "opsz" 24;
}

.settings-user-active:has(input:checked) {
  border-color: color-mix(in srgb, var(--green) 46%, var(--line-soft));
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--green) 10%, transparent);
}

.settings-user-active:not(:has(input:checked)) .material-symbols-rounded {
  opacity: 0.72;
}

.settings-user-active:hover {
  transform: translateY(-0.0625rem);
}

.settings-team-toolbar {
  margin: 0.875rem 1.125rem 0;
  display: flex;
  justify-content: flex-start;
}

.settings-team-role-tabs {
  grid-template-columns: repeat(3, minmax(6rem, 1fr));
}

.settings-add-user {
  justify-self: start;
}

.settings-team-pagination {
  margin-top: 0;
}

.settings-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
  padding: 0.875rem 1.125rem;
}

.settings-panel-footer .notice {
  margin-right: auto;
}

.settings-experience-card {
  align-self: start;
  margin: 0.875rem 1.125rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.125rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line-soft));
  border-radius: 0.625rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 58%),
    var(--control-bg);
  padding: 0.8125rem 0.875rem;
  box-shadow: 0 0.875rem 1.875rem rgba(80, 45, 140, 0.07);
}

.settings-experience-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6875rem;
}

.settings-experience-copy > .material-symbols-rounded {
  flex: 0 0 auto;
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 0.5625rem;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.3125rem;
}

.settings-experience-card strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8438rem;
  line-height: 1.2;
}

.settings-experience-card p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.settings-theme-control {
  min-width: 11.875rem;
  display: grid;
  justify-items: end;
  gap: 0.4375rem;
}

.settings-theme-control > span {
  color: var(--label);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

#themeToggle {
  min-height: 2.25rem;
  border-radius: 0.5625rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}

#themeToggle .material-symbols-rounded {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 1.1875rem;
}

.is-readonly-locked {
  opacity: 0.52;
  cursor: not-allowed !important;
}

.app.user-readonly .table-action.is-readonly-locked,
.app.user-readonly [data-demand-edit],
.app.user-readonly [data-demand-delete],
.app.user-readonly [data-demand-import-tasks],
.app.user-readonly .api-header-delete {
  display: none !important;
}

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

.danger-button:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.danger-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.flow-modal-head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2.375rem;
  gap: 0.875rem;
  align-items: center;
  padding: 1.125rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--control-bg);
}

.flow-modal-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
}

.flow-modal-icon .material-symbols-rounded {
  font-size: 1.5625rem;
}

.flow-modal-head span:not(.material-symbols-rounded) {
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-modal-head h3 {
  margin: 0.125rem 0 0;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.2;
}

.flow-modal-head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.task-detail-modal .flow-modal-head {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
}

.task-detail-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.task-comments-toggle-button {
  display: none !important;
}

.task-detail-tabs .task-detail-comments-tab {
  display: none;
}

.task-detail-head-actions .icon-button {
  width: 2.375rem;
  height: 2.375rem;
  border-color: color-mix(in srgb, var(--line-soft) 76%, var(--primary));
  background: color-mix(in srgb, var(--surface) 86%, var(--control-bg));
}

.task-detail-head-actions .icon-button:hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line-soft));
  color: var(--primary);
}

.task-detail-head-actions .task-detail-delete-button {
  color: var(--red);
}

.task-detail-head-actions .task-detail-delete-button:hover {
  border-color: color-mix(in srgb, var(--red) 46%, var(--line-soft));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.flow-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.125rem;
  overflow: auto;
}

.modal-side {
  position: sticky;
  top: 0;
  align-self: start;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  background: var(--control-bg);
}

.modal-side strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.modal-side p {
  margin: 0.5rem 0 0.875rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.modal-side dl {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.modal-side div {
  border-top: 0.0625rem solid var(--line-soft);
  padding-top: 0.5rem;
}

.modal-side dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.modal-side dd {
  margin: 0.25rem 0 0;
  color: var(--text);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.modal-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-content: start;
}

.command-config-modal {
  width: min(112rem, calc(100vw - 1.25rem));
  height: min(92vh, 61.25rem);
  max-height: calc(100dvh - 1.25rem);
}

.command-config-modal > .flow-modal-body {
  grid-template-columns: minmax(15.5rem, 18rem) minmax(38rem, 1fr) minmax(15.5rem, 18rem);
  gap: 0.875rem;
  overflow: hidden;
}

.command-config-modal .modal-config-grid {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.0625rem 0.375rem 0.75rem 0;
  scrollbar-gutter: stable;
}

.command-contract-panel {
  position: static;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-self: stretch;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--control-bg) 88%, var(--surface));
}

.command-contract-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface));
}

.command-contract-head > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.125rem;
}

.command-contract-head > div {
  min-width: 0;
}

.command-contract-head small {
  display: block;
  color: var(--primary);
  font-size: 0.5938rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-contract-head strong {
  overflow: hidden;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-contract-head b {
  min-width: 1.75rem;
  min-height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  padding: 0 0.375rem;
  font-size: 0.625rem;
}

.command-contract-panel > p {
  margin: 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  padding: 0.625rem 0.75rem;
  color: var(--muted);
  font-size: 0.6562rem;
  line-height: 1.45;
}

.command-contract-content.task-detail-structured-content {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 0.375rem 0.25rem;
  scrollbar-gutter: stable;
}

.command-contract-panel .task-detail-structured-tree-node > summary,
.command-contract-panel .task-detail-structured-tree-row {
  min-height: 1.75rem;
  grid-template-columns: 0.875rem 1rem minmax(4.5rem, 1fr) auto;
  gap: 0.25rem;
  padding: 0.1875rem 0.375rem;
}

.command-contract-panel .task-detail-structured-tree-children {
  margin-left: 0.75rem;
  padding-left: 0.1875rem;
}

.command-contract-panel .task-detail-structured-tree-key {
  font-size: 0.6562rem;
}

.command-contract-panel .task-detail-structured-tree-value,
.command-contract-panel .task-detail-structured-tree-node > summary > small {
  max-width: 5.5rem;
  justify-self: end;
  font-size: 0.5938rem;
}

.command-contract-panel .task-detail-structured-tree-type {
  width: 1rem;
  height: 1rem;
  font-size: 0.5312rem;
}

.command-contract-panel > footer {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.5625rem 0.75rem;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.5938rem;
  line-height: 1.3;
}

.command-contract-panel > footer > span {
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--muted);
}

.command-contract-panel > footer.is-learned {
  color: color-mix(in srgb, var(--primary) 76%, var(--text));
}

.command-contract-panel > footer.is-learned > span {
  background: var(--primary);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary) 12%, transparent);
}

.command-contract-empty {
  min-height: 11rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.375rem;
  padding: 1rem;
  text-align: center;
}

.command-contract-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.5rem;
}

.command-contract-empty strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
}

.command-contract-empty small {
  max-width: 13rem;
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1.4;
}

@media (max-width: 88rem) and (min-width: 67.5625rem) {
  .command-config-modal > .flow-modal-body {
    grid-template-columns: minmax(13.5rem, 15rem) minmax(34rem, 1fr) minmax(13.5rem, 15rem);
    gap: 0.625rem;
    padding-inline: 0.75rem;
  }
}

@media (max-width: 67.5rem) {
  .command-config-modal {
    height: calc(100dvh - 1.25rem);
  }

  .command-config-modal > .flow-modal-body {
    grid-template-columns: 1fr;
    align-content: start;
    overflow: auto;
  }

  .command-config-modal .modal-config-grid {
    overflow: visible;
    padding-right: 0;
  }

  .command-contract-panel {
    height: auto;
    min-height: 18rem;
    max-height: 25rem;
  }

  .command-contract-content.task-detail-structured-content {
    min-height: 10rem;
  }
}

.modal-field {
  display: grid;
  gap: 0.4375rem;
  min-width: 0;
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 800;
  align-items: center;
}

.modal-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-field input:not([type="checkbox"]):not([type="radio"]),
.modal-field select,
.modal-field textarea {
  width: 100%;
  min-height: 2.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 0.6875rem;
  color: var(--text);
  background: var(--input-bg);
  outline: none;
  font-size: 0.7812rem;
}

.modal-field textarea {
  min-height: 8.875rem;
  padding: 0.625rem 0.6875rem;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

.modal-field input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-field select:focus,
.modal-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.searchable-select__panel input:focus {
  border-color: none !important;
  box-shadow: none !important;
}

.modal-field input:not([type="checkbox"]):not([type="radio"]):disabled,
.modal-field select:disabled,
.modal-field textarea:disabled,
.start-filter-row input:disabled,
.start-filter-row select:disabled {
  color: var(--muted);
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
  cursor: not-allowed;
}

.modal-field-wide {
  grid-column: span 3;
}

.insert-demand-payload-builder {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 48%, transparent), transparent 56%),
    color-mix(in srgb, var(--control-bg) 74%, var(--surface));
  padding: 0.8125rem;
}

.insert-demand-payload-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.6875rem;
}

.insert-demand-payload-head > div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}

.insert-demand-payload-head strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.insert-demand-payload-head p,
.insert-demand-payload-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.insert-demand-payload-head .compact-action {
  flex: 0 0 auto;
  min-height: 2.125rem;
  gap: 0.375rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.insert-demand-payload-table {
  min-width: 0;
  display: grid;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.insert-demand-payload-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 0.85fr) minmax(10rem, 1fr) minmax(14rem, 1.3fr) minmax(9.5rem, 0.72fr) 2.375rem;
  align-items: center;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.5rem;
}

.insert-demand-payload-row:first-child {
  border-top: 0;
}

.insert-demand-payload-row.is-head {
  min-height: 2rem;
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  color: var(--muted);
  padding-block: 0.4375rem;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.0219rem;
  text-transform: uppercase;
}

.insert-demand-payload-row input,
.insert-demand-payload-row select {
  width: 100%;
  min-width: 0;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.75rem;
}

.insert-demand-payload-row input:focus,
.insert-demand-payload-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.insert-demand-payload-row select:disabled {
  color: var(--muted);
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
}

.insert-demand-payload-row .icon-button {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-sm);
}

.insert-demand-payload-row .icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.insert-demand-payload-empty {
  min-height: 4.75rem;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6875rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.6875rem;
}

.insert-demand-payload-empty > .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.insert-demand-payload-empty strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.insert-demand-operation-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: var(--radius-sm);
  padding: 0.6875rem 0.75rem;
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.insert-demand-operation-note > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.125rem;
}

.insert-demand-operation-note strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.75rem;
}

.insert-demand-operation-note p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 500;
  line-height: 1.45;
}

.auto-command-identity {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent 70%),
    var(--control-bg);
  padding: 0.75rem;
}

.auto-command-identity span {
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
}

.auto-command-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-command-identity p {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-periodicity > div {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.45fr) minmax(7.5rem, 1fr);
  gap: 0.5rem;
}

.start-filter-builder {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 74%, var(--surface));
  padding: 0.75rem;
}

.start-filter-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.625rem;
}

.start-filter-head > div {
  min-width: 0;
}

.start-filter-head span {
  display: block;
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
}

.start-filter-head strong {
  display: block;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.start-filter-head label {
  width: min(14.375rem, 44%);
  display: grid;
  gap: 0.375rem;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 800;
}

.start-filter-head select,
.start-filter-row input,
.start-filter-row select {
  min-width: 0;
  width: 100%;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.5625rem;
  outline: 0;
  font-size: 0.75rem;
}

.start-filter-table {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
}

.start-filter-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(7.375rem, 0.9fr) minmax(8.125rem, 1fr) minmax(8rem, 0.9fr) minmax(8.75rem, 1fr) 2.375rem;
  align-items: start;
  gap: 0.5rem;
}

.start-filter-variable-selectors {
  align-self: stretch;
}

.start-filter-variable-selector-control {
  min-height: 2.125rem;
}

.start-filter-variable-selector-control .condition-array-match-button {
  flex: 0 0 auto;
}

.start-filter-row.is-head {
  min-height: 1.375rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.start-filter-row .icon-button {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-sm);
}

.start-filter-row .icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.start-filter-builder .compact-action {
  justify-self: start;
  min-height: 2.125rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.condition-builder {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 74%, var(--surface));
  padding: 0.625rem;
}

.condition-builder > .modal-field-wide {
  grid-column: 1 / -1;
}

.condition-builder-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  padding-bottom: 0.5rem;
}

.condition-builder-head > div {
  min-width: 0;
}

.condition-builder-head span,
.condition-builder-actions label > span {
  display: block;
  color: var(--amber);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
  display: flex;
}

.condition-builder-head strong {
  display: block;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.condition-builder-head p {
  max-width: 41.25rem;
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.35;
}

.condition-paths-builder {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.condition-paths-builder > .modal-field-wide {
  grid-column: 1 / -1;
}

.condition-path-card {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 88%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 90%, var(--control-bg));
  padding: 0.5625rem;
}

.condition-rule-row.condition-path-meta-head {
  grid-template-columns: minmax(12rem, 26rem) 7.5rem 8.75rem minmax(0, 1fr) auto;
}

.condition-rule-row.condition-path-meta-head > span:nth-child(4) {
  display: none;
}

.condition-rule-row.condition-path-meta-row {
  grid-template-columns: minmax(12rem, 26rem) 7.5rem 8.75rem minmax(0, 1fr) auto;
  align-items: center;
}

.condition-rule-row.condition-path-meta-row > input {
  width: 100%;
  max-width: 26rem;
  justify-self: start;
}

.condition-rule-row.condition-path-meta-row > .condition-path-remove-button {
  grid-column: 5;
  justify-self: end;
  margin-left: auto;
  min-height: 2.125rem;
  padding: 0 0.75rem;
  gap: 0.3125rem;
  border-color: color-mix(in srgb, #ef4444 42%, var(--line-soft));
  background: color-mix(in srgb, #ef4444 12%, var(--surface));
  color: #b91c1c;
}

.condition-rule-row.condition-path-meta-row > .condition-path-color-picker {
  max-width: 8.75rem;
  position: relative;
}

.condition-path-color-picker > summary {
  list-style: none;
}

.condition-path-color-picker > summary::-webkit-details-marker {
  display: none;
}

.condition-path-color-picker.is-disabled > summary {
  pointer-events: none;
}

.condition-path-color-trigger {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.5rem;
  cursor: pointer;
}

.condition-path-color-trigger .material-symbols-rounded {
  color: var(--muted);
  font-size: 1rem;
}

.condition-path-color-trigger-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-path-color-dot {
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 88%, #fff);
  border-radius: 50%;
}

.condition-path-color-palette {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 25;
  width: 13.5rem;
  max-height: 13.5rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  overflow: auto;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: 0 0.875rem 2rem rgba(15, 23, 42, 0.18);
  padding: 0.375rem;
}

.condition-path-color-picker:not([open]) .condition-path-color-palette {
  display: none;
}

.condition-path-color-palette .condition-path-color-dot {
  width: 100%;
  height: auto;
  min-height: 1.875rem;
  display: grid;
  grid-template-columns: 0.875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.25rem 0.375rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}

.condition-path-color-dot-swatch {
  width: 0.875rem;
  height: 0.875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 88%, #fff);
  border-radius: 50%;
}

.condition-path-color-dot-label {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-path-color-palette .condition-path-color-dot.is-selected {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
}

.condition-path-color-palette .condition-path-color-dot:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 44%, var(--surface));
}

.condition-path-color-dot:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.condition-rule-row.condition-path-meta-row > .condition-path-remove-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, #dc2626 56%, var(--line-soft));
  background: color-mix(in srgb, #ef4444 18%, var(--surface));
}

.condition-rule-row.condition-path-meta-row > .condition-path-remove-button .material-symbols-rounded {
  font-size: 1rem;
}

.condition-paths-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 2.125rem;
  width: 50%;
}

.condition-path-add-decision-button {
  width: 100%;
}

.condition-path-add-rule-button {
  min-height: 2.125rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  justify-self: start;
}

.condition-builder-head label,
.condition-builder-actions label {
  display: grid;
  gap: 0.375rem;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 800;
}

.condition-builder-head label {
  width: min(15.625rem, 44%);
}

.condition-builder-head select,
.condition-builder-actions select,
.condition-rule-row input,
.condition-rule-row select {
  min-width: 0;
  width: 100%;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.5625rem;
  outline: 0;
  font-size: 0.75rem;
}

.condition-empty-source {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  border: 0.0625rem dashed color-mix(in srgb, var(--amber) 34%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 74%, rgba(255, 158, 44, 0.1));
  padding: 0.625rem;
}

.condition-empty-source .material-symbols-rounded {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--amber);
  background: rgba(255, 158, 44, 0.14);
}

.condition-empty-source strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.condition-empty-source p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.35;
}

.condition-rule-table {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
}

.condition-rule-table-boolean {
  grid-column: 1 / -1;
  width: 100%;
}

.condition-rule-table-boolean .condition-rule-row.is-head {
  align-items: end;
}

.condition-rule-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(9.375rem, 1.1fr) minmax(9.375rem, 1.1fr) minmax(7.875rem, 0.85fr) minmax(8.625rem, 1fr) 2.375rem;
  align-items: flex-start;
  gap: 0.5rem;
}

.condition-rule-row.is-head {
  min-height: 1.375rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.condition-rule-row .icon-button {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-sm);
}

.condition-rule-row .icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.condition-variable-selectors {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
}

.condition-variable-selector-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
}

.condition-variable-selector-control > select:only-child {
  grid-column: 1 / -1;
}

.condition-array-match-button {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}

.condition-array-match-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line-soft));
  background: var(--primary-soft);
}

.condition-array-match-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.condition-array-match-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.condition-array-match-button.is-advanced {
  position: relative;
}

.condition-array-match-button.is-advanced::after {
  content: "";
  position: absolute;
  right: 0.1875rem;
  bottom: 0.1875rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 0.0625rem solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
}

.condition-array-match-button.mode-filter_equals,
.condition-array-match-button.mode-index_equals,
.condition-array-match-button.mode-all_equals {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-soft));
  background: var(--primary-soft);
}

.array-navigation-layer {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(0.25rem);
}

.array-navigation-popover {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 2rem 5rem rgba(35, 20, 60, 0.28);
}

.array-navigation-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.375rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--control-bg));
}

.array-navigation-head > .material-symbols-rounded {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.375rem;
}

.array-navigation-head > div {
  min-width: 0;
}

.array-navigation-head small,
.array-navigation-filter-builder > header small {
  display: block;
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.array-navigation-head strong {
  display: block;
  overflow: hidden;
  margin-top: 0.0625rem;
  color: var(--panel-title);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.array-navigation-head p,
.array-navigation-filter-builder > header p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.array-navigation-body {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  overflow: auto;
  padding: 1rem;
}

.array-navigation-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.array-navigation-modes > button {
  min-width: 0;
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.array-navigation-modes > button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line-soft));
  color: var(--primary);
}

.array-navigation-modes > button.is-active {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 10%, transparent);
}

.array-navigation-modes .material-symbols-rounded {
  font-size: 1.25rem;
}

.array-navigation-modes strong {
  overflow: hidden;
  color: currentColor;
  font-size: 0.7188rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.array-navigation-index {
  width: min(16rem, 100%);
}

.array-navigation-filter-builder {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
}

.array-navigation-filter-builder > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  align-items: end;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.625rem;
}

.array-navigation-filter-builder > header strong {
  display: block;
  margin-top: 0.125rem;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.array-navigation-filter-builder > header label {
  display: grid;
  gap: 0.3125rem;
}

.array-navigation-filter-builder > header label span,
.array-navigation-rule-row.is-head {
  color: var(--muted);
  font-size: 0.5938rem;
  font-weight: 850;
  text-transform: uppercase;
}

.array-navigation-filter-builder select,
.array-navigation-filter-builder input {
  min-width: 0;
  width: 100%;
  min-height: 2.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4375rem;
  padding: 0 0.5625rem;
  background: var(--input-bg);
  color: var(--text);
  outline: 0;
  font-size: 0.7188rem;
}

.array-navigation-filter-builder select:focus,
.array-navigation-filter-builder input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.array-navigation-rule-table {
  min-width: 0;
  display: grid;
  gap: 0.4375rem;
}

.array-navigation-rule-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 1.2fr) minmax(9rem, 0.85fr) minmax(10rem, 1fr) 2.25rem;
  align-items: center;
  gap: 0.5rem;
}

.array-navigation-rule-row .icon-button {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.4375rem;
}

.array-navigation-manual-hint {
  margin: 0;
  border-left: 0.1875rem solid var(--primary);
  padding: 0.4375rem 0.625rem;
  color: var(--muted);
  background: var(--primary-soft);
  font-size: 0.6562rem;
  line-height: 1.45;
}

.array-navigation-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.75rem 1rem;
  background: var(--control-bg);
}

.array-navigation-footer > span {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 47.5rem) {
  .array-navigation-layer {
    align-items: end;
    padding: 0.625rem;
  }

  .array-navigation-popover {
    width: 100%;
    max-height: calc(100dvh - 1.25rem);
  }

  .array-navigation-head {
    grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem;
    padding: 0.75rem;
  }

  .array-navigation-head > .material-symbols-rounded {
    width: 2.375rem;
    height: 2.375rem;
  }

  .array-navigation-head p {
    display: none;
  }

  .array-navigation-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .array-navigation-filter-builder > header,
  .array-navigation-rule-row,
  .array-navigation-rule-row.is-head {
    grid-template-columns: 1fr;
  }

  .array-navigation-rule-row.is-head {
    display: none;
  }

  .array-navigation-rule-row .icon-button {
    width: 100%;
  }

  .array-navigation-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .array-navigation-footer > span {
    grid-column: 1 / -1;
  }
}

.condition-builder-actions {
  display: grid;
  grid-template-columns: auto minmax(13.75rem, 21.25rem);
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding-top: 0.625rem;
}

.condition-builder-actions-boolean {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(13.75rem, 21.25rem);
  justify-content: space-between;
  align-items: end;
}

.condition-builder-actions-boolean .compact-action {
  justify-self: start;
}

.condition-builder-actions-boolean label {
  width: min(21.25rem, 100%);
  justify-self: end;
}

.condition-paths-builder + .condition-builder-actions {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
  width: min(21.25rem, 100%);
  border-top: 0;
  padding-top: 0;
  margin-top: calc(-2.125rem - 0.5rem);
}

.condition-paths-builder + .condition-builder-actions > span {
  display: none;
}

.condition-paths-builder + .condition-builder-actions label {
  width: min(21.25rem, 100%);
  justify-self: end;
}

.condition-builder-actions .compact-action {
  min-height: 2.125rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.api-integration-empty,
.api-integration-summary {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface));
}

.api-integration-empty {
  min-height: 5.375rem;
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem;
}

.api-integration-empty > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.4375rem;
}

.api-integration-empty strong,
.api-integration-summary strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.api-integration-empty p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.api-integration-summary {
  display: grid;
  gap: 0.6875rem;
  padding: 0.8125rem;
}

.api-integration-summary header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.api-integration-summary header div {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.api-integration-summary header span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.api-integration-summary header small {
  max-width: 46%;
  overflow: hidden;
  color: var(--muted);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-integration-summary-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.api-integration-summary-actions > small {
  max-width: min(16rem, 100%);
}

.api-integration-collapse-btn {
  min-height: 1.75rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
}

.api-integration-collapse-btn .material-symbols-rounded {
  font-size: 0.9375rem;
}

.api-integration-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.api-integration-meta span {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 800;
}

.api-integration-meta span.is-warning {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--line));
  background: color-mix(in srgb, #fef3c7 74%, var(--surface));
  color: #a16207;
}

.api-integration-meta span.is-success {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
}

.api-schema-preview {
  max-height: 11.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  overflow: auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.625rem;
}

.api-schema-preview code {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  background: var(--input-bg);
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6875rem;
}

.api-schema-preview code b {
  max-width: 13.75rem;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-schema-preview code span {
  border-left: 0.0625rem solid var(--line);
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  font-weight: 850;
}

.api-schema-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.api-variable-bindings {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  padding: 0.8125rem;
}

.api-variable-bindings header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.api-variable-bindings header > div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}

.api-variable-bindings header span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.api-variable-bindings header strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.api-variable-bindings header p,
.api-variable-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.api-variable-bindings code,
.api-variable-empty code {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 0.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.125rem 0.375rem;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 850;
}

.api-variable-empty {
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.625rem;
}

.api-variable-empty .material-symbols-rounded {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.api-variable-table {
  min-width: 0;
  display: grid;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.api-variable-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(8.125rem, 0.8fr) minmax(11.25rem, 1fr) minmax(13.75rem, 1.35fr);
  gap: 0.5rem;
  align-items: flex-start;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.5rem;
}

.api-variable-row.api-variable-row-chat-context {
  grid-template-columns: minmax(10.625rem, 0.9fr) minmax(8.125rem, 0.8fr) minmax(11.25rem, 1fr) 2.375rem;
}

.api-variable-row:first-child {
  border-top: 0;
}

.api-variable-row.is-head {
  min-height: 2rem;
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
  color: var(--muted);
  padding-block: 0.4375rem;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.0219rem;
  text-transform: uppercase;
}

.api-variable-row select,
.api-variable-row input {
  width: 100%;
  min-width: 0;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.75rem;
  outline: none;
}

.api-variable-row select:focus,
.api-variable-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.api-variable-source-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.api-variable-date-config-btn {
  min-height: 2.125rem;
  padding-inline: 0.625rem;
  white-space: nowrap;
}

.api-variable-combo {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
}

.api-variable-selector-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
}

.api-variable-selector-control > select:only-child {
  grid-column: 1 / -1;
}

.api-variable-date-cell {
  min-width: 0;
  display: block;
}

.relative-date-trigger {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
  padding: 0 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 8%, var(--input-bg)) 0%,
      var(--input-bg) 62%);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, background 0.15s ease;
}

.relative-date-trigger:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--primary) 18%, transparent);
}

.relative-date-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.relative-date-trigger:active:not(:disabled) {
  transform: translateY(0.0313rem);
}

.relative-date-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.relative-date-trigger-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 0.9375rem;
}

.relative-date-trigger-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.0094rem;
  color: var(--text);
}

.relative-date-trigger-edit {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.9375rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.relative-date-trigger:hover:not(:disabled) .relative-date-trigger-edit {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}

.flow-modal.api-date-binding-modal {
  width: min(52rem, calc(100vw - 2rem));
  max-width: 52rem;
}

.flow-modal.api-date-binding-modal .flow-modal-body {
  grid-template-columns: minmax(0, 1fr);
}

.api-date-binding-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.api-date-binding-preview {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: var(--radius-md, 0.75rem);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%,
      color-mix(in srgb, var(--control-bg) 82%, var(--surface)) 70%);
  padding: 0.75rem 0.875rem;
}

.api-date-binding-preview > span {
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 800;
}

.api-date-binding-preview-head {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.0125rem;
}

.api-date-binding-preview-head .material-symbols-rounded {
  font-size: 1.125rem;
}

.api-date-binding-preview > div {
  display: grid;
  gap: 0.375rem;
}

.api-date-binding-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (max-width: 60rem) {
  .api-variable-row {
    grid-template-columns: minmax(7rem, 0.8fr) minmax(9.5rem, 1fr) minmax(10.5rem, 1.35fr);
  }

  .api-variable-source-cell {
    grid-template-columns: 1fr;
  }

  .api-date-binding-grid {
    grid-template-columns: 1fr;
  }
}

.save-info-builder {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 62%, transparent), transparent 58%),
    color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  padding: 0.8125rem;
}

.save-info-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.6875rem;
}

.save-info-head > div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}

.save-info-head span {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: 0.0281rem;
  text-transform: uppercase;
}

.save-info-head strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.save-info-head p,
.save-info-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.save-info-head label {
  width: min(16.25rem, 38%);
  display: grid;
  gap: 0.375rem;
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 800;
}

.save-info-head select {
  width: 100%;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.5625rem;
  outline: 0;
  font-size: 0.75rem;
}

.save-info-empty {
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.625rem;
}

.save-info-empty .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3125rem;
}

.save-info-empty strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.save-info-table {
  min-width: 0;
  display: grid;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.save-info-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 1.05fr) minmax(14rem, 1.35fr) minmax(9rem, 1fr) minmax(9.5rem, 0.72fr) 2.375rem;
  gap: 0.5rem;
  align-items: flex-start;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.5rem;
}

.save-info-row.save-info-row-2 {
  grid-template-columns: minmax(0, 1fr) 2.375rem;
}

.save-info-row.save-info-row-3 {
  grid-template-columns: minmax(11.25rem, 1.1fr) minmax(10.625rem, 1fr) 2.375rem;
}

.save-info-row:first-child {
  border-top: 0;
}

.save-info-row.is-head {
  min-height: 2rem;
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
  color: var(--muted);
  padding-block: 0.4375rem;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.0219rem;
  text-transform: uppercase;
}

.save-info-row select,
.save-info-row input {
  width: 100%;
  min-width: 0;
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.75rem;
  outline: none;
}

.save-info-row select:focus,
.save-info-row input:focus,
.save-info-head select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.save-as-control {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
}

.mapping-sum-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.75rem;
  align-items: center;
  gap: 0.375rem;
}

.mapping-sum-control > span {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 900;
  text-align: center;
}

.mapping-sum-control > input[type="number"] {
  padding-inline: 0.5rem;
  text-align: center;
}

.save-info-row .icon-button {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-sm);
}

.save-info-row .icon-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.attribute-write-effect {
  min-width: 0;
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  overflow: hidden;
  border: 0.0625rem solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-write-effect .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 1rem;
}

.attribute-write-effect.is-update {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary);
}

.attribute-write-effect.is-add {
  border-color: color-mix(in srgb, #15803d 24%, var(--line-soft));
  background: color-mix(in srgb, #15803d 11%, var(--surface));
  color: color-mix(in srgb, #22c55e 78%, var(--text));
}

.attribute-write-effect.is-pending {
  border-color: var(--line-soft);
  background: var(--control-bg);
  color: var(--muted);
}

.attribute-write-policy {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface));
  padding: 0.6875rem 0.75rem;
}

.attribute-write-policy > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-size: 1.25rem;
}

.attribute-write-policy strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.7812rem;
}

.attribute-write-policy p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.45;
}

.attribute-write-policy.is-create-only {
  border-color: color-mix(in srgb, #15803d 20%, var(--line-soft));
  background: color-mix(in srgb, #15803d 8%, var(--surface));
}

.attribute-write-policy.is-create-only > .material-symbols-rounded {
  color: color-mix(in srgb, #22c55e 78%, var(--text));
}

.save-info-builder .compact-action {
  justify-self: start;
  min-height: 2.125rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.task-import-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  align-content: start;
  overflow: auto;
}

.task-import-tabs {
  width: min(100%, 21.25rem);
  justify-self: start;
  grid-template-columns: repeat(2, minmax(5.75rem, 1fr));
}

.task-import-panel {
  min-width: 0;
  display: grid;
  gap: 0.875rem;
}

.task-import-file-panel {
  min-height: 22.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--control-bg) 72%, transparent), transparent),
    var(--surface);
}

.task-import-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
  gap: 0.75rem;
}

.task-import-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.75rem;
}

.task-import-field-wide,
.task-import-file-field {
  grid-column: 1 / -1;
}

.task-import-rich-text-field {
  align-content: start;
}

.task-import-rich-text-field .task-rich-text-host {
  min-height: 11.875rem;
}

.task-import-rich-text-field .task-rich-text-content {
  min-height: 8.625rem;
}

.task-import-field span,
.task-import-field-head span {
  /* display: flex; */
  align-items: center;
  gap: 0.5rem;
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.25;
}

.task-import-field em,
.task-import-field-head em {
  display: inline-flex;
  min-height: 1.25rem;
  align-items: center;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.4375rem;
  font-size: 0.5938rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.task-import-field small,
.task-import-field-head small {
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
  line-height: 1.35;
}

.task-import-field input:not([type="checkbox"]),
.task-import-field select,
.task-import-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.6875rem;
  font-size: 0.7812rem;
}

.task-import-field textarea {
  min-height: 8.25rem;
  padding: 0.625rem 0.6875rem;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

.task-import-field input:focus,
.task-import-field select:focus,
.task-import-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.task-relation-field .task-relation-native-select[multiple]:not(.searchable-select__native) {
  min-height: 8.75rem;
  padding: 0.5rem 0.625rem;
}

.task-relation-field .task-relation-native-select[multiple]:not(.searchable-select__native) option {
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
}

.task-relation-field .task-relation-native-select.task-import-relation-carousel-native-select {
  display: none;
}

.task-relation-field .task-relation-native-select + .searchable-select {
  --searchable-border: color-mix(in srgb, var(--primary) 20%, var(--line));
  --searchable-radius: 0.625rem;
  --searchable-control-h: 2.75rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__trigger {
  min-height: 2.75rem;
  border-color: var(--searchable-border);
  background: color-mix(in srgb, var(--input-bg) 94%, var(--primary-soft));
  padding: 0.4375rem 0.5rem 0.4375rem 0.625rem;
  transition: border-color var(--ease-ui), background-color var(--ease-ui), box-shadow var(--ease-ui);
}

.task-relation-field .task-relation-native-select + .searchable-select.is-multiple .searchable-select__trigger {
  min-height: 3rem;
}

.task-relation-field .task-relation-native-select + .searchable-select:not(.is-disabled) .searchable-select__trigger:hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  background: var(--input-bg);
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__trigger-arrow {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  flex: 0 0 1.75rem;
  place-items: center;
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  color: var(--primary);
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__trigger-tags {
  gap: 0.3125rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__tag {
  min-width: 0;
  min-height: 1.625rem;
  gap: 0.25rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary-strong);
  padding: 0 0.25rem 0 0.4375rem;
  font-size: 0.7188rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__tag > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__tag-remove {
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  flex: 0 0 1.125rem;
  place-items: center;
  border-radius: 0.3125rem;
  color: color-mix(in srgb, var(--primary) 78%, var(--muted));
  font-size: 0.8125rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__tag-remove:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-strong);
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__panel {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.18);
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__search {
  padding: 0.625rem 0.75rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__option {
  min-height: 2.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__option-text {
  align-items: flex-start;
  text-align: left;
}

.task-relation-field .task-relation-native-select + .searchable-select.is-multiple .searchable-select__option:not(.is-selected)::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--muted) 55%, var(--line));
  border-radius: 0.3125rem;
  background: var(--surface);
}

.task-relation-field .task-relation-native-select + .searchable-select .searchable-select__option-check {
  width: 1rem;
  height: 1rem;
  display: grid;
  flex: 0 0 1rem;
  place-items: center;
  border-radius: 0.3125rem;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.75rem;
}

.task-relation-hint {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

.task-relation-hint.is-error {
  color: var(--danger, #b42318);
}

.task-import-relation-carousel {
  width: 100%;
}

.task-import-relation-carousel-track {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.125rem 0.125rem 0.375rem;
  scroll-snap-type: x mandatory;
}

.task-import-relation-carousel-track.is-empty {
  overflow: hidden;
}

.task-import-relation-carousel-empty {
  width: 100%;
  border: 0.0625rem dashed color-mix(in srgb, var(--line) 70%, var(--muted));
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted));
}

.task-import-relation-carousel-card {
  border: 0.0625rem solid color-mix(in srgb, var(--line) 80%, var(--primary-soft));
  background: var(--surface);
  color: inherit;
  border-radius: 0.625rem;
  padding: 0.375rem;
  min-width: 7.75rem;
  max-width: 9.75rem;
  display: grid;
  gap: 0.375rem;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
}

.task-import-relation-carousel-card:hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
}

.task-import-relation-carousel-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 78%, var(--line));
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--primary-soft) 65%, transparent);
}

.task-import-relation-carousel-thumb {
  width: 100%;
  height: 5.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-muted) 82%, #dbe7ff);
  display: grid;
  place-items: center;
}

.task-import-relation-carousel-thumb img {
  width: 66%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.task-import-relation-carousel-thumb .material-symbols-rounded {
  color: var(--muted);
  font-size: 1.25rem;
}

.task-import-field .task-import-relation-carousel-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  align-items: start;
}

.task-import-field .task-import-relation-carousel-line {
  display: block;
  font-size: 0.7188rem;
  line-height: 1.2;
  color: var(--primary-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-relation-object-actions {
  display: grid;
  gap: 0.375rem;
}

.task-relation-object-actions > small {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.task-relation-object-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.task-relation-object-preview-btn {
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
}

.task-relation-object-preview-btn > span:last-child {
  max-width: 17.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-relation-object-preview-modal {
  max-width: min(42rem, 95vw);
}

.task-relation-object-preview-body {
  padding-top: 0;
}

#taskImportRelationPreviewJson {
  margin: 0;
  border-radius: var(--radius-md);
  border: 0.0625rem solid color-mix(in srgb, var(--line) 75%, var(--surface));
  background: color-mix(in srgb, var(--panel) 86%, #000 14%);
  color: color-mix(in srgb, #ffffff 88%, var(--text));
  padding: 0.8125rem;
  max-height: min(55vh, 26rem);
  overflow: auto;
  font-size: 0.6875rem;
  line-height: 1.55;
}

.task-import-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-file-dropzone {
  min-height: 9.625rem;
  display: grid;
  place-items: center;
  gap: 0.3125rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent),
    var(--surface);
  color: var(--muted);
  padding: 1.125rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease-ui), background-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
}

.task-file-dropzone input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.task-file-dropzone > .material-symbols-rounded {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.5625rem;
}

.task-file-dropzone strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.task-file-dropzone.is-dragging,
.task-file-dropzone.has-file {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-soft);
  transform: translateY(-0.0625rem);
}

.task-file-selected {
  min-height: 2.375rem;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto 2rem;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  padding: 0.5rem;
  font-size: 0.7188rem;
}

.task-file-selected > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}

.task-file-selected strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-file-selected small {
  white-space: nowrap;
}

.task-import-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.task-import-toggle strong {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.task-import-toggle input:checked + strong {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.task-import-preview {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.task-import-preview summary {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.task-import-preview textarea {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--input-bg);
  color: var(--text);
  padding: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.45;
  resize: vertical;
}

.file-import-wizard {
  min-width: 0;
  min-height: 32.5rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  border-radius: inherit;
  overflow: hidden;
}

.file-import-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 78%, var(--control-bg));
}

.file-import-step {
  min-width: 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  color: var(--muted);
  padding: 0 0.625rem;
}

.file-import-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.875rem;
  bottom: 0.875rem;
  width: 0.0625rem;
  background: var(--line-soft);
}

.file-import-step span {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 0.8125rem;
  font-weight: 700;
}

.file-import-step strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.7188rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-import-step.active {
  color: var(--panel-title);
}

.file-import-step.active span,
.file-import-step.done span {
  background: var(--primary);
  color: #fff;
}

.file-import-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.file-import-results-tabs {
  width: 100%;
  justify-self: stretch;
  justify-content: flex-start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-sizing: border-box;
}

.file-import-lines-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.file-import-lines-filters {
  width: min(100%, 42rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.file-import-results-tabs button,
.file-import-lines-filters button {
  padding: 0 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-import-lines-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.file-import-lines-pagination small {
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
  white-space: nowrap;
}

.file-import-lines-pagination-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-import-lines-table td.file-import-lines-cell-errors {
  white-space: normal;
  line-height: 1.35;
}

.file-import-line-error {
  margin: 0;
}

.file-import-line-muted {
  color: var(--muted);
  font-weight: 650;
}

.file-import-error-value {
  color: var(--muted);
  font-weight: 650;
}

.file-import-dropzone {
  min-height: 25rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  margin: 1.125rem;
  border: 0.0938rem dashed color-mix(in srgb, var(--primary) 46%, var(--line));
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 34%, transparent), transparent 58%),
    var(--surface);
  color: var(--muted);
  padding: 1.75rem;
  text-align: center;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
}

.file-import-dropzone.is-dragging {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-soft);
  transform: translateY(-0.0625rem);
}

.file-import-dropzone > .material-symbols-rounded {
  width: 3.375rem;
  height: 3.375rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.875rem;
}

.file-import-dropzone strong {
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 900;
}

.file-import-dropzone small {
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.45;
}

.file-import-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.875rem;
  height: 0;
  min-height: 100%;
}

.file-import-section-head {
  min-width: 0;
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.file-import-section-head.compact {
  min-height: 2.375rem;
}

.file-import-section-head strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
}

.file-import-section-head small {
  display: block;
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
}

.file-import-sheet-list,
.file-import-header-list,
.file-import-match-table {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.file-import-sheet-option,
.file-import-header-row,
.file-import-match-row,
.file-import-match-head {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  background: var(--surface);
}

.file-import-sheet-option {
  grid-template-columns: 1.125rem 1.75rem minmax(0, 1fr);
  min-height: 3rem;
  border-radius: var(--radius-sm);
  padding: 0.5625rem 0.75rem;
  cursor: pointer;
}

.file-import-sheet-option .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.25rem;
}

.file-import-header-row {
  grid-template-columns: 1.125rem 6rem minmax(0, 1fr);
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.file-import-header-row.active,
.file-import-sheet-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
}

.file-import-header-row strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 850;
}

.file-import-header-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-import-match-head,
.file-import-match-row {
  grid-template-columns: minmax(13.75rem, 0.9fr) minmax(16.25rem, 1fr);
}

.file-import-match-head {
  min-height: 2rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  color: var(--muted);
  padding: 0 0.75rem;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.0175rem;
  text-transform: uppercase;
}

.file-import-match-row {
  min-height: 3.625rem;
  border-radius: var(--radius-sm);
  padding: 0.5625rem 0.75rem;
}

.file-import-match-row.required {
  border-left: 0.1875rem solid var(--primary);
}

.file-import-match-row.learned {
  border-color: color-mix(in srgb, var(--green) 24%, var(--line-soft));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 38%),
    var(--surface);
}

.file-import-match-row strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 900;
}

.file-import-match-row strong em {
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--green) 28%, var(--line-soft));
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
  padding: 0.1875rem 0.4375rem;
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.0112rem;
  text-transform: uppercase;
}

.file-import-match-row small {
  display: block;
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.35;
}

.file-import-match-row select,
.file-import-grid-preview input {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.625rem;
  font-size: 0.75rem;
}

.file-import-match-row select:focus,
.file-import-grid-preview input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.file-import-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.file-import-summary-grid > div {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.625rem;
}

.file-import-summary-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.9375rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-import-summary-grid span {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  text-transform: uppercase;
}

.file-import-summary-grid .ok strong {
  color: var(--green);
}

.file-import-summary-grid .bad strong {
  color: var(--red);
}

.file-import-grid-preview {
  min-width: 0;
  max-height: 24.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: auto;
}

.file-import-grid-preview table {
  width: 100%;
  min-width: 51.25rem;
  border-collapse: collapse;
}

.file-import-grid-preview th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 88%, var(--control-bg));
  color: var(--muted);
  padding: 0.5625rem;
  font-size: 0.625rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.file-import-grid-preview td {
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.4375rem;
  color: var(--text);
  font-size: 0.7188rem;
  vertical-align: top;
}

.file-import-grid-preview tr.has-error td:nth-child(2) {
  color: var(--red);
  font-weight: 750;
}

.file-import-grid-preview td.cell-error input {
  border-color: color-mix(in srgb, var(--red) 64%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--input-bg));
}

.file-import-footnote {
  margin: 0;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
}

.file-import-actions {
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 78%, var(--control-bg));
  padding: 0 0.875rem;
}

.file-import-progress-section {
  gap: 0.875rem;
}

.file-import-progress-bar {
  height: 0.625rem;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--line-soft) 70%, var(--control-bg));
  overflow: hidden;
}

.file-import-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 72%, var(--green)));
  transition: width 180ms ease;
}

.file-import-alert {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 750;
}

.file-import-alert.warning {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  color: var(--amber);
}

.file-import-alert.error {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.file-import-done-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.task-detail-modal {
  width: min(80rem, calc(100vw - 2.5rem));
  height: calc(100vh - 2.5rem);
  height: calc(100dvh - 2.5rem);
  max-height: none;
}

.task-detail-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 19.375rem minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.task-detail-summary-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  border-right: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 44%, transparent), transparent 13.75rem),
    var(--control-bg);
  padding: 1rem;
  overflow: auto;
}

.task-detail-summary-card {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.75rem;
  box-shadow: 0 0.75rem 1.75rem rgba(124, 58, 237, 0.08);
}

.task-detail-summary-card > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.5rem;
}

.task-detail-summary-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-summary-card p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  line-height: 1.35;
}

.task-detail-dates {
  display: grid;
  gap: 0.625rem;
}

.task-detail-editor-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  overflow: hidden;
}

.task-detail-tabs {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 86%, var(--control-bg));
  padding: 0 0.75rem;
}

.task-detail-tabs button {
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  padding: 0 0.6875rem;
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.task-detail-tabs button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.task-detail-tabs button.is-active {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
}

.task-detail-tabs .material-symbols-rounded {
  font-size: 1.125rem;
}

.task-detail-tab-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.task-detail-tab-panel.hidden {
  display: none;
}

.task-detail-editor-head {
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 82%, var(--control-bg));
  padding: 0.75rem 1rem;
}

.task-detail-editor-head span {
  display: block;
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}

.task-detail-editor-head strong {
  display: block;
  margin-top: 0.1875rem;
  color: var(--panel-title);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.task-detail-editor-head small {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.3125rem 0.5625rem;
  font-size: 0.6562rem;
  font-weight: 850;
  white-space: nowrap;
}

.task-detail-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  overflow: auto;
  scrollbar-gutter: stable;
}

.task-detail-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), transparent),
    var(--control-bg);
  padding: 0.75rem;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
}

.task-detail-field:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.06);
}

.task-detail-field-wide,
.task-detail-file-field {
  grid-column: 1 / -1;
}

.task-detail-field.is-control {
  background: var(--surface);
}

.task-detail-field.is-readonly {
  opacity: 0.82;
}

.task-detail-field.is-extra {
  border-style: dashed;
}

.task-detail-field span,
.task-detail-field-head span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.25;
}

.task-detail-field em,
.task-detail-field-head em {
  display: inline-flex;
  min-height: 1.25rem;
  align-items: center;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.4375rem;
  font-size: 0.5938rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.task-detail-magic-icon.material-symbols-rounded {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 70%, #fff);
  color: var(--primary);
  font-size: 0.875rem;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.task-detail-field small,
.task-detail-field-head small {
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
  line-height: 1.35;
}

.task-detail-field input:not([type="checkbox"]),
.task-detail-field select,
.task-detail-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0 0.75rem;
  font-size: 0.7812rem;
}

.task-detail-field textarea {
  min-height: 9.75rem;
  padding: 0.6875rem 0.75rem;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.48;
}

.task-detail-structured-field {
  gap: 0.625rem;
}

.task-detail-structured-friendly {
  display: grid;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 90%, var(--primary) 10%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control-bg) 86%, #fff 14%);
  padding: 0.625rem;
}

.task-detail-structured-friendly header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.task-detail-structured-friendly header strong {
  color: var(--text);
  font-size: 0.75rem;
}

.task-detail-structured-content {
  display: grid;
  gap: 0.5rem;
}

.task-detail-structured-array-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.task-detail-structured-array-list.is-nested {
  padding-left: 0.5rem;
}

.task-detail-structured-array-item {
  min-width: 0;
}

.task-detail-structured-item-collapse {
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 90%, var(--control-bg));
}

.task-detail-structured-item-collapse > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 0.625rem;
}

.task-detail-structured-item-index {
  display: inline-flex;
  min-width: 2.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 62.4375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0.1875rem 0.4375rem;
}

.task-detail-structured-item-summary {
  min-width: 0;
  color: var(--text);
  font-size: 0.7188rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.task-detail-structured-item-body {
  border-top: 0.0625rem solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  padding: 0.5rem;
}

.task-detail-structured-kv {
  display: grid;
  gap: 0.375rem;
}

.task-detail-structured-kv.is-nested {
  padding-left: 0.25rem;
}

.task-detail-structured-kv-row {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
  padding: 0.4375rem 0.5rem;
}

.task-detail-structured-kv-key {
  color: var(--label);
  font-size: 0.6875rem;
  font-weight: 800;
  word-break: break-word;
}

.task-detail-structured-kv-value {
  min-width: 0;
  color: var(--text);
  font-size: 0.7188rem;
  line-height: 1.42;
  word-break: break-word;
}

.task-detail-structured-inline-value {
  white-space: pre-wrap;
}

.task-detail-structured-inline-pre {
  margin: 0;
  white-space: pre-wrap;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--input-bg) 90%, var(--surface));
  padding: 0.4375rem 0.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.42;
}

.task-detail-structured-count {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

.task-detail-structured-collapse {
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
}

.task-detail-structured-collapse summary {
  cursor: pointer;
  padding: 0.3125rem 0.5rem;
  color: var(--text);
  font-size: 0.7188rem;
  font-weight: 700;
  line-height: 1.4;
}

.task-detail-structured-collapse-json {
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  border-top: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  background: color-mix(in srgb, var(--input-bg) 90%, var(--surface));
  padding: 0.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.45;
}

.task-detail-structured-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.7188rem;
}

.task-detail-structured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.task-detail-structured-json {
  margin: 0;
  max-height: 14rem;
  overflow: auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 0.6875rem 0.75rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7188rem;
  line-height: 1.45;
}

.task-detail-structured-json code {
  white-space: pre;
}

.task-detail-structured-editor {
  min-height: 10.5rem;
}

@media (max-width: 48rem) {
  .task-detail-structured-kv-row {
    grid-template-columns: 1fr;
  }
}

.task-detail-field input:focus,
.task-detail-field select:focus,
.task-detail-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.task-detail-field input[readonly] {
  background: color-mix(in srgb, var(--input-bg) 72%, var(--control-bg));
  color: var(--muted);
}

.task-detail-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-detail-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.task-detail-toggle strong {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.task-detail-toggle input:checked + strong {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.task-detail-file-selected {
  grid-template-columns: 1.375rem minmax(0, 1fr) auto auto 2rem;
}

.task-detail-file-link {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 30%, var(--line-soft));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.3125rem 0.5625rem;
  font-size: 0.6562rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.task-detail-json-preview {
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--control-bg);
}

.task-detail-json-preview summary {
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.task-detail-json-preview .material-symbols-rounded {
  font-size: 1.125rem;
}

.task-detail-json-preview textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 11.25rem;
  max-height: 18.75rem;
  border: 0;
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--input-bg);
  color: var(--text);
  padding: 0.8125rem 1rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.48;
  resize: vertical;
}

.task-aggregated-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(13.75rem, 1fr));
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  overflow: auto;
}

.task-aggregate-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.task-aggregate-card.is-structured {
  grid-column: 1 / -1;
}

.task-aggregate-head {
  min-width: 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface));
  padding: 0.5625rem 0.75rem;
}

.task-aggregate-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.task-aggregate-head .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1rem;
}

.task-aggregate-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-aggregate-head em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.task-aggregate-value.task-detail-structured-content {
  max-height: min(25rem, 46vh);
  overflow: auto;
  border-top: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.3125rem 0;
}

.task-aggregate-value.is-string,
.task-aggregate-value.is-number,
.task-aggregate-value.is-boolean,
.task-aggregate-value.is-null {
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.625rem 0.75rem;
}

.task-aggregate-value > .task-detail-structured-inline-value {
  width: 100%;
}

.task-aggregate-card > footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  color: var(--muted);
  font-size: 0.6562rem;
  line-height: 1.35;
  padding: 0.5rem 0.75rem;
}

.task-aggregate-card > footer > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-aggregate-card > footer .route-command-io-copy-button {
  flex: 0 0 1.5rem;
}

.task-contact-events-list {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  overflow: auto;
}

.task-contact-event-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.75rem;
}

.task-contact-event-card.is-success {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line-soft));
}

.task-contact-event-card.is-error {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line-soft));
}

.task-contact-event-main {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
}

.task-contact-event-main > strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 800;
}

.task-contact-event-main > span,
.task-contact-event-main > em {
  display: inline-flex;
  min-height: 1.25rem;
  align-items: center;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--control-bg) 80%, var(--surface));
  color: var(--muted);
  padding: 0 0.4375rem;
  font-size: 0.5938rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.task-contact-event-card.is-success .task-contact-event-main > em {
  background: color-mix(in srgb, var(--green) 16%, var(--surface));
  color: color-mix(in srgb, var(--green) 78%, #0f172a);
}

.task-contact-event-card.is-error .task-contact-event-main > em {
  background: color-mix(in srgb, var(--red) 16%, var(--surface));
  color: color-mix(in srgb, var(--red) 76%, #0f172a);
}

.task-contact-event-meta {
  grid-column: 1 / 2;
  min-width: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.task-contact-open-button {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  width: 2rem;
  height: 2rem;
  align-self: center;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface));
  color: var(--primary);
  cursor: pointer;
}

.task-contact-event-details {
  grid-column: 1 / 2;
  min-width: 0;
  max-height: min(18rem, 35vh);
  overflow: auto;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--control-bg));
  padding: 0.3125rem 0;
}

.task-contact-open-button:hover {
  background: var(--primary-soft);
}

.task-contact-open-button .material-symbols-rounded {
  font-size: 1rem;
}

.task-contact-events-empty {
  min-height: 10.625rem;
  display: grid;
  place-items: center;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 78%, transparent);
  color: var(--muted);
  padding: 1.25rem;
  font-size: 0.7812rem;
  font-weight: 750;
  text-align: center;
}

.task-contact-events-empty.is-loading {
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
  color: var(--primary);
}

.task-contact-details-modal {
  width: min(68rem, calc(100% - 2rem));
  max-height: min(58rem, calc(100dvh - 2rem));
}

.task-contact-details-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 30rem);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem;
  overflow: hidden;
}

.task-contact-details-body {
  align-items: stretch;
}

.task-contact-details-audio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

.task-contact-details-modal.is-voice-contact-details .task-contact-details-audio {
  min-width: 0;
  min-height: 0;
  align-content: start;
}

.task-contact-details-audio,
.task-contact-details-chat {
  grid-column: 1 / 2;
}

.task-contact-details-chat {
  min-width: 0;
  min-height: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  padding: 0.75rem;
  overflow: auto;
}

.task-contact-details-modal.is-voice-contact-details .task-contact-details-chat {
  display: none;
}

.task-contact-details-audio audio {
  width: 100%;
}

.task-contact-details-audio-status {
  grid-column: 1 / -1;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  font-size: 0.7188rem;
  font-weight: 700;
  border: 0.0625rem solid transparent;
}

.task-contact-details-audio-status.is-info {
  color: color-mix(in srgb, var(--primary) 76%, var(--text));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
}

.task-contact-details-audio-status.is-warning {
  color: color-mix(in srgb, var(--amber) 80%, #5a3000);
  border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
}

.task-contact-details-player {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 0.75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 30%, transparent), transparent 55%),
    var(--surface);
}

.task-contact-player-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
}

.task-contact-player-controls input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.task-contact-player-time {
  min-width: 6.75rem;
  display: inline-flex;
  justify-content: flex-end;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.task-contact-player-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

.task-contact-player-rate > .secondary-button {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.375rem;
  min-width: 3.25rem;
  justify-content: center;
}

.task-contact-details-json {
  margin-top: 0;
  display: grid;
  gap: 0.625rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.task-contact-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.task-contact-conversation-item {
  display: flex;
  width: 100%;
}

.task-contact-conversation-item.is-inbound {
  justify-content: flex-start;
}

.task-contact-conversation-item.is-outbound {
  justify-content: flex-end;
}

.task-contact-conversation-bubble {
  width: fit-content;
  max-width: min(82%, 42rem);
  display: grid;
  gap: 0.375rem;
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--line-soft);
  background: #fff;
  box-shadow: 0 0.125rem 0.375rem rgba(15, 23, 42, 0.08);
}

.task-contact-conversation-item.is-inbound .task-contact-conversation-bubble {
  background: #fff;
  border-color: color-mix(in srgb, var(--line-soft) 85%, #ffffff);
  color: var(--text);
}

.task-contact-conversation-item.is-outbound .task-contact-conversation-bubble {
  background: color-mix(in srgb, var(--primary) 80%, #7b2cbf);
  border-color: color-mix(in srgb, var(--primary) 70%, #ffffff);
  color: #fff;
}

.task-contact-conversation-sender {
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
}

.task-contact-conversation-text {
  margin: 0;
  color: inherit;
  font-size: 0.7812rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.task-contact-conversation-time {
  justify-self: end;
  margin-top: 0.125rem;
  font-size: 0.6562rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.84;
}

.task-contact-conversation-media {
  width: 100%;
  max-width: min(22rem, 58vw);
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--control-bg) 72%, #fff);
}

.task-contact-conversation-media.is-image {
  display: block;
  overflow: hidden;
}

.task-contact-conversation-media.is-image > img {
  width: 100%;
  max-height: 18rem;
  object-fit: cover;
  display: block;
}

.task-contact-conversation-media.is-video {
  display: block;
  max-height: 18rem;
}

.task-contact-conversation-media.is-audio {
  display: block;
  min-height: 2.25rem;
}

.task-contact-conversation-item.is-outbound .task-contact-conversation-media {
  border-color: color-mix(in srgb, #ffffff 55%, var(--primary));
  background: color-mix(in srgb, #ffffff 20%, var(--primary));
}

.task-contact-details-empty {
  min-height: 8rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: var(--muted);
  text-align: center;
}

.task-contact-details-empty > p {
  margin: 0;
  font-size: 0.75rem;
}

.task-contact-details-structured {
  max-height: none;
  min-height: min(24rem, 48vh);
}

.task-contact-details-modal.is-voice-contact-details .task-contact-details-json {
  grid-column: 2 / 3;
}

.task-contact-details-json {
  grid-column: 2 / 3;
}

.task-contact-details-modal.is-voice-contact-details .task-contact-details-structured {
  max-height: min(44rem, calc(100dvh - 12rem));
}

.task-timeline-host {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 0.75rem 1rem 1rem;
  overflow: hidden;
}

.task-comments-panel {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    var(--surface);
}

.task-comments-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  overflow: auto;
}

.task-comments-empty {
  min-height: 10.625rem;
  display: grid;
  place-items: center;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--control-bg) 78%, transparent);
  color: var(--muted);
  padding: 1.25rem;
  font-size: 0.7812rem;
  font-weight: 750;
  text-align: center;
}

.task-comments-empty.is-error {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
}

.task-comment-card {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 0.625rem;
}

.task-comment-avatar {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.875rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent),
    var(--control-bg);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 950;
}

.task-comment-content {
  min-width: 0;
  display: grid;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.9375rem;
  background: var(--control-bg);
  padding: 0.6875rem 0.75rem;
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.05);
}

.task-comment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-comment-head strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
}

.task-comment-head span {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 700;
}

.task-comment-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  opacity: 0.78;
}

.task-comment-card:hover .task-comment-actions {
  opacity: 1;
}

.task-comment-actions button {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.5rem;
  font-size: 0.6562rem;
  font-weight: 850;
  cursor: pointer;
}

.task-comment-actions button:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  color: var(--primary);
}

.task-comment-actions .material-symbols-rounded {
  font-size: 0.9375rem;
}

.task-comment-content p {
  margin: 0;
  color: var(--text);
  font-size: 0.7812rem;
  line-height: 1.55;
  word-break: break-word;
}

.task-comment-content p a {
  color: var(--primary);
  font-weight: 850;
  text-decoration: none;
}

.task-comment-content p a:hover {
  text-decoration: underline;
}

.task-comment-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.task-comment-image-grid .task-comment-image-trigger {
  width: 100%;
  display: block;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  cursor: zoom-in;
}

.task-comment-image-grid img {
  width: 100%;
  height: 6rem;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease;
}

.task-comment-image-grid .task-comment-image-trigger:hover img {
  transform: scale(1.04);
}

.task-comment-image-modal {
  width: min(75rem, 100%);
  max-height: min(94vh, 56rem);
}

.task-comment-image-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  overflow: auto;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%),
    var(--control-bg);
}

.task-comment-image-modal-actions {
  display: flex;
  justify-content: flex-end;
}

#taskCommentImagePreview {
  width: 100%;
  max-width: min(68rem, 100%);
  max-height: 72vh;
  justify-self: center;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 70%, var(--primary));
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--control-bg));
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.2);
  object-fit: contain;
}

@media (max-width: 47.5rem) {
  .task-comment-image-modal-body {
    padding: 0.625rem;
  }

  .task-comment-image-modal-actions {
    justify-content: stretch;
  }

  .task-comment-image-modal-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }

  #taskCommentImagePreview {
    max-height: 62vh;
  }
}

.task-comment-composer {
  display: grid;
  gap: 0.625rem;
  border-top: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), var(--control-bg)),
    var(--control-bg);
  padding: 0.75rem 1rem 0.875rem;
}

.task-detail-modal.is-shared-readonly .task-comment-composer {
  display: none;
}

.task-comment-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.task-comment-attachment-chip {
  min-width: 0;
  max-width: 14.375rem;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr) 1.625rem;
  align-items: center;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  padding: 0.25rem 0.3125rem 0.25rem 0.25rem;
}

.task-comment-attachment-chip img {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 62.4375rem;
  object-fit: cover;
}

.task-comment-attachment-chip span {
  overflow: hidden;
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-comment-attachment-chip button {
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
  cursor: pointer;
}

.task-comment-attachment-chip .material-symbols-rounded {
  font-size: 1rem;
}

.task-comment-input-wrap {
  display: grid;
  gap: 0.4375rem;
}

.task-comment-input-wrap span {
  color: var(--label);
  font-size: 0.7188rem;
  font-weight: 850;
}

.task-comment-input-wrap textarea {
  width: 100%;
  min-height: 5.125rem;
  box-sizing: border-box;
  border: 0.0625rem solid var(--line);
  border-radius: 0.875rem;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  padding: 0.6875rem 0.75rem;
  resize: vertical;
  font: inherit;
  font-size: 0.7812rem;
  line-height: 1.5;
}

.task-comment-input-wrap textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem var(--primary-soft);
}

.task-comment-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.task-comment-image-button {
  cursor: pointer;
}

.task-timeline-shell {
  min-height: 26.25rem;
  height: 100%;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.625rem;
  overflow: hidden;
}

.task-timeline-empty {
  min-height: 11.25rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  padding: 1.25rem;
  text-align: center;
}

.task-timeline-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.75rem;
}

.task-timeline-empty.is-error {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
}

.task-timeline-card {
  display: grid;
  gap: 0.5rem;
}

.task-timeline-card-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5625rem;
}

.task-timeline-card-title .material-symbols-rounded {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.task-timeline-card strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
}

.task-timeline-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.task-timeline-card small {
  color: var(--muted);
  font-size: 0.6875rem;
}

.task-timeline-changes {
  display: grid;
  gap: 0.3125rem;
  margin-top: 0.125rem;
}

.task-timeline-change {
  display: grid;
  gap: 0.1875rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 0.4375rem;
}

.task-timeline-change b {
  color: var(--primary);
  font-size: 0.6875rem;
}

.task-timeline-change span {
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  word-break: break-word;
}

.task-timeline-error {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--red) 34%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
  padding: 0.5rem;
  font-size: 0.7188rem;
  font-weight: 750;
  line-height: 1.4;
}

.task-timeline-error .material-symbols-rounded {
  font-size: 1.0625rem;
}

.task-timeline-shell [data-timeline-wrapper],
.task-timeline-shell [data-chrono-root] {
  height: 100%;
}

.task-timeline-shell button {
  font-family: inherit;
}

.route-picker-modal {
  width: min(48.75rem, calc(100vw - 2.5rem));
}

.route-picker-body {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-height: min(58vh, 32.5rem);
  overflow: auto;
  padding: 0.5rem 0.625rem 1rem;
  scroll-padding: 0.5rem;
}

.route-demand-folder {
  margin-top: 0.375rem;
}

.route-demand-folder:first-child {
  margin-top: 0;
}

.route-folder-row {
  width: 100%;
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  padding: 0 0.5rem;
  text-align: left;
}

.route-folder-row:hover {
  background: color-mix(in srgb, var(--primary-soft) 48%, transparent);
}

.route-folder-row .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.125rem;
}

.route-folder-row .route-folder-chevron {
  color: var(--muted);
  font-size: 1.0625rem;
}

.route-folder-row strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  letter-spacing: 0.0344rem;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-folder-row small {
  min-width: 1.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  padding: 0.125rem 0.4375rem;
}

.route-demand-folder-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0 0.125rem;
}

.route-demand-folder-list.is-collapsed {
  display: none;
}

.route-demand-empty {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  margin: 0 0 0.125rem;
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.5rem;
  color: var(--muted);
  padding: 0 0.625rem 0 2.1875rem;
  font-size: 0.7188rem;
}

.route-picker-item {
  width: 100%;
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: transparent;
  color: var(--text);
  padding: 0.5rem 0.625rem;
  text-align: left;
  overflow: visible;
  transition:
    background-color var(--ease-ui),
    border-color var(--ease-ui),
    box-shadow var(--ease-ui);
}

.route-picker-item:hover,
.route-picker-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: var(--control-bg);
  box-shadow: inset 0.1875rem 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.route-picker-item.is-active {
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  box-shadow: inset 0.1875rem 0 0 var(--primary);
}

.route-picker-item > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.1875rem;
}

.route-picker-item > div {
  min-width: 0;
  flex: 1 1 auto;
}

.route-picker-item strong {
  display: block;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-picker-item p {
  overflow: hidden;
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.675rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-picker-item small {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 800;
  white-space: nowrap;
}

.route-status-pill {
  flex: 0 0 auto;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  padding: 0.25rem 0.5rem;
  color: var(--muted);
  background: var(--control-bg);
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.route-status-pill.is-active {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  color: var(--green);
  background: rgba(44, 198, 93, 0.12);
}

.route-card-context-menu {
  position: fixed;
  z-index: 17090;
  min-width: 10.5rem;
  display: grid;
  gap: 0.25rem;
  padding: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 70%, var(--primary));
  border-radius: 0.625rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--control-bg) 94%, transparent)),
    var(--surface);
  box-shadow: 0 1.125rem 2.875rem rgba(15, 23, 42, 0.24);
}

.route-card-context-menu button {
  width: 100%;
  min-height: 2.125rem;
  display: inline-grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  padding: 0 0.5625rem;
  cursor: pointer;
}

.route-card-context-menu button > .material-symbols-rounded {
  font-size: 1rem;
  color: var(--muted);
}

.route-card-context-menu button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.route-card-context-menu button.is-danger > .material-symbols-rounded,
.route-card-context-menu button.is-danger:hover:not(:disabled) {
  color: var(--red);
}

.route-card-context-menu button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.route-empty-state {
  display: grid;
  place-items: center;
  gap: 0.4375rem;
  min-height: 11.25rem;
  border: 0.0625rem dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
}

.route-empty-state .material-symbols-rounded {
  color: var(--primary);
  font-size: 2.125rem;
}

.route-empty-state strong {
  color: var(--panel-title);
}

.route-empty-state p {
  margin: 0;
  font-size: 0.75rem;
}

.route-create-modal {
  width: min(35rem, calc(100vw - 2.5rem));
}

.route-create-body {
  display: grid;
  grid-template-columns: 1fr;
}

.flow-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--control-bg);
}

@media (min-width: 92.5rem) {
  :root {
    --page-pad-x: 1.75rem;
    --page-pad-y: 1.375rem;
  }

  .dashboard-grid {
    gap: 1.125rem;
  }

  .stats-grid {
    gap: 1rem;
  }
}

@media (max-width: 86.25rem) {
  .overview-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .panel-wide,
  .panel-table {
    grid-column: 1 / -1;
  }

  .stat-card canvas {
    display: none;
  }
}

@media (max-width: 67.5rem) {
  .app,
  .app.sidebar-collapsed {
    --topbar-left-offset: 0;
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 6;
    height: auto;
    min-height: 3.875rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line);
    padding: 0.625rem 0.875rem;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
  }

  .sidebar .brand-copy {
    min-width: 0;
  }

  .sidebar .brand-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.1;
  }

  .sidebar .brand-copy span {
    display: none;
  }

  .app.sidebar-collapsed .sidebar-brand {
    padding: 0;
  }

  .app.sidebar-collapsed .brand-mark {
    display: grid;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.0625rem 0.125rem 0.125rem;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav p,
  .app.sidebar-collapsed .nav p {
    display: none;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    width: auto;
    min-width: 2.625rem;
    margin: 0;
    padding: 0 0.375rem;
  }

  .app.sidebar-collapsed .nav-label {
    display: none;
  }

  .user-box {
    display: flex;
    justify-content: end;
    border-color: transparent;
    background: transparent;
    padding: 0;
  }

  .user-copy,
  .avatar {
    display: none;
  }

  .page-grid {
    grid-template-columns: 1fr;
  }

  .overview-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-grid,
  .overview-kpi-grid {
    grid-template-columns: 1fr;
  }

  .overview-card-wide {
    grid-column: auto;
  }

  .routing-row-header {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
  }

  .routing-row-header .builder-kicker,
  .routing-row-header p {
    display: none;
  }

  .routing-row-header h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .routing-row-header .builder-actions {
    justify-content: flex-end;
  }

  .tasks-board-header {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .tasks-board-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .builder-actions {
    justify-content: flex-start;
  }

  .tasks-board-side {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  #automationFlowRoot {
    height: auto;
    min-height: 61.25rem;
  }

  .automation-builder-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(38.75rem, 1fr);
    gap: 0;
  }

  .command-palette {
    top: 0;
    height: auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line);
  }

  .route-commands-button {
    display: grid;
  }

  .command-palette > .palette-command-title,
  .command-palette > .palette-list {
    display: none;
  }

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

  .modal-config-grid,
  .flow-modal-body,
  .settings-modal-body,
  .settings-form-grid,
  .settings-system-grid,
  .settings-doc-grid,
  .settings-team-head,
  .task-detail-body,
  .task-import-grid,
  .api-workbench,
  .api-request-head,
  .api-request-line,
  .api-config-tabs,
  .api-editor-grid,
  .api-response-grid {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
    padding: 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tabs button {
    flex: 0 0 auto;
    align-self: center;
    min-height: 2.625rem;
    grid-template-columns: 1.875rem auto;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.5rem 0.625rem;
  }

  .settings-tabs .material-symbols-rounded {
    grid-row: auto;
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1.125rem;
  }

  .settings-tabs strong {
    white-space: nowrap;
    font-size: 0.75rem;
  }

  .settings-tabs small {
    display: none;
  }

  .settings-modal-body {
    overflow: hidden;
  }

  .settings-panel {
    min-height: 0;
  }

  .settings-team-head {
    display: none;
  }

  .settings-team-toolbar {
    margin: 0.875rem;
  }

  .settings-team-role-tabs {
    width: 100%;
  }

  .settings-user-row {
    align-items: stretch;
  }

  .settings-doc-hero,
  .settings-doc-collapse summary {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .settings-integration-actions,
  .settings-plans-grid,
  .api-docs-page-docs {
    grid-template-columns: 1fr;
  }

  .api-docs-toolbar {
    grid-template-columns: 1fr;
  }

  .api-docs-method-filters {
    flex-wrap: wrap;
  }

  .api-docs-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .api-docs-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tasks-board-shell {
    margin-bottom: 4rem;
  }

  .api-docs-page-docs .settings-doc-collapse summary {
    grid-template-columns: 2.375rem minmax(0, 1fr) 1.75rem;
  }

  .api-docs-page-docs .settings-doc-collapse summary code {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .settings-doc-hero {
    flex-direction: column;
  }

  .settings-experience-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0.875rem;
  }

  .settings-plan-limit-notification-actions {
    justify-content: stretch;
  }

  .settings-plan-limit-notification-actions .primary-button {
    width: 100%;
    justify-content: center;
  }

  .settings-theme-control {
    min-width: 0;
    justify-items: stretch;
  }

  .settings-theme-control > span {
    text-align: left;
  }

  #themeToggle {
    justify-content: center;
    width: 100%;
  }

  .settings-doc-hero > code,
  .settings-doc-collapse summary code {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .api-workbench {
    height: auto;
    min-height: calc(100vh - 4.75rem);
  }

  .api-collection {
    max-height: 22.5rem;
  }

  .api-request-console {
    grid-template-rows: auto auto;
  }

  .modal-field-wide {
    grid-column: auto;
  }

  .route-settings-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .route-settings-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line);
  }

  .route-settings-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .route-settings-action-card,
  .route-settings-section-head {
    grid-template-columns: 2.625rem minmax(0, 1fr);
  }

  .route-settings-action-card .secondary-button,
  .route-settings-action-card .danger-button {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .route-settings-meta {
    grid-template-columns: 1fr;
  }

  .modal-side {
    position: static;
  }

  .file-import-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .file-import-match-head,
  .file-import-match-row,
  .file-import-header-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-import-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 44rem) {
  .settings-modal {
    max-height: calc(100dvh - 0.75rem);
  }

  .settings-panel[data-settings-panel="general"] .settings-avatar-card {
    margin: 0.625rem 0.875rem 0;
    padding: 0.625rem;
  }

  .settings-modal .flow-modal-head {
    padding: 0.75rem;
  }

  .settings-panel-head {
    padding: 0.75rem 0.875rem;
  }

  .settings-panel-footer {
    padding: 0.625rem 0.875rem;
  }

  .settings-form-grid,
  .settings-execution-grid,
  .settings-system-grid,
  .settings-team-grid,
  .settings-tenant-area,
  .settings-integration-actions {
    padding: 0.875rem;
  }

  .settings-system-tabs {
    margin: 0.625rem 0.875rem 0;
  }
}

@media (max-width: 47.5rem) {
  :root {
    --page-pad-x: 0.875rem;
    --page-pad-y: 0.875rem;
    --panel-pad: 0.875rem;
  }

  .login-view {
    padding: 1rem;
  }

  .login-card {
    padding: 1.5rem;
  }

  .login-card h1 {
    font-size: 2.125rem;
  }

  .input-line {
    grid-template-columns: 1fr;
  }

  .sidebar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .brand-copy,
  .app.sidebar-collapsed .brand-copy {
    display: none;
  }

  .topbar h2 {
    font-size: 1.25rem;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .dashboard-overview-controls {
    width: 100%;
  }

  .dashboard-refresh {
    width: 100%;
  }

  .dashboard-refresh > summary {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-refresh-list {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .period {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .stats-grid,
  .dashboard-grid,
  .page-grid,
  .demands-list-shell,
  .routing-list-shell {
    grid-template-columns: 1fr;
  }

  .donut-row,
  .metric-row,
  .api-form,
  .route-meta {
    grid-template-columns: 1fr;
  }

  .panel-wide,
  .panel-table,
  .page-panel-full {
    grid-column: auto;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-head select,
  .panel-head button {
    width: 100%;
  }

  .table-toolbar {
    flex-direction: column;
  }

  .table-toolbar-actions,
  .search-box,
  .table-toolbar-actions .primary-button,
  .table-toolbar-actions .secondary-button {
    width: 100%;
  }

  .topbar-task-search {
    flex: 1 0 100%;
    max-width: none;
    width: 100%;
  }

  .global-task-search-box {
    width: 100%;
  }

  .global-task-search-popover {
    left: 0;
    right: 0;
    width: auto;
  }

  .table-toolbar-actions .primary-button,
  .table-toolbar-actions .secondary-button {
    justify-content: center;
  }

  .routing-row-header {
    padding: 0.625rem 0.875rem 0;
    flex-direction: column;
  }

  .routing-editor-heading,
  .routing-row-header .builder-actions {
    width: 100%;
  }

  .routing-editor-heading > div {
    flex: 1;
  }

  .routing-row-header h2 {
    max-width: min(24rem, 58vw);
  }

  .tasks-board-header {
    padding: 0.5rem 0.625rem;
  }

  .tasks-board-main {
    grid-template-columns: 1fr;
    gap: 0.3125rem;
  }

  .tasks-board-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .tasks-board-summary-grid {
    grid-template-columns: 1fr;
  }

  .tasks-share-anchor {
    width: 100%;
  }

  .tasks-share-popover {
    position: fixed;
    left: 0.625rem;
    right: 0.625rem;
    top: auto;
    bottom: 0.625rem;
    width: auto;
    max-height: calc(100vh - 1.25rem);
    overflow: auto;
  }

  .tasks-share-url-row,
  .tasks-share-validity {
    grid-template-columns: 1fr;
  }

  .builder-actions,
  .builder-actions .primary-button,
  .builder-actions .secondary-button {
    width: 100%;
  }

  .builder-actions .primary-button,
  .builder-actions .secondary-button {
    justify-content: center;
  }

  .routing-row-canvas {
    padding: 0;
  }

  .tasks-board-shell {
    padding: 0.625rem;
    margin-bottom: 0;
  }

  #tasksKanbanRoot {
    height: 100%;
    min-height: 0;
  }

  .task-detail-modal {
    width: 100%;
    height: calc(100vh - 1.25rem);
    height: calc(100dvh - 1.25rem);
    max-height: none;
  }

  .task-detail-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .task-detail-summary-panel {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }

  .task-detail-editor-panel {
    min-height: 38.75rem;
  }

  .task-detail-fields {
    grid-template-columns: 1fr;
  }

  .task-detail-tabs {
    min-height: auto;
    align-items: stretch;
    overflow-x: auto;
    padding: 0.5rem 0.625rem;
  }

  .task-comment-card {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .task-comment-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    font-size: 0.6562rem;
  }

  .task-comment-head,
  .task-comment-composer-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-file-selected,
  .task-detail-file-selected {
    grid-template-columns: 1.375rem minmax(0, 1fr) 2rem;
  }

  .task-file-selected small,
  .task-detail-file-selected small,
  .task-detail-file-link {
    grid-column: 2 / -1;
    white-space: normal;
  }

  .flow-stage-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .flow-stage-status strong {
    flex-basis: calc(100% - 1.875rem);
    white-space: normal;
  }

  .start-filter-head {
    align-items: stretch;
    flex-direction: column;
  }

  .condition-builder-head,
  .save-info-head,
  .insert-demand-payload-head {
    align-items: stretch;
    flex-direction: column;
  }

  .start-filter-head label {
    width: 100%;
  }

  .condition-builder-head label,
  .save-info-head label {
    width: 100%;
  }

  .start-filter-row,
  .start-filter-row.is-head,
  .condition-rule-row,
  .condition-rule-row.is-head,
  .save-info-row,
  .save-info-row.save-info-row-3,
  .save-info-row.is-head,
  .save-info-row.save-info-row-3.is-head,
  .insert-demand-payload-row,
  .insert-demand-payload-row.is-head,
  .condition-builder-actions {
    grid-template-columns: 1fr;
  }

  .start-filter-row.is-head,
  .condition-rule-row.is-head,
  .save-info-row.is-head,
  .save-info-row.save-info-row-3.is-head,
  .insert-demand-payload-row.is-head {
    display: none;
  }

  .start-filter-row .icon-button,
  .condition-rule-row .icon-button,
  .save-info-row .icon-button,
  .insert-demand-payload-row .icon-button {
    width: 100%;
  }

  .condition-rule-row.condition-path-meta-row > .condition-path-remove-button {
    grid-column: auto;
    width: auto;
    min-width: 0;
    justify-self: end;
  }

  .palette-list {
    grid-template-columns: 1fr;
  }

  .flow-modal-backdrop {
    padding: 0.625rem;
  }

  .flow-modal-head {
    grid-template-columns: 2.625rem minmax(0, 1fr) 2.375rem;
    padding: 0.875rem;
  }

  .flow-modal-icon {
    width: 2.625rem;
    height: 2.625rem;
  }

  .flow-modal-body {
    padding: 0.875rem;
  }
}

@media (max-width: 40rem) {
  .overview-shell {
    padding: 0.875rem;
  }

  .overview-hero h2 {
    font-size: 1.25rem;
  }

  .overview-health-strip {
    grid-template-columns: 1fr;
  }

  .overview-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-segment {
    width: 100%;
    overflow-x: auto;
  }

  .chart-tall {
    height: 17.5rem;
  }

  .chart-medium {
    height: 13.75rem;
  }
}

@media (max-width: 56.25rem) {
  .logs-panel-head,
  .logs-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .logs-filter-bar label,
  .logs-filter-bar select,
  .logs-filter-bar input,
  .logs-filter-bar button {
    width: 100%;
  }

  .log-detail-body,
  .log-json-grid {
    grid-template-columns: 1fr;
  }

  .log-detail-body {
    overflow: auto;
  }

  .log-detail-side {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }

  .log-card-foot {
    grid-template-columns: minmax(6.5rem, 0.38fr) minmax(0, 0.62fr);
  }
}

@media (max-width: 26.875rem) {
  .sidebar {
    grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .nav-item {
    min-width: 2.375rem;
    padding: 0 0.3125rem;
  }

  .topbar p {
    font-size: 0.75rem;
  }

  .stat-card strong {
    font-size: 1.625rem;
  }

  .api-card-head,
  .route-card-head,
  .log-card-head {
    flex-direction: column;
  }

  .log-card-head span,
  .route-card-head span {
    white-space: normal;
  }
}

@media (min-width: 92.5rem) {
  .demand-modal .demand-modal-body {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
}

@media (max-width: 67.5rem) {
  .demand-modal .demand-modal-body {
    grid-template-columns: 1fr;
  }

  .status-grid-head {
    display: none;
  }

  .status-row {
    grid-template-columns: minmax(11.25rem, 1fr) minmax(8.25rem, 0.65fr) 3.625rem 2.125rem;
  }

  .schema-grid-head {
    display: none;
  }

  .schema-row {
    grid-template-columns: minmax(10.625rem, 1fr) minmax(7.75rem, 0.65fr) 2.125rem 2.125rem 4.25rem 2.375rem;
    gap: 0.625rem;
    padding: 0.625rem;
  }

  .schema-row [data-schema-field="defaultValue"],
  .schema-row [data-schema-field="alias"],
  .schema-row [data-schema-field="description"] {
    grid-column: 1 / -1;
  }

  .schema-config-btn {
    min-width: 3.625rem;
  }

  .magic-schema-panel {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .magic-schema-steps {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.5rem) {
  .routing-list-shell {
    padding: 0.75rem;
  }

  .routing-list-panel {
    min-height: calc(100vh - 7rem);
  }

  .routing-table-action {
    min-width: 2rem;
    padding: 0 0.5rem;
    font-size: 0;
  }

  .routing-table-action .material-symbols-rounded {
    font-size: 1.0625rem;
  }

  .routing-back-button > span:last-child {
    display: none;
  }

  .routing-back-button {
    width: 2rem;
    justify-content: center;
    padding: 0;
  }

  .route-commands-button {
    min-width: 6.5rem;
    padding-inline: 0.5rem;
  }

  .route-commands-button span:last-child {
    font-size: 0.6875rem;
  }

  .command-palette-modal {
    width: 100%;
  }

  .command-palette-modal .palette-list {
    grid-template-columns: 1fr;
  }

  .automation-builder-shell.is-inspection-mode {
    grid-template-rows: minmax(20rem, 1fr) var(--inspection-drawer-height, 21.25rem);
  }

  .inspection-drawer-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inspection-drawer-meta {
    justify-content: flex-start;
  }

  .inspection-view-mode {
    width: 100%;
  }

  .inspection-view-mode > button {
    flex: 1;
  }

  .inspection-drawer-grid {
    grid-template-columns: 1fr;
  }

  .inspection-json-card-head-search {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .inspection-json-card header {
    height: auto;
    min-height: var(--inspection-card-head-height);
  }

  .inspection-json-card-head-tools {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .inspection-json-card-head-tools > .inspection-json-card-actions {
    width: auto;
  }

  .inspection-json-search {
    width: 100%;
    min-width: 0;
  }

  .inspection-json-card-actions {
    margin-left: 0;
    width: 100%;
  }

  .inspection-json-card-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }

  .demand-modal {
    width: 100%;
    max-height: calc(100vh - 1.25rem);
  }

  .schema-builder-head,
  .schema-builder-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .schema-builder-actions,
  .segmented-control,
  .compact-action {
    width: 100%;
  }

  .status-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .status-row {
    grid-template-columns: 1fr 1fr 3rem 2.125rem;
  }

  .schema-row {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .settings-system-grid-actions {
    justify-content: stretch;
  }

  .settings-system-grid-actions .secondary-button {
    width: 100%;
  }

  .schema-config-btn,
  .schema-config-btn.is-hidden {
    visibility: visible;
    width: 100%;
  }

  .schema-config-btn.is-hidden {
    display: none;
  }

  .schema-config-btn small {
    max-width: none;
  }

  .schema-list-items-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .schema-list-item-row {
    align-items: stretch;
    flex-direction: column;
  }

  .schema-list-item-index {
    width: 100%;
  }

  .schema-list-color-field {
    flex: 0 0 2.125rem;
    width: 2.125rem;
  }

  .schema-list-remove-btn {
    width: 100%;
  }

  .magic-schema-panel,
  .magic-schema-steps {
    grid-template-columns: 1fr;
  }

  .magic-schema-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .schema-required-toggle {
    justify-content: start;
    width: 2.125rem;
    padding: 0 0.625rem;
  }

  .schema-json-view textarea {
    min-height: 20rem;
  }
}

@media (max-width: 47.5rem) {
  .builder-actions .route-active-switch {
    width: 100%;
    justify-content: center;
    box-shadow: none;
  }
}


/* Mobile stability layer: conservative responsive fixes without reshaping the app. */
:root {
  --touch-target: 3rem;
  --mobile-edge: clamp(0.625rem, 3.5vw, 1rem);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.mobile-appbar {
  display: none;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.content,
.page-view,
.panel,
.page-panel-full,
.table-toolbar,
.table-toolbar-actions,
.topbar,
.tasks-board-header,
.tasks-board-main,
.tasks-board-title,
.tasks-board-side,
.builder-actions,
.routing-row-header,
.flow-modal,
.flow-modal-head,
.flow-modal-body,
.flow-modal-footer {
  min-width: 0;
}

.table-wrap,
.settings-doc-body pre,
.api-docs-page-docs .settings-doc-body pre,
.log-json-panel,
.api-response-panel,
.schema-json-view,
.flow-modal-body {
  -webkit-overflow-scrolling: touch;
}

.table-wrap {
  overflow-x: auto;
}

.flow-modal {
  max-width: calc(100vw - 1.25rem);
  max-height: calc(100dvh - 1.25rem);
}

.task-detail-modal {
  height: calc(100dvh - 1.25rem);
  max-height: calc(100dvh - 1.25rem);
}

.flow-modal-head > div:not(.flow-modal-icon),
.flow-modal-head h3,
.flow-modal-head p,
.topbar h2,
.topbar p,
.tasks-board-header h2,
.tasks-board-header p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.flow-modal-footer {
  flex-wrap: wrap;
}

.flow-modal-footer .notice {
  margin-right: auto;
}

@media (max-width: 67.5rem) {
  .app,
  .app.sidebar-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    width: 100%;
    overflow: hidden;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .tasks-board-header {
    grid-template-columns: 1fr;
  }

  .tasks-board-side {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .tasks-board-controls-root,
  .tasks-board-controls {
    min-width: 0;
  }

  .tasks-board-header .builder-actions {
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .tasks-board-header .builder-actions .primary-button,
  .tasks-board-header .builder-actions .secondary-button,
  .tasks-board-header .builder-actions .danger-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 2.5rem;
    white-space: nowrap;
  }
}

@media (max-width: 47.5rem) {
  .topbar {
    padding-inline: var(--mobile-edge);
  }

  .icon-button,
  .primary-button,
  .secondary-button,
  .danger-button,
  .mini-button,
  .compact-action,
  .nav-item,
  .task-detail-tabs button {
    min-height: var(--touch-target);
  }

  .icon-button {
    min-width: var(--touch-target);
    height: var(--touch-target);
  }

  .flow-modal-backdrop {
    padding: 0.625rem;
  }

  .flow-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 0.875rem;
  }

  .flow-modal-head {
    grid-template-columns: 2.625rem minmax(0, 1fr) 2.625rem;
  }

  .flow-modal-body {
    overflow: auto;
  }

  .task-detail-modal,
  .demand-modal,
  .settings-modal,
  .route-settings-modal,
  .api-keys-modal {
    width: 100%;
    height: calc(100dvh - 1.25rem);
    max-height: calc(100dvh - 1.25rem);
  }

  .tasks-board-header {
    padding-inline: var(--mobile-edge);
  }

  .tasks-board-main {
    grid-template-columns: 1fr;
  }

  .tasks-board-nav {
    min-width: 0;
  }

  .tasks-board-side,
  .tasks-board-controls {
    width: 100%;
  }

  .tasks-board-controls {
    flex-wrap: wrap;
  }

  .tasks-share-popover,
  .tasks-data-menu,
  .td-filter-popover {
    max-width: calc(100vw - 1.25rem);
  }
}

@media (min-width: 67.5rem) {
}

/* Emergency mobile shell fix: keep sidebar navigation horizontal and compact. */
@media (max-width: 67.5rem) {
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    min-height: 0;
    height: auto;
    align-items: center;
    overflow: visible;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    max-height: 3.5rem;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    gap: 0.5rem;
    padding: 0 0.125rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar,
  .app.sidebar-collapsed .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .nav-item .material-symbols-rounded,
  .app.sidebar-collapsed .nav-item .material-symbols-rounded {
    width: 1.5rem;
    height: 1.5rem;
  }

  .app.sidebar-collapsed .sidebar-toggle.icon-button {
    position: static;
    transform: none;
    display: none;
  }

  .user-menu,
  .app.sidebar-collapsed .user-menu {
    justify-self: end;
  }

  .app.sidebar-collapsed .user-dropdown {
    left: auto;
    right: 1rem;
    min-width: 11.875rem;
    top: 4rem;
    background: white;
    height: 14.5rem;
  }

  .topbar {
    z-index: 2;
  }
}

@media (max-width: 30rem) {
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    gap: 0.375rem;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    flex-basis: 2.5rem;
    width: 2.5rem;
    min-width: 2.5rem;
  }
}

/* Mobile tasks header fix: stack dense controls, keep actions scrollable inside viewport. */
@media (max-width: 47.5rem) {
  .tasks-board-side {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.5rem;
  }

  .tasks-board-controls-root,
  .tasks-board-summary,
  .tasks-board-header .builder-actions {
    width: 100%;
    min-width: 0;
  }

  .tasks-board-header .builder-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.125rem;
    scrollbar-width: none;
  }

  .tasks-board-header .builder-actions::-webkit-scrollbar {
    display: none;
  }

  .tasks-board-header .builder-actions > *,
  .tasks-share-anchor,
  .tasks-data-anchor {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100vw - 2 * var(--mobile-edge));
  }

  .tasks-share-button,
  .tasks-data-button {
    width: auto;
    max-width: calc(100vw - 2 * var(--mobile-edge));
  }
}

/* Accessibility and motion stability for responsive surfaces. */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--primary) 58%, white);
  outline-offset: 0.1875rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 47.5rem) {
  .table-wrap,
  .td-kanban-kit,
  .tasks-board-header .builder-actions,
  .task-detail-tabs,
  .route-settings-tabs {
    overscroll-behavior-x: contain;
  }

  .tasks-share-popover,
  .tasks-data-menu,
  .user-dropdown {
    max-width: calc(100vw - 1.25rem);
  }
}

/* Mobile UX upgrade: bottom tab bar + action sheets. Desktop remains untouched. */
@media (max-width: 47.5rem) {
  .app,
  .app.sidebar-collapsed {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .content {
    min-height: 100dvh;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  .content.tasks-board-mode {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: calc(4.875rem + env(safe-area-inset-bottom));
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    position: fixed;
    top: auto;
    right: max(0.625rem, env(safe-area-inset-right));
    bottom: max(0.625rem, env(safe-area-inset-bottom));
    left: max(0.625rem, env(safe-area-inset-left));
    z-index: 16000;
    width: auto;
    height: 5rem;
    min-height: 0;
    display: block;
    border: 0.0625rem solid color-mix(in srgb, var(--line) 78%, var(--primary));
    border-radius: 1.5rem;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--control-bg) 96%, transparent)),
      var(--surface);
    box-shadow: 0 1.125rem 3rem rgba(15, 23, 42, 0.20), 0 0.0625rem 0 rgba(255, 255, 255, 0.16) inset;
    padding: 0.375rem;
    overflow: hidden;
    backdrop-filter: blur(1.125rem);
  }

  .sidebar-brand,
  .app.sidebar-collapsed .sidebar-brand,
  .sidebar-toggle,
  .app.sidebar-collapsed .sidebar-toggle {
    display: none !important;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    width: 100%;
    height: 100%;
    max-height: none;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(3.625rem, 1fr);
    align-items: stretch;
    gap: 0.25rem;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .nav::-webkit-scrollbar,
  .app.sidebar-collapsed .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    width: auto;
    min-width: 3.625rem;
    height: 3.5rem;
    min-height: 3.5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    border-radius: 1.125rem;
    padding: 0 0.3125rem;
    scroll-snap-align: center;
  }

  .nav-item > .material-symbols-rounded,
  .app.sidebar-collapsed .nav-item > .material-symbols-rounded,
  .nav-item span.material-symbols-rounded,
  .app.sidebar-collapsed .nav-item span.material-symbols-rounded {
    width: 1.4375rem;
    height: 1.4375rem;
    font-size: 1.375rem;
  }

  .nav-label,
  .app.sidebar-collapsed .nav-label {
    display: block !important;
    width: auto !important;
    max-width: 4rem;
    opacity: 1 !important;
    overflow: hidden;
    color: inherit;
    font-size: 0.5625rem;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
  }

  .user-menu,
  .app.sidebar-collapsed .user-menu {
    position: fixed;
    top: max(0.625rem, env(safe-area-inset-top));
    right: max(0.625rem, env(safe-area-inset-right));
    z-index: 16010;
    width: 3rem;
    min-width: 3rem;
  }

  .user-box,
  .app.sidebar-collapsed .user-box {
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 1.125rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary-soft));
    padding: 0;
    box-shadow: 0 0.75rem 1.875rem rgba(15, 23, 42, 0.14);
  }

  .user-box .avatar,
  .app.sidebar-collapsed .avatar {
    width: 2.375rem;
    height: 2.375rem;
    display: grid;
  }

  .user-copy,
  .user-box-chevron,
  .app.sidebar-collapsed .user-copy,
  .app.sidebar-collapsed .user-box-chevron {
    display: none !important;
  }

  .user-dropdown {
    position: fixed;
    top: calc(max(0.625rem, env(safe-area-inset-top)) + 3.5rem);
    right: max(0.625rem, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    width: min(17.5rem, calc(100vw - 1.25rem));
    max-height: min(70dvh, 26.25rem);
    overflow: auto;
  }

  .tasks-share-popover,
  .tasks-data-menu,
  .td-filter-popover {
    position: fixed !important;
    top: auto !important;
    right: max(0.625rem, env(safe-area-inset-right)) !important;
    bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    left: max(0.625rem, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72dvh, 38.75rem);
    overflow: auto;
    border-radius: 1.375rem;
    box-shadow: 0 1.75rem 5rem rgba(15, 23, 42, 0.28), 0 0.0625rem 0 rgba(255, 255, 255, 0.16) inset;
  }

  .tasks-data-menu,
  .td-filter-popover {
    padding: 0.625rem;
  }

  .tasks-share-popover::before,
  .tasks-data-menu::before,
  .td-filter-popover::before {
    content: "";
    width: 2.625rem;
    height: 0.25rem;
    justify-self: center;
    border-radius: 62.4375rem;
    background: color-mix(in srgb, var(--muted) 38%, transparent);
  }

  .tasks-board-header {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tasks-board-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tasks-board-search-popover {
    position: fixed;
    top: auto;
    right: 0.625rem;
    bottom: 4.875rem;
    left: 0.625rem;
    width: auto;
  }

  .tasks-board-header .builder-actions {
    padding-bottom: 0;
  }

  .tasks-share-button,
  .tasks-data-button,
  .tasks-board-header .builder-actions .secondary-button {
    min-height: 2.875rem;
    border-radius: 0.875rem;
  }
}

/* Mobile footer nav correction: detach account button from bottom tab bar. */
@media (max-width: 47.5rem) {
  .user-menu,
  .app.sidebar-collapsed .user-menu {
    top: max(0.625rem, env(safe-area-inset-top)) !important;
    right: max(0.625rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
  }
}

/* Mobile footer account slot: keep user access inside the tab bar without covering nav items. */
@media (max-width: 47.5rem) {
  .nav,
  .app.sidebar-collapsed .nav {
    width: calc(100% - 3.875rem);
    padding-right: 0;
  }

  .user-dropdown {
    position: fixed !important;
    top: auto !important;
    right: max(0.625rem, env(safe-area-inset-right)) !important;
    bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    left: max(0.625rem, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-height: min(62dvh, 26.25rem);
    border-radius: 1.25rem;
    overflow: auto;
  }
}

/* Mobile footer label containment. */
@media (max-width: 47.5rem) {
  .nav-item,
  .app.sidebar-collapsed .nav-item {
    overflow: hidden;
  }

  .nav-label,
  .app.sidebar-collapsed .nav-label {
    max-width: 7.5rem;
    text-align: center;
  }
}

@media (max-width: 23.75rem) {
  .nav-label,
  .app.sidebar-collapsed .nav-label {
    max-width: 2.625rem;
    font-size: 0.5rem;
  }
}

/* Mobile account button refinement: float above content instead of living inside bottom nav. */
@media (max-width: 47.5rem) {
  .nav,
  .app.sidebar-collapsed .nav {
    width: 100%;
    padding-right: 0;
  }

  .user-menu,
  .app.sidebar-collapsed .user-menu {
    position: fixed !important;
    top: var(--mobile-account-top, max(0.75rem, env(safe-area-inset-top))) !important;
    right: var(--mobile-account-inset, max(0.75rem, env(safe-area-inset-right))) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 17000;
    width: var(--mobile-account-size, 2.875rem);
    min-width: var(--mobile-account-size, 2.875rem);
    pointer-events: auto;
  }

  .user-box,
  .app.sidebar-collapsed .user-box {
    width: var(--mobile-account-size, 2.875rem);
    height: var(--mobile-account-size, 2.875rem);
    min-height: var(--mobile-account-size, 2.875rem);
    border-radius: 62.4375rem;
    background:
      radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 42%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface) 88%, var(--primary-soft));
    box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.18), 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 18%, var(--line));
  }

  .user-box .avatar,
  .app.sidebar-collapsed .avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 62.4375rem;
  }

  .user-dropdown {
    top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.375rem) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(18.25rem, calc(100vw - 1.5rem)) !important;
    max-height: min(68dvh, 26.25rem);
    border-radius: 1.125rem;
  }
}

.api-mobile-drawer-button {
  display: none;
}

/* Mobile integrations workbench: collapsible side column without changing desktop. */
@media (max-width: 47.5rem) {
  .content.integrations-builder-mode {
    height: 100dvh;
    min-height: 0;
    padding: 0 0 calc(5.25rem + env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--surface);
  }

  .content.integrations-builder-mode .page-view:not(.hidden) {
    height: calc(100dvh - 5.25rem - env(safe-area-inset-bottom));
    min-height: 0;
  }

  .content.integrations-builder-mode .api-workbench {
    position: relative;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 34%),
      var(--surface);
  }

  .content.integrations-builder-mode.api-mobile-collection-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 15010;
    background:
      linear-gradient(90deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.16)),
      color-mix(in srgb, var(--bg) 18%, transparent);
    backdrop-filter: blur(0.25rem);
  }

  .content.integrations-builder-mode .api-collection {
    position: fixed;
    z-index: 15020;
    top: max(0.625rem, env(safe-area-inset-top));
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    left: max(0.625rem, env(safe-area-inset-left));
    width: min(22.25rem, calc(100vw - 1.25rem));
    max-height: none;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    border: 0.0625rem solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--surface) 96%, var(--control-bg));
    box-shadow: 0 1.75rem 5rem rgba(15, 23, 42, 0.34);
    overflow: hidden;
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .content.integrations-builder-mode.api-mobile-collection-open .api-collection {
    transform: translateX(0);
  }

  .content.integrations-builder-mode .api-collection-head {
    min-height: 3.625rem;
    padding: 0.75rem 0.875rem;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 78%, transparent), transparent),
      var(--surface);
  }

  .content.integrations-builder-mode .api-collection-tools {
    padding: 0.75rem 0.875rem 0.5rem;
  }

  .content.integrations-builder-mode .api-new-button {
    margin: 0.5rem 0.875rem 0.75rem;
    min-height: 3rem;
    border-radius: 1rem;
  }

  .content.integrations-builder-mode .api-workbench .api-list {
    padding: 0 0.75rem 0.875rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .api-mobile-drawer-button {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 1rem;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, var(--surface)), var(--surface));
    color: var(--primary);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.12);
  }

  .api-mobile-drawer-button .material-symbols-rounded {
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 1.375rem;
    line-height: 1;
  }

  .api-mobile-drawer-button[aria-expanded="true"] {
    background: var(--primary);
    color: var(--primary-contrast);
  }

  .content.integrations-builder-mode .api-request-console {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    border: 0;
    background: transparent;
    overflow: hidden;
  }

  .content.integrations-builder-mode .api-request-form {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .content.integrations-builder-mode .api-request-head {
    min-height: auto;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.625rem;
    padding: max(0.625rem, env(safe-area-inset-top)) 0.75rem 0.625rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
    box-shadow: 0 0.0625rem 0 var(--line);
  }

  .content.integrations-builder-mode .api-request-title {
    min-width: 0;
  }

  .content.integrations-builder-mode .api-name-field {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    align-items: start;
  }

  .content.integrations-builder-mode .api-name-field > span {
    font-size: 0.5625rem;
    letter-spacing: 0.0344rem;
  }

  .content.integrations-builder-mode .api-name-field input {
    width: 100%;
    min-height: 2.375rem;
    padding: 0 0.625rem;
    border-color: var(--line-soft);
    background: var(--control-bg);
  }

  .content.integrations-builder-mode .api-status-cluster {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
    overflow: visible;
    padding: 0;
    scrollbar-width: none;
  }

  .content.integrations-builder-mode .api-status-cluster::-webkit-scrollbar,
  .content.integrations-builder-mode .api-tabbar::-webkit-scrollbar {
    display: none;
  }

  .content.integrations-builder-mode .api-status-cluster .secondary-button,
  .content.integrations-builder-mode .api-status-cluster .primary-button {
    width: 100%;
    min-width: 0;
    min-height: 2.625rem;
    border-radius: 0.875rem;
    padding: 0 0.5rem;
    font-size: 0.7188rem;
    letter-spacing: 0;
  }

  .content.integrations-builder-mode .api-status-cluster .secondary-button .material-symbols-rounded,
  .content.integrations-builder-mode .api-status-cluster .primary-button .material-symbols-rounded {
    width: 1.0625rem;
    height: 1.0625rem;
    min-width: 1.0625rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 1.0625rem;
    line-height: 1;
  }

  .api-select-modal {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .api-select-body {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .api-select-row .api-status-chip {
    justify-self: start;
  }

  .content.integrations-builder-mode .api-request-line {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    padding: 0.75rem;
    background: var(--surface);
  }

  .content.integrations-builder-mode .api-request-line select,
  .content.integrations-builder-mode .api-request-line .searchable-select__trigger,
  .content.integrations-builder-mode .api-auth-grid .searchable-select__trigger,
  .content.integrations-builder-mode .api-options-grid .searchable-select__trigger,
  .content.integrations-builder-mode .api-auth-fields .searchable-select__trigger,
  .content.integrations-builder-mode .api-url-fields input {
    height: 3rem;
    min-height: 3rem;
    border-radius: 0.875rem;
  }

  .content.integrations-builder-mode .api-url-fields {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .content.integrations-builder-mode .api-tabbar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0 0.75rem 0.625rem;
    border-bottom: 0.0625rem solid var(--line-soft);
    background: var(--surface);
    scrollbar-width: none;
  }

  .content.integrations-builder-mode .api-tabbar button {
    flex: 0 0 auto;
    min-height: 2.625rem;
    border: 0.0625rem solid var(--line-soft);
    border-radius: 62.4375rem;
    background: var(--control-bg);
  }

  .content.integrations-builder-mode .api-tabbar button.is-active {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  }

  .content.integrations-builder-mode .api-tabbar button.is-active::after {
    display: none;
  }

  .content.integrations-builder-mode .api-editor-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .content.integrations-builder-mode .api-auth-grid,
  .content.integrations-builder-mode .api-options-grid,
  .content.integrations-builder-mode .api-auth-fields,
  .content.integrations-builder-mode .api-add-header-row {
    grid-template-columns: 1fr;
  }

  .content.integrations-builder-mode .api-tab-panel.is-active[data-api-tab-panel="auth"].is-custom-auth-layout {
    grid-template-columns: 1fr;
  }

  .content.integrations-builder-mode .api-tab-panel.is-active[data-api-tab-panel="auth"].is-custom-auth-layout .api-helper-box {
    grid-column: auto;
  }

  .content.integrations-builder-mode .api-helper-box,
  .content.integrations-builder-mode .api-editor-card,
  .content.integrations-builder-mode .api-headers-builder,
  .content.integrations-builder-mode .api-template-variables-panel,
  .content.integrations-builder-mode .api-known-keys-panel {
    border-radius: 1.125rem;
  }

  .content.integrations-builder-mode .api-response-resizer {
    min-height: 0.3125rem;
  }

  .content.integrations-builder-mode .api-response-panel {
    max-height: min(38dvh, 18.75rem);
    border-top: 0.0625rem solid var(--line);
    background: color-mix(in srgb, var(--surface) 97%, var(--control-bg));
  }

  .content.integrations-builder-mode .api-response-panel header {
    min-height: 2.375rem;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .content.integrations-builder-mode .api-response-title {
    display: none;
  }

  .content.integrations-builder-mode .api-response-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .content.integrations-builder-mode .api-response-tabs button {
    min-height: 2.375rem;
    padding: 0 0.5625rem;
    white-space: nowrap;
  }

  .content.integrations-builder-mode .api-response-meta {
    display: none;
  }

  .content.integrations-builder-mode .api-response-body {
    padding: 0.625rem 0.75rem 0.75rem;
  }

  .content.integrations-builder-mode .api-response-pane-body-layout {
    grid-template-columns: 1fr;
  }

  .content.integrations-builder-mode .api-response-image-preview .task-comment-image-grid img {
    height: 8rem;
  }
}

@media (max-width: 23.75rem) {
  .content.integrations-builder-mode .api-status-cluster .secondary-button,
  .content.integrations-builder-mode .api-status-cluster .primary-button {
    padding: 0 0.375rem;
    font-size: 0.6562rem;
  }

  .content.integrations-builder-mode .api-tabbar button {
    padding: 0 0.6875rem;
    font-size: 0.6875rem;
  }
}

/* Global mobile top bar: compact TD brand + user menu, across every screen. */
@media (max-width: 47.5rem) {
  :root {
    --mobile-appbar-h: 3.625rem;
  }

  .app,
  .app.sidebar-collapsed {
    position: relative;
  }

  .app:not(.hidden)::before,
  .app.sidebar-collapsed:not(.hidden)::before {
    display: none;
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    z-index: 17010 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  .mobile-appbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 16980;
    height: calc(var(--mobile-appbar-h) + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-bottom: 0.0625rem solid color-mix(in srgb, var(--line) 78%, transparent);
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 48%),
      linear-gradient(180deg, color-mix(in srgb, var(--control-bg) 94%, var(--surface)), color-mix(in srgb, var(--surface-2) 72%, var(--surface))),
      var(--control-bg);
    box-shadow: 0 0.625rem 1.875rem rgba(15, 23, 42, 0.08);
    padding:
      env(safe-area-inset-top)
      calc(max(0.75rem, env(safe-area-inset-right)) + 6.5rem)
      0
      max(0.75rem, env(safe-area-inset-left));
    pointer-events: none;
  }

  .mobile-appbar-mark {
    width: 2.375rem;
    height: 2.375rem;
    display: grid;
    place-items: center;
    border-radius: 0.875rem;
    background:
      radial-gradient(circle at 28% 20%, color-mix(in srgb, #fff 40%, transparent), transparent 44%),
      color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 18%, var(--line));
  }

  .mobile-appbar-title {
    min-width: 0;
    overflow: hidden;
    color: var(--panel-title);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .content,
  .content.tasks-board-mode,
  .content.routing-builder-mode,
  .content.integrations-builder-mode {
    box-sizing: border-box;
    padding-top: var(--topbar-fixed-space, calc(var(--mobile-appbar-h) + env(safe-area-inset-top))) !important;
  }

  .content.routing-builder-mode,
  .content.tasks-board-mode,
  .content.integrations-builder-mode {
    height: 100dvh;
    min-height: 100dvh;
  }

  .content.routing-builder-mode .page-view:not(.hidden),
  .content.routing-builder-mode .routing-workbench {
    min-height: calc(100dvh - var(--mobile-appbar-h) - env(safe-area-inset-top));
  }

  .content.tasks-board-mode .page-view:not(.hidden),
  .content.tasks-board-mode .tasks-workbench {
    height: calc(100dvh - var(--mobile-appbar-h) - env(safe-area-inset-top) - 4.875rem - env(safe-area-inset-bottom));
  }

  .content.integrations-builder-mode .page-view:not(.hidden) {
    height: calc(100dvh - var(--mobile-appbar-h) - env(safe-area-inset-top) - 5.25rem - env(safe-area-inset-bottom));
  }

  .sidebar-brand,
  .app.sidebar-collapsed .sidebar-brand {
    display: none !important;
  }

  .sidebar-brand .brand-mark,
  .app.sidebar-collapsed .sidebar-brand .brand-mark {
    width: 2.125rem;
    height: 2.125rem;
    display: grid !important;
    border-radius: 0.8125rem;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
  }

  .sidebar-brand .brand-copy,
  .sidebar-brand .sidebar-toggle,
  .app.sidebar-collapsed .sidebar-brand .brand-copy,
  .app.sidebar-collapsed .sidebar-brand .sidebar-toggle {
    display: none !important;
  }

	  .user-menu,
	  .app.sidebar-collapsed .user-menu {
	    position: fixed !important;
	    top: calc(env(safe-area-inset-top) + ((var(--mobile-appbar-h) - 2.75rem) / 2)) !important;
	    right: max(0.75rem, env(safe-area-inset-right)) !important;
	    bottom: auto !important;
	    left: auto !important;
	    z-index: 17030;
	    width: 2.75rem;
	    min-width: 2.75rem;
	    height: 2.75rem;
	    min-height: 2.75rem;
	    margin: 0 !important;
	    padding: 0 !important;
	    pointer-events: auto;
	  }

  .user-box,
  .app.sidebar-collapsed .user-box {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line));
	    border-radius: 1rem;
    background:
      radial-gradient(circle at 32% 20%, color-mix(in srgb, #fff 42%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface) 91%, var(--primary-soft));
	    margin: 0 !important;
	    padding: 0 !important;
	    line-height: 1;
	    box-shadow: 0 0.625rem 1.75rem rgba(15, 23, 42, 0.14);
	  }

  .user-box .avatar,
  .app.sidebar-collapsed .avatar {
    width: 2.125rem;
    height: 2.125rem;
    display: grid !important;
    border-radius: 0.8125rem;
    font-size: 0.75rem;
  }

  .user-copy,
  .user-box-chevron,
  .app.sidebar-collapsed .user-copy,
  .app.sidebar-collapsed .user-box-chevron {
    display: none !important;
  }

  .user-dropdown {
    position: fixed !important;
    top: calc(var(--mobile-appbar-h) + env(safe-area-inset-top) + 0.5rem) !important;
    right: max(0.625rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 17040;
    width: min(19rem, calc(100vw - 1.25rem)) !important;
    max-height: min(58dvh, 26.25rem);
    overflow: auto;
    border-radius: 1.25rem;
    padding: 0.5rem;
    box-shadow: 0 1.625rem 4.625rem rgba(15, 23, 42, 0.24), 0 0.0625rem 0 rgba(255, 255, 255, 0.14) inset;
  }

  .user-dropdown button {
    min-height: 2.875rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
  }

  .topbar {
    top: calc(var(--mobile-appbar-h) + env(safe-area-inset-top));
  }
}

/* Mobile compact density: smaller controls while keeping touch targets usable. */
@media (max-width: 47.5rem) {
  :root {
    --touch-target: 2.5rem;
    --mobile-control-h: 2.375rem;
    --mobile-control-radius: 0.75rem;
  }

  .primary-button,
  .secondary-button,
  .danger-button,
  .danger-soft-button,
  .mini-button,
  .compact-action,
  .tasks-share-button,
  .tasks-data-button,
  .api-new-button,
  .route-settings-action-card .secondary-button,
  .route-settings-action-card .danger-button,
  .flow-modal-footer .primary-button,
  .flow-modal-footer .secondary-button,
  .task-comment-actions button,
  .task-comment-image-button,
  .settings-tabs button,
  .task-detail-tabs button,
  .api-tabbar button,
  .api-response-tabs button,
  .tasks-board-header .builder-actions .primary-button,
  .tasks-board-header .builder-actions .secondary-button,
  .tasks-board-header .builder-actions .danger-button {
    min-height: var(--mobile-control-h) !important;
    border-radius: var(--mobile-control-radius) !important;
    padding-inline: 0.625rem !important;
    font-size: 0.7188rem !important;
    line-height: 1.1;
  }

  .icon-button,
  .schema-config-btn,
  .schema-list-remove-btn,
  .api-header-delete,
  .start-filter-row .icon-button,
  .condition-rule-row .icon-button,
  .save-info-row .icon-button,
  .insert-demand-payload-row .icon-button,
  .task-detail-head-actions .icon-button {
    width: 2.375rem !important;
    min-width: 2.375rem !important;
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    border-radius: 0.75rem !important;
  }

  .icon-button .material-symbols-rounded,
  .primary-button .material-symbols-rounded,
  .secondary-button .material-symbols-rounded,
  .danger-button .material-symbols-rounded,
  .compact-action .material-symbols-rounded,
  .tasks-share-button .material-symbols-rounded,
  .tasks-data-button .material-symbols-rounded {
    width: 1.0625rem;
    height: 1.0625rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 1.0625rem !important;
    line-height: 1;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea,
  .modal-field input:not([type="checkbox"]):not([type="radio"]),
  .modal-field select,
  .task-detail-field input:not([type="checkbox"]),
  .task-detail-field select,
  .settings-field input,
  .settings-user-row input,
  .settings-user-row select,
  .api-request-line select,
  .api-url-fields input,
  .api-header-input,
  .condition-rule-row input,
  .condition-rule-row select,
  .start-filter-row input,
  .start-filter-row select,
  .save-info-row input,
  .save-info-row select,
  .insert-demand-payload-row input,
  .insert-demand-payload-row select,
  .file-import-match-row select,
  .file-import-grid-preview input,
  .task-import-field input:not([type="checkbox"]),
  .task-import-field select,
  .schema-row input,
  .schema-row select,
  .status-row input,
  .status-row select,
  .searchable-select__trigger {
    min-height: var(--mobile-control-h) !important;
    border-radius: var(--mobile-control-radius) !important;
    padding: 0 0.625rem !important;
    font-size: 0.75rem !important;
  }

  .searchable-select {
    min-width: 0 !important;
  }

  .searchable-select__trigger-label,
  .searchable-select__placeholder {
    font-size: 0.75rem !important;
  }

  textarea,
  .modal-field textarea,
  .task-detail-field textarea,
  .task-import-field textarea,
  .task-comment-input-wrap textarea {
    min-height: 5.25rem !important;
    padding: 0.5625rem 0.625rem !important;
    line-height: 1.35;
  }

  .modal-field,
  .task-detail-field,
  .settings-field,
  .task-import-field {
    gap: 0.3125rem;
  }

  .modal-field > span,
  .task-detail-field > span,
  .settings-field > span,
  .task-import-field > span,
  .api-name-field > span {
    font-size: 0.625rem !important;
  }

  .content.integrations-builder-mode .api-request-line select,
  .content.integrations-builder-mode .api-request-line .searchable-select__trigger,
  .content.integrations-builder-mode .api-auth-grid .searchable-select__trigger,
  .content.integrations-builder-mode .api-options-grid .searchable-select__trigger,
  .content.integrations-builder-mode .api-auth-fields .searchable-select__trigger,
  .content.integrations-builder-mode .api-url-fields input {
    height: var(--mobile-control-h) !important;
    min-height: var(--mobile-control-h) !important;
    border-radius: var(--mobile-control-radius) !important;
  }

  .content.integrations-builder-mode .api-status-cluster .secondary-button,
  .content.integrations-builder-mode .api-status-cluster .primary-button,
  .content.integrations-builder-mode .api-tabbar button,
  .content.integrations-builder-mode .api-response-tabs button {
    min-height: 2.25rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.6562rem !important;
  }

  .content.integrations-builder-mode .api-name-field input {
    min-height: 2.25rem !important;
  }

  .tasks-board-header .builder-actions .primary-button,
  .tasks-board-header .builder-actions .secondary-button,
  .tasks-share-button,
  .tasks-data-button {
    min-height: 2.375rem !important;
  }
}

/* Mobile settings modal: collapsible section sidebar. */
@media (min-width: 47.5625rem) {
  .tasks-board-header {
    max-height: none !important;
    grid-template-columns: minmax(7.375rem, 0.56fr) minmax(0, 2fr) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .tasks-board-main {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 0.5rem;
  }

  .tasks-board-side {
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(9.375rem, auto) minmax(0, max-content) auto !important;
    align-items: center !important;
    justify-content: end !important;
    justify-items: end !important;
  }

  .tasks-board-controls-root {
    grid-column: auto !important;
    min-width: 0;
  }
}

/* Mobile settings modal: collapsible section sidebar. */
@media (max-width: 47.5rem) {
  .settings-modal {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
    width: calc(100vw - 0.875rem) !important;
    height: calc(100dvh - 5.25rem) !important;
    max-height: calc(100dvh - 5.25rem) !important;
    border-radius: 1.125rem;
    overflow: hidden;
  }

  .settings-modal .flow-modal-head {
    grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem;
    gap: 0.5rem;
    padding: 0.625rem;
  }

  .settings-modal .flow-modal-icon {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.8125rem;
  }

  .settings-modal .flow-modal-head h3 {
    font-size: 1rem;
  }

  .settings-modal .flow-modal-head p {
    display: none;
  }

  .settings-mobile-tabs-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.375rem;
    border-radius: 0.75rem;
    margin: 0.625rem 0.75rem 0.5rem;
    padding: 0 0.75rem;
    justify-self: start;
  }

  .settings-mobile-tabs-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: var(--primary);
    color: var(--primary-contrast, #fff);
  }

  .settings-modal-body {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }

  #settingsModal.settings-mobile-tabs-open .settings-modal::before {
    content: "";
    position: absolute;
    inset: 3.6875rem 0 0;
    z-index: 4;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(0.1875rem);
  }

  .settings-tabs {
    display: grid;
    align-content: start;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: min(18.25rem, 82vw);
    border-right: 0.0625rem solid color-mix(in srgb, var(--line) 80%, transparent);
    border-bottom: 0 !important;
    border-radius: 0 1.25rem 1.25rem 0;
    box-shadow: 1.125rem 0 3.125rem rgba(15, 23, 42, 0.22);
    overflow: auto;
    transform: translateX(calc(-100% - 1.125rem));
    transition: transform 210ms ease;
  }

  #settingsModal.settings-mobile-tabs-open .settings-tabs {
    transform: translateX(0);
  }

  .settings-tabs button {
    min-height: 2.875rem !important;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    gap: 0.5625rem;
    border-radius: 0.875rem !important;
    padding: 0.5rem !important;
  }

  .settings-tabs .material-symbols-rounded {
    grid-row: span 2;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.75rem;
    font-size: 1.1875rem !important;
  }

  .settings-tabs strong {
    font-size: 0.75rem;
  }

  .settings-tabs small {
    display: block;
    font-size: 0.625rem;
  }

  .settings-panels,
  .settings-panel {
    min-height: 0;
    height: 100%;
  }

  .settings-panels {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .settings-panel {
    height: auto;
  }

  .settings-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .settings-panel[data-settings-panel="general"] {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .settings-panel-head {
    padding: 0.75rem;
  }

  .settings-panel-head-action {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .settings-form-grid,
  .settings-execution-grid,
  .settings-system-grid,
  .settings-team-grid,
  .settings-tenant-area,
  .settings-plans-area,
  .settings-integration-actions {
    grid-template-columns: 1fr !important;
    gap: 0.625rem;
    padding: 0.75rem;
  }

  .settings-avatar-card {
    margin: 0.625rem 0.75rem 0;
    grid-template-columns: 3.375rem minmax(0, 1fr);
    gap: 0.625rem;
    border-radius: 1rem;
    padding: 0.5625rem;
  }

  .settings-avatar-preview {
    width: 3.375rem;
    height: 3.375rem;
    border-width: 0.125rem;
    font-size: 1.25rem;
  }

  .settings-avatar-copy p {
    font-size: 0.6562rem;
    line-height: 1.35;
  }

  .settings-avatar-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .settings-avatar-actions .secondary-button {
    width: 100%;
    min-height: 2.25rem !important;
  }

  .settings-integration-card {
    min-height: 11.25rem;
    border-radius: 1rem;
    padding: 0.875rem;
  }

  .settings-overage-action-cell {
    justify-content: flex-start;
  }

  .settings-panel-footer {
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
  }
}

/* Mobile task board density: compact header + collapsible controls sheet. */
@media (max-width: 47.5rem) {
  .tasks-workbench {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .tasks-board-header {
    z-index: 430;
    min-height: 3.125rem;
    max-height: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem !important;
    overflow: visible !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--control-bg)), color-mix(in srgb, var(--surface) 88%, var(--surface-2))),
      var(--surface);
  }

  .tasks-board-header.tasks-mobile-controls-open {
    z-index: 16500;
  }

  .tasks-board-header.tasks-mobile-controls-open::before {
    content: "";
    position: fixed;
    inset: calc(var(--mobile-appbar-h) + env(safe-area-inset-top)) 0 calc(5.125rem + env(safe-area-inset-bottom)) 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.26);
    backdrop-filter: blur(0.1875rem);
  }

  .tasks-board-main {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
  }

  .tasks-board-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .tasks-board-nav .builder-kicker {
    display: none;
  }

  .tasks-board-nav .back-button {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    display: inline-grid;
    place-items: center;
    border: 0.0625rem solid var(--line-soft);
    border-radius: 0.75rem;
    background: var(--control-bg);
    color: var(--text);
    overflow: hidden;
    padding: 0 !important;
    text-indent: -62.4375rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tasks-board-nav .back-button .material-symbols-rounded {
    width: 1.125rem;
    height: 1.125rem;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 1.125rem !important;
    text-indent: 0;
  }

	  .tasks-board-title {
	    min-width: 0;
	  }

	  .tasks-board-title-row {
	    gap: 0.3125rem;
	  }

	  .tasks-demand-edit-button {
	    width: 1.75rem !important;
	    height: 1.75rem !important;
	    min-width: 1.75rem !important;
	    border-radius: 0.5625rem;
	  }

	  .tasks-demand-edit-button .material-symbols-rounded {
	    font-size: 1rem !important;
	  }

	  .tasks-board-header h2 {
	    max-width: 100%;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tasks-board-header p {
    display: none;
  }

  .tasks-mobile-controls-toggle {
    min-height: 2.25rem !important;
    display: inline-grid;
    grid-template-columns: 1rem auto;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.8125rem !important;
    padding: 0 0.625rem !important;
    font-size: 0.6875rem !important;
    white-space: nowrap;
  }

  .tasks-mobile-controls-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: var(--primary);
    color: #fff;
  }

  .tasks-mobile-controls-toggle .material-symbols-rounded {
    width: 1rem;
    height: 1rem;
    font-size: 1rem !important;
  }

  .tasks-board-side {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0.625rem;
    bottom: auto;
    left: 0.625rem;
    z-index: 2;
    width: auto !important;
    min-width: 0 !important;
    max-height: min(56dvh, 28.75rem);
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.625rem;
    border: 0.0625rem solid color-mix(in srgb, var(--line) 78%, var(--primary));
    border-radius: 1.375rem;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, var(--control-bg) 94%, transparent)),
      var(--surface);
    box-shadow: 0 1.75rem 5rem rgba(15, 23, 42, 0.28), 0 0.0625rem 0 rgba(255, 255, 255, 0.14) inset;
    overflow: auto;
    padding: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.625rem) scale(0.985);
    transform-origin: top center;
    transition: opacity 160ms ease, transform 200ms ease;
    -webkit-overflow-scrolling: touch;
  }

  .tasks-board-header.tasks-mobile-controls-open .tasks-board-side {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .tasks-board-side::before {
    content: "";
    width: 2.625rem;
    height: 0.25rem;
    justify-self: center;
    border-radius: 62.4375rem;
    background: color-mix(in srgb, var(--muted) 34%, transparent);
  }

  .tasks-board-controls-root,
  .tasks-board-summary,
  .tasks-board-header .builder-actions {
    width: 100%;
    min-width: 0;
  }

  .tasks-board-controls,
  .tasks-view-toggle,
  .tasks-board-summary-grid {
    width: 100%;
  }

  .tasks-view-toggle {
    min-height: 2.125rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 0.8125rem;
  }

  .tasks-view-toggle button {
    min-height: 2.125rem !important;
    gap: 0.25rem;
    padding: 0 0.375rem !important;
    font-size: 0.6562rem !important;
  }

  .tasks-board-summary-grid {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .tasks-board-search {
    justify-self: start;
  }

  .tasks-board-search-trigger {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
  }

  .tasks-board-stat {
    min-height: 2.125rem;
    border-radius: 0.8125rem;
  }

  .tasks-presence {
    justify-self: end;
  }

  .tasks-presence-trigger {
    min-height: 2.125rem;
    padding: 0.1875rem 0.4375rem;
  }

  .tasks-presence-label {
    display: none;
  }

  .tasks-presence-popover {
    position: fixed;
    top: auto;
    right: 0.625rem;
    bottom: 4.875rem;
    left: 0.625rem;
    width: auto;
    max-height: min(26.25rem, calc(100dvh - 6.875rem));
  }

  .tasks-presence-list {
    max-height: min(20rem, calc(100dvh - 11.75rem));
  }

  .td-filter-menu {
    width: auto !important;
  }

  .td-filter-trigger {
    min-height: 2.125rem !important;
    border-radius: 0.8125rem !important;
  }

  .tasks-board-header .builder-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible !important;
    padding: 0 !important;
  }

  .tasks-board-header .builder-actions > *,
  .tasks-share-anchor,
  .tasks-data-anchor {
    width: 100% !important;
    max-width: none !important;
  }

  .tasks-share-button,
  .tasks-data-button,
  .tasks-board-header .builder-actions .secondary-button,
  .tasks-board-header .builder-actions .primary-button {
    width: 100%;
    min-height: 2.25rem !important;
    justify-content: center;
  }
}

/* Task detail modal: editorial tenant + comments sidebar. */
.task-detail-modal {
  width: min(88.75rem, calc(100vw - 1.75rem));
  height: calc(100dvh - 3.25rem);
  max-height: calc(100dvh - 1.75rem);
}

.task-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 3fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.task-detail-editor-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
}

.task-detail-tabs {
  min-height: 2.875rem;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--surface);
}

.task-detail-tabs button {
  min-height: 2rem;
  border-radius: 0.625rem;
  padding-inline: 0.625rem;
  font-size: 0.7188rem;
}

.task-detail-tabs .task-detail-comments-tab {
  margin-left: auto;
  flex-shrink: 0;
}

.task-detail-tab-panel {
  min-height: 0;
}

.task-detail-summary-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.75rem;
  border-right: 0;
  background: var(--surface);
  padding: 1rem;
}

.task-detail-summary-card,
.task-detail-summary-panel > .task-detail-field.is-control:first-of-type,
.task-detail-dates {
  grid-column: 1 / -1;
}

.task-detail-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.task-detail-fields {
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.task-detail-field,
.task-detail-field-full,
.task-detail-field-wide,
.task-detail-file-field,
.task-detail-rich-text-field {
  grid-column: 1 / -1;
}

.task-detail-field-half,
.task-detail-toggle {
  grid-column: span 1;
}

.task-detail-fields > .task-list-field,
.task-detail-fields > .task-relation-field {
  grid-column: 1 / -1;
}

.task-detail-field {
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0.8125rem 0.875rem;
}

.task-detail-field span,
.task-detail-field-head span {
  color: var(--panel-title);
  font-size: 0.75rem;
}

.task-detail-field input:not([type="checkbox"]),
.task-detail-field select,
.task-detail-field textarea {
  min-height: 2.625rem;
  border-color: color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--input-bg) 88%, var(--surface));
  font-size: 0.8125rem;
}

.task-detail-field textarea {
  min-height: 9.375rem;
}

.task-detail-file-selected {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto 2rem;
  align-items: center;
  gap: 0.5rem;
}

.task-detail-file-preview {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0 0 0.25rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.75rem;
  background: var(--control-bg);
}

.task-detail-file-preview img {
  width: 100%;
  max-height: 17.5rem;
  display: block;
  object-fit: contain;
}

.task-aggregated-grid {
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.task-aggregate-card {
  border-radius: 0.75rem;
  background: var(--surface);
}

.task-detail-comments-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 40%, transparent), transparent 11.25rem),
    var(--control-bg);
  overflow: hidden;
}

.task-detail-comments-sidebar .task-detail-editor-head {
  min-height: 3.625rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: var(--surface);
}

.task-detail-comments-sidebar .task-comments-list {
  padding: 0.875rem;
}

.task-detail-comments-sidebar .task-comment-composer {
  padding: 0.75rem 0.875rem 0.875rem;
}

.task-detail-comments-sidebar .task-comment-composer-actions {
  align-items: stretch;
  flex-direction: column;
}

.task-detail-comments-sidebar .task-comment-composer-actions .secondary-button,
.task-detail-comments-sidebar .task-comment-composer-actions .primary-button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 73.75rem) {
  .task-detail-body {
    grid-template-columns: 1fr;
    overflow: hidden;
    position: relative;
  }

  .task-detail-tabs .task-detail-comments-tab {
    display: inline-flex;
    position: sticky;
    right: 0;
    z-index: 3;
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 30%, var(--line-soft));
    background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface));
  }

  .task-comments-toggle-button {
    display: none !important;
  }

  .task-detail-comments-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    width: min(32rem, 52vw);
    min-height: 0;
    border-top: 0;
    border-left: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
    border-radius: 0.875rem 0 0 0;
    box-shadow: -1.5rem 0 3.375rem rgba(15, 23, 42, 0.2);
    transform: translateX(105%);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  .task-detail-modal.is-comments-open .task-detail-comments-sidebar,
  #taskDetailModal.is-comments-open .task-detail-modal .task-detail-comments-sidebar {
    transform: translateX(0);
  }
}

@media (max-width: 47.5rem) {
  .task-detail-modal {
    --task-detail-mobile-head-h: 6.5rem;
    width: 100%;
    height: calc(100dvh - 1.25rem);
    max-height: calc(100dvh - 1.25rem);
  }

  .task-detail-fields,
  .task-detail-summary-panel,
  .task-detail-dates,
  .task-aggregated-grid {
    grid-template-columns: 1fr;
  }

  .task-detail-field-half,
  .task-list-field,
  .task-detail-toggle {
    grid-column: 1 / -1;
  }

  .task-detail-tabs {
    overflow-x: auto;
  }

  .task-contact-event-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-contact-event-meta,
  .task-contact-open-button {
    grid-column: 1 / -1;
  }

  .task-contact-open-button {
    justify-self: start;
    grid-row: auto;
  }

  .task-contact-details-modal {
    width: 100%;
    height: calc(100dvh - 1.25rem);
    max-height: calc(100dvh - 1.25rem);
  }

  .task-contact-details-audio {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-contact-details-body,
  .task-contact-details-modal.is-voice-contact-details .task-contact-details-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-contact-details-json {
    grid-column: 1 / -1;
  }

  .task-contact-player-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-contact-player-time {
    justify-content: flex-start;
    min-width: 0;
  }

  .task-detail-modal {
    position: relative;
  }

  .task-detail-body {
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .task-detail-modal::after {
    content: "";
    position: absolute;
    inset: var(--task-detail-mobile-head-h, 6.5rem) 0 0 0;
    z-index: 6;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .task-detail-modal.is-comments-open::after,
  #taskDetailModal.is-comments-open .task-detail-modal::after {
    opacity: 1;
    pointer-events: auto;
  }

  .task-detail-modal.is-comments-open > .flow-modal-head,
  #taskDetailModal.is-comments-open .task-detail-modal > .flow-modal-head {
    position: relative;
    z-index: 8;
  }

  .task-detail-comments-sidebar {
    position: absolute;
    top: var(--task-detail-mobile-head-h, 6.5rem);
    right: 0;
    bottom: 0;
    z-index: 7;
    width: min(88vw, 23.75rem);
    min-height: 0;
    border-top: 0.0625rem solid var(--line-soft);
    border-left: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
    border-radius: 1rem 0 0 0;
    box-shadow: -1.5rem 0 3.375rem rgba(15, 23, 42, 0.2);
    transform: translateX(105%);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  .task-detail-modal.is-comments-open .task-detail-comments-sidebar,
  #taskDetailModal.is-comments-open .task-detail-modal .task-detail-comments-sidebar {
    transform: translateX(0);
  }
}

/* Task modal refinements. */
.task-detail-field {
  border: 0 !important;
  box-shadow: none !important;
}

.task-detail-field:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

.task-comment-composer-actions,
.task-detail-comments-sidebar .task-comment-composer-actions {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.task-comment-image-button,
.task-detail-comments-sidebar .task-comment-image-button {
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 0.625rem !important;
}

.task-comment-image-button .material-symbols-rounded {
  font-size: 1.1875rem;
}

.task-detail-comments-sidebar .task-comment-composer-actions .secondary-button,
.task-detail-comments-sidebar .task-comment-composer-actions .primary-button {
  width: auto;
}

.task-detail-comments-sidebar #cancelTaskCommentEditBtn.hidden {
  display: none;
}

.task-detail-comments-sidebar #cancelTaskCommentEditBtn {
  justify-self: stretch;
}

.task-detail-comments-sidebar #sendTaskCommentBtn {
  justify-self: end;
}

.task-timeline-host {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

[data-task-detail-panel="timeline"] {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

[data-task-detail-panel="timeline"] .task-timeline-host {
  min-height: 0;
  height: 100%;
}

/* Switch geometry fix. */
.share-switch {
  --switch-width: 2.875rem;
  --switch-height: 1.625rem;
  --switch-knob: 1.25rem;
  --switch-pad: 0.1875rem;
  position: relative;
  min-width: var(--switch-width);
  height: var(--switch-height);
  align-items: center;
}

.share-switch-small {
  --switch-width: 2.5rem;
  --switch-height: 1.4375rem;
  --switch-knob: 1.0625rem;
  --switch-pad: 0.1875rem;
}

.share-switch > span {
  position: relative;
  width: var(--switch-width) !important;
  height: var(--switch-height) !important;
  display: block;
  flex: 0 0 var(--switch-width);
}

.share-switch > span::after {
  top: 50% !important;
  left: var(--switch-pad) !important;
  width: var(--switch-knob) !important;
  height: var(--switch-knob) !important;
  transform: translateY(-50%) !important;
}

.share-switch input:checked + span::after {
  transform: translate(
    calc(var(--switch-width) - var(--switch-knob) - (var(--switch-pad) * 2)),
    -50%
  ) !important;
}

/* Polished public form customization modal. */
.task-form-customize-modal {
  width: min(67.5rem, calc(100vw - 1.75rem));
  max-height: min(53.75rem, calc(100vh - 1.75rem));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 1rem;
}

.task-form-customize-modal .flow-modal-head {
  min-height: 4.625rem;
  border-bottom: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 56%),
    var(--surface);
  padding: 1rem 1.125rem;
}

.task-form-customize-modal .flow-modal-icon {
  border-radius: 0.875rem;
  box-shadow: 0 0.875rem 2rem rgba(124, 58, 237, 0.18);
}

.task-form-customize-modal .flow-modal-head h3 {
  font-size: 1.125rem;
  line-height: 1.15;
}

.task-form-customize-modal .flow-modal-head p {
  max-width: 42.5rem;
  font-size: 0.75rem;
}

.task-form-customize-body {
  min-height: 0;
  overflow: auto;
  display: block;
  padding: 0.875rem;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary-soft) 48%, transparent), transparent 26%),
    color-mix(in srgb, var(--control-bg) 58%, var(--surface));
}

.task-form-custom-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--control-bg) 70%, var(--surface)));
  padding: 0.625rem 0.875rem;
}

.task-form-custom-tabs button {
  min-height: 2.875rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, auto);
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0.4375rem 0.625rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.task-form-custom-tabs button:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  transform: translateY(-0.0625rem);
}

.task-form-custom-tabs button.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, transparent), transparent),
    var(--surface);
  box-shadow: 0 0.875rem 2rem rgba(124, 58, 237, 0.14);
  color: var(--primary);
}

.task-form-custom-tabs .material-symbols-rounded {
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.0625rem;
}

.task-form-custom-tabs strong {
  min-width: 0;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 950;
  line-height: 1.1;
}

.task-form-custom-tabs small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-form-custom-panel {
  min-height: 0;
  overflow: auto;
}

.task-form-general-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr);
  gap: 0.75rem;
}

.task-form-custom-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.875rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.875rem;
  background: var(--surface);
  padding: 0.875rem;
  box-shadow: 0 0.75rem 1.875rem rgba(15, 23, 42, 0.07);
}

.task-form-custom-card > header {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding-bottom: 0.75rem;
}

.task-form-custom-card > header > .material-symbols-rounded {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
}

.task-form-custom-card > header strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 950;
}

.task-form-custom-card > header small {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

.task-form-logo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.625rem;
}

.task-form-image-preview {
  min-height: 4.625rem;
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 68%, transparent)),
    color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0.625rem;
}

.task-form-image-preview.has-image {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line-soft));
  box-shadow: 0 0.75rem 1.75rem rgba(124, 58, 237, 0.10);
}

.task-form-image-preview > .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.3125rem;
  box-shadow: 0 0.625rem 1.375rem rgba(15, 23, 42, 0.08);
}

.task-form-image-preview strong,
.task-form-image-preview small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-form-image-preview strong {
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 950;
}

.task-form-image-preview small {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 750;
}

.task-form-logo-actions {
  display: grid;
  align-content: center;
  gap: 0.4375rem;
}

.task-form-upload-button {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 0.625rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.task-form-clear-image-button {
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--muted);
  padding: 0 0.6875rem;
  font-size: 0.7188rem;
  font-weight: 900;
  cursor: pointer;
}

.task-form-clear-image-button:hover {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line-soft));
  color: var(--red);
}

.task-form-upload-button input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.task-form-upload-button .material-symbols-rounded,
.task-form-clear-image-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.task-form-customize-modal .modal-field {
  gap: 0.375rem;
}

.task-form-customize-modal .modal-field > span {
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 900;
}

.task-form-customize-modal input,
.task-form-customize-modal textarea {
  border-color: var(--line-soft);
  border-radius: 0.625rem;
  font-size: 0.7812rem;
}

.task-form-customize-modal textarea {
  resize: vertical;
}

.task-form-completion-card {
  border: 0;
  background: transparent;
  padding: 0;
}

.task-form-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
  padding: 0.25rem;
}

.task-form-segmented input {
  position: absolute;
  opacity: 0;
}

.task-form-segmented span {
  min-height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
}

.task-form-segmented input:checked + span {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0.625rem 1.375rem rgba(124, 58, 237, 0.22);
}

.task-form-fields-toolbar {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  padding: 0.625rem 0.75rem;
}

.task-form-fields-toolbar .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.1875rem;
}

.task-form-fields-toolbar p {
  margin: 0;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.4;
}

.task-form-fields-builder {
  display: grid;
  gap: 0.5rem;
}

.task-form-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-left: 0.125rem solid var(--primary);
  border-radius: 0.6875rem;
  background: var(--surface);
  padding: 0.5rem 0.625rem;
  cursor: grab;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.task-form-field-row:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.06);
}

.task-form-field-row.is-dragging {
  opacity: 0.62;
  transform: scale(0.996);
  cursor: grabbing;
  box-shadow: 0 1.125rem 2.25rem rgba(124, 58, 237, 0.16);
}

.task-form-fields-builder.is-sorting .task-form-field-row:not(.is-dragging) {
  transition: transform 140ms ease;
}

.task-form-field-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4375rem;
}

.task-form-field-head > .material-symbols-rounded {
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.0625rem;
  cursor: grab;
}

.task-form-field-head strong {
  display: block;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-form-field-head small {
  display: block;
  margin-top: 0.0625rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-form-field-head em {
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
  padding: 0.25rem 0.4375rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.task-form-field-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(11.25rem, 0.82fr) minmax(15rem, 1.18fr);
  gap: 0.5rem;
}

.task-form-field-main label {
  display: grid;
  gap: 0.3125rem;
}

.task-form-field-main span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
}

.task-form-field-main input {
  min-width: 0;
  height: 2rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.625rem;
  font-size: 0.7812rem;
}

.task-form-field-options {
  min-width: 8.25rem;
  display: grid;
  align-content: end;
  gap: 0.375rem;
}

.compact-check {
  min-height: 1.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface));
  color: var(--text);
  padding: 0 0.5rem;
  font-size: 0.6562rem;
  font-weight: 900;
}

.compact-check.is-locked {
  color: var(--muted);
  background: color-mix(in srgb, var(--control-bg) 88%, var(--surface));
}

.compact-check input {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--primary);
}

.task-form-customize-modal .flow-modal-footer {
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.75rem 1rem;
}

.task-form-modal-action {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border-radius: 0.625rem;
  font-size: 0.7812rem;
  font-weight: 900;
  padding: 0 0.875rem;
}

.task-form-modal-action .material-symbols-rounded {
  font-size: 1.125rem;
}

.task-form-modal-action.is-primary {
  box-shadow: 0 0.75rem 1.75rem rgba(124, 58, 237, 0.24);
}

@media (max-width: 56.25rem) {
  .task-form-general-layout,
  .task-form-field-row,
  .task-form-field-main {
    grid-template-columns: 1fr;
  }

  .task-form-field-options {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .task-form-logo-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile modal headers: two rows, desktop remains unchanged. */
@media (max-width: 47.5rem) {
  .flow-modal .flow-modal-head {
    min-height: var(--task-detail-mobile-head-h, auto);
    grid-template-columns: 2.375rem minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.5rem 0.625rem;
    padding: 0.625rem 0.75rem !important;
  }

  .flow-modal .flow-modal-head > .flow-modal-icon {
    grid-column: 1;
    grid-row: 1;
    width: 2.375rem !important;
    height: 2.375rem !important;
    border-radius: 0.75rem;
  }

  .flow-modal .flow-modal-head > .flow-modal-icon .material-symbols-rounded {
    font-size: 1.3125rem;
  }

  .flow-modal .flow-modal-head > div:not(.flow-modal-icon):not(.task-detail-head-actions) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .flow-modal .flow-modal-head > div:not(.flow-modal-icon):not(.task-detail-head-actions) > span:not(.material-symbols-rounded) {
    display: block;
    overflow: hidden;
    font-size: 0.5938rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flow-modal .flow-modal-head h3 {
    overflow: hidden;
    margin-top: 0.0625rem;
    font-size: 0.9375rem !important;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flow-modal .flow-modal-head p {
    display: none;
  }

  .flow-modal .flow-modal-head > .icon-button,
  .flow-modal .flow-modal-head > button[aria-label="Fechar"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .settings-modal .flow-modal-head {
    grid-template-columns: 2.375rem minmax(0, 1fr) 2.375rem !important;
    grid-template-rows: auto;
  }

  .settings-modal .flow-modal-head > #closeSettingsModalBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end;
  }

  .flow-modal .flow-modal-head > .task-detail-head-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: end;
    align-items: center;
    gap: 0.4375rem;
    overflow-x: auto;
    padding-top: 0.125rem;
  }

  .flow-modal .flow-modal-head > .task-detail-head-actions .task-detail-save-button {
    min-height: 2.25rem;
    padding-inline: 0.6875rem;
  }

  .flow-modal .flow-modal-head > .task-detail-head-actions .task-detail-head-notice {
    display: none;
  }

  .notifications-modal .flow-modal-head {
    grid-template-columns: 2.375rem minmax(0, 1fr) auto !important;
  }

  .notifications-modal .flow-modal-head .task-detail-head-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .notifications-modal #markAllNotificationsReadBtn {
    display: inline-flex !important;
  }
}

/* Notifications + task modal refinements. */
.notification-bell {
  position: relative;
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  justify-self: start;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 0.625rem 1.375rem rgba(15, 23, 42, 0.07);
  transition: transform var(--ease-ui), border-color var(--ease-ui), background var(--ease-ui);
}

.notification-bell:hover,
.notification-bell.is-active {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line-soft));
  background: var(--primary-soft);
  transform: translateY(-0.0625rem);
}

.notification-bell .material-symbols-rounded {
  font-size: 1.375rem;
}

.notification-badge {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 0.125rem solid var(--surface);
  border-radius: 62.4375rem;
  background: var(--red);
  color: #fff;
  padding: 0 0.3125rem;
  font-size: 0.625rem;
  font-weight: 950;
  line-height: 1;
}

.app.sidebar-collapsed .notification-bell {
  justify-self: center;
}

.task-detail-modal .flow-modal-head {
  min-height: 4.375rem;
}

.task-detail-head-actions {
  flex-wrap: wrap;
}

.task-detail-head-notice {
  max-width: 20rem;
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  padding: 0 0.25rem;
  text-align: right;
}

.task-detail-save-button {
  min-height: 2.375rem;
  border-radius: 0.6875rem;
  padding-inline: 0.8125rem;
  white-space: nowrap;
}

.task-detail-save-button .material-symbols-rounded {
  font-size: 1.125rem;
}

.task-comment-input-wrap {
  position: relative;
}

.task-comment-composer-actions,
.task-detail-comments-sidebar .task-comment-composer-actions {
  display: grid !important;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 0.5rem;
}

.task-comment-image-button,
.task-detail-comments-sidebar .task-comment-image-button {
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  display: grid !important;
  place-items: center !important;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 0.625rem !important;
  background: var(--surface);
  color: var(--primary);
  padding: 0 !important;
  cursor: pointer;
}

.task-comment-image-button:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line-soft));
  background: var(--primary-soft);
}

.task-detail-comments-sidebar #cancelTaskCommentEditBtn {
  justify-self: start;
}

.task-detail-comments-sidebar #sendTaskCommentBtn {
  justify-self: end;
  min-height: 2.25rem;
  border-radius: 0.625rem;
}

.mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 120;
  display: grid;
  gap: 0.25rem;
  max-height: 16.25rem;
  overflow: auto;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.875rem;
  background: var(--surface);
  padding: 0.375rem;
  box-shadow: 0 1.25rem 2.625rem rgba(15, 23, 42, 0.18);
}

.mention-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--text);
  padding: 0.4375rem;
  text-align: left;
  cursor: pointer;
}

.mention-option:hover,
.mention-option.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.mention-option-avatar {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--primary) 14%, transparent);
}

.mention-option-avatar.has-image {
  background: var(--control-bg);
  color: transparent;
}

.mention-option-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mention-option strong,
.mention-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option strong {
  font-size: 0.75rem;
}

.mention-option span {
  color: var(--muted);
  font-size: 0.6562rem;
}

.mention-option small {
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 900;
}

.comment-mention {
  display: inline;
  border-radius: 0.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.0625rem 0.25rem;
  font-weight: 900;
}

.notifications-modal {
  width: min(70rem, calc(100vw - 1.75rem));
  height: min(48.75rem, calc(100dvh - 3.5rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1.125rem;
  background: var(--surface);
}

.notifications-modal .flow-modal-head {
  min-height: 4.25rem;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 70%, transparent), transparent 58%),
    var(--surface);
  padding: 0.75rem 0.875rem;
}

.notifications-modal .flow-modal-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8125rem;
  box-shadow: 0 1rem 2.125rem rgba(124, 58, 237, 0.18);
}

.notifications-modal .flow-modal-head h3 {
  font-size: 1.125rem;
  line-height: 1.15;
}

.notifications-modal .flow-modal-head p {
  max-width: 35rem;
  font-size: 0.7188rem;
}

.notifications-modal #markAllNotificationsReadBtn {
  min-height: 2.25rem;
  border-radius: 0.625rem;
  padding-inline: 0.6875rem;
  font-size: 0.7188rem;
}

.notifications-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(17.5rem, 0.29fr) minmax(0, 0.71fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--control-bg) 74%, var(--surface)) 0 29%, var(--surface) 29% 100%);
}

.notifications-list-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 3rem minmax(0, 1fr);
  border-right: 0.0625rem solid color-mix(in srgb, var(--primary) 12%, var(--line-soft));
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--control-bg) 86%, var(--surface)));
}

.notifications-list-head {
  min-height: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  padding: 0 0.75rem;
}

.notifications-list-head strong {
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifications-list-head small {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.6562rem;
  font-weight: 900;
}

.notifications-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  overflow: auto;
  padding: 0.625rem;
}

.notification-row {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.8125rem;
  background: var(--surface);
  color: var(--text);
  padding: 0.625rem 0.625rem 0.625rem 0.5625rem;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.045);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.notification-row::before {
  content: "";
  position: absolute;
  inset: 0.5625rem auto 0.5625rem 0;
  width: 0.1875rem;
  border-radius: 62.4375rem;
  background: transparent;
}

.notification-row:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  transform: translateY(-0.0625rem);
}

.notification-row.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 68%, transparent), transparent 72%),
    var(--surface);
  box-shadow: 0 1rem 2rem rgba(124, 58, 237, 0.13);
}

.notification-row.is-unread::before {
  background: var(--primary);
}

.notification-row.is-unread strong {
  color: var(--primary);
}

.notification-row .material-symbols-rounded {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary);
  font-size: 1.125rem;
}

.notification-row > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.notification-row strong,
.notification-row span,
.notification-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-row strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 950;
  line-height: 1.22;
  white-space: nowrap;
}

.notification-row span span {
  display: -webkit-box;
  color: var(--muted);
  font-size: 0.675rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.notification-row small {
  display: block;
  color: color-mix(in srgb, var(--primary) 84%, var(--muted));
  font-size: 0.625rem;
  font-weight: 850;
  white-space: nowrap;
}

.notification-detail-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-soft) 52%, transparent), transparent 30%),
    var(--surface);
  padding: 1.125rem;
}

.notification-detail-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 1.125rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 54%, transparent), transparent 72%),
    color-mix(in srgb, var(--control-bg) 52%, var(--surface));
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

.notification-detail-empty .material-symbols-rounded {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: var(--primary);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 1rem 2.125rem rgba(124, 58, 237, 0.2);
}

.notification-detail-empty strong {
  color: var(--panel-title);
  font-size: 0.9375rem;
  font-weight: 950;
}

.notification-detail-empty p {
  max-width: 26.25rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.notification-detail-card {
  display: grid;
  gap: 0.875rem;
}

.notification-detail-card header {
  display: grid;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 1rem;
  background: var(--surface);
  padding: 1rem;
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.06);
}

.notification-detail-card header span {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0.3125rem 0.5625rem;
  font-size: 0.625rem;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.notification-detail-card h4 {
  margin: 0;
  color: var(--panel-title);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.15;
}

.notification-detail-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.58;
}

.notification-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.notification-detail-meta div {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.8125rem;
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--control-bg) 62%, var(--surface)));
  padding: 0.75rem;
}

.notification-detail-meta small,
.notification-detail-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-detail-meta small {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.notification-detail-meta strong {
  margin-top: 0.25rem;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 900;
  white-space: nowrap;
}

.notification-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding-top: 0.125rem;
}

@media (max-width: 53.75rem) {
  .notifications-modal {
    width: min(100%, calc(100vw - 1rem));
    height: calc(100dvh - 3rem);
    border-radius: 1rem;
  }

  .notifications-modal .flow-modal-head {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    padding: 0.625rem;
  }

  .notifications-modal .flow-modal-head p,
  .notifications-modal #markAllNotificationsReadBtn {
    display: none;
  }

  .notifications-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(13.75rem, 42%) minmax(0, 58%);
    background: var(--surface);
  }

  .notifications-list-panel {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line-soft);
  }

  .notification-detail-panel {
    padding: 0.75rem;
  }

  .notification-detail-meta {
    grid-template-columns: 1fr;
  }

  .task-detail-head-notice {
    display: none;
  }
}

@media (max-width: 47.5rem) {
  :root {
    --mobile-account-size: 2.75rem;
    --mobile-account-gap: 0.5rem;
    --mobile-account-inset: max(0.75rem, env(safe-area-inset-right));
    --mobile-account-top: calc(env(safe-area-inset-top) + ((var(--mobile-appbar-h, 3.625rem) - var(--mobile-account-size)) / 2));
  }

  .notification-bell {
    position: fixed !important;
    top: var(--mobile-account-top) !important;
    right: calc(var(--mobile-account-inset) + var(--mobile-account-size) + var(--mobile-account-gap)) !important;
    bottom: auto !important;
    z-index: 17000;
    width: var(--mobile-account-size);
    height: var(--mobile-account-size);
    min-width: var(--mobile-account-size);
    min-height: var(--mobile-account-size);
    max-width: var(--mobile-account-size);
    max-height: var(--mobile-account-size);
    margin: 0 !important;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line));
    border-radius: 1rem;
    background:
      radial-gradient(circle at 32% 20%, color-mix(in srgb, #fff 42%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface) 91%, var(--primary-soft));
    color: var(--primary);
    box-shadow: 0 0.625rem 1.75rem rgba(15, 23, 42, 0.14);
    transform: none;
    line-height: 1;
  }

  .notification-bell:hover,
  .notification-bell.is-active {
    transform: none;
  }

  .notification-bell .material-symbols-rounded {
    font-size: 1.3125rem;
    width: 1.3125rem;
    height: 1.3125rem;
    display: grid;
    place-items: center;
  }

  .notification-badge {
    top: -0.3125rem;
    right: -0.3125rem;
  }
}

@media (max-width: 47.5rem) {
  .mobile-account-actions {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + ((var(--mobile-appbar-h, 3.625rem) - 2.75rem) / 2)) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    z-index: 17035;
    width: 6rem;
    height: 2.75rem;
    display: grid !important;
    grid-template-columns: 2.75rem 2.75rem;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto;
  }

  .mobile-account-actions .notification-bell {
    position: relative !important;
    inset: auto !important;
  }

  .mobile-account-actions .user-menu,
  .app.sidebar-collapsed .mobile-account-actions .user-menu {
    position: static !important;
    inset: auto !important;
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .mobile-account-actions .notification-bell,
  .mobile-account-actions .user-box,
  .app.sidebar-collapsed .mobile-account-actions .user-box {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    display: grid !important;
    place-items: center !important;
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 16%, var(--line)) !important;
    border-radius: 1rem !important;
    background:
      radial-gradient(circle at 32% 20%, color-mix(in srgb, #fff 42%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface) 91%, var(--primary-soft)) !important;
    box-shadow: 0 0.625rem 1.75rem rgba(15, 23, 42, 0.14) !important;
  }

  .mobile-account-actions .notification-bell .material-symbols-rounded {
    width: 1.3125rem;
    height: 1.3125rem;
    display: grid;
    place-items: center;
    font-size: 1.3125rem;
  }
}

.api-auth-field-full {
  grid-column: 1 / -1;
}

.api-auth-field textarea {
  min-height: 7.5rem;
  resize: vertical;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--text);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.625rem 0.75rem;
}

.api-auth-ttl-row {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.5rem;
}

.content.integrations-builder-mode .api-workbench .api-list {
  gap: 0.375rem;
  padding: 0.5rem 0.625rem 0.875rem;
}

.content.integrations-builder-mode .api-folder-row {
  min-height: 1.875rem;
  grid-template-columns: 1rem 1rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding: 0 0.5rem;
}

.content.integrations-builder-mode .api-folder-row strong {
  font-size: 0.6875rem;
  letter-spacing: 0.03rem;
}

.content.integrations-builder-mode .api-folder-content {
  gap: 0.375rem;
}

.content.integrations-builder-mode .api-workbench .api-card {
  min-height: 0;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.5rem 0.625rem;
  box-shadow: none;
}

.content.integrations-builder-mode .api-workbench .api-card:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 18%, var(--surface));
  box-shadow: inset 0.125rem 0 0 color-mix(in srgb, var(--primary) 68%, transparent);
}

.content.integrations-builder-mode .api-workbench .api-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface));
  box-shadow: inset 0.1875rem 0 0 var(--primary);
}

.content.integrations-builder-mode .api-card-main {
  min-height: 0;
  grid-template-columns: 3.125rem minmax(0, 1fr) 1rem;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0;
}

.content.integrations-builder-mode .api-card-main h4 {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.25;
}

.content.integrations-builder-mode .api-card-main p {
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.content.integrations-builder-mode .api-card-open {
  color: var(--muted);
  font-size: 1rem;
  align-self: center;
}

.content.integrations-builder-mode .api-card-meta {
  min-height: 0;
  gap: 0.5rem;
  padding-left: 3.625rem;
  margin-top: 0.1875rem;
}

.content.integrations-builder-mode .api-status-chip,
.content.integrations-builder-mode .api-latency {
  font-size: 0.6562rem;
}

.td-toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 21000;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(25rem, calc(100vw - 1.5rem));
  pointer-events: none;
}

.td-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.2);
  pointer-events: auto;
  animation: td-toast-enter 160ms ease-out;
}

.td-toast.is-success {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
}

.td-toast.is-warning {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--line));
}

.td-toast.is-error {
  border-color: color-mix(in srgb, var(--red) 60%, var(--line));
}

.td-toast > .material-symbols-rounded {
  font-size: 1.1rem;
  margin-top: 0.0625rem;
  color: var(--muted);
}

.td-toast.is-success > .material-symbols-rounded {
  color: color-mix(in srgb, var(--green) 76%, #12341f);
}

.td-toast.is-warning > .material-symbols-rounded {
  color: color-mix(in srgb, var(--amber) 70%, #3f2a09);
}

.td-toast.is-error > .material-symbols-rounded {
  color: color-mix(in srgb, var(--red) 76%, #3f1010);
}

.td-toast p {
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.38;
}

.td-toast-close {
  width: 1.625rem;
  height: 1.625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  margin: -0.125rem -0.125rem 0 0;
}

.td-toast-close .material-symbols-rounded {
  font-size: 1rem;
}

.td-toast-close:hover {
  background: color-mix(in srgb, var(--line) 52%, transparent);
  color: var(--text);
}

.td-toast.is-closing {
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.td-confirm-backdrop {
  z-index: 21050;
}

.td-confirm-modal {
  width: min(31rem, calc(100vw - 2rem));
}

.td-confirm-modal .flow-modal-head {
  padding-bottom: 1.05rem;
}

.td-confirm-modal .flow-modal-footer {
  justify-content: flex-end;
  gap: 0.625rem;
}

.td-confirm-modal .flow-modal-footer .secondary-button,
.td-confirm-modal .flow-modal-footer .primary-button,
.td-confirm-modal .flow-modal-footer .danger-button {
  min-width: 8.5rem;
}

@keyframes td-toast-enter {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 52rem) {
  .td-toast-stack {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }

  .td-confirm-modal {
    width: calc(100vw - 1rem);
  }
}

/* Responsive shell stabilization (sidebar -> header -> mobile appbar). */
@media (max-width: 67.5rem) and (min-width: 47.501rem) {
  .content.routing-builder-mode {
    min-height: 100%;
    height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }

  .content.routing-builder-mode .page-view:not(.hidden),
  .content.routing-builder-mode .routing-workbench {
    min-height: 0;
    height: 100%;
  }

  .content.integrations-builder-mode {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 100%;
    height: 0;
    overflow: hidden;
  }

  .content.integrations-builder-mode .page-view:not(.hidden),
  .content.integrations-builder-mode .api-workbench {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    min-height: 4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding-inline: 0.875rem;
  }

  .sidebar-brand,
  .app.sidebar-collapsed .sidebar-brand {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
  }

  .sidebar-toggle,
  .app.sidebar-collapsed .sidebar-toggle {
    display: none !important;
  }

  .brand-copy,
  .app.sidebar-collapsed .brand-copy {
    display: block !important;
    width: auto !important;
    opacity: 1 !important;
    overflow: hidden;
    pointer-events: auto;
    white-space: nowrap;
  }

  .sidebar-brand .brand-copy strong,
  .app.sidebar-collapsed .sidebar-brand .brand-copy strong {
    font-size: 0.8125rem;
    line-height: 1.1;
  }

  .sidebar-brand .brand-copy span,
  .sidebar .brand-copy span,
  .app.sidebar-collapsed .sidebar-brand .brand-copy span {
    display: none !important;
  }

  .mobile-account-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 40px;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
  }

  .nav,
  .app.sidebar-collapsed .nav {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-height: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.125rem 0.125rem 0.125rem 0;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar,
  .app.sidebar-collapsed .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    min-width: max-content;
    min-height: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
    background-clip: padding-box;
    justify-content: flex-start;
    gap: 0.4375rem;
    padding: 0 0.5625rem;
  }

  .nav-item > .material-symbols-rounded,
  .app.sidebar-collapsed .nav-item > .material-symbols-rounded {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 20px;
  }

  .nav-label,
  .app.sidebar-collapsed .nav-label {
    display: block !important;
    width: auto !important;
    opacity: 1 !important;
    pointer-events: auto;
    font-size: 12px;
    line-height: 1.1;
  }

  .user-menu,
  .app.sidebar-collapsed .user-menu,
  .notification-bell {
    /* position: static !important; */
    /* inset: auto !important; */
    /* transform: none !important; */
  }

  .notification-bell,
  .user-box,
  .app.sidebar-collapsed .user-box {
    /* width: 40px; */
    /* min-width: 40px; */
    /* height: 40px; */
    /* min-height: 40px; */
  }

  .topbar .icon-button,
  .topbar .primary-button,
  .topbar .secondary-button,
  .topbar .danger-button {
    min-height: 38px;
  }

  .topbar .icon-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .routing-row-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
  }

  .routing-row-header h2 {
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .routing-row-header .builder-kicker {
    display: none;
  }

  .routing-row-header p {
    display: none;
  }

  .routing-row-header .builder-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 47.5rem) {
  :root {
    --mobile-account-size: 2.75rem;
    --touch-target: 44px;
  }

  .content,
  .content.tasks-board-mode,
  .content.routing-builder-mode,
  .content.integrations-builder-mode {
    padding-top: max(var(--topbar-fixed-space, 0px), calc(var(--mobile-appbar-h, 3.625rem) + env(safe-area-inset-top))) !important;
  }

  .mobile-account-actions {
    position: fixed !important;
    top: var(--mobile-account-top, calc(env(safe-area-inset-top) + ((var(--mobile-appbar-h, 3.625rem) - var(--mobile-account-size)) / 2))) !important;
    right: var(--mobile-account-inset, max(0.75rem, env(safe-area-inset-right))) !important;
    z-index: 17040;
    width: calc(var(--mobile-account-size) * 2 + var(--mobile-account-gap, 0.5rem));
    height: var(--mobile-account-size);
    display: grid !important;
    grid-template-columns: var(--mobile-account-size) var(--mobile-account-size);
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto;
  }

  .mobile-account-actions .notification-bell {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: var(--mobile-account-size) !important;
    min-width: var(--mobile-account-size) !important;
    max-width: var(--mobile-account-size) !important;
    height: var(--mobile-account-size) !important;
    min-height: var(--mobile-account-size) !important;
    max-height: var(--mobile-account-size) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-account-actions .user-menu,
  .app.sidebar-collapsed .mobile-account-actions .user-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: var(--mobile-account-size) !important;
    min-width: var(--mobile-account-size) !important;
    max-width: var(--mobile-account-size) !important;
    height: var(--mobile-account-size) !important;
    min-height: var(--mobile-account-size) !important;
    max-height: var(--mobile-account-size) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-account-actions .notification-bell,
  .mobile-account-actions .user-box,
  .app.sidebar-collapsed .mobile-account-actions .user-box {
    width: var(--mobile-account-size) !important;
    min-width: var(--mobile-account-size) !important;
    max-width: var(--mobile-account-size) !important;
    height: var(--mobile-account-size) !important;
    min-height: var(--mobile-account-size) !important;
    max-height: var(--mobile-account-size) !important;
    display: grid !important;
    place-items: center;
    border-radius: 0.875rem !important;
    padding: 0 !important;
  }

  .mobile-account-actions .notification-bell,
  .mobile-account-actions .user-box,
  .app.sidebar-collapsed .mobile-account-actions .user-box {
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
    background: var(--surface) !important;
    box-shadow: 0 0.625rem 1.375rem rgba(15, 23, 42, 0.09) !important;
  }

  .mobile-account-actions .user-box,
  .app.sidebar-collapsed .mobile-account-actions .user-box {
    grid-template-columns: 1fr !important;
  }

  .mobile-account-actions .user-box .avatar,
  .app.sidebar-collapsed .mobile-account-actions .avatar {
    width: calc(var(--mobile-account-size) - 0.625rem) !important;
    height: calc(var(--mobile-account-size) - 0.625rem) !important;
    border-radius: 999px !important;
    font-size: 0.8125rem !important;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-account-actions .user-copy,
  .mobile-account-actions .user-box-chevron,
  .app.sidebar-collapsed .mobile-account-actions .user-copy,
  .app.sidebar-collapsed .mobile-account-actions .user-box-chevron {
    display: none !important;
  }

  .mobile-account-actions .notification-bell .material-symbols-rounded,
  .mobile-account-actions .user-box .material-symbols-rounded {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem !important;
  }

  .nav-item,
  .app.sidebar-collapsed .nav-item {
    min-width: 56px;
    min-height: 56px;
    height: 56px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
    background-clip: padding-box;
    padding: 0 0.375rem;
    gap: 0.25rem;
  }

  .nav-item > .material-symbols-rounded,
  .app.sidebar-collapsed .nav-item > .material-symbols-rounded,
  .nav-item span.material-symbols-rounded,
  .app.sidebar-collapsed .nav-item span.material-symbols-rounded {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .nav-label,
  .app.sidebar-collapsed .nav-label {
    display: none !important;
  }

  .topbar .icon-button,
  .topbar .primary-button,
  .topbar .secondary-button,
  .topbar .danger-button {
    min-height: 42px;
  }

  .topbar .icon-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }
}

@media (max-width: 30rem) {
  .nav-label,
  .app.sidebar-collapsed .nav-label {
    display: none !important;
  }
}

.wallet-shell {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.wallet-hero,
.workspace-billing-kpi,
.workspace-billing-storage,
.workspace-billing-list,
.workspace-billing-row,
.wallet-balance-card,
.wallet-resource-card,
.wallet-kpi-card,
.wallet-panel-card {
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.875rem 2.125rem rgba(15, 23, 42, 0.05);
}

.info-help {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 3;
}

.info-help summary {
  list-style: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--label);
  background: color-mix(in srgb, var(--surface) 84%, var(--control-bg) 16%);
  cursor: pointer;
  user-select: none;
}

.info-help summary::-webkit-details-marker {
  display: none;
}

.info-help[open] summary {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
}

.info-help-panel {
  position: absolute;
  top: 1.75rem;
  right: 0;
  width: min(20rem, 72vw);
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 0.875rem 1.875rem rgba(15, 23, 42, 0.16);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 0.625rem 0.6875rem;
}

.wallet-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 58%),
    var(--surface);
}

.wallet-hero > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 850;
}

.wallet-hero-controls .material-symbols-rounded {
  font-size: 1.125rem;
  color: inherit;
}

.wallet-hero h2 {
  margin: 0.2rem 0;
  color: var(--panel-title);
  font-size: 1.5rem;
  line-height: 1.12;
}

.wallet-hero p {
  margin: 0;
  color: var(--muted);
}

.wallet-hero-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
}

#openMyPlanBtn {
  min-height: 2.2rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

.wallet-cycle-select {
  display: grid;
  gap: 0.22rem;
  min-width: 11rem;
}

.wallet-cycle-select span {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 850;
}

.wallet-cycle-select select {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  min-height: 2.2rem;
  padding: 0 0.62rem;
  font: inherit;
}

.workspace-billing-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0.85rem;
}

.workspace-billing-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.workspace-billing-kpi {
  padding: 0.72rem;
  display: grid;
  gap: 0.34rem;
  position: relative;
}

.workspace-billing-kpi span {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 850;
}

.workspace-billing-kpi strong {
  font-size: 1.08rem;
}

.workspace-billing-kpi small {
  color: var(--muted);
  font-size: 0.78rem;
}

.workspace-billing-progress {
  width: 100%;
  height: 0.34rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}

.workspace-billing-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary) 0%, var(--blue) 100%);
}

.workspace-billing-storage {
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
  position: relative;
}

.workspace-billing-storage header span {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 850;
}

.workspace-billing-storage header h3 {
  margin: 0.18rem 0;
  font-size: 1.2rem;
}

.workspace-storage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.64rem;
}

.workspace-storage-grid div {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.62rem;
}

.workspace-storage-grid small {
  color: var(--muted);
  font-size: 0.72rem;
}

.workspace-storage-grid strong {
  display: block;
  margin-top: 0.12rem;
}

.workspace-storage-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.workspace-billing-list {
  padding: 0.9rem;
  display: grid;
  gap: 0.8rem;
}

.workspace-billing-list header span {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 850;
}

.workspace-billing-list header h3 {
  margin: 0.22rem 0;
}

.workspace-billing-list header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

#workspaceBillingRows {
  display: grid;
  gap: 0.72rem;
}

.workspace-billing-row {
  border-color: var(--line-soft);
  background: var(--control-bg);
  padding: 0.72rem;
  display: grid;
  gap: 0.62rem;
  position: relative;
}

.workspace-billing-row h4 {
  margin: 0;
}

.workspace-billing-row small {
  color: var(--muted);
}

.workspace-billing-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.workspace-billing-metric {
  display: grid;
  gap: 0.35rem;
}

.workspace-billing-metric > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.workspace-billing-metric span {
  color: var(--muted);
  font-size: 0.8rem;
}

.wallet-balance-stack {
  display: grid;
  gap: 0.85rem;
}

.wallet-balance-card {
  padding: 0.95rem;
  display: grid;
  gap: 0.72rem;
  position: relative;
}

.wallet-balance-head h3 {
  margin: 0;
  font-size: 1.18rem;
}

.wallet-balance-head p {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.wallet-balance-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.wallet-balance-meter {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  padding: 0.64rem;
}

.wallet-balance-meter span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.wallet-balance-meter strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.15rem;
}

.wallet-balance-progress {
  margin-top: 0.45rem;
  width: 100%;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}

.wallet-balance-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary) 0%, var(--blue) 100%);
}

.wallet-usage-panel {
  min-height: 15rem;
}

#walletUsageByResourceChart {
  min-height: 16rem;
}

.wallet-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.wallet-resource-card {
  border-color: var(--line-soft);
  background: var(--control-bg);
  padding: 0.72rem;
  display: grid;
  gap: 0.55rem;
  position: relative;
}

.wallet-resource-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  margin-right: 2rem;
}

.wallet-resource-head h4 {
  margin: 0;
  font-size: 1.06rem;
}

.wallet-resource-head p {
  margin: 0.16rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.wallet-resource-head span {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
  color: color-mix(in srgb, var(--primary) 76%, var(--text));
}

.wallet-resource-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.wallet-resource-metric {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.5rem;
}

.wallet-resource-metric small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.wallet-resource-metric strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
}

.wallet-resource-progress {
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-soft);
}

.wallet-resource-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary) 0%, var(--blue) 100%);
}

.wallet-top5-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

#walletTopResourceAChart,
#walletTopResourceBChart,
#walletTopRoutingChart {
  min-height: 13.5rem;
  height: 13.5rem;
}

.wallet-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.wallet-kpi-card {
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.32rem;
}

.wallet-kpi-card span {
  color: var(--muted);
  font-size: 0.8rem;
}

.wallet-kpi-card strong {
  font-size: 1.5rem;
  line-height: 1.1;
}

.wallet-kpi-card small {
  color: var(--muted);
  font-size: 0.78rem;
}

.wallet-kpi-card-available {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.wallet-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.wallet-panel-card {
  padding: 0.9rem;
  min-height: 10rem;
  position: relative;
}

.wallet-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.wallet-panel-head span {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 850;
}

.wallet-panel-head h3 {
  margin: 0.24rem 0 0;
  color: var(--panel-title);
  font-size: 0.875rem;
  line-height: 1.25;
}

.wallet-panel-head strong {
  font-size: 0.84rem;
  margin-right: 2rem;
  color: var(--muted);
}

.wallet-cycles {
  display: grid;
  gap: 0.5rem;
}

.wallet-cycle-item {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.72rem;
  background: var(--control-bg);
}

.wallet-cycle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.wallet-cycle-head strong {
  font-size: 0.92rem;
}

.wallet-cycle-head span {
  color: var(--muted);
  font-size: 0.8rem;
}

.wallet-cycle-meta {
  display: flex;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.wallet-table-wrap {
  overflow: auto;
  max-height: 30rem;
  padding-right: 0.2rem;
}

.wallet-events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.wallet-events-table th,
.wallet-events-table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0.56rem 0.38rem;
  vertical-align: middle;
}

.wallet-events-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.56rem;
}

.wallet-events-pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.wallet-events-breadcrumb {
  color: var(--muted);
  font-size: 0.76rem;
}

.wallet-events-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.52rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}

.wallet-events-nav:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.wallet-events-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wallet-events-summary-row td {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.wallet-events-summary-row td:first-child strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
}

.wallet-events-summary-row td:first-child small {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.wallet-events-action-cell {
  text-align: center;
}

.wallet-events-action-icon {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 0.48rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: color-mix(in srgb, var(--primary) 76%, #2c1852);
  padding: 0;
  cursor: pointer;
}

.wallet-events-action-icon:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.wallet-events-action-icon .material-symbols-rounded {
  font-size: 1.04rem;
}

.wallet-events-action-disabled {
  color: var(--muted);
  font-size: 0.74rem;
}

.wallet-events-record-row td {
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.wallet-event-credit {
  font-weight: 700;
}

.wallet-event-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.14rem 0.46rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.wallet-event-status.is-charged {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: color-mix(in srgb, var(--green) 72%, #182010);
}

.wallet-event-status.is-waived {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: color-mix(in srgb, var(--amber) 72%, #2a1a00);
}

.wallet-events-empty {
  color: var(--muted);
  text-align: center;
  padding: 0.9rem 0.4rem;
}

@media (max-width: 62rem) {
  .workspace-billing-shell {
    grid-template-columns: 1fr;
  }

  .workspace-billing-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-storage-grid {
    grid-template-columns: 1fr;
  }

  .workspace-billing-metrics {
    grid-template-columns: 1fr;
  }

  .wallet-resource-grid {
    grid-template-columns: 1fr;
  }

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

  .wallet-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .workspace-billing-overview {
    grid-template-columns: 1fr;
  }

  .wallet-hero-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .wallet-cycle-select {
    min-width: 0;
  }

  .wallet-balance-meters {
    grid-template-columns: 1fr;
  }

  .wallet-resource-metrics {
    grid-template-columns: 1fr;
  }

  .wallet-top5-grid {
    grid-template-columns: 1fr;
  }

  .wallet-hero {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Compact structured-data tree inspired by developer inspection tools. */
.task-detail-structured-field {
  gap: 0.4375rem;
  padding-block: 0.5rem;
}

.task-detail-structured-field-head {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.task-detail-structured-field-label {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 0.125rem;
}

.task-detail-structured-filter {
  width: clamp(7.5rem, 18vw, 10rem);
  min-width: 6.75rem;
  min-height: 1.75rem !important;
  height: 1.75rem;
  padding: 0 0.5rem !important;
  font-size: 0.6875rem !important;
}

.task-detail-structured-filter::-webkit-search-cancel-button {
  cursor: pointer;
}

.task-detail-structured-friendly {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 0.4375rem;
  background: var(--surface);
  padding: 0;
}

.task-detail-structured-friendly > header {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  background: color-mix(in srgb, var(--control-bg) 46%, var(--surface));
  padding: 0.3125rem 0.5625rem;
}

.task-detail-structured-friendly > header > div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.task-detail-structured-head-tools {
  min-width: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.task-detail-structured-friendly > header .material-symbols-rounded {
  color: var(--primary);
  font-size: 0.9375rem;
}

.task-detail-structured-friendly > header strong {
  color: var(--panel-title);
  font-size: 0.7188rem;
  font-weight: 750;
}

.task-detail-structured-friendly > header small {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 650;
  text-overflow: ellipsis;
  min-width: 5rem;
  white-space: nowrap;
  justify-content: center;
  display: flex;
}

.task-detail-structured-collapse-toggle {
  width: 1.875rem;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0;
}

.task-detail-structured-collapse-toggle .material-symbols-rounded {
  font-size: 1rem;
}

.task-detail-structured-friendly.is-collapsed .task-detail-structured-content {
  display: none;
}

.task-detail-structured-content {
  display: block;
  max-height: min(34rem, 56vh);
  overflow: auto;
  padding: 0.3125rem 0;
  scrollbar-gutter: stable;
}

.task-detail-structured-tree {
  display: grid;
  gap: 0;
}

.task-detail-structured-tree-node {
  min-width: 0;
}

.task-detail-structured-tree-node > summary,
.task-detail-structured-tree-row {
  min-width: 0;
  min-height: 1.75rem;
  display: grid;
  grid-template-columns: 1rem 1.125rem minmax(7rem, 12rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.3125rem;
  margin: 0;
  padding: 0.1875rem 0.5625rem;
  list-style: none;
}

.task-detail-structured-tree-node > summary {
  cursor: pointer;
}

.task-detail-structured-tree-node > summary::-webkit-details-marker {
  display: none;
}

.task-detail-structured-tree-node > summary:hover,
.task-detail-structured-tree-row:hover {
  background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface));
}

.task-detail-structured-tree-chevron {
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9375rem;
  transition: transform 140ms ease;
}

.task-detail-structured-tree-node[open] > summary > .task-detail-structured-tree-chevron {
  transform: rotate(90deg);
}

.task-detail-structured-tree-spacer {
  width: 1rem;
}

.task-detail-structured-tree-type {
  width: 1.125rem;
  height: 1.125rem;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.5938rem;
  font-weight: 850;
  line-height: 1;
}

.task-detail-structured-tree-type.is-object,
.task-detail-structured-tree-type.is-array {
  color: var(--primary);
  font-size: 0.5625rem;
}

.task-detail-structured-tree-type.is-number {
  color: color-mix(in srgb, var(--primary) 76%, var(--blue));
}

.task-detail-structured-tree-type.is-boolean {
  color: var(--green);
}

.task-detail-structured-tree-type.is-null {
  color: var(--muted);
}

.task-detail-structured-tree-key {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-structured-tree-value,
.task-detail-structured-tree-node > summary > small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-structured-tree-node > summary > small {
  justify-self: start;
}

.task-detail-structured-inline-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-structured-tree-children {
  margin-left: 1.0625rem;
  border-left: 0.0625rem solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  padding-left: 0.3125rem;
}

.task-detail-structured-inline-pre,
.task-detail-structured-collapse {
  border: 0;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--control-bg) 54%, var(--surface));
  font-size: 0.625rem;
}

.task-detail-structured-inline-pre {
  max-height: 7rem;
  overflow: auto;
  padding: 0.3125rem 0.4375rem;
}

.task-detail-structured-collapse summary {
  padding: 0.1875rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
}

.task-detail-structured-text-collapse {
  width: 100%;
  min-width: 0;
}

.task-detail-structured-text-collapse > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.task-detail-structured-text-collapse > summary::-webkit-details-marker {
  display: none;
}

.task-detail-structured-text-preview {
  min-width: 0;
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-structured-text-toggle {
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.875rem;
  transition: color 140ms ease, transform 140ms ease;
}

.task-detail-structured-text-collapse > summary:hover .task-detail-structured-text-toggle,
.task-detail-structured-text-collapse[open] > summary .task-detail-structured-text-toggle {
  color: var(--primary);
}

.task-detail-structured-text-collapse[open] > summary .task-detail-structured-text-toggle {
  transform: rotate(180deg);
}

.task-detail-structured-text-collapse > .task-detail-structured-collapse-json {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-detail-structured-collapse-json {
  max-height: 16rem;
  border-top-color: var(--line-soft);
  padding: 0.4375rem;
  font-size: 0.625rem;
}

.task-detail-structured-empty {
  margin: 0;
  padding: 0.4375rem 2.6875rem;
  color: var(--muted);
  font-size: 0.6562rem;
}

.task-detail-structured-tree-node.is-filter-hidden,
.task-detail-structured-tree-row.is-filter-hidden {
  display: none !important;
}

.task-detail-structured-actions {
  justify-content: flex-end;
  gap: 0.375rem;
}

.task-detail-structured-actions .compact-action {
  min-height: 1.875rem;
  gap: 0.3125rem;
  border-radius: 0.4375rem;
  padding: 0 0.5625rem;
  font-size: 0.6562rem;
}

.task-detail-structured-actions .material-symbols-rounded {
  font-size: 0.875rem;
}

/* Expandable comments sidebar. */
.task-detail-body {
  grid-template-columns: minmax(0, 1fr) 0;
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0, 0, 1);
}

.task-detail-modal.is-comments-open .task-detail-body,
#taskDetailModal.is-comments-open .task-detail-body {
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 3fr);
}

.task-detail-comments-sidebar {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.75rem);
  transition: opacity 150ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 220ms;
}

.task-detail-modal.is-comments-open .task-detail-comments-sidebar,
#taskDetailModal.is-comments-open .task-detail-comments-sidebar {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.task-detail-modal .task-comments-toggle-button {
  display: inline-grid !important;
}

.task-comments-panel-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4375rem;
}

.task-comments-collapse-button {
  width: 1.875rem;
  height: 1.875rem;
  min-width: 1.875rem;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  background: color-mix(in srgb, var(--control-bg) 64%, var(--surface));
  color: var(--muted);
}

.task-comments-collapse-button:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  color: var(--primary);
}

.task-comments-collapse-button .material-symbols-rounded {
  font-size: 1rem;
}

@media (max-width: 73.75rem) {
  .task-detail-body,
  .task-detail-modal.is-comments-open .task-detail-body,
  #taskDetailModal.is-comments-open .task-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-detail-comments-sidebar {
    transform: translateX(105%);
  }

  .task-detail-modal.is-comments-open .task-detail-comments-sidebar,
  #taskDetailModal.is-comments-open .task-detail-comments-sidebar {
    transform: translateX(0);
  }
}

@media (max-width: 47.5rem) {
  .task-detail-structured-head-tools {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .task-detail-structured-friendly > header small {
    justify-self: end;
  }

  .task-detail-structured-filter {
    width: 100%;
    min-width: 0;
  }

  .task-detail-structured-tree-node > summary,
  .task-detail-structured-tree-row {
    grid-template-columns: 1rem 1rem minmax(4.75rem, 8rem) minmax(0, 1fr);
    gap: 0.25rem;
    padding-inline: 0.375rem;
  }

  .task-detail-structured-tree-children {
    margin-left: 0.75rem;
    padding-left: 0.1875rem;
  }
}

/* Compact scalar attributes: structured object/array/list renderers stay unchanged. */
.task-detail-compact-field {
  min-height: 2.875rem;
  grid-column: span 1 !important;
  grid-template-columns: minmax(8.5rem, 0.42fr) minmax(0, 0.58fr);
  align-content: center;
  align-items: center;
  gap: 0.75rem;
  border: 0 !important;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.3125rem 0.375rem !important;
  box-shadow: none !important;
}

.task-detail-compact-field:hover,
.task-detail-compact-field.is-editing {
  border-bottom-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft)) !important;
  background: color-mix(in srgb, var(--primary-soft) 20%, transparent) !important;
  box-shadow: none !important;
}

.task-detail-compact-label {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto auto;
  align-items: center !important;
  gap: 0.4375rem !important;
  color: var(--muted) !important;
}

.task-detail-compact-label > .material-symbols-rounded {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 1.0625rem;
  font-weight: 450;
}

.task-detail-compact-label > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7812rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-compact-field.task-detail-toggle .task-detail-compact-label > strong {
  min-height: 0;
  display: block;
  justify-content: initial;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 0.7812rem;
  font-weight: 650;
  line-height: 1.25;
  cursor: default;
}

.task-detail-compact-required {
  color: var(--primary);
  font-size: 0.75rem;
  line-height: 1;
}

.task-detail-compact-label .task-detail-magic-icon {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.75rem;
}

.task-detail-compact-value {
  min-width: 0;
  min-height: 2rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0 0.375rem;
  border-radius: 0.4375rem;
  color: var(--text) !important;
  font-size: 0.8438rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.task-detail-compact-value[role="button"] {
  cursor: text;
}

.task-detail-compact-value[role="button"]:focus-visible {
  outline: 0.125rem solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 0.0625rem;
}

.task-detail-compact-value > span:first-child {
  min-width: 0;
  display: block;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-compact-value.is-empty {
  color: color-mix(in srgb, var(--muted) 62%, transparent) !important;
  font-weight: 500 !important;
}

.task-detail-compact-edit-hint.material-symbols-rounded {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 0.9375rem;
  opacity: 0;
  transition: opacity 140ms ease;
}

.task-detail-compact-field:hover .task-detail-compact-edit-hint,
.task-detail-compact-value:focus-visible .task-detail-compact-edit-hint {
  opacity: 0.72;
}

.task-detail-compact-field.is-editing .task-detail-compact-value {
  display: none !important;
}

.task-detail-compact-editor {
  min-width: 0;
  grid-column: 2;
}

.task-detail-compact-editor input:not([type="checkbox"]),
.task-detail-compact-editor select,
.task-detail-compact-field.task-detail-toggle .task-detail-compact-editor strong {
  width: 100%;
  min-height: 2.125rem !important;
  height: 2.125rem;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
}

.task-detail-compact-toggle-control {
  display: block;
}

@media (max-width: 47.5rem) {
  .task-detail-compact-field {
    grid-template-columns: minmax(7.25rem, 0.42fr) minmax(0, 0.58fr);
    gap: 0.5rem;
    padding-inline: 0.25rem !important;
  }

  .task-detail-compact-label > strong,
  .task-detail-compact-value {
    font-size: 0.75rem !important;
  }
}

/* Compact aggregated scalar values: structured object/array trees stay unchanged. */
.task-aggregate-card.is-scalar.task-aggregate-compact-field {
  min-height: 2.875rem;
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.42fr) minmax(0, 0.58fr);
  align-content: center;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0.3125rem 0.375rem;
  box-shadow: none;
  overflow: visible;
}

.task-aggregate-card.is-scalar.task-aggregate-compact-field:hover {
  border-bottom-color: color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 20%, transparent);
}

.task-aggregated-grid > .task-aggregate-card.is-structured,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto) auto;
  align-items: stretch;
  gap: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}

.task-aggregated-grid > .task-aggregate-card.is-structured .task-aggregate-value.task-detail-structured-content,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-aggregate-value.task-detail-structured-content {
  min-height: 3rem;
  max-height: min(25rem, 46vh);
  display: block;
  overflow: auto;
  border-top: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--surface);
  padding: 0.3125rem 0;
}

.task-aggregated-grid > .task-aggregate-card.is-structured .task-detail-structured-tree,
.task-aggregated-grid > .task-aggregate-card.is-structured .task-detail-structured-tree-node,
.task-aggregated-grid > .task-aggregate-card.is-structured .task-detail-structured-tree-children,
.task-aggregated-grid > .task-aggregate-card.is-structured .task-detail-structured-tree-node > summary,
.task-aggregated-grid > .task-aggregate-card.is-structured .task-detail-structured-tree-row,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-detail-structured-tree,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-detail-structured-tree-node,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-detail-structured-tree-children,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-detail-structured-tree-node > summary,
.task-aggregated-grid > .task-aggregate-card.is-structured.task-aggregate-compact-field .task-detail-structured-tree-row {
  visibility: visible;
  opacity: 1;
}

.task-aggregate-compact-label {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4375rem;
  color: var(--muted);
}

.task-aggregate-compact-label > .material-symbols-rounded {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 1.0625rem;
  font-weight: 450;
}

.task-aggregate-compact-label > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7812rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-aggregate-compact-content {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.0625rem;
  padding: 0 0.375rem;
}

.task-aggregate-compact-content > .task-aggregate-value.task-detail-structured-content {
  min-width: 0;
  min-height: 0;
  max-height: none;
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-size: 0.8438rem;
  font-weight: 700;
  line-height: 1.25;
}

.task-aggregate-compact-content > .task-aggregate-value .task-detail-structured-inline-value {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-aggregate-compact-content > small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 550;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 47.5rem) {
  .task-aggregate-card.is-scalar.task-aggregate-compact-field {
    grid-template-columns: minmax(7.25rem, 0.42fr) minmax(0, 0.58fr);
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }

  .task-aggregate-compact-label > strong,
  .task-aggregate-compact-content > .task-aggregate-value.task-detail-structured-content {
    font-size: 0.75rem;
  }
}

/* File replacement lives directly on the current preview. */
.task-detail-file-editor {
  min-width: 0;
  display: grid;
  gap: 0.625rem;
}

.task-detail-file-editor.has-file > .task-detail-file-selected,
.task-detail-file-field.is-readonly .task-detail-file-selected:has(.task-detail-file-preview-shell) {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.task-detail-file-preview-shell {
  position: relative;
  min-width: 0;
  grid-column: 1 / -1;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 76%, var(--surface));
  isolation: isolate;
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui);
}

.task-detail-file-preview-shell .task-detail-file-preview {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-detail-file-preview-shell.is-image img {
  width: 100%;
  min-height: 10rem;
  max-height: min(22rem, 48vh);
  display: block;
  object-fit: contain;
}

.task-detail-file-preview-shell.is-document {
  min-height: 8.5rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.375rem;
  color: var(--muted);
}

.task-detail-file-preview-shell.is-document > .material-symbols-rounded {
  color: var(--primary);
  font-size: 2.5rem;
}

.task-detail-file-preview-shell.is-document > small {
  font-size: 0.6875rem;
  font-weight: 700;
}

.task-detail-file-replace-zone.task-file-dropzone {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  padding: 1rem;
  box-shadow: none;
  opacity: 0;
  transform: none;
  backdrop-filter: blur(0.125rem);
  transition: opacity 160ms ease, background-color 160ms ease;
}

.task-detail-file-replace-zone:hover,
.task-detail-file-replace-zone:focus-visible,
.task-detail-file-replace-zone:focus-within,
.task-detail-file-replace-zone.is-dragging,
.task-detail-file-replace-zone.is-processing {
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.task-detail-file-replace-zone.is-processing {
  cursor: progress;
  pointer-events: none;
}

.task-detail-file-replace-zone:focus-visible {
  outline: 0.1875rem solid var(--primary-soft);
  outline-offset: -0.25rem;
}

.task-detail-file-replace-zone.is-dragging {
  background: color-mix(in srgb, var(--primary-strong) 72%, rgba(15, 23, 42, 0.88));
}

.task-detail-file-preview-shell:has(.task-detail-file-replace-zone.is-dragging) {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-soft);
}

.task-detail-file-replace-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-align: left;
}

.task-detail-file-replace-content > .material-symbols-rounded {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  flex: 0 0 2.5rem;
  place-items: center;
  border: 0.0625rem solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.25rem;
}

.task-detail-file-replace-content > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.task-detail-file-replace-zone .task-detail-file-replace-content strong {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 800;
}

.task-detail-file-replace-content small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.6562rem;
  font-weight: 600;
}

.task-detail-file-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto auto 2rem;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  color: var(--muted);
  padding: 0.5rem;
  font-size: 0.7188rem;
}

.task-detail-file-meta > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}

.task-detail-file-meta > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-file-meta > small {
  white-space: nowrap;
}

@media (hover: none) {
  .task-detail-file-replace-zone.task-file-dropzone {
    place-items: end;
    background: transparent;
    padding: 0.5rem;
    opacity: 1;
    backdrop-filter: none;
  }

  .task-detail-file-replace-content {
    gap: 0.375rem;
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.78);
    padding: 0.4375rem 0.625rem;
  }

  .task-detail-file-replace-content > .material-symbols-rounded {
    width: 1.75rem;
    height: 1.75rem;
    flex-basis: 1.75rem;
    font-size: 1rem;
  }

  .task-detail-file-replace-content small {
    display: none;
  }

  .task-detail-file-replace-zone.is-dragging {
    place-items: center;
    background: color-mix(in srgb, var(--primary-strong) 72%, rgba(15, 23, 42, 0.88));
  }
}

@media (max-width: 47.5rem) {
  .task-detail-file-meta {
    grid-template-columns: 1.375rem minmax(0, 1fr) 2rem;
  }

  .task-detail-file-meta > small,
  .task-detail-file-meta > .task-detail-file-link {
    grid-column: 2 / -1;
    white-space: normal;
  }
}