/* Unified theme: one canonical UI system for the entire app. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* ── Final UX foundation: progressive navigation + one Guidance Center ───── */
.nav-more {
  margin: 2px 6px 4px 34px;
  border-inline-start: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .08));
}
.nav-more-toggle {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .7rem;
  font-weight: 720;
  text-align: start;
  cursor: pointer;
  opacity: .76;
}
.nav-more-toggle:hover,
.nav-more-toggle:focus-visible { opacity: 1; background: rgba(255, 255, 255, .055); }
.nav-more-items { display: none; padding: 1px 0 4px; }
.nav-more.is-open > .nav-more-items { display: flex; flex-direction: column; gap: 1px; }
.nav-more .nav-item { padding-inline-start: 10px; }
.nav-more-chevron { font-size: .86rem; }
.sidebar-foot > .nav-item { width: 100%; margin-bottom: 8px; }

.guidance-center { min-width: 0; }
.guidance-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 2px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface);
}
.guidance-tabs::-webkit-scrollbar { display: none; }
.guidance-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}
.guidance-tab.is-active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  box-shadow: inset 0 -2px 0 var(--accent);
}
.guidance-section { display: grid; gap: 16px; min-width: 0; }
.guidance-eyebrow {
  display: block;
  color: var(--accent);
  font-size: .66rem;
  font-weight: 820;
  letter-spacing: .1em;
}
.guidance-readiness {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}
.guidance-readiness h3 { margin: 4px 0 6px; font-size: 1.08rem; }
.guidance-readiness p { margin: 0; color: var(--ink-3); font-size: .8rem; }
.guidance-readiness.is-complete { border-color: color-mix(in srgb, var(--good) 46%, var(--line)); }
.guidance-readiness-count { font-size: 1.65rem; letter-spacing: -.04em; }
.guidance-task-list,
.guidance-topic-list { display: grid; gap: 8px; }
.guidance-task,
.guidance-topic {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.guidance-task:hover,
.guidance-topic:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.guidance-task.is-next { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.guidance-task.is-ready { background: color-mix(in srgb, var(--good) 5%, var(--surface-2)); }
.guidance-task-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-3);
  font-weight: 850;
}
.guidance-task.is-ready .guidance-task-icon { color: var(--good); }
.guidance-task.is-next .guidance-task-icon { color: var(--accent); }
.guidance-task-copy,
.guidance-topic > span { min-width: 0; display: grid; gap: 3px; }
.guidance-task-copy span,
.guidance-topic small { color: var(--ink-3); font-size: .74rem; line-height: 1.4; }
.guidance-task-state { color: var(--ink-3); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.guidance-page-summary { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.guidance-tips { margin: 0; padding-inline-start: 20px; color: var(--ink-2); }
.guidance-tips li + li { margin-top: 8px; }
.guidance-section input[type="search"] { width: 100%; }
.guidance-topic { grid-template-columns: minmax(0, 1fr) auto; }
.guidance-no-results { padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius-md); }

/* A click that changes content must be visually obvious, even when the changed
   surface starts below the fold. These acknowledgements never change layout. */
#view,
.ui-tabs-panel,
.cfg-guide-panel,
.auth-shell > .card,
.form-section,
[data-scroll-target] { scroll-margin-top: 92px; }

@keyframes ui-reveal-ack {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  28% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes ui-action-ack {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}
.ui-reveal-pulse { animation: ui-reveal-ack 820ms var(--ease-standard); }
.ui-action-ack { animation: ui-action-ack 360ms var(--ease-standard); }

/* Launch Center: one direct core path, with optional connections kept separate. */
.cfg-guide-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.cfg-guide-task-list { display: grid; gap: 12px; min-width: 0; }
.cfg-guide-task-group {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.cfg-guide-task-group > h3 {
  margin: 2px 6px 5px;
  color: var(--ink-3);
  font-size: .64rem;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cfg-guide-task {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.cfg-guide-task .cfg-mark { grid-column: 2; justify-self: start; }
.cfg-guide-task:hover { background: var(--surface-3); }
.cfg-guide-task.is-current {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.config-health-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--surface-2));
}
.config-health-intro h2 { margin: 4px 0 5px; font-size: 1.08rem; }
.config-health-intro p { margin: 0; color: var(--ink-3); }

@media (max-width: 1120px) {
  .cfg-guide-workspace { grid-template-columns: 1fr; }
  .cfg-guide-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cfg-guide-task-list { grid-template-columns: 1fr; }
  .config-health-intro { align-items: stretch; flex-direction: column; }
  .guidance-readiness { align-items: flex-start; }
  .guidance-task { grid-template-columns: auto minmax(0, 1fr); }
  .guidance-task-state { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .guidance-task,
  .guidance-topic { transition: none; }
  .ui-reveal-pulse,
  .ui-action-ack { animation: none; }
  .ui-reveal-pulse { outline: 2px solid color-mix(in srgb, var(--accent) 46%, transparent); }
}

/* ── Bulk campaign builder: template-first, compact, non-technical ───────── */
.campaign-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.campaign-template-card {
  min-width: 0;
  min-height: 154px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, white 4%), var(--panel));
  color: var(--ink);
  text-align: start;
  display: grid;
  align-content: start;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform .18s var(--ease-standard), border-color .18s var(--ease-standard), box-shadow .18s var(--ease-standard);
}
.campaign-template-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 12%, transparent);
}
.campaign-template-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 16px 34px color-mix(in srgb, var(--accent) 13%, transparent);
}
.campaign-template-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.campaign-template-card strong { font-size: 15px; font-weight: 800; }
.campaign-template-card .muted { font-size: 12px; line-height: 1.45; }
.channel-copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.channel-copy-editor {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, var(--surface) 6%);
  opacity: .72;
}
.channel-copy-editor.is-enabled {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.campaign-ai-box,
.audience-review-card,
.preflight-result,
.final-copy-preview {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  display: grid;
  gap: 11px;
}
.campaign-ai-box {
  grid-template-columns: minmax(180px, .65fr) minmax(240px, 1.5fr) auto;
  align-items: end;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel));
}
.campaign-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.recipient-preview-list { display: grid; gap: 1px; max-height: 250px; overflow: auto; }
.recipient-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}
.review-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--line);
}
.review-summary {
  min-width: 0;
  padding: 15px;
  display: grid;
  gap: 5px;
  background: var(--panel);
}
.review-summary strong { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.message-preview-copy { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.recipient-permission {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  display: grid;
  justify-items: start;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}
.recipient-permission:hover,
.recipient-permission:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.recipient-permission .tiny {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfg-launch-progress {
  margin: 12px 0 18px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel));
}
.cfg-launch-percent { font-size: 22px; font-weight: 800; color: var(--accent); }
.cfg-launch-track {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.cfg-launch-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6));
  transition: width .3s var(--ease-standard);
}
@media (max-width: 760px) {
  .campaign-ai-box { grid-template-columns: 1fr; }
  .campaign-audience-grid,
  .review-summary-grid { grid-template-columns: 1fr; }
}

/* Meeting lifecycle and public invitation response */
.public-response-shell {
  width: min(620px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
}

.public-response-brand {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.public-response-card {
  padding: clamp(24px, 5vw, 46px);
  border-radius: 26px;
  box-shadow: 0 28px 80px color-mix(in srgb, #0f172a 20%, transparent);
}

.public-response-card h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -.055em;
}

.field.is-hidden { display: none; }

.account-grid {
  align-items: start;
}

.account-notification-matrix {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.account-notification-head,
.account-notification-row {
  min-width: 520px;
  display: grid;
  grid-template-columns: minmax(140px, 1.35fr) repeat(var(--notify-cols, 4), minmax(72px, 1fr));
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
}

.account-notification-head {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 94%, transparent);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.account-notification-head strong.is-muted {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.account-notification-row {
  border-top: 1px solid var(--border);
}

.account-notification-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: .78rem;
  min-height: 36px;
}

.account-notification-choice.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.account-channel-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-channel-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .72rem;
  background: var(--surface);
}

.account-channel-pill strong {
  font-weight: 700;
  letter-spacing: -.01em;
}

.account-channel-pill em {
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
}

.account-channel-pill.is-ready {
  border-color: color-mix(in srgb, var(--ok, #2f9e64) 40%, var(--line));
  background: color-mix(in srgb, var(--ok, #2f9e64) 8%, var(--surface));
}

.account-channel-pill.is-off {
  border-color: color-mix(in srgb, var(--warn, #c9842f) 35%, var(--line));
  background: color-mix(in srgb, var(--warn, #c9842f) 8%, var(--surface));
}

@media (min-width: 1120px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.roster-company-select {
  max-height: 390px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 4px;
}

.roster-company-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent);
}

.roster-company-choice span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.roster-company-choice small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .campaign-template-card { transition: none; }
}

/* Self-service attendance: keep identity visible in the wide manager table. */
.attendance-team-table .data-table-scroll {
  max-height: 34rem;
}

.attendance-team-table th:first-child,
.attendance-team-table td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--surface);
}

.attendance-team-table thead th:first-child {
  z-index: 3;
}

.digest-preview-copy {
  margin: 0;
  padding: 1rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}

.digest-list {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.allowance-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.allowance-steps li {
  display: flex;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  color: var(--ink-3);
  font-weight: 700;
}

.allowance-steps li > span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.allowance-steps li.is-active,
.allowance-steps li.is-complete {
  color: var(--ink);
}

.allowance-steps li.is-active > span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.allowance-rule-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, .7fr) minmax(7rem, auto) auto;
  gap: .75rem;
  align-items: end;
  padding-block: .75rem;
  border-block-start: 1px solid var(--line);
}

.allowance-options {
  display: grid;
  gap: .65rem;
}

.leave-admin-note {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--warning, #c68b2c) 28%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning, #c68b2c) 6%, var(--surface));
}

.leave-admin-note textarea {
  width: 100%;
  resize: vertical;
}

.leave-month {
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
}

.leave-month-weekdays,
.leave-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.leave-month-weekdays {
  border-block: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.leave-month-weekdays span {
  padding: .55rem .25rem;
}

.leave-month-grid {
  border-inline-start: 1px solid var(--line);
}

.leave-month-cell {
  min-width: 0;
  min-height: 7.4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: stretch;
  padding: .55rem;
  overflow: hidden;
  border: 0;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
}

button.leave-month-cell:not(:disabled) {
  cursor: pointer;
}

button.leave-month-cell:not(:disabled):hover,
button.leave-month-cell:not(:disabled):focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.leave-month-cell.is-outside {
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
}

.leave-month-date {
  align-self: flex-end;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 800;
}

.leave-month-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .4rem;
  border-radius: .45rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  font-size: .72rem;
  font-weight: 700;
}

.leave-month-person > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-month-person-dot {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

.leave-month-more {
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 700;
}

.vault-browser {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.vault-folder-panel {
  min-width: 0;
  display: grid;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
}

.vault-folder-tree,
.vault-folder-children {
  display: grid;
  gap: .2rem;
}

.vault-folder-children {
  margin-inline-start: 1rem;
  padding-inline-start: .45rem;
  border-inline-start: 1px solid var(--line);
}

.vault-folder-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .2rem;
}

.vault-folder-toggle,
.vault-folder-name,
.vault-folder-all {
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.vault-folder-toggle:disabled {
  cursor: default;
  opacity: .45;
}

.vault-folder-name,
.vault-folder-all {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: .55rem;
  font-weight: 700;
  text-align: start;
}

.vault-folder-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-folder-name:hover,
.vault-folder-name:focus-visible,
.vault-folder-name.is-active,
.vault-folder-all:hover,
.vault-folder-all:focus-visible,
.vault-folder-all.is-active {
  outline: none;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent);
}

.vault-document-pane {
  min-width: 0;
}

.vault-breadcrumb {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin-block-end: .65rem;
}

.esign-signer-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(10rem, 1fr) minmax(12rem, 1fr) auto;
  gap: .65rem;
  align-items: end;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
}

.esign-signer-order {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-size: .72rem;
  font-weight: 800;
}

.portal-shell {
  margin-inline: auto;
}

.portal-tabs {
  display: flex;
  gap: .35rem;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  scrollbar-width: none;
}

.portal-tabs::-webkit-scrollbar {
  display: none;
}

.portal-tab {
  flex: 0 0 auto;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-weight: 800;
  cursor: pointer;
}

.portal-tab.is-active,
.portal-tab:hover,
.portal-tab:focus-visible {
  outline: none;
  background: var(--ink);
  color: var(--surface);
}

.portal-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}

.portal-balance-card,
.portal-section {
  padding: 1rem;
}

.portal-balance-card strong {
  display: block;
  margin-block: .25rem;
  font-size: 1.6rem;
  letter-spacing: -.04em;
}

.portal-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.portal-table th,
.portal-table td {
  padding: .7rem .55rem;
  border-block-end: 1px solid var(--line);
  text-align: start;
  white-space: nowrap;
}

.portal-table th {
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.setup-resume {
  display: grid;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.setup-resume input {
  min-width: 12rem;
  flex: 1;
}

.identity-list {
  display: grid;
  gap: .5rem;
}

.identity-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.identity-row:hover,
.identity-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.identity-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.identity-swatch {
  width: .75rem;
  height: 2.1rem;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .allowance-rule-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .allowance-steps {
    grid-template-columns: 1fr;
  }

  .leave-month {
    overflow-x: auto;
  }

  .leave-month-weekdays,
  .leave-month-grid {
    min-width: 46rem;
  }

  .vault-browser {
    grid-template-columns: 1fr;
  }

  .esign-signer-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .esign-signer-row > :nth-child(3),
  .esign-signer-row > :nth-child(4) {
    grid-column: 2;
  }
}

/* ── 2026 shell refinement II: depth blur + single-orb automation ───────── */
@media (min-width: 901px) {
  .app-shell.sidebar-compact .app-body {
    transition:
      filter 220ms var(--ease-standard),
      opacity 220ms var(--ease-standard);
  }

  .app-shell.sidebar-compact .app-sidebar:hover ~ .app-body,
  .app-shell.sidebar-compact .app-sidebar:focus-within ~ .app-body {
    opacity: 1;
    filter: blur(2.2px) saturate(.92);
  }
}

.smartbar {
  width: 50px;
  max-height: 50px;
  padding: 6px;
  gap: 0;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--luxury-copper) 42%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 26% 18%, color-mix(in srgb, var(--luxury-copper) 14%, transparent), transparent 46%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-3) 86%, var(--luxury-plum) 14%),
      color-mix(in srgb, var(--surface) 96%, var(--luxury-charcoal))
    );
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 12%, transparent);
  backdrop-filter: blur(20px) saturate(1.12);
  transition:
    width 220ms var(--ease-standard),
    max-height 240ms var(--ease-standard),
    border-color 220ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}

.smartbar:hover,
.smartbar:focus-within {
  width: 284px;
  max-height: 260px;
  padding: 8px;
  gap: 7px;
  border-color: color-mix(in srgb, var(--luxury-copper) 68%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--luxury-copper) 13%, transparent), transparent 40%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--luxury-plum) 11%, transparent), transparent 43%),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--surface-3) 90%, var(--luxury-plum) 10%),
      var(--surface) 68%
    );
  box-shadow:
    var(--elev-3),
    0 0 0 1px color-mix(in srgb, var(--luxury-copper) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 13%, transparent);
}

.smartbar-head {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-width: 266px;
}

.smartbar-master-orb {
  color: var(--luxury-copper);
  border-color: color-mix(in srgb, var(--luxury-copper) 42%, var(--line));
  background:
    radial-gradient(circle at 32% 22%, color-mix(in srgb, var(--luxury-ivory) 20%, transparent), transparent 38%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--luxury-copper) 16%, var(--surface-3)),
      color-mix(in srgb, var(--luxury-plum) 12%, var(--surface))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 12%, transparent),
    0 6px 16px color-mix(in srgb, var(--luxury-charcoal) 25%, transparent);
}

.smartbar-master-pulse {
  border-color: color-mix(in srgb, var(--luxury-copper) 62%, transparent);
}

.smartbar.has-missing .smartbar-master-orb { color: var(--warn); }
.smartbar.has-missing .smartbar-master-pulse {
  border-color: color-mix(in srgb, var(--warn) 68%, transparent);
}

.smartbar-head-copy strong,
.smartbar-copy strong { color: var(--ink); }

.smartbar-head-copy small,
.smartbar-copy small { color: var(--ink-3); }

.smartbar-count {
  top: -1px;
  left: 24px;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  color: color-mix(in srgb, var(--luxury-charcoal) 92%, #000);
  border: 1px solid var(--surface);
  background: var(--warn);
  box-shadow: 0 4px 10px rgba(var(--shadow-color), .28);
}

.smartbar:not(.has-missing) .smartbar-count {
  color: color-mix(in srgb, var(--luxury-charcoal) 92%, #000);
  background: var(--chart-1);
}

.smartbar:hover .smartbar-count,
.smartbar:focus-within .smartbar-count {
  min-width: 22px;
  height: 22px;
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface-4);
}

.smartbar-list {
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border-top-color: transparent;
  transform: translateY(-5px);
  transition:
    max-height 220ms var(--ease-standard),
    padding 180ms var(--ease-standard),
    opacity 150ms var(--ease-standard),
    transform 200ms var(--ease-standard),
    visibility 0s linear 220ms;
}

.smartbar:hover .smartbar-list,
.smartbar:focus-within .smartbar-list {
  max-height: 190px;
  padding-top: 7px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  border-top-color: var(--line);
  transform: none;
  transition-delay: 0s;
}

.smartbar-item:hover {
  background: color-mix(in srgb, var(--surface-4) 78%, transparent);
}

.smartbar-item.is-ready .smartbar-dot {
  color: var(--chart-1);
  background: color-mix(in srgb, var(--chart-1) 13%, var(--surface-2));
}

.smartbar-item.is-missing .smartbar-dot {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 13%, var(--surface-2));
}

.smartbar-item.is-unknown .smartbar-dot {
  color: var(--ink-3);
  background: var(--surface-3);
}

@media (max-width: 860px) {
  .smartbar:hover,
  .smartbar:focus-within {
    width: min(284px, calc(100vw - 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.sidebar-compact .app-body,
  .smartbar,
  .smartbar-list {
    transition: none;
  }
}

:root {
  /* Organization branding remains user-configurable. It owns focus, selected
     controls, and hero trim; semantic chart colours stay stable so rebranding
     can never turn payable into the same colour as receivable. */
  --accent: #3f7a37;
  --accent-2: color-mix(in srgb, var(--accent) 62%, #14532d);
  --accent-3: color-mix(in srgb, var(--accent) 50%, #0d9488);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 22%, transparent);

  /* Charcoal and warm ivory are the luxury-enterprise base. Copper hairlines
     carry hierarchy without wrapping every chart in another card. */
  --bg: #0d0e12;
  --bg-2: #121319;
  --surface: #15161c;
  --surface-2: #1a1b22;
  --surface-3: #22232b;
  --surface-4: #2b2c36;
  --ink: #f7f3ea;
  --ink-2: #e6dfd2;
  --ink-3: #b8b1a5;
  /* Was #617594 — only 3.05:1 on --surface-3, which fails WCAG AA for the
     caption/eyebrow text it carries. Lightened to clear 4.5:1 on every
     surface (worst case 5.21:1) while staying quieter than --ink-3. */
  --ink-4: #a39b8e;
  --line: rgba(214, 176, 121, .17);
  --line-strong: rgba(214, 176, 121, .30);

  --luxury-copper: #c59255;
  --luxury-copper-soft: color-mix(in srgb, var(--luxury-copper) 16%, transparent);
  --luxury-plum: #8d68b8;
  --luxury-ivory: #f7f3ea;
  --luxury-charcoal: #111217;

  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* ── Chart palette (validated, do not hand-edit) ──────────────────────────
     Fixed categorical order — assigned by slot, never cycled. Slots 1–2 are
     semantic: finance reads green as money-in and red as money-out, so those
     two are pinned and the rest are ordered around them.

     These are NOT eyeballed. The set was run through the data-viz validator
     (lightness band, chroma floor, CVD separation, normal-vision floor,
     contrast) against this app's real surfaces and passes in both modes. The
     dark column is the same hues re-stepped for the dark surface, not an
     automatic flip.

     Known WARN, accepted with relief: slots 1↔2 (money-in vs money-out) sit at
     CVD ΔE ~6.5 protan — inside the 6–8 band, which is legal only with
     secondary encoding. Every surface that plots these two ships a legend plus
     direct value labels, so identity never rests on hue alone. They cannot be
     re-hued away: green/red *is* the meaning.

     An earlier hand-picked palette failed four checks here — notably two slots
     derived from --accent that measured ΔE 5.4 apart (near-identical even to
     normal vision) and a pair indistinguishable under protanopia. Re-validate
     with the script before changing any value. */
  --chart-1: #26b98a;  /* emerald — money in / success */
  --chart-2: #d26070;  /* garnet — money out / failure */
  --chart-3: #5b7ed6;  /* royal blue */
  --chart-4: #9a74c7;  /* plum */
  --chart-5: #d29b58;  /* copper / warning */
  --chart-6: #4ca6b8;  /* mineral blue */
  --chart-7: #c77455;  /* terracotta */

  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  --grad-ok: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --grad-warn: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --grad-danger: linear-gradient(135deg, #fb7185 0%, #dc2626 100%);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent);

  /* Liquid glass (chrome only) */
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-blur: 18px;
  --glass-blur-sm: 10px;

  /* ── Elevation: ONE depth language ───────────────────────────────────────
     Clay — a soft ambient shadow plus a 1px inset top highlight, as if light
     falls from above onto a matte surface. Three tiers only:
       elev-1  resting cards, tiles, table shells
       elev-2  hover / focus-within / dragged — the "lifted" state
       elev-3  things floating over the page: drawers, modals, popovers
     Every surface picks a tier; nothing hand-rolls its own rgba, so the whole
     UI shares one light source instead of mixing flat + material + neumorphic.
     --shadow-color is re-declared per theme, so shadows stay correct in light
     mode instead of hardcoding a dark navy. */
  --shadow-color: 2, 6, 23;
  --elev-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --elev-1:
    0 1px 2px rgba(var(--shadow-color), .16),
    0 6px 16px rgba(var(--shadow-color), .18),
    var(--elev-highlight);
  --elev-2:
    0 2px 6px rgba(var(--shadow-color), .20),
    0 14px 32px rgba(var(--shadow-color), .26),
    var(--elev-highlight);
  --elev-3:
    0 8px 20px rgba(var(--shadow-color), .28),
    0 32px 68px rgba(var(--shadow-color), .38),
    var(--elev-highlight);

  /* Clay elevation (legacy aliases — resolve to the tiers above) */
  --clay-shadow: var(--elev-2);
  --clay-inset: var(--elev-highlight);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow-sm: 0 10px 24px rgba(2, 6, 23, .18);
  --shadow: 0 18px 45px rgba(2, 6, 23, .26);
  --shadow-lg: 0 28px 64px rgba(2, 6, 23, .34);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --z-sidebar: 45;
  --z-scrim: 35;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* Safe-area insets (notched phones / home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* One self-hosted variable face across the working UI and data labels.
     Script-specific fallbacks preserve the twelve-language release. */
  --font-ui: "Manrope", "Segoe UI Variable", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Arabic", "Microsoft YaHei UI", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Manrope", "Segoe UI Variable Display", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Arabic", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --font-viz: "Manrope", "Segoe UI Variable", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Arabic", "Microsoft YaHei UI", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ── Motion system ────────────────────────────────────────────────────────
     One vocabulary of easings + durations. Nothing in the app should invent
     its own cubic-bezier: pick the curve that matches the intent.
       standard — everyday state changes (colour, opacity, small moves)
       entrance — things arriving: decelerate into place, never overshoot
       exit     — things leaving: accelerate away, shorter than entrance
       spring   — affordances that should feel physical (press, pop, snap)
     Durations stay short; anything above 400ms reads as lag, not polish. */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --dur-1: 120ms;   /* instant feedback: hover tint, focus ring */
  --dur-2: 180ms;   /* small transforms, chips, buttons */
  --dur-3: 260ms;   /* cards, panels, tab ink */
  --dur-4: 380ms;   /* entrances, drawers, chart value tweens */
  --stagger: 45ms;  /* per-item delay in a staggered group */

  /* ── Type scale ───────────────────────────────────────────────────────────
     A single ~1.25 modular scale. Every text size in the app comes from here;
     line-height loosens as size drops so body copy stays readable. */
  --text-display: clamp(2rem, 3vw, 2.8rem);
  --text-h1: 1.6rem;
  --text-h2: 1.2rem;
  --text-h3: .98rem;
  --text-body: .92rem;
  --text-sm: .84rem;
  --text-caption: .74rem;
  --text-micro: .68rem;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --tracking-tight: -.04em;
  --tracking-snug: -.02em;
  --tracking-wide: .05em;
}

:root[data-theme="light"] {
  --bg: #f3efe7;
  --bg-2: #ebe5da;
  --surface: #fffdf8;
  --surface-2: #f8f4ec;
  --surface-3: #eee8dd;
  --surface-4: #e3dccf;
  --ink: #17171c;
  --ink-2: #35343b;
  --ink-3: #5d5961;
  --ink-4: #625d63;
  --line: rgba(105, 75, 42, .13);
  --line-strong: rgba(105, 75, 42, .22);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, .08);
  --shadow: 0 18px 44px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 64px rgba(15, 23, 42, .14);
  --glass: color-mix(in srgb, #ffffff 78%, transparent);
  --glass-strong: color-mix(in srgb, #ffffff 90%, transparent);
  /* Light mode: same three tiers, softer alphas (dark shadows read heavy on
     white) and a near-opaque white top highlight. */
  /* Chart palette re-stepped for the light surface (validated as a set —
     same hues, different steps, not an automatic flip). */
  --chart-1: #147d5e;
  --chart-2: #b74454;
  --chart-3: #3e63b6;
  --chart-4: #7750a7;
  --chart-5: #aa6e25;
  --chart-6: #237b8c;
  --chart-7: #a7553d;
  --shadow-color: 15, 23, 42;
  --elev-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);
  --elev-1:
    0 1px 2px rgba(var(--shadow-color), .05),
    0 6px 16px rgba(var(--shadow-color), .07),
    var(--elev-highlight);
  --elev-2:
    0 2px 6px rgba(var(--shadow-color), .07),
    0 14px 32px rgba(var(--shadow-color), .10),
    var(--elev-highlight);
  --elev-3:
    0 8px 20px rgba(var(--shadow-color), .10),
    0 32px 68px rgba(var(--shadow-color), .16),
    var(--elev-highlight);
  --clay-shadow: var(--elev-2);
  --clay-inset: var(--elev-highlight);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3efe7;
    --bg-2: #ebe5da;
    --surface: #fffdf8;
    --surface-2: #f8f4ec;
    --surface-3: #eee8dd;
    --surface-4: #e3dccf;
    --ink: #17171c;
    --ink-2: #35343b;
    --ink-3: #5d5961;
    --ink-4: #625d63;
    --line: rgba(105, 75, 42, .13);
    --line-strong: rgba(105, 75, 42, .22);
    --shadow-sm: 0 8px 20px rgba(15, 23, 42, .08);
    --shadow: 0 18px 44px rgba(15, 23, 42, .10);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .14);
    --glass: color-mix(in srgb, #ffffff 78%, transparent);
    --glass-strong: color-mix(in srgb, #ffffff 90%, transparent);
    /* Chart palette re-stepped for the light surface (validated as a set —
       same hues, different steps, not an automatic flip). */
    --chart-1: #147d5e;
    --chart-2: #b74454;
    --chart-3: #3e63b6;
    --chart-4: #7750a7;
    --chart-5: #aa6e25;
    --chart-6: #237b8c;
    --chart-7: #a7553d;
    --shadow-color: 15, 23, 42;
    --elev-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);
    --elev-1:
      0 1px 2px rgba(var(--shadow-color), .05),
      0 6px 16px rgba(var(--shadow-color), .07),
      var(--elev-highlight);
    --elev-2:
      0 2px 6px rgba(var(--shadow-color), .07),
      0 14px 32px rgba(var(--shadow-color), .10),
      var(--elev-highlight);
    --elev-3:
      0 8px 20px rgba(var(--shadow-color), .10),
      0 32px 68px rgba(var(--shadow-color), .16),
      var(--elev-highlight);
    --clay-shadow: var(--elev-2);
    --clay-inset: var(--elev-highlight);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Typography — every size resolves to the scale in :root. */
h1, h2, h3 { margin: 0; line-height: var(--leading-tight); font-family: var(--font-display); }
h1 { font-size: var(--text-display); font-weight: 800; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: var(--text-h3); font-weight: 800; letter-spacing: var(--tracking-snug); }
p { margin: 0; line-height: var(--leading-normal); }
.muted { color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-snug); }
.tiny { color: var(--ink-4); font-size: var(--text-caption); line-height: var(--leading-snug); }
/* Caption/eyebrow: the small uppercase label above a section title. */
.eyebrow {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-4);
}

.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; min-width: 0; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 80%, white 12%);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes line-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -120% 0; }
}
@keyframes skel-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes drawer-slide {
  from { transform: translateX(36px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Material roles — solid work surfaces (NO blur on tables/forms) */
.card,
.form-section,
.integration-card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.data-table-wrap,
.ops-strip {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

/* Clay elevation panels */
.ops-panel,
.page-hero,
.auth-shell .card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), var(--surface)),
    var(--surface);
  box-shadow: var(--clay-shadow);
}

.card,
.form-section { border-radius: var(--radius-lg); padding: 18px 20px; overflow: hidden; }

/* Accent hairline only on elevated clay / primary CTAs — not every card */
.ops-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 45%, var(--line));
  opacity: .7;
  pointer-events: none;
}

/* data tables: solid only — quiet edge, never glass / glow */

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label,
.field > span:first-child {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field .hint { font-size: .75rem; color: var(--ink-4); line-height: 1.45; }

input[type=text],
input[type=email],
input[type=password],
input[type=color],
input[type=number],
input[type=search],
input[type=date],
input[type=datetime-local],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}

/* <select> shipped with OS chrome (grey bevel, native arrow) which read as
   unstyled next to our inputs. Strip the platform look and draw our own
   caret as an inline SVG data-URI (CSP-safe: no external asset). */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%2395a8c8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
select:hover { border-color: var(--line-strong); }
/* The dropdown list itself is OS-drawn; set colours so it isn't stark white
   on a dark workspace. */
select option { background: var(--surface-2); color: var(--ink); }
input.date-field,
.date-field {
  width: 100%;
  min-height: 44px;
}
:root[data-theme="dark"] input.date-field,
:root:not([data-theme="light"]) input.date-field { color-scheme: dark; }
:root[data-theme="light"] input.date-field { color-scheme: light; }
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--surface-2);
}
input[type=color] { padding: 6px; cursor: pointer; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-3) 96%, transparent);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-2) var(--ease-spring),
    border-color var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    background var(--dur-2) var(--ease-standard),
    filter var(--dur-2) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .14) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .55s var(--ease-entrance);
  pointer-events: none;
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line-strong));
  box-shadow: var(--elev-2), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.btn:hover:not(:disabled)::after { transform: translateX(120%); }
/* Press: settle *below* rest and shrink a hair, on the fast curve — the
   button should feel like it takes the weight of the click. Snapping back
   uses the spring curve so release feels physical rather than mechanical. */
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
  box-shadow: none;
  transition-duration: var(--dur-1);
}
.btn:disabled { opacity: .56; cursor: not-allowed; }

/* ── Interaction layer ────────────────────────────────────────────────────
   Anything clickable states it in the same vocabulary: lift on hover, take
   weight on press. Applied to the app's existing interactive surfaces rather
   than a new class, so it covers what is already built. */
.card.is-interactive,
.chat-item,
.ui-tab,
.data-table tbody tr.is-clickable,
.fin-category-card,
a.chat-record-card {
  transition:
    transform var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    background var(--dur-2) var(--ease-standard);
}
.card.is-interactive:hover,
.fin-category-card:hover,
a.chat-record-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.card.is-interactive:active,
.fin-category-card:active,
a.chat-record-card:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
  transition-duration: var(--dur-1);
}
/* Rows shift rather than lift — a table shouldn't ripple when scanned. */
.data-table tbody tr.is-clickable:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.chat-item:active { transform: translateX(1px); transition-duration: var(--dur-1); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .card.is-interactive:hover,
  .card.is-interactive:active,
  .fin-category-card:hover,
  .fin-category-card:active,
  a.chat-record-card:hover,
  a.chat-record-card:active,
  .chat-item:active { transform: none; }
}
.btn-primary {
  border-color: transparent;
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
  box-shadow: none;
}
.btn-danger {
  color: #fff;
  border-color: transparent;
  background: var(--grad-danger);
}
.btn-sm { min-height: 34px; padding: 6px 10px; font-size: .78rem; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo,
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  flex: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-weight: 800;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
.brand-logo {
  object-fit: contain;
  padding: 4px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--line);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.03em;
}

.alert {
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 95%, transparent);
  font-size: .84rem;
}
.alert-error { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); color: var(--danger); }
.alert-ok { border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); color: var(--ok); }

.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-3) 96%, transparent);
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 800;
}
.badge-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.chip { --chip-color: var(--ink-3); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color); flex: none; }
.chip-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.steps { display: flex; gap: 6px; }
.step-dot { height: 4px; flex: 1; border-radius: 999px; background: var(--line); }
.step-dot.done { background: var(--grad-accent); }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    radial-gradient(1200px 320px at 6% -20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(900px 280px at 110% 120%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), var(--surface));
  box-shadow: var(--clay-shadow);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--clay-inset);
  pointer-events: none;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .85;
  z-index: 1;
}
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
:root[data-theme="light"] .page-hero-eyebrow {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
.page-hero h1, .page-hero h2 {
  background: linear-gradient(115deg, #fff 0%, color-mix(in srgb, var(--accent) 40%, #fff) 60%, color-mix(in srgb, var(--accent-3) 35%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
:root[data-theme="light"] .page-hero h1,
:root[data-theme="light"] .page-hero h2 {
  background: linear-gradient(115deg, var(--ink) 0%, color-mix(in srgb, var(--accent) 70%, var(--ink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero p { color: var(--ink-3); max-width: 72ch; margin-top: 8px; }
.page-hero-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.page-hero-actions,
.page-hero-side { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.page-hero-actions { margin-top: 16px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 55%, var(--line));
  opacity: .55;
}
button.metric-card { cursor: pointer; text-align: left; font: inherit; }
button.metric-card:hover,
.metric-card.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow);
}
.metric-label,
.ops-stat-label { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.metric-value,
.ops-stat-value { font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em; }
.metric-sub,
.ops-stat-sub { font-size: .74rem; color: var(--ink-3); }
.metric-tone-ok .metric-value, .ops-stat.tone-ok .ops-stat-value { color: var(--ok); }
.metric-tone-warn .metric-value, .ops-stat.tone-warn .ops-stat-value { color: var(--warn); }
.metric-tone-danger .metric-value, .ops-stat.tone-danger .ops-stat-value { color: var(--danger); }
.metric-tone-accent .metric-value, .ops-stat.tone-accent .ops-stat-value { color: color-mix(in srgb, var(--accent) 75%, white 20%); }

.form-section-head,
.ops-panel-head,
.integration-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.form-section-head { margin-bottom: 16px; }
.form-section-head h3,
.ops-panel-head h3,
.integration-card-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
}
.form-section-head p,
.ops-panel-head p { margin-top: 4px; color: var(--ink-3); font-size: .82rem; }
.form-section-index {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.form-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-2);
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-4);
  border: 1px solid var(--line);
  position: relative;
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-standard);
}
.switch input:checked + .switch-track {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.switch input:checked + .switch-track::after { transform: translateX(16px); }

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-3) 94%, transparent);
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.secret-field { position: relative; display: flex; align-items: center; }
.secret-field input { padding-right: 42px; }
.secret-reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ink-4);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}
.secret-reveal:hover { background: color-mix(in srgb, var(--surface-4) 90%, transparent); color: var(--ink-2); }

.integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.integration-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-3) 88%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.integration-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }

/* Configuration control plane — premium chrome */
.config-view .ui-tabs-bar {
  padding: 6px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--line);
  gap: 4px;
}
.config-view .ui-tab {
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}
.config-view .ui-tab.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.config-view .form-section {
  border: 1px solid var(--line);
  background:
    radial-gradient(520px 180px at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--elev-1);
}
.config-view .form-section-head h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
.config-view .field > span:first-child {
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-4);
}
.config-view .field input,
.config-view .field select,
.config-view .field textarea,
.config-view .secret-field {
  border-radius: 12px;
  min-height: 44px;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}
.config-view .form-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Configuration containment. Long credentials, translated copy, and provider
   URLs must wrap inside their own card instead of resizing neighbouring cards. */
.config-view {
  container-name: config-view;
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
}
.config-view > *,
.config-view .ui-tabs,
.config-view .ui-tabs-panel,
.config-view .stack,
.config-view .form-section,
.config-view .integration-card,
.config-view .channel-card,
.config-view .cfg-step,
.config-view .cfg-step-form,
.config-view .cfg-help,
.config-view .field,
.config-view .secret-field {
  min-width: 0;
  max-width: 100%;
}
.config-view .ui-tabs-bar {
  position: sticky;
  z-index: 18;
  top: 66px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.config-view .ui-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}
.config-view .form-section,
.config-view .integration-card,
.config-view .channel-card {
  align-self: start;
  isolation: isolate;
  overflow: clip;
}
.config-view .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.config-view :is(input, select, textarea, .secret-field) {
  min-width: 0;
  max-width: 100%;
}
.config-view :is(p, .muted, .tiny, .hint, a, code, pre, .setup-steps li) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.config-view :is(.channel-grid, .integration-grid) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.config-view .integration-card-foot,
.config-view .form-foot,
.config-view .cfg-step-actions {
  align-items: center;
}
.config-view .integration-card-foot > *,
.config-view .form-foot > *,
.config-view .cfg-step-actions > * {
  max-width: 100%;
}
.config-view .config-subcard,
.config-view .cfg-help {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px;
  background: var(--surface-2);
}
@container config-view (min-width: 1120px) {
  .config-view :is(.channel-grid, .integration-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container config-view (max-width: 760px) {
  .config-view .cfg-step,
  .config-view .config-cred-wizard {
    grid-template-columns: minmax(0, 1fr);
  }
  .config-view .ui-tabs-bar { top: 58px; }
}
[dir="rtl"] .config-view .ui-tabs-bar { direction: rtl; }
[dir="rtl"] .config-view :is(.field, .form-section-head, .integration-card) {
  text-align: start;
}

/* ── Premium insight stage ────────────────────────────────────────────────
   One unframed decision surface below the hero. Charts share the stage and
   use hairlines instead of card-inside-card chrome. */
.page-insights-host,
.page-insights,
.page-insight-grid,
.page-insight-card,
.page-insight-card > *,
.page-insight-visual {
  min-width: 0;
}
.page-insights {
  position: relative;
  overflow: clip;
  padding: 22px 24px 20px;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 28%, var(--line));
  border-radius: 24px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--luxury-copper) 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 97%, var(--luxury-ivory));
  box-shadow: 0 22px 56px color-mix(in srgb, var(--luxury-charcoal) 13%, transparent);
}
.page-insights::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, var(--luxury-copper), var(--luxury-plum));
}
.page-insights-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.page-insights-intro h2 {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.55vw, 1.48rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.page-insights-intro > p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-3);
  font-size: .8rem;
  line-height: 1.55;
  text-align: end;
}
.page-insights-eyebrow,
.page-insight-meta {
  color: var(--luxury-copper);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.page-insight-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.page-insight-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-insight-card {
  display: flex;
  flex-direction: column;
  min-height: 224px;
  max-height: none;
  overflow: visible;
  padding: 4px 24px 0;
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--luxury-copper) 22%, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-insight-card:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.page-insight-card:last-child {
  padding-inline-end: 0;
}
.page-insight-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.page-insight-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.page-insight-head p {
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: .78rem;
  line-height: 1.48;
}
.page-insight-meta {
  flex: 0 0 auto;
  max-width: 150px;
  padding-top: 3px;
  text-align: end;
}
.page-insight-visual {
  flex: 1;
  overflow: visible;
}
.page-insight-visual .donut-wrap {
  min-height: 146px;
  align-items: center;
}
.page-insight-visual .rank-row {
  min-height: 40px;
  padding-block: 6px;
}
.page-insight-visual .rank-name small,
.page-insight-visual .chart-interaction-hint {
  display: none;
}
.page-insight-visual .chart-empty {
  min-height: 144px !important;
}
.page-insights[data-state="loading"] {
  opacity: .82;
}
.page-insights[data-state="error"],
.page-insights[data-state="permission"] {
  border-style: dashed;
}
.visualization-guide {
  min-width: 0;
  margin-top: 13px;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 22%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--luxury-copper) 7%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--ink-2);
}
.visualization-guide > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.visualization-guide > summary::-webkit-details-marker { display: none; }
.visualization-guide > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}
.visualization-guide-kicker,
.visualization-guide-body span {
  color: var(--luxury-copper);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.3;
  text-transform: uppercase;
}
.visualization-guide > summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: .73rem;
  font-weight: 750;
  line-height: 1.4;
}
.visualization-guide-toggle {
  color: var(--ink-3);
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}
.visualization-guide-toggle::after {
  display: inline-block;
  margin-inline-start: 6px;
  content: "⌄";
  color: var(--luxury-copper);
  font-size: .9rem;
  transition: transform .18s var(--ease-standard);
}
.visualization-guide[open] .visualization-guide-toggle::after {
  transform: rotate(180deg);
}
.visualization-guide-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 11px 11px;
  border-top: 1px solid color-mix(in srgb, var(--luxury-copper) 15%, var(--line));
}
.visualization-guide-body > div {
  min-width: 0;
  padding: 11px 12px 2px 0;
}
.visualization-guide-body > div + div {
  padding-inline: 12px 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--luxury-copper) 15%, var(--line));
}
.visualization-guide-body p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font-size: .72rem;
  line-height: 1.5;
}
.card > .visualization-guide,
.ops-panel > .visualization-guide {
  margin-inline: 14px;
  margin-bottom: 14px;
}
.chart-arc-click:focus-visible,
.pie-seg:focus-visible,
.heatmap-cell:focus-visible,
.rank-row:focus-visible,
.ageing-segment:focus-visible,
.risk-point:focus-visible,
.stacked-column-segment:focus-visible,
.treemap-tile:focus-visible,
.range-row:focus-visible,
.dumbbell-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 64%, transparent);
  outline-offset: 3px;
}
@media (max-width: 960px) {
  .page-insight-grid { grid-template-columns: 1fr; }
  .page-insight-grid.is-three { grid-template-columns: 1fr; }
  .page-insight-card {
    padding: 20px 0 0;
    border-inline-start: 0;
    border-top: 1px solid color-mix(in srgb, var(--luxury-copper) 22%, var(--line));
  }
  .page-insight-card:first-child { padding-top: 4px; border-top: 0; }
}
@media (max-width: 620px) {
  .page-insights { padding: 17px 16px 16px 19px; border-radius: 18px; }
  .page-insights-intro { align-items: start; flex-direction: column; gap: 5px; }
  .page-insights-intro > p { text-align: start; }
  .page-insight-head { flex-direction: column; gap: 4px; }
  .page-insight-meta { max-width: none; text-align: start; }
  .visualization-guide > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .visualization-guide-kicker {
    grid-column: 1 / -1;
  }
  .visualization-guide-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .visualization-guide-body > div,
  .visualization-guide-body > div + div {
    padding: 10px 0 1px;
    border-inline-start: 0;
  }
  .visualization-guide-body > div + div {
    border-top: 1px solid color-mix(in srgb, var(--luxury-copper) 15%, var(--line));
  }
}

/* Decision-chart primitives */
.risk-quadrant-wrap,
.stacked-columns-wrap {
  min-width: 0;
}
.risk-quadrant,
.stacked-columns-chart {
  display: block;
  width: 100%;
  overflow: visible;
}
.quadrant-zone { stroke: none; }
.quadrant-zone-safe { fill: color-mix(in srgb, var(--chart-1) 7%, transparent); }
.quadrant-zone-watch { fill: color-mix(in srgb, var(--chart-5) 8%, transparent); }
.quadrant-zone-action { fill: color-mix(in srgb, var(--chart-2) 7%, transparent); }
.quadrant-zone-risk { fill: color-mix(in srgb, var(--chart-3) 9%, transparent); }
.chart-axis-line {
  stroke: color-mix(in srgb, var(--ink) 32%, var(--line));
  stroke-width: 1.25;
}
.chart-grid-line {
  stroke: color-mix(in srgb, var(--ink) 11%, transparent);
  stroke-width: 1;
}
.quadrant-threshold {
  stroke: color-mix(in srgb, var(--luxury-copper) 58%, var(--line));
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
}
.chart-axis-label,
.chart-axis-title {
  fill: var(--ink-3);
  font-family: var(--font-viz);
  font-size: 12px;
  font-weight: 750;
}
.chart-axis-title {
  fill: var(--ink-2);
  font-size: 12.5px;
  letter-spacing: .025em;
}
.risk-point,
.stacked-column-segment {
  cursor: pointer;
  stroke: color-mix(in srgb, var(--surface) 84%, transparent);
  stroke-width: 2;
  transition: filter var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
  transform-box: fill-box;
  transform-origin: center;
}
.risk-point:hover,
.risk-point:focus-visible,
.stacked-column-segment:hover,
.stacked-column-segment:focus-visible {
  filter: saturate(1.18) drop-shadow(0 4px 7px color-mix(in srgb, var(--luxury-charcoal) 25%, transparent));
  transform: scale(1.045);
}
.chart-direct-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding: 3px 4px 0 62px;
  color: var(--ink-3);
  font-size: .76rem;
}
.chart-direct-summary span,
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chart-direct-summary i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-direct-summary strong { color: var(--ink); font-weight: 800; }
.stacked-columns-wrap .chart-legend {
  justify-content: flex-end;
  margin-top: -4px;
}
.chart-small-multiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.chart-facet {
  min-width: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid color-mix(in srgb, var(--luxury-copper) 22%, var(--line));
}
.chart-facet:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.chart-facet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.chart-facet-head strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}
.chart-facet-head span {
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 750;
}
.premium-treemap {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 6px;
  min-height: 188px;
}
.treemap-tile {
  position: relative;
  display: flex;
  flex: 1 1 24%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 110px;
  overflow: hidden;
  padding: 13px 14px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  text-align: start;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tile-color) 22%, var(--surface)), color-mix(in srgb, var(--tile-color) 8%, var(--surface-2)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-color) 24%, var(--line));
  cursor: pointer;
}
.treemap-tile::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: "";
  background: var(--tile-color);
}
.treemap-label,
.range-name,
.dumbbell-name {
  color: var(--ink-2);
  font-size: .76rem;
  font-weight: 800;
}
.treemap-value {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.treemap-share { margin-top: 2px; color: var(--ink-3); font-size: .72rem; }
.range-distribution,
.dumbbell-rows {
  display: grid;
  gap: 8px;
}
.range-row,
.dumbbell-row {
  display: grid;
  grid-template-columns: minmax(105px, .8fr) minmax(160px, 2.2fr) minmax(76px, auto);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 39px;
  padding: 6px 4px;
  border: 0;
  color: var(--ink);
  text-align: start;
  background: transparent;
}
.range-track,
.dumbbell-track {
  position: relative;
  display: block;
  height: 18px;
}
.range-track::before,
.dumbbell-track::before {
  position: absolute;
  inset-inline: 0;
  top: 8px;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
}
.range-whisker,
.dumbbell-connector {
  position: absolute;
  top: 7px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--luxury-copper) 62%, var(--line));
}
.range-box {
  position: absolute;
  top: 3px;
  height: 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--chart-4) 40%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-4) 65%, transparent);
}
.range-median {
  position: absolute;
  top: 1px;
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--chart-4);
}
.dumbbell-dot {
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  margin-inline-start: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--chart-6);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--luxury-charcoal) 22%, transparent);
}
.dumbbell-dot.is-end { background: var(--chart-1); }
.dumbbell-target {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--ink-2);
  box-shadow: 0 0 0 2px var(--surface);
  transform: translateX(-50%);
}
.dumbbell-name { display: grid; min-width: 0; }
.dumbbell-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dumbbell-name small { color: var(--ink-4); font-size: .7rem; }
.range-value,
.dumbbell-value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  text-align: end;
}
@media (prefers-reduced-motion: reduce) {
  .risk-point,
  .stacked-column-segment { transition: none; }
}
@media (max-width: 620px) {
  .chart-direct-summary { padding-inline-start: 0; }
  .range-row,
  .dumbbell-row {
    grid-template-columns: minmax(78px, .7fr) minmax(120px, 2fr);
    gap: 9px;
  }
  .range-value,
  .dumbbell-value { grid-column: 2; margin-top: -7px; }
}

.public-lang-picker {
  position: fixed;
  z-index: 1200;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(14px);
}
.public-lang-select {
  min-height: 34px;
  max-width: 170px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}
.config-cred-wizard {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    radial-gradient(640px 220px at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    var(--surface);
  box-shadow: var(--elev-2);
}
.config-cred-wizard h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.config-cred-wizard p { margin: 0 0 12px; color: var(--ink-3); line-height: 1.45; }
.config-cred-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.config-cred-steps li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--line);
  font-size: .88rem;
}
.config-cred-steps .step-n {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-viz);
  font-weight: 700;
  font-size: .8rem;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.config-cred-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-3) 88%, transparent);
  border: 1px solid var(--line);
}
.config-cred-aside code {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
}
@media (max-width: 860px) {
  .config-cred-wizard { grid-template-columns: 1fr; }
}
.integration-card-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.integration-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface-4) 96%, transparent);
  color: var(--ink-3);
}
.integration-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.integration-state.is-ready,
.integration-card.is-ready { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); }
.integration-state.is-error,
.integration-card.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, var(--line)); }
.integration-state.is-testing { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.integration-card-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.data-table-wrap { border-radius: 24px; overflow: hidden; }
.data-table-toolbar,
.data-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.data-table-toolbar { border-bottom: 1px solid var(--line); }
.data-table-foot { border-top: 1px solid var(--line); color: var(--ink-3); font-size: .78rem; }
.data-table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data-table th,
table.data-table td { padding: 11px 14px; text-align: left; vertical-align: middle; }
table.data-table th {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-3));
}
.table-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table-sort-btn span { opacity: .45; font-size: .75rem; }
.table-sort-btn:hover,
.table-sort-btn.is-active { color: var(--ink-2); }
.table-sort-btn.is-active span { opacity: 1; color: var(--accent); }
table.data-table td { border-bottom: 1px solid var(--line); }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tbody tr { transition: background var(--dur-2) var(--ease-standard); }
table.data-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.data-table tbody tr.is-clickable { cursor: pointer; }
table.data-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ui-tabs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-tabs-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.ui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 12px 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.ui-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-4) 88%, transparent); }
.ui-tab.is-active { color: var(--ink); }
.ui-tabs-bar { position: relative; }
.ui-tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--grad-accent);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-3) cubic-bezier(.4, 0, .2, 1), width var(--dur-3) cubic-bezier(.4, 0, .2, 1), opacity var(--dur-2) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) { .ui-tab-ink { transition: none; } }
.ui-tab .badge { padding: 1px 6px; font-size: .62rem; }

.ui-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(4, 9, 20, .54);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-drawer-overlay {
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  }
}
.ui-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(760px, 96vw);
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 70px rgba(2, 6, 23, .36);
  animation: drawer-slide .22s cubic-bezier(.2, .8, .25, 1);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-right: var(--safe-right);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-drawer {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}
.ui-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 0;
  flex-shrink: 0;
}
.ui-drawer-body { flex: 1; overflow-y: auto; padding: 14px 22px 32px; min-width: 0; overscroll-behavior: contain; }
.ui-drawer-foot {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 22px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.ui-drawer-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; }
.ui-drawer-sub { color: var(--ink-3); font-size: .8rem; margin-top: 3px; }
.ui-drawer.company-workspace-drawer {
  width: min(1160px, 98vw);
}
.company-workspace-drawer .ui-drawer-body {
  padding-inline: clamp(16px, 2.4vw, 30px);
}
.company-workspace-drawer .ui-tabs-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.company-workspace-drawer .ui-tabs-bar::-webkit-scrollbar { display: none; }
.company-workspace-drawer .ui-tab { flex: 0 0 auto; }
.company-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.company-detail-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 88%, transparent);
}
.company-detail-item > .tiny { color: var(--ink-4); font-weight: 750; letter-spacing: .05em; }
.company-detail-item > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .88rem;
  font-weight: 650;
}

.floating-filters {
  position: sticky;
  top: 74px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: var(--glass-strong);
  box-shadow: var(--shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-filters {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}
.floating-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  color: var(--accent-2);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.floating-filters select,
.floating-filters input[type=search],
.floating-filters input[type=text],
.floating-filters input[type=date] {
  width: auto;
  min-width: 122px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
}

.skel {
  border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-3) 88%, transparent) 25%, color-mix(in srgb, white 18%, var(--surface-3)) 50%, color-mix(in srgb, var(--surface-3) 88%, transparent) 75%);
  background-size: 200% 100%;
  animation: skel-shine 1.2s ease-in-out infinite;
}
.skel-card { min-height: 74px; }
.skel-line { min-height: 14px; }
.skel-chart { height: 140px; }

.spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ui-spin .72s linear infinite;
}
.spin-ring {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--surface-2) 72%, transparent 74% 100%),
    conic-gradient(var(--accent), var(--accent-2), var(--accent-3), transparent 78%);
  animation: ui-spin .9s linear infinite;
}
.spin-ring-lg { width: 46px; height: 46px; }
.loading-block {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 36px 14px;
  color: var(--ink-3);
  text-align: center;
}

.ui-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 9, 20, .58);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-modal-overlay {
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  }
}
.ui-modal {
  width: min(440px, 100%);
  max-height: min(85dvh, 720px);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--clay-shadow);
  padding: 20px 20px 16px;
}
.ui-modal-extra { margin: 0 0 14px; }
.ui-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.ui-toast-region {
  position: fixed;
  right: max(16px, var(--safe-right));
  bottom: max(16px, var(--safe-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.ui-toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 13px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--elev-3);
  font-size: .9rem;
  cursor: pointer;
  animation: toast-slide .32s cubic-bezier(.2, .9, .3, 1) both;
}
.ui-toast::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tone, var(--accent));
}
.ui-toast::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent), transparent 60%);
}
.ui-toast-icon {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone, var(--accent)) 20%, transparent);
  color: var(--tone, var(--accent));
  font-size: .74rem;
  font-weight: 800;
}
.ui-toast-msg { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ui-toast-with-undo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ui-toast-undo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 10px;
}
.ui-toast-ok { --tone: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.ui-toast-warn { --tone: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.ui-toast-error { --tone: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.ui-toast-out { opacity: 0; transform: translateX(40px); transition: var(--dur-3) var(--ease-standard); }
@keyframes toast-slide { from { opacity: 0; transform: translateX(48px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } }

.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 64px; gap: 8px; align-items: center; }
.bar-track,
.rank-bar,
.mix-bars {
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-4) 90%, transparent);
}
.bar-track { height: 10px; }
.bar-fill,
.rank-bar > i,
.mix-a,
.mix-b { display: block; height: 100%; }
.bar-fill { background: var(--grad-accent); transition: width var(--dur-4) var(--ease-standard); }

.chart-wrap, .donut-wrap { width: 100%; }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ── Visualization card ────────────────────────────────────────────────────
   One shell for every chart: title + one-line "what am I looking at / what
   can I do", then the plot. Height grows with content so the x-axis band is
   never cut off into a nested scrollbar. */
.viz-card {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.viz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.viz-head h3 { margin: 0; }
.viz-head p { margin-top: 3px; max-width: 56ch; }
/* Two charts side by side on desktop, stacked below — never a squeezed plot. */
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: stretch; }
.viz-grid > .viz-card { height: 100%; }
.legend-swatch {
  width: 9px; height: 9px; border-radius: 3px;
  display: inline-block; margin-right: 6px; flex: none;
}

/* ── AI campaign studio ────────────────────────────────────────────────────
   A stepped composer. The stepper is the spine: it shows where you are, what
   is done, and lets you go back without losing the draft. */
.studio { display: flex; flex-direction: column; gap: 16px; }
.studio-body { display: flex; flex-direction: column; gap: 16px; }

.studio-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.studio-step-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    border-color var(--dur-2) var(--ease-standard),
    background var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard);
}
.studio-step-btn:disabled { cursor: default; opacity: .65; }
.studio-step-dot {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-4);
  color: var(--ink-3);
  font-size: var(--text-caption);
  font-weight: 800;
}
.studio-step-text { display: flex; flex-direction: column; min-width: 0; }
.studio-step-label { font-size: var(--text-sm); font-weight: 700; }
.studio-step-hint {
  font-size: var(--text-micro);
  color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.studio-step.is-current .studio-step-btn {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--ink);
  box-shadow: var(--elev-1);
}
.studio-step.is-current .studio-step-dot { background: var(--accent); color: var(--accent-ink); }
.studio-step.is-done .studio-step-dot { background: var(--chart-1); color: #04150e; }
.studio-step.is-done .studio-step-btn { color: var(--ink-2); }

.studio-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: 18px 20px;
}
.studio-label {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}

/* Choice cards — goals, audiences. Bigger hit area than a radio, and the
   supporting line explains the option without a tooltip. */
.studio-goals,
.studio-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.studio-goal,
.studio-channel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    border-color var(--dur-2) var(--ease-standard),
    background var(--dur-2) var(--ease-standard),
    transform var(--dur-2) var(--ease-standard);
}
.studio-goal span,
.studio-channel span.tiny { color: var(--ink-3); font-size: var(--text-caption); line-height: var(--leading-snug); }
.studio-goal:hover,
.studio-channel:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.studio-goal:active,
.studio-channel:active { transform: translateY(0); transition-duration: var(--dur-1); }
.studio-goal.is-active,
.studio-channel.is-active {
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: var(--elev-1);
}
.studio-channel-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.studio-audience {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 13px 15px;
}
.studio-audience-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.studio-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-foot-note { margin-left: auto; font-size: var(--text-caption); color: var(--ink-4); }

/* Draft cards — one per channel, each independently accepted or rewritten. */
.studio-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.studio-draft { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.studio-draft.is-accepted { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--line)); }
.studio-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.studio-count { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--ink-4); }
.studio-draft-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-refine { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.studio-refine[hidden] { display: none; }
.studio-refine input[type=text] { flex: 1; }

.studio-generating {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.studio-spark {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 12px;
  background: var(--grad-accent);
  color: var(--accent-ink);
  animation: studio-pulse 1.6s var(--ease-standard) infinite;
}
@keyframes studio-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .studio-spark { animation: none; } }

.studio-send {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 17px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

/* Team coverage — one stacked bar, segments split by a surface gap. */
.coverage { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.coverage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.coverage-head strong { font-size: var(--text-sm); }
.coverage-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-4) 70%, transparent);
}
.coverage-bar > span { border-radius: 999px; transition: width var(--dur-4) var(--ease-standard); }
.coverage-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.coverage-key { display: inline-flex; align-items: center; font-size: var(--text-caption); color: var(--ink-3); }

/* ── Chart tooltip ─────────────────────────────────────────────────────────
   Replaces the native <title> tooltip: themed, instant, and able to show every
   series at the hovered x instead of a single value. */
.chart-tip {
  position: fixed;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition:
    opacity var(--dur-1) var(--ease-standard),
    transform var(--dur-1) var(--ease-standard);
  min-width: 132px;
  max-width: 260px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: var(--elev-3);
  font-size: var(--text-caption);
  color: var(--ink);
}
.chart-tip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.chart-tip-title {
  font-weight: 800;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.chart-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.chart-tip-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.chart-tip-label { color: var(--ink-3); }
.chart-tip-value { margin-left: auto; font-family: var(--font-mono); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .chart-tip { transition: none; } }

/* Draw-in: the plot traces itself on mount and on every filter change, so new
   data reads as the chart redrawing rather than snapping. */
.chart-line.is-animated {
  stroke-dasharray: var(--dash, 1200);
  stroke-dashoffset: var(--dash, 1200);
  animation: chart-draw 900ms var(--ease-entrance) forwards;
}
.chart-area.is-animated { animation: chart-area-in var(--dur-4) var(--ease-entrance) both; animation-delay: 160ms; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-area-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line.is-animated { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .chart-area.is-animated { animation: none; }
}

/* Designed empty state — keeps the card's shape so nothing reflows on load. */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--ink-4);
}
.chart-empty-art { color: color-mix(in srgb, var(--accent) 42%, var(--ink-4)); opacity: .5; }
.chart-empty-title { font-weight: 750; font-size: var(--text-sm); color: var(--ink-2); }
.chart-empty-msg { font-size: var(--text-caption); max-width: 34ch; line-height: var(--leading-snug); }

/* Skeleton mirrors the real layout: plot block, axis ticks, legend chips. */
.chart-skeleton { display: flex; flex-direction: column; gap: 10px; }
.chart-skeleton-plot,
.chart-skeleton-axis span,
.chart-skeleton-legend span {
  border-radius: 10px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface-3) 70%, transparent) 0%,
      color-mix(in srgb, var(--surface-4) 90%, transparent) 50%,
      color-mix(in srgb, var(--surface-3) 70%, transparent) 100%);
  background-size: 220% 100%;
  animation: skel-shine 1.5s var(--ease-standard) infinite;
}
.chart-skeleton-plot { width: 100%; border-radius: var(--radius); }
.chart-skeleton-axis { display: flex; justify-content: space-between; gap: 8px; }
.chart-skeleton-axis span { height: 8px; width: 100%; max-width: 46px; }
.chart-skeleton-legend { display: flex; gap: 12px; }
.chart-skeleton-legend span { height: 10px; width: 76px; }
@media (prefers-reduced-motion: reduce) {
  .chart-skeleton-plot,
  .chart-skeleton-axis span,
  .chart-skeleton-legend span { animation: none; }
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; font-size: .78rem; color: var(--ink-3); }
.chart-legend-col { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-btn { width: 100%; border: 0; background: transparent; padding: 2px 0; color: inherit; text-align: left; cursor: pointer; }
.chart-legend-dot, .action-hub-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chart-arc-click { cursor: pointer; }
.chart-hit.is-interactive { cursor: pointer; outline: none; }
.chart-hit.is-interactive:focus {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.chart-dot.is-active {
  stroke: var(--surface);
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 30%, transparent));
}
.chart-interaction-hint {
  margin-top: 6px;
  color: var(--ink-4);
  font-size: .7rem;
  font-weight: 650;
  text-align: center;
}

/* ── Composition charts (pareto / waterfall / bullet / funnel) ───────────── */
/* Marks are buttons, so they carry the same hover-lift and focus ring as the
   rest of the app rather than inventing a chart-only interaction language. */
.chart-note {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--ink-3);
}
.chart-note strong { color: var(--ink); font-weight: 700; }

.pareto-bar, .wf-bar {
  transition: opacity var(--dur-1) var(--ease-standard),
              filter var(--dur-1) var(--ease-standard);
}
.pareto-bar.is-interactive, .wf-bar.is-interactive { cursor: pointer; outline: none; }
.pareto-bar.is-interactive:hover, .wf-bar.is-interactive:hover {
  filter: brightness(1.12);
}
.pareto-bar.is-interactive:focus-visible, .wf-bar.is-interactive:focus-visible {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.bullet-list { display: grid; gap: 6px; }
.bullet-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(90px, 2fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
  transition: border-color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
button.bullet-row { cursor: pointer; }
button.bullet-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.bullet-name { display: grid; min-width: 0; }
.bullet-name > span { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bullet-name small { color: var(--ink-4); font-size: .72rem; }
.bullet-track {
  position: relative;
  display: block;
  height: 16px;
  border-radius: 8px;
  background: var(--surface);
  overflow: visible;
}
/* The band is the "to target" region; the fill is actual. Two weights of the
   same track, never two competing bars. */
.bullet-band {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink-4) 16%, transparent);
}
.bullet-fill {
  position: absolute; inset: 3px auto 3px 0;
  border-radius: 6px;
  transition: width var(--dur-3) var(--ease-entrance);
}
.bullet-fill.is-pos { background: var(--chart-1); }
.bullet-fill.is-warn { background: var(--chart-5); }
.bullet-fill.is-neg { background: var(--chart-2); }
.bullet-fill.is-neutral { background: var(--chart-3); }
.bullet-target {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: var(--ink-2);
  border-radius: 1px;
}
.bullet-value { display: grid; justify-items: end; white-space: nowrap; }
.bullet-value strong { font-family: var(--font-mono); font-size: .84rem; }
.bullet-value small { font-size: .7rem; font-weight: 650; }
.bullet-value small.is-pos { color: var(--chart-1); }
.bullet-value small.is-warn { color: var(--chart-5); }
.bullet-value small.is-neg { color: var(--chart-2); }
.bullet-value small.is-neutral { color: var(--ink-4); }

.funnel-chart { display: grid; gap: 0; }
.funnel-stage {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
  transition: border-color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
button.funnel-stage { cursor: pointer; }
button.funnel-stage:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.funnel-count { font-family: var(--font-mono); font-weight: 700; }
.funnel-track {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--surface);
  overflow: hidden;
}
.funnel-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width var(--dur-3) var(--ease-entrance);
}
.funnel-hint { color: var(--ink-4); font-size: .72rem; }
/* The gap between stages carries the conversion rate — the number people
   actually act on — instead of leaving it to be inferred from two bars. */
.funnel-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 26px;
  position: relative;
  font-size: .74rem;
  color: var(--ink-4);
}
.funnel-step::before {
  content: "";
  position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 2px;
  background: var(--line-strong);
}
.funnel-step-rate { font-family: var(--font-mono); font-weight: 700; }
.funnel-step.is-ok .funnel-step-rate { color: var(--chart-1); }
.funnel-step.is-weak .funnel-step-rate { color: var(--chart-5); }

@media (prefers-reduced-motion: reduce) {
  .bullet-fill, .funnel-fill, .pareto-bar, .wf-bar,
  .bullet-row, .funnel-stage { transition: none; }
}

@media (max-width: 640px) {
  .bullet-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bullet-row .bullet-track { grid-column: 1 / -1; }
}

/* ── AI reply picker ─────────────────────────────────────────────────────── */
/* Each option is one button covering the whole card: the entire variant is the
   click target, so choosing never depends on hitting a small "use this" link. */
.reply-options { display: grid; gap: 10px; }
.reply-option {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-3);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-1) var(--ease-standard);
}
.reply-option:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.reply-option-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reply-option-head strong { font-size: .86rem; }
.reply-option-head small { color: var(--ink-4); font-size: .72rem; }
.reply-option-text {
  color: var(--ink-2);
  font-size: .84rem;
  line-height: var(--leading-normal);
  /* Long drafts stay scannable; the full text lands in the composer anyway. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.reply-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Sign in — split brand / form ────────────────────────────────────────── */
/* A lone card on an empty page gave the product no chance to say what it is
   before asking for a password. The brand half carries the workspace's own
   identity; the form half stays deliberately quiet so the inputs are the only
   thing competing for attention. */
.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(90% 80% at 88% 92%, color-mix(in srgb, var(--accent-3) 24%, transparent), transparent 62%),
    var(--bg-2);
  border-right: 1px solid var(--line);
}
.auth-aside-glow {
  position: absolute;
  inset: -20% -30% auto -30%;
  height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(40px);
  animation: mesh-drift 26s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
.auth-aside-top { position: relative; display: flex; align-items: center; gap: 14px; }
.auth-aside-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.auth-aside-legal { color: var(--ink-4); font-size: .76rem; }
.auth-aside-body { position: relative; max-width: 30ch; }
.auth-aside-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}
.auth-aside-copy { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: var(--leading-normal); }
.auth-aside-points {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: .84rem;
}
.auth-aside-points li { display: flex; align-items: center; gap: 10px; }
.auth-point-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  flex: none;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--bg);
}
.auth-form-wrap { width: 100%; max-width: 380px; }
.auth-panel-brand { margin-bottom: 22px; }
/* The form sits directly on the panel rather than in a card: a card inside a
   half-page panel is a box inside a box. */
.auth-form { gap: 14px; }
.auth-heading h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.auth-foot { text-align: center; margin-top: 4px; }

@media (max-width: 860px) {
  /* The brand half is decoration; on a phone the form is the whole job. */
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-panel { min-height: 100vh; min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-aside-glow { animation: none; }
}

/* ── Smartbar — integration health rail ──────────────────────────────────── */
/* Docked in the right gutter and only as wide as three dots until the reader
   hovers or tabs into it, so it never sits on top of page content. The width
   change is the only thing that animates; the items do not reflow. */
.smartbar {
  position: fixed;
  top: max(74px, calc(58px + var(--safe-top)));
  right: max(10px, var(--safe-right));
  z-index: 40;
  display: grid;
  gap: 8px;
  width: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--elev-2);
  transition: width var(--dur-2) var(--ease-standard),
              background var(--dur-2) var(--ease-standard);
}
.smartbar:hover,
.smartbar:focus-within { width: 288px; }

.smartbar-grip {
  height: 3px;
  width: 22px;
  margin: 0 auto 2px;
  border-radius: 2px;
  background: var(--line-strong);
}

.smartbar-list { display: grid; gap: 6px; }

.smartbar-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}
.smartbar-item:hover { background: var(--surface-3); border-color: var(--line); }
.smartbar-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.smartbar-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
}
.smartbar-item.is-ready .smartbar-dot {
  background: color-mix(in srgb, var(--chart-1) 20%, transparent);
  color: var(--chart-1);
}
.smartbar-item.is-missing .smartbar-dot {
  background: color-mix(in srgb, var(--chart-2) 20%, transparent);
  color: var(--chart-2);
}
.smartbar-item.is-unknown .smartbar-dot {
  background: color-mix(in srgb, var(--ink-4) 18%, transparent);
  color: var(--ink-3);
}

/* The pulse is a ring that expands and fades — it never changes the dot's own
   size, so the rail cannot jitter its neighbours. Unconfigured pulses faster
   and further: it is asking to be dealt with. */
.smartbar-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.smartbar-item.is-ready .smartbar-pulse {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-1) 55%, transparent);
  animation: smartbar-pulse-calm 3.2s var(--ease-standard) infinite;
}
.smartbar-item.is-missing .smartbar-pulse {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-2) 65%, transparent);
  animation: smartbar-pulse-alert 1.7s var(--ease-standard) infinite;
}
@keyframes smartbar-pulse-calm {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-1) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--chart-1) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-1) 0%, transparent); }
}
@keyframes smartbar-pulse-alert {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-2) 60%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--chart-2) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chart-2) 0%, transparent); }
}

/* Labels exist in the DOM at all times for screen readers; only their box is
   collapsed, so the rail is never a set of unlabelled coloured dots. */
.smartbar-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard);
}
.smartbar:hover .smartbar-copy,
.smartbar:focus-within .smartbar-copy { opacity: 1; }
.smartbar-copy strong { font-size: .8rem; white-space: nowrap; }
.smartbar-copy small { color: var(--ink-3); font-size: .7rem; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .smartbar, .smartbar-item, .smartbar-copy { transition: none; }
  .smartbar-pulse { animation: none; }
  /* Without motion the state still has to read at a glance, so the ring
     becomes a static halo rather than disappearing. */
  .smartbar-item.is-missing .smartbar-pulse {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-2) 40%, transparent);
  }
}

@media (max-width: 900px) {
  /* No gutter to hide in on narrow screens: sit under the topbar, stay small,
     and expand downward when opened rather than covering the page width. */
  .smartbar { top: auto; bottom: 14px; right: 10px; }
}

/* ── Language picker ─────────────────────────────────────────────────────── */
.lang-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--ink-3);
}
.lang-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Right-to-left ───────────────────────────────────────────────────────── */
/* Only the rules that hardcode a physical side need a mirror; anything already
   written with flex/grid or logical properties flips on its own from
   <html dir="rtl">, which i18n.js sets. */
[dir="rtl"] .nav-item,
[dir="rtl"] .nav-group-toggle,
[dir="rtl"] .sidebar-search { text-align: right; }
[dir="rtl"] .nav-group-chevron { transform: scaleX(-1); }
[dir="rtl"] .bullet-band,
[dir="rtl"] .bullet-fill { inset: 3px 0 3px auto; }
[dir="rtl"] .funnel-step { padding: 5px 26px 5px 12px; }
[dir="rtl"] .funnel-step::before { left: auto; right: 14px; }
[dir="rtl"] .reply-option-head,
[dir="rtl"] .funnel-head { flex-direction: row-reverse; }
[dir="rtl"] .lead-reject-row small { margin-left: 0; margin-right: auto; }
[dir="rtl"] .studio-budget-over { margin-left: 0; margin-right: auto; }

/* ── Lead list import ────────────────────────────────────────────────────── */
.lead-import textarea { margin-top: 4px; }
.lead-report {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lead-rejects { display: grid; gap: 4px; }
/* Skipped rows are shown verbatim with their reason — "12 rows failed" cannot
   be acted on, but the line and the cause can be fixed in one pass. */
.lead-reject-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--chart-2) 10%, transparent);
}
.lead-reject-row code {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-2);
}
.lead-reject-row small { color: var(--ink-3); font-size: .72rem; margin-left: auto; }

/* ── Campaign send budget ────────────────────────────────────────────────── */
/* The daily ceiling shown as a plan, not an error. A row turns red before the
   send button is pressed, so the author narrows the audience deliberately. */
.studio-budget {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.studio-budget-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.studio-budget-ch {
  min-width: 84px;
  font-weight: 650;
  font-size: .84rem;
}
.studio-budget-bar { color: var(--ink-3); font-size: .78rem; }
.studio-budget-row.is-over .studio-budget-ch,
.studio-budget-row.is-over .studio-budget-bar { color: var(--chart-2); }
.studio-budget-over {
  margin-left: auto;
  color: var(--chart-2);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.reply-style {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.reply-style > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink-2);
}
.reply-style > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reply-style-body { display: grid; gap: 10px; padding: 0 14px 14px; }
.reply-style-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reply-style-body button { justify-self: start; }

@media (max-width: 640px) {
  .reply-style-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reply-option { transition: none; }
}

.rank-list { display: grid; gap: 6px; }
.rank-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.2fr) minmax(40px, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: inherit;
}
button.rank-row { cursor: pointer; text-align: left; font: inherit; }
button.rank-row:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.rank-num { font-size: .72rem; color: var(--ink-4); font-weight: 700; }
.rank-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rank-name small { color: var(--ink-4); font-size: .72rem; }
.rank-bar { height: 6px; position: relative; }
.rank-bar > i { border-radius: inherit; background: var(--grad-ok); }
.rank-bar > i.is-neg { background: var(--grad-danger); }
.rank-bar.is-diverging { overflow: visible; border-radius: 3px; }
.rank-bar.is-diverging::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--ink-4);
}
.rank-bar.is-diverging > i {
  position: absolute;
  top: 0;
  border-radius: 3px;
}
.rank-value { font-size: .82rem; white-space: nowrap; }
.rank-value.is-pos { color: var(--ok); }
.rank-value.is-neg { color: var(--danger); }

.ageing-chart { display: grid; gap: 12px; }
.ageing-track {
  display: flex;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-4);
}
.ageing-segment {
  display: block;
  min-width: 2px;
  height: 100%;
  padding: 0;
  border: 0;
}
button.ageing-segment,
button.ageing-legend-item { cursor: pointer; }
button.ageing-segment:hover,
button.ageing-segment:focus-visible { filter: brightness(1.12); }
.ageing-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
}
.ageing-legend-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 90%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
}
button.ageing-legend-item:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.ageing-legend-item > span:not(.chart-legend-dot),
.ageing-value { display: flex; flex-direction: column; gap: 1px; }
.ageing-legend-item small { color: var(--ink-4); font-size: .68rem; }
.ageing-value { align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }

.status-breakdown { display: grid; gap: 10px; }
.status-split {
  display: flex;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-4);
}
.status-split > button {
  min-width: 2px;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.status-split > button:hover,
.status-split > button:focus-visible { filter: brightness(1.12); }
.status-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.status-tile {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 90%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.status-tile:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.status-tile > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mix-row { display: block; width: 100%; padding: 8px 0; border: 0; background: transparent; color: inherit; text-align: left; }
button.mix-row { cursor: pointer; font: inherit; }
.mix-head { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; margin-bottom: 4px; }
/* Two-value comparison bar. A 2px surface gap separates the fills rather than
   a drawn border, and the fills use the validated series slots so this bar
   agrees with every chart beside it. */
.mix-bars { display: flex; height: 8px; gap: 2px; }
.mix-a,
.mix-b { border-radius: 999px; transition: width var(--dur-4) var(--ease-standard); }
.mix-a { background: var(--chart-1); }
.mix-b { background: var(--chart-2); }
.mix-meta { margin-top: 4px; font-size: .72rem; color: var(--ink-4); }

.pie-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pie-selector-svg { flex: none; }
.pie-selector .pie-seg { cursor: pointer; transition: opacity var(--dur-2) var(--ease-standard), filter var(--dur-2) var(--ease-standard); }
.pie-selector .pie-seg path { transition: transform var(--dur-2) cubic-bezier(.2, .8, .25, 1); transform-origin: center; }
.pie-selector .pie-seg:hover path { transform: scale(1.035); }
.pie-selector .pie-seg:hover { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent)); }
.pie-selector .pie-seg.is-active path { transform: scale(1.06); }
.pie-selector .pie-seg.is-active { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 65%, transparent)); }
.pie-selector .pie-seg.is-dim { opacity: .35; }
.pie-selector-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.pie-selector-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.pie-selector-legend-item:hover { background: color-mix(in srgb, var(--surface-4) 86%, transparent); }
.pie-selector-legend-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pie-selector-legend-item strong { margin-left: auto; }

.heatmap { display: grid; gap: 8px; }
.heatmap-scroll { overflow-x: auto; }
.heatmap-grid { display: grid; gap: 3px; width: fit-content; }
.heatmap-corner, .heatmap-col-label, .heatmap-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  white-space: nowrap;
  color: var(--ink-4);
  font-size: .64rem;
  font-weight: 800;
}
.heatmap-row-label { justify-content: flex-end; }
.heatmap-cell {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface-4) 86%, transparent);
  font-size: 0;
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
button.heatmap-cell { cursor: pointer; }
button.heatmap-cell:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent);
}
.heatmap-legend { display: flex; align-items: center; gap: 5px; font-size: .66rem; color: var(--ink-4); }
.heatmap-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

.leave-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.leave-kpi { padding: 14px; }
.leave-list { display: flex; flex-direction: column; gap: 10px; }
.leave-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-3) 94%, transparent);
}
.leave-reason { margin: 8px 0; font-size: .9rem; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.empty {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 34px 14px;
  color: var(--ink-3);
}
.empty svg { color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 34%, transparent)); }

/* Auth / setup shells — clay elevation cards */
.auth-shell {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.auth-shell-wide { width: min(100%, 620px); }
.auth-shell .brand { justify-content: center; }
.auth-shell .card {
  padding: 28px 26px;
  border-radius: var(--radius-lg);
}
.btn-block { width: 100%; }

/* Messaging chat */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 240px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}
.chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.chat-bubble.is-assistant {
  align-self: flex-start;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.chat-bubble.is-user {
  align-self: flex-end;
  background: var(--surface-2);
}
.chat-bubble-body { white-space: pre-wrap; font-size: .9rem; }
.chat-bubble-meta { margin-top: 2px; }
.chat-record-grid {
  display: grid;
  gap: 7px;
  min-width: min(520px, 70vw);
  margin-top: 10px;
}
.chat-record-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
a.chat-record-card:hover,
a.chat-record-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: var(--elev-2);
}
.chat-record-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.chat-record-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.chat-record-title {
  overflow: hidden;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-record-subtitle {
  overflow: hidden;
  color: var(--ink-2);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-record-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.chat-record-meta > span {
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: .62rem;
  font-weight: 720;
}
.chat-record-action {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 820;
  white-space: nowrap;
}
.chat-composer { display: flex; gap: 8px; align-items: center; }
.chat-composer input { flex: 1; }
button.chat-intent {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex;
}
@media (max-width: 640px) {
  .chat-record-grid { min-width: 0; }
  .chat-record-card { grid-template-columns: 34px minmax(0, 1fr); }
  .chat-record-action {
    grid-column: 2;
    justify-self: start;
  }
}

.att-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.att-dow { text-align: center; font-size: .68rem; font-weight: 800; color: var(--ink-3); letter-spacing: .05em; padding: 2px 0 4px; }
.att-day {
  min-height: 56px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .68rem;
}
.att-day-clickable { cursor: pointer; transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.att-day-clickable:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.att-day-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.att-day-num { font-weight: 700; color: var(--ink-2); }
.att-day-status { color: var(--ink-3); }
.att-present { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.att-wfh { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.att-leave, .att-half-day, .att-halfday { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.att-absent { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.att-weekend { opacity: .5; }
.att-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.att-leg { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.att-team { display: flex; flex-direction: column; gap: 8px; }
.att-team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
}

.ops-hub { display: flex; flex-direction: column; gap: 16px; }
.ops-bento { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 960px) { .ops-bento { grid-template-columns: 1fr; } }

/* ── Editorial bento home ─────────────────────────────────────────────── */
.home-hero {
  position: relative;
  isolation: isolate;
}
.home-hero .home-hero-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}
.home-hero .home-hero-aurora::before,
.home-hero .home-hero-aurora::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 180%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.home-hero .home-hero-aurora::before {
  top: -60%;
  left: -8%;
  background: radial-gradient(closest-side, var(--accent), transparent);
  animation: aurora-a 18s ease-in-out infinite alternate;
}
.home-hero .home-hero-aurora::after {
  top: -40%;
  right: -6%;
  background: radial-gradient(closest-side, var(--accent-2), transparent);
  animation: aurora-b 22s ease-in-out infinite alternate;
}
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(12%, 8%, 0) scale(1.18); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-10%, 6%, 0) scale(1); } }
.home-hero-clock {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.home-hero-clock b { color: var(--ink); font-weight: 700; }
.home-hero .page-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}
.home-hero .page-hero-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.home-cal {
  width: min(176px, 42vw);
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--elev-1);
}
.home-cal-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.home-cal .cal-clock {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.home-cal-month {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-grid-mini .cal-dow {
  text-align: center;
  padding: 1px 0;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cal-grid-mini .cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1;
  color: var(--ink-2);
}
.cal-grid-mini .cal-cell.is-empty { visibility: hidden; }
.cal-grid-mini .cal-cell.is-weekend { color: var(--ink-4); }
.cal-grid-mini .cal-cell.is-today {
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
@media (max-width: 720px) {
  .home-hero .page-hero-inner { grid-template-columns: 1fr; }
  .home-cal { width: 100%; max-width: 220px; }
}

.home-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.home-bento > * { grid-column: span 12; margin: 0; }
@media (min-width: 900px) {
  .home-bento > .b-4 { grid-column: span 4; }
  .home-bento > .b-5 { grid-column: span 5; }
  .home-bento > .b-6 { grid-column: span 6; }
  .home-bento > .b-7 { grid-column: span 7; }
  .home-bento > .b-8 { grid-column: span 8; }
}
.home-bento .ops-panel { height: 100%; }

/* Dense tables keep tabular figures; display/KPI values use proportional
   figures so large amounts do not look artificially loose. */
.badge,
.data-table td.num,
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat-num,
.ops-stat-value,
.metric-value,
.ops-stat-label + .ops-stat-value,
.pie-legend-value,
.chart-tip-value,
.rank-row-value,
.home-cal-meta,
.circular-range-output {
  font-family: var(--font-viz);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  font-weight: 700;
}
.ops-stat-label,
.stat-label,
.metric-label {
  font-family: var(--font-ui);
  letter-spacing: .06em;
}

/* Tiles flow to fill their container. This was locked to two columns, so a
   full-width card (Finance spans all 12) drew a 2×2 block and left half the
   card empty. auto-fit lets four tiles sit in one row when there is room and
   fold to 2×2 only when there genuinely isn't. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22%, 190px), 1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.stat-cell:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: var(--elev-1); }
.stat-cell .stat-label { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.stat-cell .stat-num { font-size: 1.5rem; font-weight: 700; }
.stat-cell .stat-sub { font-size: .72rem; color: var(--ink-4); }
.stat-cell.tone-ok .stat-num { color: var(--ok); }
.stat-cell.tone-warn .stat-num { color: var(--warn); }
.stat-cell.tone-danger .stat-num { color: var(--danger); }

/* Assistant tile — signature CTA, links to messaging */
.assistant-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 180px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--clay-shadow);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.assistant-tile:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }
.assistant-tile h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.assistant-tile p { color: var(--ink-3); font-size: .86rem; max-width: 34ch; }
.assistant-tile .assistant-cue { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.assistant-tile kbd {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-3); font-family: var(--font-mono);
  font-size: .8rem; font-weight: 700; color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .home-hero-aurora::before,
  .home-hero .home-hero-aurora::after { animation: none; }
}

/* Circular range slider (self-hosted web component) */
circular-range {
  --circular-range-fill: var(--accent);
  --circular-range-fill-start: var(--accent);
  --circular-range-fill-middle: var(--accent-2);
  --circular-range-fill-end: var(--accent-3);
  --circular-range-track: color-mix(in srgb, var(--ink) 12%, transparent);
  --circular-range-thumb: var(--accent);
  --circular-range-output-c: var(--ink);
  --circular-range-output-ff: var(--font-mono);
  --circular-range-labels-c: var(--ink-3);
  --circular-range-indice-c: color-mix(in srgb, var(--ink) 28%, transparent);
  --circular-range-w: 100%;
  --circular-range-maw: 240px;
}
.dial-field { display: grid; gap: 6px; justify-items: center; text-align: center; }
.dial-field > .field-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ops-panel { border-radius: 24px; padding: 18px 20px; overflow: hidden; }
.ops-strip { display: flex; flex-wrap: wrap; border-radius: 24px; overflow: hidden; }
.ops-strip .ops-stat:last-child { border-right: 0; }
.ops-stat {
  flex: 1 1 120px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  transition: background var(--dur-2) var(--ease-standard);
}
button.ops-stat { cursor: pointer; text-align: left; font: inherit; }
button.ops-stat:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.action-hub-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.action-hub-list,
.queue-list,
.workforce-rail { display: flex; flex-direction: column; gap: 6px; }
.action-hub-list { flex: 1; min-width: 200px; max-height: 280px; overflow-y: auto; }
.action-hub-item,
.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.action-hub-item:hover,
.queue-item:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--elev-1);
}
.action-hub-item.is-dim { opacity: .42; }
.action-hub-item.is-focus {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.workforce-rail { max-height: 300px; overflow-y: auto; }
.workforce-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.workforce-row:hover { background: color-mix(in srgb, var(--surface-4) 84%, transparent); border-color: var(--line); }
.workforce-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 60%, white 24%);
}
.workforce-meta { flex: 1; min-width: 0; }
.workforce-meta strong { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workforce-meta small { color: var(--ink-4); font-size: .7rem; }
.workforce-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.workforce-dot.is-online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.workforce-dot.is-idle { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.workforce-dot.is-offline { background: var(--ink-4); }
.workforce-hours { font-size: .72rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
}
.list-row + .list-row { margin-top: 6px; }
.list-row .grow { flex: 1; min-width: 0; }
.soa-currency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.soa-ccy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; font-size: .8rem; }
.soa-ccy-card { border: 1px solid var(--line); }
.soa-action-bar { margin-top: 2px; }
.soa-panel {
  min-width: 0;
  font-family: var(--font-ui);
  letter-spacing: -.006em;
}
.easy-soa-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm), var(--clay-inset);
}
.easy-soa-tool,
.easy-soa-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-2) 92%, transparent));
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  gap: 6px;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.easy-soa-tool { min-height: 38px; padding: 6px 10px; }
.easy-soa-shortcut { min-height: 28px; padding: 4px 8px; }
.easy-soa-shortcut.mini {
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 9px;
}
.easy-soa-tool:hover,
.easy-soa-shortcut:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.easy-soa-tool.primary,
.easy-soa-shortcut.primary {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: var(--grad-accent);
  color: var(--accent-ink);
}
.easy-soa-tool.net,
.easy-soa-shortcut.net {
  border-color: color-mix(in srgb, #0ea5e9 32%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #0ea5e9 12%, var(--surface)), color-mix(in srgb, #0ea5e9 7%, var(--surface-2)));
}
.easy-soa-shortcut.danger {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  color: var(--danger);
}
.easy-soa-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: var(--clay-inset);
  font-size: .78rem;
}
.easy-soa-tool.primary .easy-soa-action-icon,
.easy-soa-shortcut.primary .easy-soa-action-icon { background: rgba(255, 255, 255, .16); }
.easy-soa-shortcut .easy-soa-action-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  border-radius: 8px;
  font-size: .68rem;
}
.easy-soa-shortcut.mini .easy-soa-action-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border-radius: 7px;
  font-size: .6rem;
}
.easy-soa-action-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}
.easy-soa-action-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: .67rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.easy-soa-tool .easy-soa-action-copy strong { font-size: .72rem; }
.easy-soa-action-copy small {
  overflow: hidden;
  color: var(--ink-4);
  font-size: .52rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.easy-soa-tool.primary .easy-soa-action-copy small { color: rgba(255, 255, 255, .74); }
.easy-soa-shortcut .easy-soa-action-copy small { display: none; }
.easy-soa-shortcut.mini .easy-soa-action-copy strong { font-size: .6rem; }
.easy-soa-statement-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.easy-soa-statement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}
.easy-soa-statement-head strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -.02em;
}
.easy-soa-statement-head span {
  color: var(--ink-4);
  font-size: .72rem;
  text-align: right;
}
.easy-soa-excel-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.easy-soa-excel-table {
  width: 100%;
  min-width: 720px;
  table-layout: auto;
  border-collapse: collapse;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.easy-soa-excel-table th {
  padding: 10px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--ink-4);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
.easy-soa-excel-table th:nth-child(5),
.easy-soa-excel-table th:nth-child(6),
.easy-soa-excel-table th:nth-child(7),
.easy-soa-excel-table td:nth-child(5),
.easy-soa-excel-table td:nth-child(6),
.easy-soa-excel-table td:nth-child(7) { text-align: right; }
.easy-soa-excel-table td {
  padding: 10px 9px;
  border-right: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.32;
  overflow-wrap: break-word;
  vertical-align: middle;
}
.easy-soa-excel-table td:last-child,
.easy-soa-excel-table th:last-child { border-right: 0; }
.easy-soa-excel-row.receivable td { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.easy-soa-excel-row.payable td { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.easy-soa-excel-row.neutral td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.easy-soa-excel-row:hover td { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.easy-soa-excel-row td strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.easy-soa-excel-row td small {
  display: block;
  margin-top: 2px;
  color: var(--ink-4);
  font-size: .69rem;
  line-height: 1.28;
}
.easy-soa-month-separator td {
  padding: 7px 9px;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.easy-soa-month-separator span {
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.easy-soa-excel-detail-row > td {
  padding: 0;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.easy-soa-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 10px;
  padding: 10px;
  border-left: 4px solid var(--accent);
}
.easy-soa-detail-copy,
.easy-soa-detail-actions {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.easy-soa-detail-actions {
  align-content: start;
  display: grid;
  gap: 8px;
}
.easy-soa-detail-title {
  color: var(--ink-3);
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.easy-soa-detail-main {
  margin-top: 5px;
  color: var(--ink-2);
  font-weight: 850;
  word-break: break-word;
}
.easy-soa-detail-sub,
.easy-soa-detail-line span {
  color: var(--ink-4);
  font-size: .72rem;
}
.easy-soa-detail-lines {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}
.easy-soa-detail-line {
  display: grid;
  grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr);
  gap: 8px;
}
.easy-soa-detail-line strong { color: var(--ink-2); font-size: .75rem; }
.easy-soa-shortcuts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.easy-soa-money-in { color: var(--ok) !important; font-weight: 900; }
.easy-soa-money-out { color: var(--danger) !important; font-weight: 900; }
.easy-soa-money-in,
.easy-soa-money-out {
  font-family: var(--font-mono);
  font-size: .74rem;
  white-space: nowrap;
}
.easy-soa-balance {
  display: inline-grid;
  justify-items: end;
  min-width: 0;
  gap: 1px;
}
.easy-soa-balance strong {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}
.easy-soa-balance small {
  display: block;
  color: var(--ink-4);
  font-size: .61rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.easy-soa-balance.receivable strong { color: var(--ok); }
.easy-soa-balance.payable strong { color: var(--danger); }
.easy-soa-balance.settled strong { color: var(--ink-3); }
.easy-soa-kind {
  display: inline-grid;
  min-width: 84px;
  max-width: 100%;
  gap: 1px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  text-align: left;
}
.easy-soa-kind strong {
  overflow: hidden;
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.easy-soa-kind small {
  overflow: hidden;
  color: var(--ink-4);
  font-size: .59rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.easy-soa-kind.receivable {
  border-color: color-mix(in srgb, var(--ok) 26%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 8%, var(--surface)), color-mix(in srgb, var(--ok) 5%, var(--surface-2)));
}
.easy-soa-kind.receivable strong { color: var(--ok); }
.easy-soa-kind.payable {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, var(--surface)), color-mix(in srgb, var(--danger) 5%, var(--surface-2)));
}
.easy-soa-kind.payable strong { color: var(--danger); }
.easy-soa-kind.payment {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface-2)));
}
.easy-soa-kind.payment strong { color: var(--accent); }
.easy-soa-kind.advance,
.easy-soa-kind.netting {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 8%, var(--surface)), color-mix(in srgb, var(--warn) 5%, var(--surface-2)));
}
.easy-soa-kind.advance strong,
.easy-soa-kind.netting strong { color: var(--warn); }
.easy-soa-status-wrap {
  display: inline-grid;
  justify-items: start;
  gap: 2px;
}
.easy-soa-status-wrap small {
  color: var(--ink-4);
  font-size: .62rem;
  font-weight: 750;
}
.easy-soa-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 950;
  white-space: nowrap;
}
.easy-soa-status.received {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}
.easy-soa-status.partial {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.easy-soa-status.pending {
  background: color-mix(in srgb, var(--surface-4) 82%, transparent);
  color: var(--ink-3);
}
.easy-soa-empty {
  padding: 18px !important;
  color: var(--ink-3);
  text-align: center !important;
}
@media (max-width: 900px) {
  .company-workspace-drawer .ui-drawer-body { padding-inline: 12px; }
  .easy-soa-excel-table { font-size: .72rem; }
  .easy-soa-excel-table th,
  .easy-soa-excel-table td { padding: 8px 6px; }
  .easy-soa-detail-panel { grid-template-columns: 1fr; }
  .easy-soa-statement-head { align-items: flex-start; flex-direction: column; }
  .easy-soa-statement-head span { text-align: left; }
  .easy-soa-tool .easy-soa-action-copy small { display: none; }
}
.color-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }
.fin-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fin-activity-tile,
.fin-category-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: inherit;
  cursor: pointer;
}
.fin-activity-tile { padding: 14px; }
.fin-category-card { padding: 12px; }
.fin-activity-tile:hover,
.fin-category-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--elev-1); }
.fin-tile-val { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; }
.fin-tops-grid,
.fin-split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.fin-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fin-overview-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.fin-overview-bento > .card { min-width: 0; }
.fin-bento-activity { grid-column: span 5; }
.fin-bento-ageing { grid-column: span 7; }
.fin-bento-cash { grid-column: span 8; }
.fin-bento-currency { grid-column: span 4; }
.fin-bento-trend { grid-column: span 7; }
.fin-bento-category { grid-column: span 5; }
@media (max-width: 1100px) {
  .fin-overview-bento > .card { grid-column: 1 / -1; }
}

.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.channel-card { display: flex; flex-direction: column; }
.setup-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .8rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.setup-steps li::marker { color: var(--accent); font-weight: 800; }
.cfg-health.is-ready { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cfg-jump .btn { font-size: .8rem; }

/* ── outreach chat (two-way conversations) ─────────────────────────────── */
.chat-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  min-height: 540px;
  max-height: 72vh;
}
.chat-list {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-list-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.chat-state-rail {
  display: flex;
  gap: 6px;
  padding: 9px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}
.chat-state-rail::-webkit-scrollbar { display: none; }
.chat-state-rail button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 750 .69rem/1.1 inherit;
  cursor: pointer;
}
.chat-state-rail button:hover,
.chat-state-rail button:focus-visible,
.chat-state-rail button.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--ink);
}
.chat-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font: inherit;
}
.chat-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.chat-item.is-active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.chat-item .chat-dot { width: 8px; height: 8px; border-radius: 50%; }
.chat-item .chat-snippet {
  font-size: .76rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-unread {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.chat-thread { display: flex; flex-direction: column; min-width: 0; }
.chat-thread-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chat-thread-tools {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--luxury-copper) 7%, var(--surface-2)),
      var(--surface-2));
}
.chat-thread-tools > label {
  min-width: 150px;
  display: grid;
  gap: 3px;
}
.chat-thread-tools > label > span {
  color: var(--ink-3);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.chat-tool-select {
  width: 100%;
  min-height: 34px;
  padding-block: 5px;
  font-size: .76rem;
}
.chat-bubbles {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-bubble {
  max-width: min(76%, 560px);
  padding: 8px 12px;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-bubble.out {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-bottom-right-radius: 4px;
}
.chat-bubble.in {
  align-self: flex-start;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-bubble.failed { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.chat-bubble .chat-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: .66rem;
  color: var(--ink-2);
  margin-top: 4px;
  justify-content: flex-end;
}
.chat-attachments {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.chat-attachments a {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
}
.chat-attachments a:hover,
.chat-attachments a:focus-visible { background: color-mix(in srgb, currentColor 7%, transparent); }
.chat-attachments a span { min-width: 0; overflow-wrap: anywhere; }
.chat-attachments a small { margin-inline-start: auto; opacity: .7; white-space: nowrap; }
.chat-internal-note {
  padding: 11px 12px;
  border-inline-start: 3px solid var(--luxury-copper);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--luxury-copper) 8%, var(--surface-2));
  overflow-wrap: anywhere;
}
.chat-bubble.in .chat-meta { justify-content: flex-start; }
.chat-day-sep {
  align-self: center;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  margin: 6px 0;
}
.chat-compose {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.chat-compose textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 140px;
}
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: .86rem;
  padding: 30px;
  text-align: center;
}
@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; max-height: none; }
  .chat-list { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
}

.app-shell {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: minmax(100vh, auto);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}
.app-shell > .app-sidebar { grid-column: 1; grid-row: 1; }
.app-shell > .app-body { grid-column: 2; grid-row: 1; min-width: 0; }
.app-shell > .app-atmosphere,
.app-shell > .app-nav-scrim,
.app-shell > .assistant-fab {
  grid-column: 1 / -1;
  grid-row: 1;
}
.app-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(4, 9, 20, .28);
  transition: opacity var(--dur-3) var(--ease-standard);
  z-index: var(--z-scrim);
}
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px;
  overflow-y: auto;
  border-right: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background:
    radial-gradient(460px 300px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(320px 320px at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, #10192d 94%, transparent), color-mix(in srgb, #0b1222 98%, transparent));
  box-shadow: 22px 0 56px rgba(2, 6, 23, .22);
  z-index: var(--z-sidebar);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar {
    background:
      radial-gradient(460px 300px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
      radial-gradient(320px 320px at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 65%),
      var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}
.app-sidebar .brand { padding: 4px 8px 10px; }
.app-sidebar .brand-name,
.app-sidebar .nav-item,
.app-sidebar .sidebar-foot .btn { color: #f8fbff; }
.app-sidebar .tiny,
.app-sidebar .nav-section,
.app-sidebar .nav-group-toggle { color: rgba(228, 238, 255, .56); }
.app-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section {
  margin: 10px 8px 4px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-group { margin-bottom: 4px; }
.nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 2px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-group-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
/* The items list now lives in the DOM permanently (toggling it in JS used to
   rebuild the whole app), so open/closed is a CSS state. grid-template-rows
   0fr→1fr animates to the content's natural height without hardcoding one. */
.nav-group-items {
  display: grid;
  grid-template-rows: 0fr;
  gap: 2px;
  padding-left: 2px;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--dur-3) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard),
    visibility 0s linear var(--dur-3);
}
.nav-group.is-open > .nav-group-items {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--dur-3) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard) 60ms,
    visibility 0s linear 0s;
}
/* Single collapsing child — 0fr only works when the grid has one row. */
.nav-group-items-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .nav-group-items,
  .nav-group.is-open > .nav-group-items { transition: none; }
}
.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.nav-item:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .08);
  transform: translateX(1px);
}
.nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-foot { margin-top: auto; padding: 10px 12px 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.app-nav-scrim { display: none; }
.app-body { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; transition: opacity var(--dur-3) var(--ease-standard); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-strong);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-topbar {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}
.app-topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
}
.theme-toggle {
  min-width: 52px;
  text-transform: capitalize;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 88%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.theme-switch-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.theme-switch-btn.is-active {
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
.theme-switch-ico { font-size: .9rem; line-height: 1; }
:root[data-theme="light"] .theme-switch {
  background: #fff;
  border-color: rgba(15, 23, 42, .1);
}
.app-main {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 22px 24px 56px;
}
/* Staggered page entrance: sections arrive in reading order, ~45ms apart, so
   the eye is led down the page instead of everything popping at once.
   Views mount as `.app-main > <view-root> > [hero, content-stack]`, so what a
   user reads as a "section" is the hero and each card inside the content
   stack — not the view root, which is a bare wrapper. Animating the wrapper
   as well would nest transforms and double-fade its children, so the wrapper
   stays still and the two real levels carry the stagger.
   Capped at 8 steps — past that the last card reads as broken, not
   choreographed. */
.app-main > * { animation: none; }
.app-main > * > *,
.app-main > * > .stack > * {
  animation: card-enter var(--dur-4) var(--ease-entrance) both;
}
.app-main > * > *:nth-child(1),
.app-main > * > .stack > *:nth-child(1) { animation-delay: 0ms; }
.app-main > * > *:nth-child(2),
.app-main > * > .stack > *:nth-child(2) { animation-delay: var(--stagger); }
.app-main > * > *:nth-child(3),
.app-main > * > .stack > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.app-main > * > *:nth-child(4),
.app-main > * > .stack > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.app-main > * > *:nth-child(5),
.app-main > * > .stack > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.app-main > * > *:nth-child(6),
.app-main > * > .stack > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.app-main > * > *:nth-child(7),
.app-main > * > .stack > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.app-main > * > *:nth-child(n+8),
.app-main > * > .stack > *:nth-child(n+8) { animation-delay: calc(var(--stagger) * 7); }

/* Reusable stagger for any list/grid rendered after load (rows, cards, chips).
   Set --i on each child; the group shares one curve. */
.stagger-in > * {
  animation: card-enter var(--dur-3) var(--ease-entrance) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce) {
  .app-main > *,
  .app-main > * > *,
  .app-main > * > .stack > *,
  .stagger-in > * { animation: none; }
}
.app-menu-btn { display: none; }

/* Scroll atmosphere — CSS scenes (no external images; CSP-safe).
   The base is a slow-drifting brand mesh: one oversized gradient whose
   background-position travels over 26s, so the field never sits still but is
   far too low-contrast to compete with foreground copy. */
.app-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 12%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 55%),
    radial-gradient(110% 85% at 85% 25%, color-mix(in srgb, var(--accent-2) 11%, transparent) 0%, transparent 58%),
    radial-gradient(120% 95% at 60% 92%, color-mix(in srgb, var(--accent-3) 9%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-size: 190% 190%, 175% 175%, 200% 200%, 100% 100%;
  background-position: 0% 50%, 100% 20%, 50% 100%, 0 0;
  animation: mesh-drift 26s var(--ease-standard) infinite alternate;
}
.app-atmosphere-layer {
  position: absolute;
  inset: -8%;
  opacity: 0;
  transition: opacity .55s var(--ease-standard);
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
/* Each scene breathes on its own clock so the composite never visibly loops. */
.app-atmosphere-layer.is-active { animation: scene-breathe 34s var(--ease-standard) infinite alternate; }
.app-atmosphere-layer[data-scene="1"].is-active { animation-duration: 29s; animation-direction: alternate-reverse; }
.app-atmosphere-layer[data-scene="2"].is-active { animation-duration: 38s; }

@keyframes mesh-drift {
  0%   { background-position: 0% 50%, 100% 20%, 50% 100%, 0 0; }
  50%  { background-position: 60% 20%, 30% 80%, 20% 40%, 0 0; }
  100% { background-position: 100% 60%, 0% 60%, 80% 10%, 0 0; }
}
/* transform-only → stays on the compositor, costs no repaint */
@keyframes scene-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, -1%, 0) scale(1.06); }
}

/* Standalone pages (login / setup / portal / sign) have no app shell, so the
   same mesh lives on a fixed body layer behind their content. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 10%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 55%),
    radial-gradient(110% 85% at 88% 22%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0%, transparent 58%),
    radial-gradient(120% 95% at 55% 95%, color-mix(in srgb, var(--accent-3) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-size: 190% 190%, 175% 175%, 200% 200%, 100% 100%;
  background-position: 0% 50%, 100% 20%, 50% 100%, 0 0;
  animation: mesh-drift 26s var(--ease-standard) infinite alternate;
}

/* Motion is decoration here: with reduced-motion the mesh freezes at a
   composed, still-attractive position rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  .app-atmosphere,
  body::before,
  .app-atmosphere-layer.is-active,
  .app-atmosphere-layer[data-scene="1"].is-active,
  .app-atmosphere-layer[data-scene="2"].is-active {
    animation: none;
    background-position: 30% 40%, 70% 40%, 40% 70%, 0 0;
  }
}
.app-atmosphere-layer.is-active { opacity: 1; }
.app-atmosphere-layer[data-scene="0"] {
  background:
    radial-gradient(900px 520px at 12% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 58%),
    radial-gradient(720px 480px at 88% 8%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%),
    radial-gradient(640px 420px at 70% 90%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 60%);
}
.app-atmosphere-layer[data-scene="1"] {
  background:
    radial-gradient(820px 500px at 78% 22%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 56%),
    radial-gradient(680px 460px at 18% 72%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    radial-gradient(540px 360px at 48% 40%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 62%);
}
.app-atmosphere-layer[data-scene="2"] {
  background:
    radial-gradient(760px 540px at 40% 88%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 58%),
    radial-gradient(700px 440px at 8% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(620px 400px at 92% 48%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%);
}
.app-atmosphere-grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Premium assistant launcher — one compact control wired to the existing
   assistant drawer. It stays within the safe area and remains thumb-sized. */
.assistant-fab {
  position: fixed;
  right: max(24px, var(--safe-right));
  bottom: calc(max(24px, calc(16px + var(--safe-bottom))) + 62px);
  z-index: calc(var(--z-sidebar) + 2);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  align-items: center;
  padding: 0;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #c9895b 52%, var(--line));
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, #c9895b 28%, transparent), transparent 45%),
    linear-gradient(145deg, #34223d, #171522 64%, #11131b);
  box-shadow:
    0 16px 34px rgba(10, 8, 18, .28),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .3);
  color: #fff8ed;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard);
}
.assistant-fab:hover,
.assistant-fab:focus-visible,
.assistant-fab[aria-expanded="true"] {
  transform: translateY(-3px) scale(1.025);
  border-color: #dfa978;
  box-shadow:
    0 20px 42px rgba(18, 10, 28, .34),
    0 0 0 4px color-mix(in srgb, #c9895b 17%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
.assistant-fab-icon {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .28));
}
.assistant-fab-ring {
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, #c9895b 38%, transparent);
  border-radius: 22px;
  opacity: 0;
  animation: assistant-fab-breathe 3.4s var(--ease-standard) infinite;
}
.assistant-fab-status {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid #221827;
  border-radius: 999px;
  background: #42d69b;
  box-shadow: 0 0 0 3px rgba(66, 214, 155, .12);
}
.assistant-fab-label {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 2px;
  width: max-content;
  max-width: min(220px, calc(100vw - 94px));
  display: grid;
  gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--elev-2);
  color: var(--ink);
  text-align: start;
  opacity: 0;
  transform: translateX(6px) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.assistant-fab-label strong { font-size: .78rem; font-weight: 800; }
.assistant-fab-label small { color: var(--ink-3); font-size: .66rem; }
.assistant-fab:hover .assistant-fab-label,
.assistant-fab:focus-visible .assistant-fab-label {
  opacity: 1;
  transform: translateX(0) scale(1);
}
@keyframes assistant-fab-breathe {
  0%, 70%, 100% { opacity: 0; transform: scale(.94); }
  82% { opacity: .76; transform: scale(1.08); }
}

/* Floating help button — same corner as the assistant greeter (stacked
   directly beneath it), always available so "replay the tour" / "show the
   checklist" is never lost once someone dismisses either the first time. */
.help-fab-wrap {
  position: fixed;
  right: max(24px, var(--safe-right));
  bottom: max(24px, calc(16px + var(--safe-bottom)));
  z-index: calc(var(--z-sidebar) + 2);
}
.help-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--glass-strong);
  box-shadow: var(--clay-shadow);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
@supports (backdrop-filter: blur(1px)) {
  .help-fab {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}
.help-fab:hover, .help-fab:focus-visible { border-color: var(--accent); }
.help-fab-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--clay-shadow);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.help-fab-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.help-fab-menu-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.help-fab-menu-item:hover, .help-fab-menu-item:focus-visible { background: var(--surface-3); }
.help-fab-menu-item.is-primary { font-weight: 650; color: var(--accent); }

/* Brand-led navigation. `--accent` comes from Configuration → Organization,
   so the sidebar follows the customer's chosen colour in every theme. */
.app-sidebar {
  color: #f8fbff;
  background:
    radial-gradient(420px 280px at -8% -4%,
      color-mix(in srgb, var(--accent) 58%, transparent), transparent 68%),
    radial-gradient(340px 360px at 108% 104%,
      color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 46%, #111b30) 0%,
      color-mix(in srgb, var(--accent) 18%, #0b1324) 58%,
      color-mix(in srgb, var(--accent) 9%, #08101e) 100%);
  border-right-color: color-mix(in srgb, var(--accent) 34%, rgba(148, 163, 184, .18));
  box-shadow:
    14px 0 38px rgba(2, 6, 23, .22),
    1px 0 0 color-mix(in srgb, var(--accent) 16%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar {
    background:
      radial-gradient(420px 280px at -8% -4%,
        color-mix(in srgb, var(--accent) 58%, transparent), transparent 68%),
      radial-gradient(340px 360px at 108% 104%,
        color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%),
      linear-gradient(160deg,
        color-mix(in srgb, var(--accent) 44%, rgba(17, 27, 48, .98)),
        color-mix(in srgb, var(--accent) 10%, rgba(8, 16, 30, .99)));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

:root[data-theme="light"] .app-sidebar {
  color: var(--ink);
  background:
    radial-gradient(420px 300px at -8% -4%,
      color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
    radial-gradient(340px 360px at 108% 104%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent) 24%, #fff) 0%,
      color-mix(in srgb, var(--accent) 12%, #f8fafc) 55%,
      color-mix(in srgb, var(--accent) 6%, #f1f5f9) 100%);
  border-right-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow:
    12px 0 34px color-mix(in srgb, var(--accent) 12%, rgba(15, 23, 42, .12)),
    1px 0 0 color-mix(in srgb, var(--accent) 18%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .app-sidebar {
    background:
      radial-gradient(420px 300px at -8% -4%,
        color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
      radial-gradient(340px 360px at 108% 104%,
        color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
      linear-gradient(155deg,
        color-mix(in srgb, var(--accent) 23%, rgba(255, 255, 255, .96)),
        color-mix(in srgb, var(--accent) 7%, rgba(248, 250, 252, .98)));
  }
}

.app-sidebar .brand-name,
.app-sidebar .nav-item-label,
.app-sidebar .sidebar-search strong {
  color: #f8fbff;
}

.app-sidebar .tiny,
.app-sidebar .nav-group-toggle {
  color: rgba(226, 232, 240, .72);
}

.app-sidebar .nav-group-toggle:hover,
.app-sidebar .nav-group-toggle:focus-visible {
  color: #fff;
}

.app-sidebar .nav-item {
  color: rgba(241, 245, 249, .82);
}

.app-sidebar .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .085);
}

.app-sidebar .nav-item.is-active {
  color: #fff;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 46%, transparent),
    color-mix(in srgb, var(--accent) 19%, transparent));
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent) 58%, #fff),
    0 7px 18px color-mix(in srgb, var(--accent) 14%, rgba(2, 6, 23, .18));
}

.app-sidebar .nav-item.is-active .nav-item-current {
  background: rgba(255, 255, 255, .14);
}

:root[data-theme="light"] .app-sidebar .brand-name,
:root[data-theme="light"] .app-sidebar .nav-item-label,
:root[data-theme="light"] .app-sidebar .sidebar-search strong {
  color: color-mix(in srgb, var(--accent) 24%, var(--ink));
}

:root[data-theme="light"] .app-sidebar .tiny,
:root[data-theme="light"] .app-sidebar .nav-group-toggle,
:root[data-theme="light"] .app-sidebar .sidebar-search-copy small {
  color: color-mix(in srgb, var(--accent) 18%, var(--ink-3));
}

:root[data-theme="light"] .app-sidebar .nav-item {
  color: color-mix(in srgb, var(--accent) 20%, var(--ink-2));
}

:root[data-theme="light"] .app-sidebar .nav-group-toggle:hover,
:root[data-theme="light"] .app-sidebar .nav-group-toggle:focus-visible,
:root[data-theme="light"] .app-sidebar .nav-item:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, .76));
}

:root[data-theme="light"] .app-sidebar .nav-item.is-active {
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 19%, #fff),
    color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, .72)));
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

:root[data-theme="light"] .app-sidebar .nav-item.is-active .nav-item-current {
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  background: color-mix(in srgb, var(--accent) 14%, #fff);
}

:root[data-theme="light"] .app-sidebar .nav-group-icon,
:root[data-theme="light"] .app-sidebar .nav-item-icon {
  color: color-mix(in srgb, var(--accent) 44%, var(--ink-3));
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, .72));
}

:root[data-theme="light"] .app-sidebar .nav-item.is-active .nav-item-icon {
  color: #fff;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 88%, #fff),
    color-mix(in srgb, var(--accent) 78%, #0f172a));
}

.app-nav {
  scrollbar-color: rgba(148, 163, 184, .5) transparent;
}

.app-nav::-webkit-scrollbar {
  width: 7px;
}

.app-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .45);
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: rgba(228, 238, 255, .7);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.sidebar-search:hover,
.sidebar-search:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(255, 255, 255, .075);
  color: #fff;
  transform: translateY(-1px);
}
:root[data-theme="light"] .app-sidebar .sidebar-search {
  border-color: color-mix(in srgb, var(--accent) 23%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, .68));
  color: color-mix(in srgb, var(--accent) 48%, var(--ink-3));
}
:root[data-theme="light"] .app-sidebar .sidebar-search:hover,
:root[data-theme="light"] .app-sidebar .sidebar-search:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, rgba(255, 255, 255, .78));
  color: color-mix(in srgb, var(--accent) 65%, var(--ink));
}
.sidebar-search-copy,
.nav-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-search-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}
.sidebar-search-copy small {
  color: rgba(228, 238, 255, .48);
  font-size: .62rem;
  font-weight: 650;
}
.app-nav {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 3px;
}
.nav-group-toggle-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.nav-group-icon,
.nav-item-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
}
.nav-group-icon {
  width: 25px;
  height: 25px;
}
.nav-group-toggle-main > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-group-count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .065);
  text-align: center;
  font-size: .59rem;
  letter-spacing: 0;
}
.nav-group-chevron {
  flex: 0 0 auto;
  margin-left: 5px;
  font-size: .72rem;
}
.nav-group-items {
  position: relative;
  gap: 3px;
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .075);
}
.nav-item-icon {
  width: 29px;
  height: 29px;
  color: rgba(228, 238, 255, .66);
  transition: color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.nav-item:hover .nav-item-icon {
  color: #fff;
  transform: translateY(-1px);
}
.nav-item.is-active .nav-item-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #102a6e));
  box-shadow: 0 5px 13px color-mix(in srgb, var(--accent) 28%, transparent);
}
.nav-item-current {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, .05));
  color: #fff;
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Compact rail is defined below (68px → hover expand). */

/* Minimal branded sidebar refinement */
.app-sidebar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 13%, #111827) 0%,
      color-mix(in srgb, var(--accent) 5%, #0b1220) 100%);
}

.app-sidebar {
  gap: 10px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(148, 163, 184, .14));
  box-shadow: 8px 0 24px rgba(2, 6, 23, .14);
}

:root[data-theme="light"] .app-sidebar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 7%, #fff) 0%,
      color-mix(in srgb, var(--accent) 3%, #f8fafc) 100%);
}

.app-sidebar .brand {
  min-height: 55px;
  margin: 0 2px 2px;
  padding: 3px 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(148, 163, 184, .14));
}

.app-sidebar .brand-mark,
.app-sidebar .brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 18%, transparent);
}

.app-sidebar .brand-name {
  font-size: .9rem;
  letter-spacing: -.02em;
}

.sidebar-search {
  min-height: 37px;
  margin: 0 2px 5px;
  padding: 6px 9px;
  border-radius: 10px;
  box-shadow: none;
}

.sidebar-search:hover,
.sidebar-search:focus-visible {
  transform: none;
}

.sidebar-search .nav-item-icon {
  width: 24px;
  height: 24px;
  background: transparent;
}

.sidebar-search-copy {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
}

.sidebar-search-copy small {
  font-size: .58rem;
  letter-spacing: .02em;
}

.nav-group {
  margin-bottom: 3px;
}

.nav-group-toggle {
  min-height: 31px;
  margin: 2px 0 1px;
  padding: 5px 8px;
  border-radius: 8px;
  letter-spacing: .065em;
}

.nav-group-icon {
  width: 19px;
  height: 19px;
  border-radius: 0;
  background: transparent;
  opacity: .76;
}

.nav-group-toggle-main {
  gap: 7px;
}

.nav-group-count {
  display: none !important;
}

.nav-group-chevron {
  opacity: .55;
  font-size: .65rem;
}

.nav-group-items {
  gap: 1px;
  margin: 1px 0 2px;
  padding: 0;
  border-left: 0;
}

.nav-item,
.app-shell.sidebar-compact .nav-item {
  min-height: 37px;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 9px;
  border-color: transparent;
}

.nav-item:hover {
  transform: none;
}

.nav-item-icon {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: transparent;
}

.nav-item:hover .nav-item-icon {
  transform: none;
  background: transparent;
}

.app-sidebar .nav-item.is-active,
:root[data-theme="light"] .app-sidebar .nav-item.is-active {
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--accent);
}

.app-sidebar .nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

:root[data-theme="light"] .app-sidebar .nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.nav-item.is-active .nav-item-icon,
:root[data-theme="light"] .app-sidebar .nav-item.is-active .nav-item-icon {
  color: color-mix(in srgb, var(--accent) 58%, #fff);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .app-sidebar .nav-item.is-active .nav-item-icon {
  color: color-mix(in srgb, var(--accent) 74%, var(--ink));
}

.nav-item-current {
  display: none !important;
}

.app-sidebar .sidebar-foot {
  margin: 4px 2px 0;
  padding: 10px 7px 2px;
  border-top-color: color-mix(in srgb, var(--accent) 15%, rgba(148, 163, 184, .14));
}

.app-nav::-webkit-scrollbar {
  width: 5px;
}

.app-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 24%, rgba(148, 163, 184, .3));
}

@media (min-width: 901px) {
  .app-shell.sidebar-compact {
    grid-template-columns: 68px minmax(0, 1fr);
    overflow-x: visible;
  }

  .app-shell.sidebar-compact .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 68px;
    height: 100vh;
    padding: 14px 8px 12px;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: 6px 0 18px rgba(2, 6, 23, .1);
    transition:
      width var(--dur-2) var(--ease-standard),
      padding var(--dur-2) var(--ease-standard),
      box-shadow var(--dur-2) var(--ease-standard);
  }

  .app-shell.sidebar-compact .app-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .app-shell.sidebar-compact .app-nav {
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 0;
  }

  .app-shell.sidebar-compact .app-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .app-shell.sidebar-compact .app-sidebar:hover,
  .app-shell.sidebar-compact .app-sidebar:focus-within {
    width: 248px;
    padding: 14px 11px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-shadow: 16px 0 36px rgba(2, 6, 23, .22);
  }

  .app-shell.sidebar-compact .app-sidebar:hover::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:focus-within::-webkit-scrollbar {
    width: 5px;
    display: block;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .app-nav,
  .app-shell.sidebar-compact .app-sidebar:focus-within .app-nav {
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .app-nav::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:focus-within .app-nav::-webkit-scrollbar {
    width: 5px;
    display: block;
  }

  .app-shell.sidebar-compact .brand {
    justify-content: center;
    padding-inline: 5px;
  }

  .app-shell.sidebar-compact .brand > div:last-child,
  .app-shell.sidebar-compact .sidebar-search-copy,
  .app-shell.sidebar-compact .nav-item-label,
  .app-shell.sidebar-compact .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .nav-group-chevron,
  .app-shell.sidebar-compact .sidebar-foot .tiny {
    display: none;
  }

  .app-shell.sidebar-compact .sidebar-search,
  .app-shell.sidebar-compact .nav-group-toggle,
  .app-shell.sidebar-compact .nav-item {
    justify-content: center;
    padding-inline: 5px;
  }

  .app-shell.sidebar-compact .nav-group-toggle-main {
    flex: 0 0 auto;
  }

  .app-shell.sidebar-compact .nav-group-items {
    margin-inline: 0;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .brand,
  .app-shell.sidebar-compact .app-sidebar:focus-within .brand {
    justify-content: flex-start;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .brand > div:last-child,
  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-search-copy,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-item-label,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-chevron,
  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-foot .tiny,
  .app-shell.sidebar-compact .app-sidebar:focus-within .brand > div:last-child,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-search-copy,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-item-label,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-chevron,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-foot .tiny {
    display: block;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-search-copy,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-search-copy {
    display: grid;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-item,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-item {
    justify-content: flex-start;
    padding-inline: 8px;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle-main,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle-main {
    flex: 1;
  }

  .app-shell.sidebar-compact .app-body {
    transition: opacity var(--dur-2) var(--ease-standard), filter var(--dur-2) var(--ease-standard);
  }

  .app-shell.sidebar-compact .app-sidebar:hover ~ .app-body,
  .app-shell.sidebar-compact .app-sidebar:focus-within ~ .app-body {
    opacity: .68;
    filter: blur(2.5px);
  }

}

/* Compact automation rail: quiet while healthy, unmistakable when attention
   is needed. It overlays the gutter and reveals detail only on intent. */
.smartbar {
  top: 84px;
  right: 14px;
  width: 50px;
  padding: 7px;
  gap: 6px;
  overflow: hidden;
  color: #f8f6f0;
  border: 1px solid rgba(197, 144, 91, .38);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(84, 45, 76, .96), rgba(25, 27, 34, .98) 52%, rgba(18, 20, 26, .98));
  box-shadow:
    0 18px 42px rgba(9, 11, 16, .26),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(18px) saturate(1.2);
  transition:
    width 220ms var(--ease-standard),
    border-color 220ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}

.smartbar:hover,
.smartbar:focus-within {
  width: 276px;
  border-color: rgba(209, 157, 103, .66);
  box-shadow:
    0 24px 58px rgba(9, 11, 16, .34),
    0 0 0 1px rgba(197, 144, 91, .08),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateX(-2px);
}

.smartbar-head {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 254px;
  min-height: 36px;
}

.smartbar-master-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #f1c38e;
  border: 1px solid rgba(241, 195, 142, .34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .17), transparent 38%),
    rgba(197, 144, 91, .13);
  box-shadow: inset 0 0 18px rgba(197, 144, 91, .08);
}

.smartbar-master-pulse {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid rgba(241, 195, 142, .48);
  border-radius: 12px;
  animation: automation-master-pulse 3.6s var(--ease-standard) infinite;
}

.smartbar.has-missing .smartbar-master-pulse {
  border-color: rgba(245, 174, 79, .72);
  animation-duration: 2.15s;
}

.smartbar-head-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  opacity: 0;
  transform: translateX(7px);
  transition:
    opacity 160ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}

.smartbar:hover .smartbar-head-copy,
.smartbar:focus-within .smartbar-head-copy {
  opacity: 1;
  transform: none;
}

.smartbar-head-copy strong {
  overflow: hidden;
  color: #fffaf2;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 780;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbar-head-copy small {
  overflow: hidden;
  color: rgba(245, 240, 232, .62);
  font-size: .65rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smartbar-count {
  position: absolute;
  top: -4px;
  left: 27px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  color: #211814;
  border: 2px solid #342733;
  border-radius: 999px;
  background: #f1c38e;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  transition: all 180ms var(--ease-standard);
}

.smartbar:not(.has-missing) .smartbar-count {
  color: #062d22;
  background: #70d7b0;
}

.smartbar:hover .smartbar-count,
.smartbar:focus-within .smartbar-count {
  position: static;
  min-width: 22px;
  height: 22px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, .16);
}

.smartbar-list {
  display: grid;
  gap: 4px;
  min-width: 254px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.smartbar-item {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  min-height: 40px;
  padding: 2px 0;
  color: inherit;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.smartbar-item:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .075);
}

.smartbar-item:focus-visible {
  outline-color: #f1c38e;
  outline-offset: -1px;
}

.smartbar-dot {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.smartbar-item.is-ready .smartbar-dot {
  color: #83e0bc;
  background: rgba(46, 179, 133, .14);
}

.smartbar-item.is-missing .smartbar-dot {
  color: #ffc16c;
  background: rgba(234, 146, 47, .15);
}

.smartbar-item.is-unknown .smartbar-dot {
  color: rgba(245, 240, 232, .66);
  background: rgba(255, 255, 255, .08);
}

.smartbar-copy {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(7px);
  transition:
    opacity 160ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}

.smartbar:hover .smartbar-copy,
.smartbar:focus-within .smartbar-copy {
  width: auto;
  opacity: 1;
  transform: none;
}

.smartbar-copy strong {
  color: #fffaf2;
  font-size: .75rem;
  font-weight: 750;
}

.smartbar-copy small {
  color: rgba(245, 240, 232, .60);
  font-size: .64rem;
  line-height: 1.32;
}

@keyframes automation-master-pulse {
  0%, 100% { opacity: .18; transform: scale(.94); }
  45% { opacity: .72; transform: scale(1.22); }
  70% { opacity: 0; transform: scale(1.34); }
}

/* Premium sign-in: brand-led, calm motion, and a crisp self-hosted trust cue. */
.auth-split {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  overflow: hidden;
  background: #12141a;
}

.auth-aside {
  isolation: isolate;
  min-width: 0;
  padding: clamp(34px, 5vw, 76px);
  overflow: hidden;
  color: #f7f4ee;
  background:
    radial-gradient(circle at 78% 43%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 28%),
    radial-gradient(circle at 10% 100%, rgba(129, 71, 108, .28), transparent 40%),
    linear-gradient(145deg, #171921 0%, #23202a 56%, #332430 100%);
}

.auth-aside::after {
  content: "";
  position: absolute;
  inset: auto 8% -18% auto;
  width: min(40vw, 560px);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(222, 171, 113, .10);
  border-radius: 50%;
  box-shadow:
    0 0 0 56px rgba(222, 171, 113, .025),
    0 0 0 112px rgba(222, 171, 113, .018);
}

.auth-aside-glow {
  inset: -18% -12% auto auto;
  width: 76%;
  height: 76%;
  opacity: .82;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  filter: blur(72px);
}

.auth-aside-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 65% 48%, #000 0, transparent 68%);
}

.auth-aside-top {
  z-index: 2;
  color: #fffaf2;
  animation: auth-rise 620ms var(--ease-standard) both;
}

.auth-aside-name {
  color: #fffaf2;
  font-size: 1.08rem;
  font-weight: 780;
}

.auth-aside-legal { color: rgba(245, 240, 232, .56); }

.auth-aside-body {
  z-index: 2;
  max-width: min(42rem, 72%);
  margin-block: auto;
  animation: auth-rise 720ms 80ms var(--ease-standard) both;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #deb078;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.auth-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

.auth-aside-title {
  max-width: 12ch;
  margin-bottom: 20px;
  color: #fffaf2;
  font-size: clamp(2.35rem, 4.4vw, 4.75rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.auth-aside-copy {
  max-width: 48ch;
  color: rgba(245, 240, 232, .68);
  font-size: clamp(.94rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.auth-signal {
  position: absolute;
  z-index: 1;
  top: 48%;
  right: clamp(22px, 5vw, 78px);
  width: clamp(240px, 28vw, 440px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: .9;
}

.auth-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(222, 171, 113, .23);
  border-radius: 50%;
  animation: auth-orbit-spin 32s linear infinite;
}

.auth-orbit::before,
.auth-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #deb078;
  box-shadow: 0 0 20px rgba(222, 176, 120, .7);
}

.auth-orbit::before { left: -4px; }
.auth-orbit::after { right: -4px; }
.auth-orbit.is-inner {
  inset: 18%;
  border-color: rgba(134, 84, 120, .48);
  animation-direction: reverse;
  animation-duration: 24s;
}
.auth-orbit.is-inner::before,
.auth-orbit.is-inner::after {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #bd86aa;
  box-shadow: 0 0 16px rgba(189, 134, 170, .64);
}

.auth-signal-core {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background: rgba(18, 20, 26, .72);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
  transform: translate(-50%, -50%) rotate(4deg);
}

.auth-signal-core > .brand-mark,
.auth-signal-core > .brand-logo { transform: rotate(-4deg); }

.auth-signal-pulse {
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, rgba(222, 176, 120, .5));
  border-radius: 33px;
  animation: auth-core-pulse 2.8s var(--ease-standard) infinite;
}

.auth-signal-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  color: rgba(255, 250, 242, .84);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(21, 22, 29, .76);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
  backdrop-filter: blur(13px);
  font-size: .68rem;
  font-weight: 720;
  white-space: nowrap;
  animation: auth-chip-float 4.8s var(--ease-standard) infinite;
}

.auth-signal-chip.is-finance { top: 7%; left: 4%; }
.auth-signal-chip.is-people { right: -4%; bottom: 25%; animation-delay: -1.7s; }
.auth-signal-chip.is-automation { bottom: 1%; left: 10%; animation-delay: -3.1s; }
.auth-signal-chip svg { color: #deb078; }

.auth-aside-points {
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  animation: auth-rise 720ms 160ms var(--ease-standard) both;
}

.auth-aside-points li {
  align-items: flex-start;
  color: rgba(245, 240, 232, .72);
  font-size: .74rem;
  line-height: 1.42;
}

.auth-point-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: #deb078;
  border: 1px solid rgba(222, 176, 120, .22);
  background: rgba(222, 176, 120, .08);
}

.auth-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(28px, 5vw, 80px);
  overflow: hidden;
  background:
    linear-gradient(145deg, #f8f5ef 0%, #f2eee7 48%, #ece7df 100%);
}

.auth-panel::before,
.auth-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(10px);
  animation: auth-panel-drift 12s var(--ease-standard) infinite alternate;
}

.auth-panel::before {
  top: -190px;
  right: -130px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 67%);
}

.auth-panel::after {
  bottom: -230px;
  left: -160px;
  background: radial-gradient(circle, rgba(137, 78, 118, .12), transparent 68%);
  animation-delay: -5s;
}

.auth-form-wrap {
  width: min(100%, 430px);
  max-width: none;
  padding: clamp(26px, 3.2vw, 38px);
  color: #202127;
  border: 1px solid rgba(80, 64, 51, .12);
  border-radius: 28px;
  background: rgba(255, 253, 249, .78);
  box-shadow:
    0 32px 80px rgba(53, 43, 34, .13),
    inset 0 1px 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px) saturate(1.08);
  animation: auth-form-arrive 560ms 90ms var(--ease-standard) both;
}

.auth-panel-brand {
  margin-bottom: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(71, 59, 50, .10);
}

.auth-panel .brand { justify-content: flex-start; }
.auth-panel .brand-name {
  color: #202127;
  font-weight: 780;
}

.auth-trustline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #6c665e;
  font-size: .65rem;
  font-weight: 650;
}

.auth-trustline i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b08a5f;
}

.auth-trust-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #2f765d;
  border-radius: 8px;
  background: rgba(47, 118, 93, .09);
}

.auth-form { gap: 16px; }

.auth-heading h2 {
  color: #1d1f25;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -.035em;
}

.auth-heading .muted { color: #716a62; }
.auth-form label { color: #4e4a45; font-weight: 710; }

.auth-form input {
  min-height: 48px;
  color: #202127;
  border-color: rgba(74, 62, 52, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 2px rgba(49, 40, 34, .03);
}

.auth-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, #8a6540);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 2px rgba(49, 40, 34, .03);
}

.auth-form .btn-primary {
  min-height: 48px;
  border-radius: 13px;
  font-weight: 780;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 22%, transparent);
}

.auth-foot a,
.auth-demo-hint a { color: color-mix(in srgb, var(--accent) 76%, #5a3f2c); }

.auth-demo-hint {
  margin: 0;
  color: #716a62;
  line-height: 1.5;
  text-align: center;
}

.auth-demo-hint code {
  padding: 2px 5px;
  color: #3f3530;
  border: 1px solid rgba(74, 62, 52, .12);
  border-radius: 6px;
  background: rgba(255, 255, 255, .62);
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes auth-core-pulse {
  0%, 100% { opacity: .18; transform: scale(.92); }
  50% { opacity: .68; transform: scale(1.12); }
}

@keyframes auth-chip-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes auth-panel-drift {
  from { transform: translate3d(-12px, -6px, 0) scale(.96); }
  to { transform: translate3d(16px, 10px, 0) scale(1.06); }
}

@keyframes auth-form-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(400px, .88fr); }
  .auth-aside { padding: 42px; }
  .auth-aside-body { max-width: 80%; }
  .auth-signal { right: -40px; opacity: .6; }
  .auth-aside-points { grid-template-columns: 1fr; }
  .auth-aside-points li:nth-child(n+3) { display: none; }
}

@media (max-width: 860px) {
  .auth-split {
    grid-template-columns: 1fr;
    min-height: 100dvh;
    background: #f2eee7;
  }

  .auth-panel {
    min-height: 100dvh;
    padding: 28px;
  }

  .auth-form-wrap { width: min(100%, 440px); }

  .smartbar {
    top: auto;
    right: 10px;
    bottom: 78px;
  }

  .smartbar:hover,
  .smartbar:focus-within {
    width: min(276px, calc(100vw - 20px));
  }
}

@media (max-width: 480px) {
  .auth-panel { padding: 18px; }
  .auth-form-wrap {
    padding: 22px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .auth-trustline {
    flex-wrap: wrap;
    row-gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smartbar-master-pulse,
  .auth-aside-top,
  .auth-aside-body,
  .auth-aside-points,
  .auth-orbit,
  .auth-signal-pulse,
  .auth-signal-chip,
  .auth-panel::before,
  .auth-panel::after,
  .auth-form-wrap {
    animation: none !important;
  }

  .smartbar,
  .smartbar-head-copy,
  .smartbar-copy,
  .smartbar-count {
    transition: none;
  }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform var(--dur-3) var(--ease-standard);
    background:
      radial-gradient(460px 300px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
      linear-gradient(180deg, #10192d, #0b1222);
  }
  .app-shell.nav-open .app-sidebar { transform: translateX(0); }
  .app-shell.nav-open::before { opacity: 1; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-shell.nav-open::before {
      backdrop-filter: blur(var(--glass-blur-sm));
      -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    }
  }
  .app-shell.nav-open .app-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-scrim) + 1);
    border: 0;
    padding: 0;
    background: rgba(4, 9, 20, .22);
    cursor: pointer;
  }
  .app-shell.nav-open .app-body { opacity: .82; }
  .app-menu-btn { display: inline-flex; }
  .app-main { padding: 18px 16px 44px; }
  .floating-filters { top: 68px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-atmosphere-layer { transition: none; }
  .assistant-fab { transition: none; }
  .assistant-fab-ring { animation: none; }
}


/* ── invoice reference (clickable invoice number → document preview) ─────── */
.btn-link-invoice {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font: inherit; font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.btn-link-invoice:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.invoice-ref-icon { font-size: .72em; opacity: .75; }

/* Company names use one lightweight link everywhere; the destination is always
   the full company workspace rather than a partially filtered list. */
.btn-link-company {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}
.btn-link-company:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.btn-link-company:focus-visible {
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 3px;
}
.btn-link-company-mark {
  display: inline-grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
  color: var(--accent);
  font-size: .65rem;
  text-decoration: none;
}

/* ── command palette (Ctrl/Cmd+K) ─────────────────────────────────────────── */
.cmdk-trigger { gap: 6px; }
.cmdk-kbd {
  font: inherit; font-size: .68rem; opacity: .7;
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px;
}
@media (max-width: 720px) {
  .cmdk-trigger-label, .cmdk-kbd { display: none; }
}

.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(48px, 12vh, 140px) 16px 16px;
  background: color-mix(in srgb, #000 46%, transparent);
  backdrop-filter: blur(3px);
  animation: cmdk-fade .12s ease-out;
}
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }

.cmdk-panel {
  width: min(620px, 100%);
  max-height: min(60vh, 520px);
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--elev-3);
  overflow: hidden;
  animation: cmdk-rise .14s ease-out;
}
@keyframes cmdk-rise { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.cmdk-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-4);
}
.cmdk-input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink);
}

.cmdk-list { overflow-y: auto; padding: 6px; flex: 1; }
.cmdk-empty { padding: 22px 14px; text-align: center; color: var(--ink-4); margin: 0; }

.cmdk-row {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.cmdk-row:hover { background: var(--accent-soft); }
.cmdk-row.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.cmdk-row-ico { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.cmdk-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmdk-row-label { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row-sub {
  font-size: .74rem; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-row-badge {
  flex: 0 0 auto;
  font-size: .62rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-4);
}

.cmdk-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-4);
}
.cmdk-foot .cmdk-key {
  font-size: .68rem;
  padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px;
}
.cmdk-foot .tiny { margin-right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cmdk-backdrop, .cmdk-panel { animation: none; }
}

/* ── permission editor: grouped by module (U3) ────────────────────────────── */
.perm-groups {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.perm-group {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px 10px;
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.perm-group-head {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.perm-group-head strong { font-size: .82rem; }
.perm-group-head .tiny { margin-left: auto; }
.perm-group-body { display: flex; flex-direction: column; gap: 4px; }
.perm-row {
  display: flex; gap: 7px; align-items: center;
  font-size: .82rem; cursor: pointer;
}
.perm-action { color: var(--ink-2, inherit); }

/* ── crypto: copyable hash/address with explorer deep-link (CR8) ──────────── */
.chain-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.chain-value { flex: 1 1 220px; min-width: 0; }
.chain-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.chain-copy { min-width: 62px; }

/* ── attendance month picker (A5) ─────────────────────────────────────────── */
.month-picker {
  font: inherit; font-weight: 650;
  padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface, transparent); color: var(--ink);
}

/* ── meetings calendar: month + week (M5) ─────────────────────────────────── */
.meeting-cal-label {
  font-weight: 700;
  min-width: 160px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.meeting-month-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 700;
}
.meeting-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.meeting-month-pad { min-height: 72px; opacity: .3; }
.meeting-month-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 72px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.meeting-month-cell:hover { background: color-mix(in srgb, var(--surface-4) 70%, transparent); }
.meeting-month-cell.is-today {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.meeting-month-day { font-weight: 600; font-size: .85rem; margin-bottom: 2px; }
.meeting-month-cell.is-today .meeting-month-day { font-weight: 800; }
.meeting-month-chip {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: .68rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-week {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.meeting-week-gutter,
.meeting-week-day {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line);
}
.meeting-week-gutter { border-left: 0; }
.meeting-week-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 48px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  flex: none;
}
.meeting-week-day.is-today .meeting-week-dayhead {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.meeting-week-track {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(44px - 1px),
    var(--line) calc(44px - 1px),
    var(--line) 44px
  );
}
.meeting-week-hour {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 6px 0 0;
  font-size: .62rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--ink-4);
  box-sizing: border-box;
}
.meeting-week-slot {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.meeting-week-slot:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.meeting-week-event {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--grad-accent, var(--accent));
  color: var(--accent-ink, #fff);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
.meeting-week-event strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: .72rem;
}
.meeting-week-event span { opacity: .85; font-family: var(--font-mono); font-size: .62rem; }
.meeting-week-event:hover { filter: brightness(1.06); }
@media (max-width: 720px) {
  .meeting-week { grid-template-columns: 40px repeat(7, minmax(48px, 1fr)); overflow-x: auto; }
  .meeting-week-event span { display: none; }
}

/* ── org chart (U5) — nested reporting tree ───────────────────────────────── */
.org-tree, .org-children { list-style: none; margin: 0; padding: 0; }
.org-children {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.org-node { padding: 3px 0; }
.org-person {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 3px 6px; border-radius: 7px;
}
.org-person:hover { background: var(--accent-soft); }
.org-person .badge { font-size: .6rem; }

/* ── attendance legend + leave-sourced marker (A13) ───────────────────────── */
.att-day-src {
  position: absolute; top: 2px; right: 4px;
  font-size: .7rem; line-height: 1; opacity: .75;
}
.att-day { position: relative; }
.att-leg.att-weekend {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-4);
}
.att-leg-note {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: 1px dashed var(--line); color: var(--ink-4);
}
.att-leg-note .att-day-src { position: static; }

/* ==========================================================================
   Workspace silhouette — compact enterprise chrome
   Keep this late cascade for shell geometry only; its surface tokens repeat
   the canonical luxury palette so it cannot silently repaint the application.
   ========================================================================== */
:root {
  --bg: #0d0e12;
  --bg-2: #121319;
  --surface: #15161c;
  --surface-2: #1a1b22;
  --surface-3: #22232b;
  --surface-4: #2b2c36;
  --ink: #f7f3ea;
  --ink-2: #e6dfd2;
  --ink-3: #b8b1a5;
  --ink-4: #a39b8e;
  --line: rgba(214, 176, 121, .17);
  --line-strong: rgba(214, 176, 121, .30);
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-color: 2, 6, 23;
  --elev-1: 0 1px 1px rgba(var(--shadow-color), .18), 0 10px 28px rgba(var(--shadow-color), .16);
  --elev-2: 0 2px 4px rgba(var(--shadow-color), .18), 0 18px 44px rgba(var(--shadow-color), .24);
  --elev-3: 0 12px 28px rgba(var(--shadow-color), .30), 0 40px 90px rgba(var(--shadow-color), .42);
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-1);
  --shadow-lg: var(--elev-3);
}

:root[data-theme="light"] {
  --bg: #f3efe7;
  --bg-2: #ebe5da;
  --surface: #fffdf8;
  --surface-2: #f8f4ec;
  --surface-3: #eee8dd;
  --surface-4: #e3dccf;
  --ink: #17171c;
  --ink-2: #35343b;
  --ink-3: #5d5961;
  --ink-4: #625d63;
  --line: rgba(105, 75, 42, .13);
  --line-strong: rgba(105, 75, 42, .22);
  --shadow-color: 15, 23, 42;
  --elev-1: 0 1px 2px rgba(var(--shadow-color), .04), 0 10px 30px rgba(var(--shadow-color), .07);
  --elev-2: 0 2px 5px rgba(var(--shadow-color), .05), 0 20px 48px rgba(var(--shadow-color), .11);
  --elev-3: 0 14px 30px rgba(var(--shadow-color), .12), 0 44px 100px rgba(var(--shadow-color), .18);
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-1);
  --shadow-lg: var(--elev-3);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3efe7;
    --bg-2: #ebe5da;
    --surface: #fffdf8;
    --surface-2: #f8f4ec;
    --surface-3: #eee8dd;
    --surface-4: #e3dccf;
    --ink: #17171c;
    --ink-2: #35343b;
    --ink-3: #5d5961;
    --ink-4: #625d63;
    --line: rgba(105, 75, 42, .13);
    --line-strong: rgba(105, 75, 42, .22);
    --shadow-color: 15, 23, 42;
    --elev-1: 0 1px 2px rgba(var(--shadow-color), .04), 0 10px 30px rgba(var(--shadow-color), .07);
    --elev-2: 0 2px 5px rgba(var(--shadow-color), .05), 0 20px 48px rgba(var(--shadow-color), .11);
    --elev-3: 0 14px 30px rgba(var(--shadow-color), .12), 0 44px 100px rgba(var(--shadow-color), .18);
    --shadow-sm: var(--elev-1);
    --shadow: var(--elev-1);
    --shadow-lg: var(--elev-3);
  }
}

body { font-size: 15px; letter-spacing: -.006em; }
.app-atmosphere,
body::before {
  background:
    radial-gradient(900px 700px at 88% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(800px 640px at 12% 105%, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 64%),
    linear-gradient(145deg, var(--bg) 0%, var(--bg-2) 100%);
  animation: none;
}
.app-atmosphere-grain { opacity: .018; }

/* Desktop navigation is readable instead of becoming a mystery icon rail. */
@media (min-width: 1100px) {
  .app-shell.sidebar-compact { grid-template-columns: 248px minmax(0, 1fr); }
  .app-shell.sidebar-compact .app-sidebar,
  .app-shell.sidebar-compact .app-sidebar:hover,
  .app-shell.sidebar-compact .app-sidebar:focus-within {
    width: 248px;
    padding: 22px 16px 18px;
    overflow-x: hidden;
  }
  .app-shell.sidebar-compact .brand { justify-content: flex-start; padding: 0 6px 20px; }
  .app-shell.sidebar-compact .brand > div:last-child,
  .app-shell.sidebar-compact .brand-name,
  .app-shell.sidebar-compact .nav-item-label,
  .app-shell.sidebar-compact .sidebar-search-copy,
  .app-shell.sidebar-compact .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .nav-group-chevron,
  .app-shell.sidebar-compact .sidebar-foot .tiny {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .app-shell.sidebar-compact .sidebar-search-copy { display: grid; }
  .app-shell.sidebar-compact .nav-group-toggle { display: flex; }
  .app-shell.sidebar-compact .nav-group-toggle,
  .app-shell.sidebar-compact .sidebar-search { justify-content: flex-start; padding-inline: 10px; }
  .app-shell.sidebar-compact .nav-group-toggle-main { flex: 1; }
  .app-shell.sidebar-compact .nav-item,
  .app-shell.sidebar-compact .nav-item:hover {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 7px 10px;
  }
  .app-shell.sidebar-compact .nav-group-items { display: grid; }
  .app-shell.sidebar-compact .sidebar-foot { display: block; }
  .app-shell.sidebar-compact .app-sidebar ~ .app-body { opacity: 1; }
}

.app-sidebar {
  gap: 16px;
  border-right: 0;
  background:
    radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(180deg, #111827 0%, #0a1020 100%);
  box-shadow: 16px 0 50px rgba(2, 6, 23, .18);
}
:root[data-theme="light"] .app-sidebar {
  color: #f8fbff;
  background:
    radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #18223a 0%, #0d1426 100%);
  box-shadow: 16px 0 50px rgba(30, 41, 68, .16);
}
:root[data-theme="light"] .app-sidebar .brand-name,
:root[data-theme="light"] .app-sidebar .nav-item-label,
:root[data-theme="light"] .app-sidebar .sidebar-search strong { color: #f8fbff; }
:root[data-theme="light"] .app-sidebar .tiny,
:root[data-theme="light"] .app-sidebar .nav-group-toggle,
:root[data-theme="light"] .app-sidebar .sidebar-search-copy small { color: rgba(226, 232, 240, .64); }
:root[data-theme="light"] .app-sidebar .nav-item { color: rgba(241, 245, 249, .82); }
.app-sidebar .brand { min-height: 62px; border-bottom-color: rgba(255, 255, 255, .08); }
.app-sidebar .brand-mark,
.app-sidebar .brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent);
}
.app-sidebar .brand-name { font-size: 1rem; font-weight: 850; }
.sidebar-search {
  min-height: 44px;
  padding: 8px 11px;
  border-color: rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}
.sidebar-search-copy {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
}
.sidebar-search-copy strong { white-space: nowrap; }
.sidebar-search-copy small { white-space: nowrap; font-size: .55rem; }
.nav-group-toggle {
  min-height: 34px;
  margin-top: 5px;
  padding: 7px 9px;
  font-size: .66rem;
  letter-spacing: .11em;
}
.nav-group-items { gap: 4px; }
.nav-item,
.app-shell.sidebar-compact .nav-item {
  min-height: 42px;
  border-radius: 11px;
  font-size: .82rem;
}
.app-sidebar .nav-item:hover,
:root[data-theme="light"] .app-sidebar .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
}
.app-sidebar .nav-item.is-active,
:root[data-theme="light"] .app-sidebar .nav-item.is-active {
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, .09));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, .06)),
    color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, .035)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, #fff);
}
.nav-item-icon { width: 27px; height: 27px; color: rgba(226, 232, 240, .66); }
:root[data-theme="light"] .app-sidebar .nav-item-icon { color: rgba(226, 232, 240, .66); background: transparent; }
:root[data-theme="light"] .app-sidebar .nav-item.is-active .nav-item-icon { color: #fff; }

/* Calm product-level command strip. */
.app-topbar {
  min-height: 76px;
  padding: 15px 30px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-topbar {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
  }
}
:root[data-theme="light"] .app-topbar { background: rgba(255, 255, 255, .84); }
.app-topbar h2 { font-size: 1.12rem; font-weight: 850; letter-spacing: -.025em; }
.app-topbar::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 44%, transparent),
    color-mix(in srgb, var(--accent-3) 22%, transparent),
    transparent 72%);
}
.app-main { padding: 32px clamp(22px, 3vw, 48px) 80px; }
.app-main > * { max-width: 1680px; margin-inline: auto; }
.finance-overview-view,
.companies-view,
.analytics-view { gap: 22px !important; }

/* A bold branded masthead, unmistakably separate from work surfaces. */
.page-hero {
  min-height: 208px;
  display: flex;
  align-items: center;
  padding: 34px clamp(28px, 4vw, 52px);
  border: 0;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(700px 280px at 82% 10%, rgba(255, 255, 255, .16), transparent 58%),
    radial-gradient(500px 260px at 104% 112%, color-mix(in srgb, var(--accent-3) 54%, transparent), transparent 58%),
    linear-gradient(125deg,
      color-mix(in srgb, var(--accent) 78%, #111a3a) 0%,
      color-mix(in srgb, var(--accent) 52%, #273260) 55%,
      color-mix(in srgb, var(--accent-2) 54%, #18284f) 100%);
  box-shadow: 0 1px 1px rgba(255, 255, 255, .16) inset,
    0 24px 64px color-mix(in srgb, var(--accent) 20%, rgba(12, 18, 36, .24));
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 24px 24px auto auto;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 24px rgba(255, 255, 255, .035), 0 0 0 48px rgba(255, 255, 255, .02);
  opacity: 1;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(90deg, rgba(255,255,255,.72),
    color-mix(in srgb, var(--accent-3) 72%, #fff), transparent 78%);
  box-shadow: none;
}
.page-hero-inner { position: relative; z-index: 2; width: 100%; align-items: center; gap: 28px; }
.page-hero-eyebrow,
:root[data-theme="light"] .page-hero-eyebrow {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
  font-size: .66rem;
  letter-spacing: .13em;
}
.page-hero h1,
.page-hero h2,
:root[data-theme="light"] .page-hero h1,
:root[data-theme="light"] .page-hero h2 {
  max-width: 800px;
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  line-height: 1;
  letter-spacing: -.055em;
}
.page-hero p,
:root[data-theme="light"] .page-hero p {
  max-width: 66ch;
  color: rgba(244, 247, 255, .76);
  font-size: .95rem;
  line-height: 1.65;
}
.page-hero-actions { margin-top: 22px; }
.page-hero .btn:not(.btn-primary) {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: none;
}
.page-hero .btn:not(.btn-primary):hover {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .17);
}
.page-hero .btn-primary {
  background: #fff;
  color: color-mix(in srgb, var(--accent) 72%, #18213b);
  box-shadow: 0 12px 28px rgba(9, 14, 30, .24);
}

/* Crisp controls and compact filtering toolbar. */
.btn { min-height: 44px; padding: 10px 16px; border-radius: 11px; font-size: .84rem; }
.btn-sm { min-height: 34px; padding: 6px 11px; border-radius: 9px; }
input[type=text],
input[type=email],
input[type=password],
input[type=color],
input[type=number],
input[type=search],
input[type=date],
input[type=datetime-local],
select,
textarea { min-height: 46px; border-radius: 11px; background: var(--surface-2); }
.segmented {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
}
.segmented button,
.segmented .seg-btn { min-height: 34px; border-radius: 8px; }
.floating-filters {
  top: 88px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--elev-1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-filters {
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
}

/* KPI totals become four independent decision cards. */
.ops-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ops-stat {
  position: relative;
  min-height: 124px;
  justify-content: center;
  gap: 7px;
  padding: 20px 22px;
  border: 1px solid var(--line) !important;
  border-radius: 18px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface-2) 98%, transparent),
    color-mix(in srgb, var(--surface) 98%, transparent));
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.ops-stat::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: color-mix(in srgb, var(--accent) 68%, var(--ink-3));
}
.ops-stat.tone-ok::after { background: var(--chart-1); }
.ops-stat.tone-warn::after { background: var(--warn); }
.ops-stat.tone-danger::after { background: var(--danger); }
.ops-stat.tone-accent::after { background: var(--accent); }
.ops-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
  background: var(--surface-2) !important;
  box-shadow: var(--elev-2);
}
.ops-stat-label,
.metric-label { font-size: .67rem; letter-spacing: .115em; }
.ops-stat-value {
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ops-stat-sub { font-size: .77rem; }

@media (min-width: 1200px) {
  .companies-view .ops-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Work surfaces use whitespace, flatter edges, and stronger headings. */
.card,
.form-section,
.integration-card,
.ops-panel,
.data-table-wrap {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.finance-overview-view .card,
.companies-view .card,
.analytics-view .card { padding: 24px !important; }
.metric-card {
  min-height: 118px;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: var(--elev-1);
}
.metric-card::before {
  inset: 0 auto 0 0;
  width: 4px;
  height: auto;
  opacity: 1;
}
.metric-value { font-size: 1.65rem; line-height: 1; }
.card h3,
.ops-panel h3,
.form-section h3 {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -.025em;
}
.card h3 + .muted,
.card h3 + p { margin-top: 5px; }
.fin-overview-bento,
.fin-tops-grid { gap: 16px; }
.fin-activity-grid { gap: 10px; }
.fin-activity-tile {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--surface-2));
}
.fin-activity-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  transform: translateY(-2px);
}
.fin-tile-val { margin-block: 8px 2px; font-size: 1.8rem; line-height: 1; }
.chart-empty { border-radius: 14px; background: var(--surface-2); }
.rank-row { min-height: 54px; padding: 8px 10px; border-radius: 11px; }
.rank-row + .rank-row { border-top: 1px solid var(--line); }
.rank-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.rank-num {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: var(--surface-3);
  font-size: .68rem;
  font-weight: 850;
}
.fin-category-card {
  min-height: 104px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface-2);
}

/* Dense, highly scannable data tables. */
.data-table-wrap { overflow: hidden; }
.data-table-toolbar { min-height: 66px; padding: 13px 18px; background: var(--surface); }
table.data-table { font-size: .84rem; }
table.data-table th,
table.data-table td { padding: 14px 18px; }
table.data-table th {
  height: 48px;
  color: var(--ink-3);
  background: var(--surface-3);
  font-size: .65rem;
  letter-spacing: .105em;
}
table.data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
table.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
table.data-table td { border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent); }
.data-table-foot { min-height: 56px; padding: 12px 18px; background: var(--surface-2); }

/* Tabs become a first-class navigation surface. */
.ui-tabs-bar {
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-3);
}
.ui-tab { min-height: 40px; padding: 9px 14px; border-radius: 10px; }
.ui-tab::after { display: none; }
.ui-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.ui-tab.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The company workspace now reads as a focused product page. */
.ui-drawer-overlay { background: rgba(4, 8, 18, .55); }
.ui-drawer { border-left: 1px solid var(--line); background: var(--bg); box-shadow: var(--elev-3); }
:root[data-theme="light"] .ui-drawer { background: #f4f6fb; }
.ui-drawer.company-workspace-drawer { width: min(1220px, calc(100vw - 120px)); }
.ui-drawer-head {
  min-height: 104px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface));
}
.ui-drawer-title { font-size: 1.5rem; font-weight: 900; }
.ui-drawer-body { padding: 20px 30px 40px; }
.company-workspace-drawer .ui-tabs-bar {
  position: sticky;
  top: -1px;
  z-index: 3;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 18%, transparent);
}
.company-detail-grid > * {
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.badge,
.chip,
.integration-state { border-radius: 7px; letter-spacing: .025em; }

@media (max-width: 1099px) and (min-width: 901px) {
  .app-shell.sidebar-compact { grid-template-columns: 76px minmax(0, 1fr); }
  .app-shell.sidebar-compact .app-sidebar { width: 76px; padding-inline: 11px; }
}

@media (max-width: 900px) {
  /* The sidebar becomes an off-canvas overlay. Explicitly return the body to
     column one; leaving its desktop grid-column creates an invisible implicit
     column and cuts mobile pages nearly in half. */
  .app-shell,
  .app-shell.sidebar-compact { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .app-body { grid-column: 1; width: 100%; }
  .app-shell > .app-sidebar { grid-column: 1; }
  .app-topbar { min-height: 66px; padding: 11px 16px; }
  .app-main { padding: 18px 14px 56px; }
  .page-hero { min-height: 0; padding: 26px 22px; border-radius: 20px; }
  .page-hero h1,
  .page-hero h2,
  :root[data-theme="light"] .page-hero h1,
  :root[data-theme="light"] .page-hero h2 { font-size: 2rem; }
  .page-hero::before { right: -26px; top: -24px; }
  .floating-filters { top: 72px; border-radius: 14px; }
  .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ops-stat { min-width: 0; min-height: 106px; padding: 16px; }
  .ops-stat-value { font-size: 1.35rem; }
  .finance-overview-view .card,
  .companies-view .card,
  .analytics-view .card { padding: 18px !important; }
  .ui-drawer,
  .ui-drawer.company-workspace-drawer { width: 100%; max-width: 100vw; }
  .ui-drawer-head { min-height: 88px; padding: 20px 18px 14px; }
  .ui-drawer-body { padding: 14px 16px 32px; }
  .ui-drawer-foot { padding: 12px 16px calc(14px + var(--safe-bottom)); }
  table.data-table th,
  table.data-table td { padding: 12px 14px; }
}

@media (max-width: 560px) {
  .app-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .app-topbar > .row {
    width: 100%;
    min-width: 0;
  }
  .app-topbar > .row:first-child > div {
    min-width: 0;
  }
  .app-topbar h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-topbar > .row:last-child {
    justify-content: space-between;
    gap: 4px;
  }
  .app-topbar > .row:last-child > .btn {
    min-width: 40px;
    padding-inline: 9px;
  }
  .theme-switch-btn > span:not(.theme-switch-ico),
  .app-signout-label,
  .app-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .config-view .ui-tabs-bar { top: 112px; }
  .ops-strip { grid-template-columns: 1fr; }
  .ops-stat { min-height: 96px; }
  .page-hero-actions { width: 100%; }
  .page-hero-actions .btn { flex: 1 1 auto; }
}

/* ── Public landing shell (lx-* product wall lives below) ───────────────────── */
.landing-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
.presence-demo-cred {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
}
.presence-demo-cred code {
  font-size: .85em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2, var(--surface));
}

/* Onboarding spotlight — hole shadow is the ONLY dimmer (no stacked scrim). */
.onboarding-scrim { display: none !important; }
html.onboarding-active,
body.onboarding-active { overflow: hidden; }
.onboarding-hole {
  position: fixed;
  z-index: 9001;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(4, 10, 20, .55), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, white);
  pointer-events: none;
  transition:
    top var(--dur-4) cubic-bezier(.2, .8, .2, 1),
    left var(--dur-4) cubic-bezier(.2, .8, .2, 1),
    width var(--dur-4) cubic-bezier(.2, .8, .2, 1),
    height var(--dur-4) cubic-bezier(.2, .8, .2, 1),
    box-shadow var(--dur-3) var(--ease-standard);
}
.onboarding-hole.is-pulse {
  animation: onboarding-pulse .9s ease;
}
@keyframes onboarding-pulse {
  0% { box-shadow: 0 0 0 9999px rgba(4, 10, 20, .55), 0 0 0 2px var(--accent); }
  50% { box-shadow: 0 0 0 9999px rgba(4, 10, 20, .48), 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 9999px rgba(4, 10, 20, .55), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, white); }
}
.onboarding-card {
  position: fixed;
  z-index: 9002;
  width: min(380px, calc(100vw - 32px));
  padding: 18px 18px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translateY(10px) scale(.98);
}
.onboarding-card.is-enter {
  animation: onboarding-pop .4s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes onboarding-pop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.onboarding-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.onboarding-progress-bar {
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.onboarding-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.onboarding-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.onboarding-card p { margin: 0 0 14px; color: var(--ink-3); font-size: .92rem; line-height: 1.45; white-space: pre-line; }
.onboarding-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.onboarding-checklist {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 8500;
  width: min(268px, calc(100vw - 24px));
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 16px 40px rgba(2, 6, 23, .16);
}
.onboarding-checklist.is-enter {
  animation: onboarding-pop .45s cubic-bezier(.2, .8, .2, 1) both;
}
.onboarding-checklist h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: -.015em;
}
.onboarding-check-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.onboarding-check-item:first-of-type { border-top: 0; }

/* Floating assistant panel — compact premium rail */
.assistant-panel-root {
  position: fixed;
  inset: 0;
  z-index: 8800;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.assistant-panel-root.is-open { pointer-events: auto; }
.assistant-panel-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #040a14 28%, transparent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard);
}
.assistant-panel-root.is-open .assistant-panel-scrim { opacity: 1; }
.assistant-panel {
  position: relative;
  width: min(332px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%,
      var(--surface) 38%,
      var(--surface) 100%);
  border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  box-shadow:
    -18px 0 48px rgba(2, 6, 23, .18),
    inset 1px 0 0 color-mix(in srgb, #fff 6%, transparent);
  transform: translateX(104%);
  transition: transform var(--dur-3) var(--ease-standard);
}
.assistant-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  pointer-events: none;
}
.assistant-panel-root.is-open .assistant-panel { transform: none; }
.assistant-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
}
.assistant-panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.assistant-panel-head .tiny {
  margin: 3px 0 0;
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.assistant-panel-head .btn-sm {
  min-height: 28px;
  padding: 0 8px;
  font-size: .72rem;
  border-radius: 8px;
}
.assistant-panel-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 8px;
  scrollbar-width: thin;
}
.assistant-panel-thread .chat-thread {
  max-height: none;
  min-height: 0;
  height: 100%;
  gap: 8px;
}
.assistant-panel-thread .chat-bubble {
  font-size: .84rem;
  padding: 8px 10px;
  border-radius: 12px;
  max-width: 100%;
}
.assistant-panel-foot {
  border-top: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--accent));
}
.assistant-panel-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.assistant-panel-intents .chip,
.assistant-panel-intents .chat-intent {
  font-size: .68rem;
  padding: 3px 8px;
  border-radius: 999px;
  min-height: 0;
}
.assistant-panel-foot .chat-composer {
  gap: 6px;
}
.assistant-panel-foot .chat-composer input {
  min-height: 36px;
  font-size: .82rem;
  border-radius: 10px;
}
.assistant-panel-foot .chat-composer .btn {
  min-height: 36px;
  padding-inline: 12px;
  font-size: .78rem;
  border-radius: 10px;
}

.messaging-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: min(70vh, 640px);
}
.messaging-layout .chat-thread {
  max-height: none;
  min-height: 280px;
  height: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
}
.messaging-composer-sticky {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  padding-top: 8px;
}
.chat-typing {
  align-self: flex-start;
  color: var(--ink-3);
  font-size: .85rem;
  padding: 4px 8px;
}
.chat-scroll-end {
  align-self: center;
  margin-top: 4px;
}
.chat-unread {
  min-width: 1.4em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn);
  color: #1a1200;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
}
.outreach-channel-hint {
  font-size: .82rem;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.outreach-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 34%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--luxury-copper) 13%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--luxury-plum) 6%), var(--surface));
  box-shadow: var(--shadow-sm);
}
.outreach-command-bar h2,
.outreach-section-head h2 {
  margin: 2px 0 4px;
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  font-weight: 800;
  letter-spacing: -.025em;
}
.outreach-command-bar p,
.outreach-section-head p { margin: 0; }
.outreach-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.outreach-channel-log-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.outreach-channel-log-card {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--channel-color) 26%, var(--line));
  border-top: 3px solid var(--channel-color);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--channel-color) 7%, var(--surface)), var(--surface));
  color: var(--ink);
  text-align: start;
  box-shadow: var(--shadow-xs);
}
button.outreach-channel-log-card {
  cursor: pointer;
  transition: translate var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
button.outreach-channel-log-card:hover,
button.outreach-channel-log-card:focus-visible {
  translate: 0 -2px;
  box-shadow: var(--shadow-md);
}
.outreach-channel-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.outreach-channel-log-head strong {
  font-size: .94rem;
  font-weight: 800;
}
.outreach-channel-log-head > span:not(.badge) {
  color: var(--ink-3);
  font-size: .74rem;
}
.outreach-channel-log-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 8px;
}
.outreach-channel-log-metrics > span {
  display: grid;
  gap: 1px;
}
.outreach-channel-log-metrics b {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
}
.outreach-channel-log-metrics small {
  color: var(--ink-3);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.outreach-run-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(90px, .7fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.outreach-run-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px 15px;
  border-inline-end: 1px solid var(--line);
}
.outreach-run-summary > div:last-child { border-inline-end: 0; }
.outreach-run-summary span {
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 750;
  text-transform: uppercase;
}
.outreach-run-summary strong {
  overflow-wrap: anywhere;
  font-size: .92rem;
}
@media (max-width: 760px) {
  .outreach-command-bar { align-items: stretch; flex-direction: column; }
  .outreach-channel-log-grid { grid-template-columns: 1fr; }
  .outreach-run-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outreach-run-summary > div:nth-child(2) { border-inline-end: 0; }
  .outreach-run-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 1080px) {
  .outreach-channel-log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .outreach-channel-log-grid { grid-template-columns: minmax(0, 1fr); }
  .chat-thread-tools > label { min-width: min(100%, 180px); flex: 1 1 150px; }
}
.mfa-channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}


/* ── Config setup guide ────────────────────────────────────────────────────── */
.cfg-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cfg-guide-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cfg-guide-head h2 { margin: 0 0 4px; font-size: 1.25rem; }
.cfg-guide-head p { margin: 0; color: var(--ink-3); max-width: 56ch; }
.cfg-guide-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cfg-guide-rail > li { min-width: 0; display: flex; }
.cfg-guide-rail-item {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 96%, var(--accent) 4%),
      var(--surface));
  color: var(--ink);
  cursor: pointer;
  text-align: start;
  box-shadow: var(--shadow-1);
  transition:
    transform var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard);
}
.cfg-guide-rail-item:hover,
.cfg-guide-rail-item:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-2);
}
.cfg-guide-rail-item.is-current {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
    var(--shadow-2);
}
.cfg-guide-step-number {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
}
.cfg-guide-step-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.cfg-guide-step-copy strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}
.cfg-guide-step-copy .tiny {
  color: var(--ink-3);
  line-height: 1.42;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cfg-guide-rail-item > .cfg-mark {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1320px) {
  .cfg-guide-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .cfg-guide-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Internal Communications ─────────────────────────────────────────────── */
.communications-view { gap: 18px; }
.communication-editor-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 22px;
}
.communication-preview {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 16px;
  display: grid;
  gap: 10px;
}
.communication-preview > .tiny {
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.communication-preview-card {
  min-width: 0;
  min-height: 190px;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow-2);
}
.communication-preview-card.is-important {
  border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
}
.communication-preview-card.is-urgent {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  background:
    radial-gradient(circle at 100% 0,
      color-mix(in srgb, var(--danger) 14%, transparent), transparent 42%),
    var(--surface);
}
.communication-preview-card strong {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.communication-preview-card p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.communication-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.communication-toggle-grid .form-check {
  min-width: 0;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.communication-toggle-grid .form-check span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.communication-safety-note {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.communication-safety-note p { margin: 4px 0 0; color: var(--ink-3); }
.communication-editor-actions { grid-column: 1 / -1; }
.communication-title-cell {
  min-width: 200px;
  max-width: 440px;
  display: grid;
  gap: 5px;
}
.communication-title-cell .row { gap: 6px; align-items: center; }
.communication-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}
@media (max-width: 820px) {
  .communication-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .communication-preview { position: static; }
}
@media (max-width: 560px) {
  .communication-toggle-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-guide-rail { grid-template-columns: minmax(0, 1fr); }
  .cfg-guide-rail-item { min-height: 0; }
}

.sms-profile-list {
  display: grid;
  gap: 9px;
  margin-top: 9px;
}
.sms-profile-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--luxury-copper) 8%);
}
.sms-profile-card p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}
.sms-copy-meter,
.sms-route-preview-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 26%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--luxury-copper) 7%, var(--surface-2));
}
.sms-copy-meter strong,
.sms-route-preview-row strong { font-size: .76rem; }
.sms-copy-meter span,
.sms-route-preview-row span {
  color: var(--ink-3);
  font-size: .7rem;
  overflow-wrap: anywhere;
}
.sms-route-preview-row {
  grid-template-columns: minmax(130px, .7fr) minmax(150px, .9fr) minmax(180px, 1fr);
  align-items: center;
}
@media (min-resolution: 1.75dppx), (max-width: 760px) {
  .cfg-guide-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cfg-guide-rail { grid-template-columns: minmax(0, 1fr); }
  .sms-profile-card .row-between { align-items: flex-start; flex-direction: column; }
  .sms-route-preview-row { grid-template-columns: minmax(0, 1fr); }
}
.cfg-guide-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cfg-guide-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.cfg-guide-panel-head h3 { margin: 4px 0; font-size: 1.2rem; }
.cfg-guide-panel-head p { margin: 0; color: var(--ink-3); }
.cfg-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 650;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.cfg-mark.is-pass { color: #15803d; background: #dcfce7; border-color: #86efac; }
.cfg-mark.is-fail { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
.cfg-mark.is-ready { color: #a16207; background: #fef9c3; border-color: #fde047; }
.cfg-mark.is-empty { color: var(--ink-3); background: var(--bg); }
.cfg-mark.is-skip { color: var(--ink-3); background: var(--bg); }
:root[data-theme="dark"] .cfg-mark.is-pass { color: #86efac; background: rgba(22,101,52,.35); border-color: #166534; }
:root[data-theme="dark"] .cfg-mark.is-fail { color: #fca5a5; background: rgba(127,29,29,.35); border-color: #7f1d1d; }
:root[data-theme="dark"] .cfg-mark.is-ready { color: #fde047; background: rgba(113,63,18,.35); border-color: #854d0e; }
.cfg-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.cfg-result.is-pass { background: #dcfce7; border-color: #86efac; color: #14532d; }
.cfg-result.is-fail { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
:root[data-theme="dark"] .cfg-result.is-pass { background: rgba(22,101,52,.3); color: #bbf7d0; }
:root[data-theme="dark"] .cfg-result.is-fail { background: rgba(127,29,29,.3); color: #fecaca; }
.cfg-step {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 18px;
  align-items: start;
}
.cfg-help {
  padding: 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.cfg-help h4 { margin: 0 0 8px; font-size: .95rem; }
.cfg-help ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cfg-help-link {
  display: inline-block;
  margin-top: 10px;
  font-size: .88rem;
  font-weight: 650;
}
.cfg-step-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfg-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.cfg-guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cfg-ready-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: .88rem;
  color: var(--ink-3);
}
@media (max-width: 800px) {
  .cfg-step { grid-template-columns: 1fr; }
}


/* ── Landing living wall (lx) ─────────────────────────────────────────────── */
.landing-body .lx {
  --lx-ink: #101816;
  --lx-mist: #edf3ea;
  --lx-panel: #f7faf5;
  --lx-card: color-mix(in srgb, var(--lx-panel) 94%, #fff);
  --lx-line: color-mix(in srgb, #27401c 14%, transparent);
  --lx-muted: #5a6b5c;
  --lx-font: "Sora", "Segoe UI", sans-serif;
  --lx-display: "Fraunces", Georgia, serif;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--lx-font);
  color: var(--lx-ink);
  background: var(--lx-mist);
}
:root[data-theme="dark"] .landing-body .lx,
:root[data-theme="dark"] .lx {
  --lx-ink: #edf3ea;
  --lx-mist: #0d1410;
  --lx-panel: #152019;
  --lx-card: color-mix(in srgb, var(--lx-panel) 92%, #0a100c);
  --lx-line: color-mix(in srgb, #9fbf92 16%, transparent);
  --lx-muted: #9aada0;
}
.lx-atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.lx-mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 70% 50% at 78% 22%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 78%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--lx-mist) 92%, #fff), var(--lx-mist));
  animation: lx-breathe 10s ease-in-out infinite alternate;
}
.lx-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .55;
}
.lx-bloom-a {
  width: 42vw; height: 42vw; max-width: 520px; max-height: 520px;
  top: -8%; right: -4%;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  animation: lx-drift 14s ease-in-out infinite alternate;
}
.lx-bloom-b {
  width: 36vw; height: 36vw; max-width: 420px; max-height: 420px;
  bottom: 8%; left: -8%;
  background: color-mix(in srgb, var(--accent) 22%, #7a9a6a 30%);
  animation: lx-drift 18s ease-in-out infinite alternate-reverse;
}
.lx-watermark {
  position: absolute;
  left: -2%;
  top: 18%;
  font-family: var(--lx-display);
  font-size: clamp(6rem, 22vw, 18rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: .85;
  color: color-mix(in srgb, var(--accent) 10%, transparent);
  white-space: nowrap;
  user-select: none;
  animation: lx-watermark 12s ease-in-out infinite alternate;
}
@keyframes lx-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}
@keyframes lx-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-3%, 4%); }
}
@keyframes lx-watermark {
  from { transform: translateX(0); opacity: .55; }
  to { transform: translateX(-2%); opacity: .85; }
}

.lx-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 36px);
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--lx-mist) 72%, transparent);
  border-bottom: 1px solid var(--lx-line);
}
.lx-nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em;
}
.lx-nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-ghost-btn {
  appearance: none; border: 0; background: none;
  color: var(--lx-muted); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; padding: 8px 10px;
}
.lx-ghost-btn:hover { color: var(--lx-ink); }
.lx-nav-cta {
  text-decoration: none;
  color: #fff;
  background: var(--accent, #375e26);
  padding: 9px 16px;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 700;
}
.lx-mark, .lx-logo {
  width: var(--s, 34px); height: var(--s, 34px);
  border-radius: 11px; object-fit: cover;
}
.lx-mark {
  display: grid; place-items: center;
  color: #fff; font-weight: 700;
  background: var(--accent, #375e26);
  font-size: calc(var(--s, 34px) * .42);
}

.lx-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 62px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 56px) 0 0;
}
.lx-hero-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1.15fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding: 0 clamp(16px, 3vw, 36px) 20px;
}
.lx-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 8px;
  animation: lx-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.lx-kicker {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 85%, var(--lx-muted));
}
.lx-name {
  margin: 0;
  font-family: var(--lx-display);
  font-size: clamp(2.2rem, 10vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: .95;
  color: var(--lx-ink);
  overflow-wrap: anywhere;
}
.lx-hook {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--lx-muted);
}
.lx-sub {
  margin: 12px 0 0;
  max-width: 42ch;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lx-muted) 88%, var(--lx-ink));
}
.lx-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 28px;
}
.lx-cta {
  border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #000), var(--accent, #375e26));
  padding: 15px 24px;
  border-radius: 14px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform var(--dur-2) var(--ease-standard), filter var(--dur-2) var(--ease-standard);
}
.lx-cta:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.lx-cta:disabled { opacity: .55; cursor: not-allowed; }
.lx-text-link {
  color: var(--lx-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding-bottom: 2px;
}
.lx-err { color: var(--danger, #b42318); margin-top: 12px; font-weight: 600; }
@keyframes lx-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Theater: three live product windows */
.lx-theater {
  position: relative;
  min-height: 560px;
  animation: lx-rise .8s .1s cubic-bezier(.2,.8,.2,1) both;
}
.lx-win-slot {
  position: absolute;
  width: min(318px, 78%);
  transition: transform var(--dur-4) var(--ease-entrance), filter var(--dur-4) var(--ease-standard), z-index 0s;
  filter: saturate(.95);
}
.lx-win-slot:nth-child(1) {
  top: 0; left: 0; z-index: 3;
  animation: lx-float-a 7s ease-in-out infinite alternate;
}
.lx-win-slot:nth-child(2) {
  top: 4%; right: 0; z-index: 4;
  animation: lx-float-b 8s ease-in-out infinite alternate;
}
.lx-win-slot:nth-child(3) {
  bottom: 2%; left: 12%; right: auto; z-index: 2;
  width: min(360px, 88%);
  animation: lx-float-c 9s ease-in-out infinite alternate;
}
.lx-win-slot.is-focus {
  z-index: 6;
  filter: saturate(1.08) drop-shadow(0 18px 40px color-mix(in srgb, var(--accent) 22%, transparent));
}
.lx-win-slot:nth-child(1).is-focus { transform: translate(-4px, -8px) scale(1.03); }
.lx-win-slot:nth-child(2).is-focus { transform: translate(4px, -6px) scale(1.03); }
.lx-win-slot:nth-child(3).is-focus { transform: translate(0, -8px) scale(1.03); }
@keyframes lx-float-a {
  from { transform: translate(0, 0) rotate(-0.4deg); }
  to { transform: translate(0, -12px) rotate(0.3deg); }
}
@keyframes lx-float-b {
  from { transform: translate(0, 0) rotate(0.5deg); }
  to { transform: translate(0, 10px) rotate(-0.2deg); }
}
@keyframes lx-float-c {
  from { transform: translate(0, 0) rotate(-0.2deg); }
  to { transform: translate(6px, -8px) rotate(0.4deg); }
}

.lx-win {
  background: color-mix(in srgb, var(--lx-panel) 92%, #fff);
  border: 1px solid var(--lx-line);
  border-radius: 20px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 28px 60px color-mix(in srgb, #0d1410 18%, transparent);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
:root[data-theme="dark"] .lx-win {
  box-shadow: 0 28px 60px color-mix(in srgb, #000 45%, transparent);
}
.lx-win > header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lx-line);
  font-weight: 700; font-size: .92rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--lx-panel));
}
.lx-pill {
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 70%, var(--lx-ink));
}
.lx-pill.is-live {
  background: color-mix(in srgb, #1f8a4c 22%, transparent);
  color: #1f8a4c;
  animation: lx-live 1.6s ease-in-out infinite;
}
@keyframes lx-live {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #1f8a4c 35%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.lx-roster { list-style: none; margin: 0; padding: 6px 12px 10px; }
.lx-roster li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--lx-line);
}
.lx-roster li:last-child { border-bottom: 0; }
.lx-ava {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem;
  background: color-mix(in srgb, var(--accent) 18%, var(--lx-mist));
  color: var(--lx-ink);
  position: relative;
}
.lx-ava.is-pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 14px;
  border: 2px solid color-mix(in srgb, #1f8a4c 55%, transparent);
  animation: lx-ring 1.8s ease-out infinite;
}
@keyframes lx-ring {
  0% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}
.lx-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-who strong { font-size: .92rem; }
.lx-who em {
  font-style: normal; font-size: .74rem; font-weight: 700;
  color: var(--lx-muted);
}
.lx-who em.is-ok { color: #1f8a4c; }
.lx-who em.is-warn { color: #b7791f; }
.lx-win-note {
  margin: 0;
  padding: 0 14px 12px;
  font-size: .74rem;
  color: var(--lx-muted);
}

.lx-pipe {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 12px 4px;
}
.lx-pipe-step {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--lx-line);
  font-size: .74rem;
  color: var(--lx-muted);
}
.lx-pipe-step b {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .68rem;
  background: color-mix(in srgb, var(--lx-ink) 8%, transparent);
}
.lx-pipe-step.is-on {
  color: var(--lx-ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--lx-line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.lx-pipe-step.is-on b { background: var(--accent); color: #fff; }
.lx-extract {
  position: relative;
  margin: 8px 12px 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--lx-line));
  overflow: hidden;
}
.lx-extract > strong { display: block; margin-bottom: 8px; font-size: .88rem; }
.lx-kv {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0;
  font-size: .84rem;
  border-bottom: 1px solid var(--lx-line);
}
.lx-kv span { color: var(--lx-muted); }
.lx-scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: lx-scan 1.6s linear infinite;
  pointer-events: none;
}
@keyframes lx-scan {
  from { top: 8%; opacity: .25; }
  to { top: 92%; opacity: 1; }
}

.lx-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 12px 4px;
}
.lx-metric {
  padding: 10px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--lx-mist));
  display: flex; flex-direction: column; gap: 2px;
}
.lx-metric span { font-size: .68rem; color: var(--lx-muted); font-weight: 600; }
.lx-metric strong { font-family: var(--lx-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.lx-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 88px;
  padding: 8px 12px 0;
}
.lx-bar {
  flex: 1;
  height: var(--h);
  border-radius: 7px 7px 2px 2px;
  background: color-mix(in srgb, var(--lx-ink) 12%, var(--lx-mist));
  transform-origin: bottom;
  animation: lx-bar 1.1s var(--d, 0s) cubic-bezier(.2,.8,.2,1) both,
             lx-bar-idle 2.8s calc(var(--d, 0s) + 1.1s) ease-in-out infinite alternate;
}
.lx-bar.is-hot {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent));
}
@keyframes lx-bar {
  from { transform: scaleY(.2); opacity: .35; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes lx-bar-idle {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}
.lx-mini {
  list-style: none; margin: 0; padding: 8px 12px 12px;
}
.lx-mini li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--lx-line);
  font-size: .8rem;
}
.lx-mini span { color: var(--lx-muted); }

.lx-foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between;
  padding: 20px clamp(16px, 3vw, 36px) 36px;
  border-top: 1px solid var(--lx-line);
  color: var(--lx-muted); font-size: .9rem;
}
.lx-foot a { color: inherit; }

@media (max-width: 960px) {
  .lx-hero { min-height: auto; padding-top: 28px; }
  .lx-hero-main { grid-template-columns: 1fr; }
  .lx-theater {
    min-height: 640px;
    margin: 8px auto 0;
    max-width: 420px;
  }
  .lx-watermark { top: 8%; font-size: clamp(5rem, 28vw, 10rem); opacity: .4; }
}
@media (max-width: 560px) {
  .lx-theater { min-height: 700px; }
  .lx-win-slot { width: 92%; }
  .lx-win-slot:nth-child(2) { top: 28%; }
  .lx-win-slot:nth-child(3) { left: 4%; }
  .lx-nav { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-mesh, .lx-bloom, .lx-watermark, .lx-win-slot,
  .lx-bar, .lx-scan, .lx-ava.is-pulse::after, .lx-pill.is-live {
    animation: none !important;
  }
  .lx-win-slot.is-focus { transform: none; }
}

/* ── Landing try paths (usable demo entry) ────────────────────────────────── */
.lx-try {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px clamp(16px, 3vw, 36px) 24px;
}
.lx-try-head { max-width: 560px; margin-bottom: 22px; }
.lx-try-head h2 {
  margin: 0 0 8px;
  font-family: var(--lx-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
}
.lx-try-head p { margin: 0; color: var(--lx-muted); line-height: 1.5; }
.lx-try-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.lx-try-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--lx-line);
  background: color-mix(in srgb, var(--lx-panel) 88%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, #0d1410 8%, transparent);
}
.lx-try-card h3 {
  margin: 0;
  font-family: var(--lx-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.lx-try-card > p {
  margin: 0;
  flex: 1;
  color: var(--lx-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.lx-try-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: .8rem;
  color: var(--lx-muted);
}
.lx-try-meta code {
  font-weight: 700;
  color: var(--lx-ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--lx-mist));
  padding: 3px 8px;
  border-radius: 8px;
}
.lx-try-card .lx-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 11px 16px;
  font-size: .92rem;
}
.lx-accounts {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--lx-line);
  background: color-mix(in srgb, var(--lx-panel) 70%, transparent);
}
.lx-accounts h3 {
  margin: 0 0 6px;
  font-family: var(--lx-display);
  font-size: 1.2rem;
}
.lx-accounts-note {
  margin: 0 0 12px;
  font-size: .85rem;
  color: var(--lx-muted);
}
.lx-account-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.lx-account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--lx-line);
  background: var(--lx-mist);
  cursor: pointer;
  font: inherit;
  color: var(--lx-ink);
  transition: border-color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.lx-account:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--lx-line));
  transform: translateY(-1px);
}
.lx-account:disabled { opacity: .5; cursor: not-allowed; }
.lx-account strong { font-size: .95rem; }
.lx-account code { font-size: .8rem; color: var(--accent); }
.lx-account span { font-size: .78rem; color: var(--lx-muted); }
.lx-caps-simple {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 36px) 64px;
}
.lx-cap-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lx-cap-col {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--lx-line);
  background: color-mix(in srgb, var(--lx-panel) 75%, transparent);
}
.lx-cap-col h3 {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 800;
}
.lx-cap-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lx-cap-col li {
  font-size: .86rem;
  color: var(--lx-muted);
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--lx-line));
}
@media (max-width: 900px) {
  .lx-try-grid, .lx-account-row { grid-template-columns: 1fr; }
  .lx-cap-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lx-cap-cols { grid-template-columns: 1fr; }
}


/* Analytics manager attendance + campaign recipient density. */
.manager-heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.manager-heat-card,
.studio-recipient-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 2%);
}
.analytics-heatmap {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 3px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.analytics-heat-cell {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.analytics-heatmap button.analytics-heat-cell { cursor: pointer; }
.analytics-heatmap button.analytics-heat-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.analytics-heat-cell.good { background: color-mix(in srgb, #10b981 78%, white); }
.analytics-heat-cell.warn { background: color-mix(in srgb, #f59e0b 78%, white); }
.analytics-heat-cell.leave { background: color-mix(in srgb, #8b5cf6 70%, white); }
.analytics-heat-cell.bad { background: color-mix(in srgb, #ef4444 76%, white); }
.analytics-heat-legend {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--muted);
}
.analytics-heat-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.studio-recipient-list {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  margin-top: 10px;
}
.studio-recipient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
}

/* Premium slicer rail — existing native controls and API values stay intact. */
.floating-filters {
  isolation: isolate;
  top: 82px;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 30%, var(--line));
  border-radius: 17px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--luxury-copper) 5%, transparent), transparent 25%),
    color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--luxury-charcoal) 11%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--luxury-copper) 34%, transparent) transparent;
}
.floating-filters::after {
  position: sticky;
  inset-inline-end: -10px;
  align-self: stretch;
  flex: 0 0 20px;
  margin-block: -8px;
  margin-inline-start: -20px;
  content: "";
  pointer-events: none;
  background: linear-gradient(to left, var(--surface), transparent);
}
[dir="rtl"] .floating-filters::after {
  background: linear-gradient(to right, var(--surface), transparent);
}
.floating-filters-label {
  position: sticky;
  z-index: 2;
  inset-inline-start: -10px;
  align-self: stretch;
  flex: 0 0 auto;
  padding: 0 14px;
  border-inline-end: 1px solid color-mix(in srgb, var(--luxury-copper) 24%, var(--line));
  color: var(--luxury-copper);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.floating-filters-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0;
}
.floating-filters :is(select, input[type=search], input[type=text], input[type=date]) {
  flex: 0 0 auto;
  width: auto;
  min-width: 138px;
  min-height: 40px;
  border-color: color-mix(in srgb, var(--luxury-copper) 18%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 28%, transparent);
  font-weight: 750;
}
.floating-filters :is(select, input):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.floating-filters .segmented {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  border-color: color-mix(in srgb, var(--luxury-copper) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
}
.segmented button,
.segmented .seg-btn {
  position: relative;
  min-height: 34px;
  border-radius: 8px;
  color: var(--ink-3);
  font-weight: 750;
}
.segmented button.is-active,
.segmented .seg-btn.is-active,
.segmented [aria-pressed="true"] {
  color: var(--ink);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 23%, var(--surface)),
    color-mix(in srgb, var(--accent) 13%, var(--surface-2)));
  box-shadow:
    0 5px 12px color-mix(in srgb, var(--luxury-charcoal) 13%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
.floating-filters .btn {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 11px;
}
@media (max-width: 620px) {
  .floating-filters { top: 68px; border-radius: 14px; }
  .floating-filters-label { padding-inline: 11px; }
  .floating-filters :is(select, input[type=search], input[type=text], input[type=date]) {
    min-width: 128px;
  }
}

/* ── Customer-by-customer credit control ─────────────────────────────────── */
.collection-preview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}
.collection-preview-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
}
.collection-preview-summary span {
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.collection-preview-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.collection-customer-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 220px;
}
.collection-customer-cell .badge { flex: 0 0 auto; }
.collection-credit-meter {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 120px;
  padding-top: 6px;
}
.collection-credit-meter::before,
.collection-credit-meter > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
}
.collection-credit-meter::before { width: 100%; background: var(--surface-3); }
.collection-credit-meter > span { background: var(--warn); }
.collection-credit-meter strong { font-size: .78rem; }
.collection-action-list { display: grid; gap: 8px; }
.collection-action-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.collection-action-choice:hover,
.collection-action-choice:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.collection-action-choice strong { font-size: .92rem; }
.collection-action-choice > span:not(.badge) {
  grid-column: 1;
  color: var(--ink-3);
  font-size: .8rem;
}
.collection-promise-fields,
.collection-channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.collection-setup-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}
.collection-setup-rail button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 100px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}
.collection-setup-rail button > span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--surface-3);
}
.collection-setup-rail button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink);
}
.collection-setup-rail button.is-done > span {
  background: var(--ok);
  color: #fff;
}
.collection-channel-field {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.collection-channel-field legend {
  padding: 0 5px;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.collection-channel-choice,
.collection-activation {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.collection-activation > span { display: grid; gap: 3px; }
.collection-activation small { color: var(--ink-3); }
.collection-message-proof {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ok) 5%, var(--surface));
}
.collection-message-proof > div:first-child { display: grid; gap: 4px; }
.collection-message-proof span {
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
}
.collection-message-proof pre {
  max-height: 300px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  line-height: 1.55;
}
.collection-wizard-foot {
  position: sticky;
  bottom: -18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px -4px -18px;
  padding: 14px 4px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.collection-advanced {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.collection-advanced > summary {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  cursor: pointer;
}
.collection-advanced > summary span { color: var(--ink-3); font-size: .82rem; }
.collection-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.collection-advanced > .stack { padding: 16px; }
@media (max-width: 720px) {
  .collection-setup-rail { grid-template-columns: repeat(5, 112px); }
  .collection-wizard-foot { bottom: -14px; margin-bottom: -14px; }
}

/* ── Plain-language automation workspace ─────────────────────────────────── */
.automation-rule-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
  padding: 13px 15px;
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  color: var(--ink-2);
  font-size: .86rem;
  line-height: 1.55;
}
.automation-rule-sentence strong { color: var(--ink); }
.automation-rule-sentence small { color: var(--ink-3); }
.plain-language-guide {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 28%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--luxury-plum) 11%, transparent), transparent 34%),
    linear-gradient(120deg, color-mix(in srgb, var(--luxury-copper) 7%, transparent), transparent 48%),
    var(--surface);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--luxury-charcoal) 10%, transparent);
}
.plain-language-guide-head {
  display: grid;
  gap: 4px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--luxury-copper) 18%, var(--line));
}
.plain-language-guide-head > span {
  color: var(--luxury-copper);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.plain-language-guide-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.plain-language-guide-head p {
  max-width: 780px;
  margin: 0;
  color: var(--ink-3);
  font-size: .77rem;
  line-height: 1.55;
}
.plain-language-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.plain-language-guide-item {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 15px 18px 17px;
  border-inline-start: 1px solid color-mix(in srgb, var(--luxury-copper) 14%, var(--line));
}
.plain-language-guide-item:first-child { border-inline-start: 0; }
.plain-language-guide-item > span {
  color: var(--luxury-copper);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plain-language-guide-item strong {
  color: var(--ink);
  font-size: .83rem;
  font-weight: 800;
}
.plain-language-guide-item p,
.plain-language-guide-item small {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink-3);
  font-size: .72rem;
  line-height: 1.48;
}
.plain-language-guide-item small {
  padding-top: 3px;
  color: var(--ink-2);
}
.plain-language-guide-item small b { color: var(--luxury-copper); }
.automation-advanced {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--luxury-copper) 25%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
}
.automation-advanced > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
}
.automation-advanced > summary > div { display: grid; gap: 4px; min-width: 0; }
.automation-advanced > summary strong { font-size: 1rem; }
.automation-advanced > summary span:not(.badge) {
  color: var(--ink-3);
  font-size: .82rem;
}
.automation-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.automation-advanced > .stack { padding: 18px; }
@media (max-width: 720px) {
  .plain-language-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .plain-language-guide-item,
  .plain-language-guide-item:first-child {
    border-inline-start: 0;
    border-top: 1px solid color-mix(in srgb, var(--luxury-copper) 14%, var(--line));
  }
  .plain-language-guide-item:first-child { border-top: 0; }
}

/* ── Expandable organization tree + business-language access ─────────────── */
.users-view .org-tree {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.users-view .org-children {
  display: grid;
  gap: 5px;
  margin-inline-start: 22px;
  padding: 6px 0 2px 18px;
  border-inline-start: 1px solid color-mix(in srgb, var(--luxury-copper) 35%, var(--line));
}
.org-node-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}
.org-tree-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.1rem;
  cursor: pointer;
}
.org-tree-toggle:not(:disabled):hover,
.org-tree-toggle:not(:disabled):focus-visible {
  color: var(--ink);
  background: var(--surface-3);
}
.users-view .org-person {
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--luxury-charcoal) 5%, transparent);
}
.users-view .org-person:hover,
.users-view .org-person:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.org-person-copy { display: grid; gap: 2px; min-width: 0; }
.org-person-copy strong,
.org-person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-person-copy strong { font-size: .87rem; }
.org-person-copy small { color: var(--ink-3); font-size: .75rem; }
.org-report-count {
  color: var(--ink-3);
  font-size: .72rem;
  white-space: nowrap;
}
.org-load-more { padding: 5px 0; }
.org-search-results { padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.user-team-place,
.user-access-summary,
.user-account-state {
  display: grid;
  gap: 3px;
  min-width: 140px;
}
.user-team-place span,
.user-access-summary span,
.user-account-state > span:not(.badge),
.user-account-state small {
  color: var(--ink-3);
  font-size: .74rem;
}
.user-role-access { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.user-access-summary strong { font-size: .8rem; }
.user-access-change-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--luxury-copper);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
}
.user-access-change-summary span { color: var(--ink-3); font-size: .78rem; }
.user-access-matrix {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.user-access-matrix-head,
.user-access-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.6fr) minmax(90px, .6fr) minmax(130px, .8fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 11px 14px;
}
.user-access-matrix-head {
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.user-access-row { border-top: 1px solid var(--line); }
.user-access-row.is-custom {
  background: color-mix(in srgb, var(--warn) 5%, var(--surface));
}
.user-access-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
.user-access-row > div:first-child strong { font-size: .82rem; }
.user-access-row > div:first-child span,
.user-inherited-access { color: var(--ink-3); font-size: .74rem; line-height: 1.4; }
.user-access-row > div:last-child { display: flex; align-items: center; gap: 7px; }
.user-access-row select { width: 100%; min-width: 0; }
@media (max-width: 680px) {
  .users-view .org-person {
    grid-template-columns: 30px minmax(120px, 1fr) auto;
  }
  .org-report-count { display: none; }
  .user-access-matrix { overflow-x: auto; }
  .user-access-matrix-head,
  .user-access-row { min-width: 620px; }
  .user-access-change-summary { display: grid; }
}

/* ── Configuration: primary workflows vs advanced server controls ───────── */
.config-advanced-settings {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.config-advanced-settings > summary {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 18px 20px;
  cursor: pointer;
}
.config-advanced-settings > summary span {
  color: var(--ink-3);
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.config-advanced-settings[open] > summary { border-bottom: 1px solid var(--line); }
.config-advanced-settings > .stack { padding: 16px; }
.config-schedule-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  min-width: 0;
}
.config-health-result {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.config-health-result.is-pass {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok) 5%, var(--surface));
}
.config-health-result.is-fail {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}
.config-health-result span,
.config-health-result small {
  color: var(--ink-3);
  font-size: .78rem;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .config-schedule-row { grid-template-columns: 1fr; }
}
.cfg-final-checks {
  display: grid;
  gap: 8px;
}
.cfg-final-checks > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.cfg-final-checks > div > div { display: grid; gap: 2px; min-width: 0; }
.cfg-final-checks strong { font-size: .82rem; }
.cfg-final-checks span:not(.cfg-mark) {
  color: var(--ink-3);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

/* ── 2026 shell refinement: collapsed navigation + automation pulse ─────── */
@media (min-width: 901px) {
  .app-shell.sidebar-compact,
  .app-shell.sidebar-compact:is(:hover, :focus-within) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app-shell.sidebar-compact .app-sidebar,
  .app-shell.sidebar-compact .app-sidebar:hover,
  .app-shell.sidebar-compact .app-sidebar:focus-within {
    position: fixed;
    inset: 0 auto 0 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: 72px;
    height: 100dvh;
    padding: 14px 10px 12px;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition:
      width 220ms var(--ease-standard),
      padding 220ms var(--ease-standard),
      box-shadow 220ms var(--ease-standard);
  }

  .app-shell.sidebar-compact .app-sidebar:hover,
  .app-shell.sidebar-compact .app-sidebar:focus-within {
    width: 252px;
    padding-inline: 14px;
    box-shadow: 22px 0 54px rgba(2, 6, 23, .28);
  }

  .app-shell.sidebar-compact .app-sidebar::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-nav::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:hover::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:focus-within::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:hover .app-nav::-webkit-scrollbar,
  .app-shell.sidebar-compact .app-sidebar:focus-within .app-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .app-shell.sidebar-compact .app-nav,
  .app-shell.sidebar-compact .app-sidebar:hover .app-nav,
  .app-shell.sidebar-compact .app-sidebar:focus-within .app-nav {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .app-shell.sidebar-compact .brand {
    justify-content: center;
    padding-inline: 5px;
  }

  .app-shell.sidebar-compact .brand > div:last-child,
  .app-shell.sidebar-compact .brand-name,
  .app-shell.sidebar-compact .sidebar-search-copy,
  .app-shell.sidebar-compact .nav-item-label,
  .app-shell.sidebar-compact .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .nav-group-count,
  .app-shell.sidebar-compact .nav-group-chevron,
  .app-shell.sidebar-compact .sidebar-foot {
    display: none;
  }

  .app-shell.sidebar-compact .sidebar-search,
  .app-shell.sidebar-compact .nav-group-toggle,
  .app-shell.sidebar-compact .nav-item,
  .app-shell.sidebar-compact .nav-item:hover {
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding-inline: 6px;
  }

  .app-shell.sidebar-compact .nav-group-toggle-main { flex: 0 0 auto; }
  .app-shell.sidebar-compact .nav-group-items { margin-inline: 0; }

  .app-shell.sidebar-compact .app-sidebar:hover .brand,
  .app-shell.sidebar-compact .app-sidebar:focus-within .brand {
    justify-content: flex-start;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .brand > div:last-child,
  .app-shell.sidebar-compact .app-sidebar:hover .brand-name,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-item-label,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-count,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-chevron,
  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-foot,
  .app-shell.sidebar-compact .app-sidebar:focus-within .brand > div:last-child,
  .app-shell.sidebar-compact .app-sidebar:focus-within .brand-name,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-item-label,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle-main > span:nth-child(2),
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-count,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-chevron,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-foot {
    display: block;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-search-copy,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-search-copy {
    display: grid;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .sidebar-search,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle,
  .app-shell.sidebar-compact .app-sidebar:hover .nav-item,
  .app-shell.sidebar-compact .app-sidebar:focus-within .sidebar-search,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-item {
    justify-content: flex-start;
    padding-inline: 10px;
  }

  .app-shell.sidebar-compact .app-sidebar:hover .nav-group-toggle-main,
  .app-shell.sidebar-compact .app-sidebar:focus-within .nav-group-toggle-main {
    flex: 1;
  }

  .app-shell.sidebar-compact .app-sidebar:hover ~ .app-body,
  .app-shell.sidebar-compact .app-sidebar:focus-within ~ .app-body {
    opacity: 1;
    filter: none;
  }
}

/* Final cascade: intentional depth on navigation reveal and a true single-orb
   automation control. Kept after the legacy shell rules so one state owns
   each property. */

/* Login form contrast: the workspace may prefer dark chrome, but this panel is
   intentionally ivory. Pin native controls (including autofill) to that local
   colour scheme so dark-theme globals can never create black-on-black text. */
.auth-panel,
.auth-form-wrap {
  color-scheme: light;
}

.auth-form input,
.auth-form input:hover,
.auth-form input:active {
  color: #202127;
  -webkit-text-fill-color: #202127;
  caret-color: #202127;
  border-color: rgba(74, 62, 52, .20);
  background-color: #fffdf9;
  background-image: none;
  box-shadow: inset 0 1px 2px rgba(49, 40, 34, .045);
}

.auth-form input::placeholder {
  color: #817970;
  -webkit-text-fill-color: #817970;
  opacity: 1;
}

.auth-form input:focus,
.auth-form input:focus-visible {
  color: #17191f;
  -webkit-text-fill-color: #17191f;
  caret-color: color-mix(in srgb, var(--accent) 72%, #59402c);
  border-color: color-mix(in srgb, var(--accent) 68%, #8a6540);
  background-color: #ffffff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent),
    inset 0 1px 2px rgba(49, 40, 34, .04);
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #202127 !important;
  caret-color: #202127;
  -webkit-box-shadow: 0 0 0 1000px #fffdf9 inset !important;
  box-shadow: 0 0 0 1000px #fffdf9 inset !important;
  transition: background-color 9999s var(--ease-exit) 0s;
}

.auth-form input:disabled {
  color: #6f6962;
  -webkit-text-fill-color: #6f6962;
  background-color: #eeeae3;
  opacity: 1;
}

.auth-form input::selection {
  color: #ffffff;
  background: color-mix(in srgb, var(--accent) 82%, #314437);
}

@media (min-width: 901px) {
  .app-shell.sidebar-compact .app-body {
    transition:
      filter 220ms var(--ease-standard),
      opacity 220ms var(--ease-standard);
  }

  .app-shell.sidebar-compact .app-sidebar:hover ~ .app-body,
  .app-shell.sidebar-compact .app-sidebar:focus-within ~ .app-body {
    opacity: 1;
    filter: blur(2.2px) saturate(.92);
  }
}

.smartbar {
  width: 50px;
  max-height: 50px;
  padding: 6px;
  gap: 0;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--luxury-copper) 42%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 26% 18%, color-mix(in srgb, var(--luxury-copper) 14%, transparent), transparent 46%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-3) 86%, var(--luxury-plum) 14%),
      color-mix(in srgb, var(--surface) 96%, var(--luxury-charcoal))
    );
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 12%, transparent);
  backdrop-filter: blur(20px) saturate(1.12);
  transition:
    width 220ms var(--ease-standard),
    max-height 240ms var(--ease-standard),
    border-color 220ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}

.smartbar:hover,
.smartbar:focus-within {
  width: 284px;
  max-height: 260px;
  padding: 8px;
  gap: 7px;
  border-color: color-mix(in srgb, var(--luxury-copper) 68%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--luxury-copper) 13%, transparent), transparent 40%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--luxury-plum) 11%, transparent), transparent 43%),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--surface-3) 90%, var(--luxury-plum) 10%),
      var(--surface) 68%
    );
  box-shadow:
    var(--elev-3),
    0 0 0 1px color-mix(in srgb, var(--luxury-copper) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--luxury-ivory) 13%, transparent);
}

.smartbar-head {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-width: 266px;
}

.smartbar-master-orb {
  color: var(--luxury-copper);
  border-color: color-mix(in srgb, var(--luxury-copper) 42%, var(--line));
  background:
    radial-gradient(circle at 32% 22%, color-mix(in srgb, var(--luxury-ivory) 20%, transparent), transparent 38%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--luxury-copper) 16%, var(--surface-3)),
      color-mix(in srgb, var(--luxury-plum) 12%, var(--surface))
    );
}

.smartbar-head-copy strong,
.smartbar-copy strong { color: var(--ink); }

.smartbar-head-copy small,
.smartbar-copy small { color: var(--ink-3); }

.smartbar-count {
  top: -1px;
  left: 24px;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  color: var(--luxury-charcoal);
  border: 1px solid var(--surface);
  background: var(--warn);
}

.smartbar:not(.has-missing) .smartbar-count {
  color: var(--luxury-charcoal);
  background: var(--chart-1);
}

.smartbar:hover .smartbar-count,
.smartbar:focus-within .smartbar-count {
  min-width: 22px;
  height: 22px;
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface-4);
}

.smartbar-list {
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border-top-color: transparent;
  transform: translateY(-5px);
  transition:
    max-height 220ms var(--ease-standard),
    padding 180ms var(--ease-standard),
    opacity 150ms var(--ease-standard),
    transform 200ms var(--ease-standard),
    visibility 0s linear 220ms;
}

.smartbar:hover .smartbar-list,
.smartbar:focus-within .smartbar-list {
  max-height: 190px;
  padding-top: 7px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  border-top-color: var(--line);
  transform: none;
  transition-delay: 0s;
}

.smartbar-item:hover {
  background: color-mix(in srgb, var(--surface-4) 78%, transparent);
}

.smartbar-item.is-ready .smartbar-dot {
  color: var(--chart-1);
  background: color-mix(in srgb, var(--chart-1) 13%, var(--surface-2));
}

.smartbar-item.is-missing .smartbar-dot {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 13%, var(--surface-2));
}

.smartbar-item.is-unknown .smartbar-dot {
  color: var(--ink-3);
  background: var(--surface-3);
}

@media (max-width: 860px) {
  .smartbar:hover,
  .smartbar:focus-within {
    width: min(284px, calc(100vw - 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.sidebar-compact .app-body,
  .smartbar,
  .smartbar-list {
    transition: none;
  }
}
/* ── Manager cockpit: operational decisions, not duplicated analytics ─────── */
.manager-decision-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--chart-copper, #b77947) 32%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: 0 24px 70px color-mix(in srgb, #0f172a 12%, transparent);
}

.manager-stage-head h2,
.manager-panel-head h3 {
  margin: 4px 0 5px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.manager-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.manager-action-card {
  min-width: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 20px;
  color: var(--text);
  text-align: left;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent);
  cursor: pointer;
  transition: transform .2s var(--ease-standard), border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}

.manager-action-card:hover,
.manager-action-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 38px color-mix(in srgb, #0f172a 14%, transparent);
  outline: none;
}

.manager-action-card.is-danger { border-top: 3px solid var(--danger, #b54343); }
.manager-action-card.is-warn { border-top: 3px solid var(--warning, #c68b2c); }
.manager-action-card.is-ok { border-top: 3px solid var(--success, #16856b); }

.manager-action-eyebrow {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.manager-action-value {
  margin: 4px 0;
  font-size: clamp(2.4rem, 4vw, 3.7rem);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.07em;
}

.manager-action-card > strong {
  font-size: 1.02rem;
  line-height: 1.25;
}

.manager-action-copy {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.manager-action-link {
  margin-top: auto;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 800;
}

.manager-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 16px;
  align-items: start;
}

.manager-detail-panel { min-width: 0; overflow: hidden; }
.manager-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
}

@media (max-width: 1050px) {
  .manager-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .manager-action-grid { grid-template-columns: 1fr; }
  .manager-action-card { min-height: 180px; }
  .manager-panel-head { align-items: stretch; flex-direction: column; }
}

/* ── Premium mobile / cross-device shell (shared kit) ─────────────────────── */
body.ui-overlay-open {
  overflow: hidden;
  touch-action: none;
}

.app-shell {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.app-sidebar {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.landing-body .lx-nav {
  padding-top: max(14px, var(--safe-top));
  padding-left: max(16px, calc(clamp(16px, 3vw, 36px) + var(--safe-left)));
  padding-right: max(16px, calc(clamp(16px, 3vw, 36px) + var(--safe-right)));
}

.data-table-scroll table.data-table {
  min-width: 640px;
}
table.data-table td .row,
table.data-table td .btn,
table.data-table .btn-sm {
  white-space: nowrap;
}

.invoice-line-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.invoice-line-row .invoice-line-desc { flex: 2 1 240px; min-width: 0; }
.invoice-line-row .invoice-line-qty { width: 90px; }
.invoice-line-row .invoice-line-price { width: 130px; }
.invoice-line-row .invoice-line-disc,
.invoice-line-row .invoice-line-tax { width: 92px; }

.pdf-preview-host iframe,
.pdf-preview-host img {
  max-height: min(70vh, 720px);
}
.pdf-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .invoice-line-row .invoice-line-desc,
  .invoice-line-row .invoice-line-qty,
  .invoice-line-row .invoice-line-price,
  .invoice-line-row .invoice-line-disc,
  .invoice-line-row .invoice-line-tax {
    width: 100%;
    flex: 1 1 100%;
  }
  .ui-modal-actions {
    flex-direction: column-reverse;
  }
  .ui-modal-actions .btn { width: 100%; justify-content: center; }
  .pdf-preview-host iframe,
  .pdf-preview-host img {
    height: min(62dvh, 560px) !important;
    max-height: min(62dvh, 560px) !important;
  }
}

@media (max-width: 560px) {
  .floating-filters {
    top: max(96px, calc(88px + var(--safe-top)));
  }
  .assistant-fab {
    right: max(12px, var(--safe-right));
    bottom: calc(max(12px, calc(10px + var(--safe-bottom))) + 58px);
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }
  .assistant-fab-label { display: none; }
}

@media (pointer: coarse) {
  .assistant-fab { min-width: 54px; min-height: 54px; }
  .btn-sm,
  .ui-drawer-close,
  .easy-soa-shortcut,
  .easy-soa-tool,
  .segmented button,
  .floating-filters .btn {
    min-height: 44px;
  }
  .easy-soa-shortcut { min-height: 40px; padding: 6px 12px; }
  .lx-ghost-btn,
  .lx-nav-cta,
  .public-lang-select {
    min-height: 44px;
  }
}

/* ── Credit Control, Automation and Manager workspace ──────────────────── */
.workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
  box-shadow: 0 14px 38px rgba(22, 18, 28, .08);
}
.workspace-tabs button {
  min-width: 0;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    transform var(--dur-2) var(--ease-standard);
}
.workspace-tabs button strong,
.workspace-tabs button span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.workspace-tabs button strong {
  color: var(--text);
  font-size: .88rem;
  font-weight: 780;
}
.workspace-tabs button span {
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.35;
}
.workspace-tabs button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%);
}
.workspace-tabs button.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 17%, transparent);
  transform: translateY(-1px);
}
.collection-tab-intro,
.automation-tab-intro,
.manager-tab-intro {
  min-width: 0;
  padding: clamp(17px, 2.5vw, 28px);
  border-inline-start: 4px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%), var(--surface));
}
[dir="rtl"] .collection-tab-intro,
[dir="rtl"] .automation-tab-intro,
[dir="rtl"] .manager-tab-intro {
  border-radius: 18px 0 0 18px;
}
.collection-tab-intro h2,
.automation-tab-intro h2,
.manager-tab-intro h2,
.schedule-library-head h2 {
  margin: 3px 0 6px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.collection-tab-intro p,
.automation-tab-intro p,
.manager-tab-intro p {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.automation-tab-intro .btn { margin-top: 12px; }

.schedule-manager,
.schedule-editor,
.schedule-preview,
.schedule-library-head > *,
.schedule-step-card,
.schedule-step-card > * {
  min-width: 0;
}
.schedule-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 92%, #6f3f65 8%), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, #b87333 20%);
}
.schedule-library-head p {
  max-width: 72ch;
  margin: 5px 0 0;
}
.schedule-row-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 360px;
}
.schedule-preview-summary,
.schedule-definition-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--border);
}
.schedule-definition-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedule-preview-summary > div,
.schedule-definition-proof > div {
  min-width: 0;
  padding: 14px;
  background: var(--surface);
}
.schedule-preview-summary span,
.schedule-definition-proof span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.schedule-preview-summary strong,
.schedule-definition-proof strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 800;
}
.schedule-message-proof summary {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}
.schedule-message-proof pre {
  max-width: min(520px, 70vw);
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: .78rem;
}
.schedule-archive {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.schedule-archive > summary {
  font-weight: 760;
  cursor: pointer;
}

.schedule-editor-rail {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.schedule-editor-rail button {
  min-width: 0;
  padding: 9px 7px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: .74rem;
  font-weight: 720;
  cursor: pointer;
}
.schedule-editor-rail button span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-inline-end: 5px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .65rem;
}
.schedule-editor-rail button.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
}
.schedule-editor-rail button.is-done { color: var(--ok, #17845f); }
.schedule-editor-stage {
  min-width: 0;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.schedule-editor-stage > h3 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  font-weight: 800;
}
.schedule-explainer {
  padding: 13px 15px;
  border-inline-start: 3px solid #b87333;
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--surface-2) 90%, #b87333 10%);
}
.schedule-explainer p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.schedule-step-list { display: grid; gap: 12px; }
.schedule-step-card {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, #b87333 24%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, #b87333 4%);
}
.schedule-step-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.schedule-step-head strong { display: block; font-weight: 790; }
.schedule-weekdays {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.schedule-day-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.schedule-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .76rem;
  font-weight: 700;
}
.schedule-editor-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.automation-sentence-builder {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: clamp(15px, 2.5vw, 22px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 17px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%), var(--surface));
  font-size: .94rem;
  font-weight: 680;
  line-height: 1.5;
}
.automation-sentence-builder select,
.automation-sentence-builder input[type="time"] {
  width: auto;
  min-width: 118px;
  font-weight: 780;
}
.automation-delivery-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.automation-health-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.automation-health-proof > div,
.automation-outreach-link {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.automation-health-proof span,
.automation-health-proof strong {
  display: block;
  overflow-wrap: anywhere;
}
.automation-health-proof span { color: var(--muted); font-size: .75rem; }
.automation-health-proof strong { margin-top: 5px; }
.automation-outreach-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.automation-outreach-link h3 { margin: 3px 0 5px; font-weight: 790; }
.automation-outreach-link p { max-width: 76ch; margin: 0; color: var(--muted); }

.manager-filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 9px;
  min-width: 0;
}
.manager-filter-row > *,
.manager-person-cell { min-width: 0; }
.manager-person-cell strong,
.manager-person-cell small { display: block; overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .workspace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-editor-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manager-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .workspace-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .workspace-tabs::-webkit-scrollbar { display: none; }
  .workspace-tabs button {
    flex: 0 0 min(78vw, 260px);
    scroll-snap-align: start;
  }
  .schedule-library-head,
  .automation-outreach-link {
    align-items: stretch;
    flex-direction: column;
  }
  .schedule-preview-summary,
  .schedule-definition-proof,
  .automation-health-proof {
    grid-template-columns: 1fr;
  }
  .schedule-editor-rail {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .schedule-editor-rail::-webkit-scrollbar { display: none; }
  .schedule-editor-rail button { flex: 0 0 120px; }
  .schedule-step-head { align-items: flex-start; flex-direction: column; }
  .schedule-editor-foot { justify-content: stretch; }
  .schedule-editor-foot .btn { flex: 1 1 140px; }
  .manager-filter-row { grid-template-columns: 1fr; }
}

/* ── Compact enterprise density layer (2026-07-30) ───────────────────────
   This is intentionally the final shared layer. It reins in older page-level
   presentation overrides without changing page contracts or data ownership. */
:root {
  --compact-radius: 16px;
  --compact-gap: 10px;
  --compact-pad: 14px;
}

.app-main {
  padding: 20px clamp(15px, 2vw, 30px) 52px;
}

.page-hero {
  min-height: 136px;
  padding: 20px clamp(20px, 2.4vw, 30px);
  border-radius: 20px;
}
.page-hero::before {
  width: min(290px, 34vw);
  height: min(290px, 34vw);
  opacity: .58;
}
.page-hero h1,
.page-hero h2,
.page-hero-title {
  max-width: 22ch;
  font-size: clamp(1.62rem, 2.45vw, 2.38rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.page-hero p,
.page-hero-subtitle {
  max-width: 72ch;
  margin-top: 6px;
  font-size: .84rem;
  line-height: 1.45;
}
.page-hero-actions {
  gap: 7px;
  margin-top: 12px;
}

.btn {
  min-height: 38px;
  padding: 8px 14px;
}
.btn-sm {
  min-height: 31px;
  padding: 5px 10px;
}
input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: 40px;
}
textarea { min-height: 82px; }

.ops-strip {
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: 9px;
}
.ops-stat {
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  gap: 4px;
  align-content: start;
  border-radius: var(--compact-radius);
}
.ops-stat-top,
.metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ops-stat-label,
.metric-label {
  font-size: .67rem;
  line-height: 1.15;
  letter-spacing: .075em;
}
.ops-stat-status,
.metric-status {
  flex: 0 0 auto;
  max-width: 46%;
  overflow: hidden;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-stat-value {
  margin-top: 1px;
  font-size: clamp(1.24rem, 1.65vw, 1.62rem);
  line-height: 1.02;
}
.ops-stat-sub,
.metric-sub {
  font-size: .7rem;
  line-height: 1.3;
}
.ops-stat-details,
.metric-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 5px 9px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}
.ops-stat-details span,
.metric-details span {
  display: grid;
  min-width: 0;
  gap: 1px;
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.18;
}
.ops-stat-details b,
.metric-details b {
  overflow: hidden;
  color: var(--ink);
  font-size: .7rem;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card {
  min-height: 92px;
  padding: 12px 14px;
  border-radius: var(--compact-radius);
}
.metric-value {
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
}

.card,
.form-card,
.data-card,
.ops-card,
.integration-card {
  border-radius: var(--compact-radius);
}
.finance-overview-view .card,
.finance-overview-view .ops-card,
.finance-overview-view .data-card {
  padding: 16px !important;
}

.page-insights {
  gap: 14px;
  padding: 15px 18px;
  border-radius: 18px;
}
.page-insights-intro {
  margin-bottom: 10px;
}
.page-insights-intro h2 {
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
}
.page-insights-intro p {
  max-width: 76ch;
  font-size: .75rem;
  line-height: 1.4;
}
.page-insight-card {
  min-height: 186px;
  padding: 2px 14px 10px;
}
.page-insight-head {
  gap: 10px;
  margin-bottom: 8px;
}
.page-insight-head h3 {
  font-size: .94rem;
}
.page-insight-head p,
.page-insight-guide {
  font-size: .7rem;
  line-height: 1.38;
}
.page-insight-guide {
  margin-top: 8px;
  padding: 8px 10px;
}

.data-table-toolbar {
  min-height: 52px;
  padding: 8px 12px;
}
.data-table th,
.data-table td {
  padding: 9px 12px;
}
.data-table th {
  height: 38px;
  font-size: .65rem;
}
.data-table td {
  font-size: .76rem;
  line-height: 1.3;
}
.data-table-foot {
  min-height: 44px;
  padding: 7px 12px;
}

.filter-bar,
.premium-slicer-rail,
.insight-filter-rail {
  gap: 7px;
  padding: 8px 10px;
  border-radius: 15px;
}
.floating-filters {
  scrollbar-width: none;
}
.floating-filters::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.filter-bar label,
.premium-slicer-rail label,
.insight-filter-rail label {
  font-size: .67rem;
}

.rank-list { gap: 5px; }
.rank-row {
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 11px;
}
.rank-name { font-size: .74rem; }
.rank-name small { font-size: .63rem; }
.rank-value { font-size: .72rem; }

.chart-hit.is-interactive,
.chart-arc-click,
.chart-legend-btn,
.rank-row:is(button) {
  cursor: pointer;
}
.cash-period-hit.is-active {
  fill: color-mix(in srgb, var(--accent) 13%, transparent);
}
.chart-arc {
  transition: opacity var(--dur-1) var(--ease-standard),
              filter var(--dur-1) var(--ease-standard),
              stroke-width var(--dur-1) var(--ease-standard);
}
.chart-arc.is-active {
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 35%, transparent));
  stroke-width: 17;
}
.chart-arc.is-dimmed { opacity: .28; }
.chart-legend-btn.is-active,
.rank-row.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
.cash-period-hit:focus-visible,
.chart-arc-click:focus-visible,
.chart-legend-btn:focus-visible,
.rank-row:is(button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chart-arc { transition: none; }
}

@media (max-width: 720px) {
  .app-main { padding: 14px 12px 42px; }
  .page-hero {
    min-height: 0;
    padding: 17px 18px;
    border-radius: 17px;
  }
  .page-hero h1,
  .page-hero h2,
  .page-hero-title { font-size: 1.62rem; }
  .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-stat,
  .metric-card { padding: 11px 12px; }
  .page-insights { padding: 13px; }
  .page-insight-card { padding-inline: 5px; }
  .data-table th,
  .data-table td { padding: 8px 10px; }
}

@media (max-width: 460px) {
  .ops-strip { grid-template-columns: 1fr; }
  .ops-stat-details,
  .metric-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Receivables Centre — bulk company picker */
.receivables-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface-3) 94%, transparent);
}
.receivables-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.receivables-picker-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.receivables-picker-name { font-weight: 650; }

/* ── My Subscription demo ─────────────────────────────────────────────────── */
.subscription-panel { padding: 18px 20px; }
.subscription-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.subscription-pct { text-align: right; }
.subscription-pct strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
}
.subscription-bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface-3));
  overflow: hidden;
}
.subscription-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.subscription-update-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  color: var(--ink-3);
  font-size: .92rem;
  line-height: 1.45;
}
.subscription-pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.subscription-pay-opt.is-on {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink);
}
.tracker-update-card {
  padding: 16px 18px;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

/* Presence timeline (online / idle / offline) */
.presence-timeline-card { padding: 14px 16px; }
.presence-timeline-rail {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.presence-timeline-item {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  gap: 8px;
  align-items: center;
}
.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4, #94a3b8);
}
.presence-dot.is-online { background: var(--ok, #16a34a); }
.presence-dot.is-idle { background: var(--warn, #d97706); }
.presence-dot.is-offline { background: var(--ink-4, #94a3b8); }

/* First-run section chooser: direct, readable, and reversible later. */
.setup-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.setup-module-option {
  display: flex;
  min-width: 0;
  min-height: 82px;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: .83rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color var(--dur-2) var(--ease-standard),
    background var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard);
}
.setup-module-option:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.setup-module-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.setup-module-option > input { flex: 0 0 auto; margin-top: 3px; }
.setup-module-option > span { min-width: 0; display: grid; gap: 4px; }
.setup-module-option strong { font-size: .86rem; font-weight: 780; }
.setup-module-option small { color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .setup-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .setup-module-grid { grid-template-columns: 1fr; }
}

.center-screen > .auth-shell.auth-shell-wide {
  width: 100%;
  max-width: 620px;
}

@media (max-width: 620px) {
  .center-screen { padding: 12px; }
  .auth-shell.auth-shell-wide > .card { padding: 22px 18px; }
}

/* The navigation remains scrollable with wheel, touch and keyboard, without
   exposing platform scrollbars or a four-pixel horizontal gutter. */
.app-sidebar,
.app-nav {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-sidebar::-webkit-scrollbar,
.app-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Floating-control collision guard. The assistant and Help form the lower
   action dock; automation health always owns the upper-right status zone. */
@media (max-width: 860px) {
  .smartbar {
    top: max(76px, calc(62px + var(--safe-top)));
    right: max(10px, var(--safe-right));
    bottom: auto;
  }
}