/*
 * Atlas Core — acabamento global seguro.
 * Esta camada não altera estruturas, dimensões de mídia ou regras dos módulos.
 */
:root {
  --ax-surface: rgba(9, 18, 31, .88);
  --ax-surface-raised: rgba(13, 25, 42, .92);
  --ax-border: rgba(125, 170, 204, .18);
  --ax-border-strong: rgba(72, 198, 223, .34);
  --ax-accent: #42c9de;
  --ax-muted: #91a2b7;
  --ax-radius: 16px;
  --ax-shadow: 0 14px 36px rgba(0, 0, 0, .18);
  --ax-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ax-font-display: "Segoe UI Variable Display", Inter, "Segoe UI", sans-serif;
  --ax-space-1: 4px;
  --ax-space-2: 8px;
  --ax-space-3: 12px;
  --ax-space-4: 16px;
  --ax-space-5: 20px;
  --ax-space-6: 24px;
  --ax-space-8: 32px;
  --ax-focus: 0 0 0 3px rgba(66,201,222,.13);
}

html[data-appearance="claro"],
body[data-appearance="claro"] {
  --ax-surface: rgba(255,255,255,.96);
  --ax-surface-raised: #fff;
  --ax-border: rgba(48, 77, 103, .14);
  --ax-border-strong: rgba(19, 145, 174, .28);
  --ax-muted: #607286;
  --ax-shadow: 0 12px 30px rgba(31, 55, 77, .08);
}

html { scroll-behavior: smooth; }

body.main-body {
  background: var(--bg);
  font-family: var(--ax-font-sans);
}

/* No decorative video, moving grid or background layer inside the CRM. */
.atlas-app-atmosphere {
  display: none !important;
}

body.main-body .layout {
  background: var(--bg);
}

/* Sidebar: same structure and behavior, cleaner selected state. */
body.main-body .sidebar {
  border-right-color: var(--ax-border);
  box-shadow: 10px 0 28px rgba(0,0,0,.1);
}

body.main-body .sidebar-brand {
  border-color: var(--ax-border);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

html[data-appearance="claro"] body.main-body .sidebar-brand {
  background: rgba(255,255,255,.55);
}

body.main-body .sidebar .nav-link {
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

body.main-body .sidebar .nav-link:hover {
  transform: none;
  border-color: var(--ax-border);
  background: rgba(66,201,222,.07);
}

body.main-body .sidebar .nav-link.active {
  transform: none;
  color: var(--sidebar-link-hover);
  border-color: var(--ax-border-strong);
  background: rgba(66,201,222,.11);
  box-shadow: inset 3px 0 var(--ax-accent);
}

/* Header rebuilt as a stable three-column bar. */
body.main-body .topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-bottom: 1px solid var(--ax-border);
  border-radius: 0;
  background: var(--topbar-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  backdrop-filter: blur(18px);
}

body.main-body .topbar > .flex {
  display: grid !important;
  grid-template-columns: minmax(170px, auto) minmax(240px, 560px) auto;
  align-items: center;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

body.main-body .topbar > .flex > form {
  width: 100% !important;
  max-width: 560px !important;
  justify-self: center;
}

body.main-body .topbar > .flex > :last-child {
  display: flex;
  min-width: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: 10px !important;
}

body.main-body .topbar-page-heading {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}

body.main-body .topbar-page-copy { min-width: 0; }

.topbar-module-visual {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ax-border);
  border-radius: 13px;
  object-fit: cover;
  background: #0a1424;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

body.main-body .topbar-page-title,
body.main-body .topbar-page-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.main-body .topbar-page-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.02em;
  font-family: var(--ax-font-display);
}

body.main-body .topbar-page-context {
  margin-top: 2px;
  color: var(--ax-muted);
  font-size: .72rem;
}

body.main-body .topbar .input {
  height: 44px;
  border-color: var(--ax-border);
  border-radius: 12px;
  background: var(--input-bg);
  box-shadow: none;
}

body.main-body .topbar .input:focus {
  border-color: var(--ax-border-strong);
  box-shadow: 0 0 0 3px rgba(66,201,222,.08);
}

body.main-body :is(.mail-btn, .notif-bell-btn, .logout-btn, .topbar-avatar) {
  flex: 0 0 auto;
}

.atlas-theme-toggle {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--ax-border);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.atlas-theme-toggle:hover {
  color: var(--ax-accent);
  border-color: var(--ax-border-strong);
  background: rgba(66,201,222,.07);
  transform: translateY(-1px);
}

.atlas-theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.atlas-theme-moon { display: none; }
html[data-appearance="escuro"] .atlas-theme-sun,
body[data-appearance="escuro"] .atlas-theme-sun { display: none; }
html[data-appearance="escuro"] .atlas-theme-moon,
body[data-appearance="escuro"] .atlas-theme-moon { display: block; }

body.main-body :is(.mail-btn, .notif-bell-btn, .logout-btn) {
  border-color: var(--ax-border);
  box-shadow: none;
}

body.main-body .topbar-user {
  min-width: 0;
}

body.main-body .topbar-user-name {
  overflow: hidden;
  max-width: 130px;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Preserve every person/company image. These rules intentionally only reinforce
 * existing proportions and never replace, hide, filter or recolor an image.
 */
body.main-body :is(.topbar-avatar, .avatar-mini, .chat-avatar, .user-avatar, .profile-avatar) {
  overflow: hidden;
  flex-shrink: 0;
}

body.main-body :is(.topbar-avatar, .avatar-mini, .chat-avatar, .user-avatar, .profile-avatar) > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

body.main-body :is(.brand-logo, .sidebar-brand-symbol, [class*="company-logo"]) {
  object-fit: contain;
}

/* Content spacing only; page-specific grids remain untouched. */
body.main-body .atlas-page-stage {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 28px !important;
}

body.main-body .atlas-page-stage :is(h1,h2,h3) {
  font-family: var(--ax-font-display);
  letter-spacing: -.025em;
}

/* Shared surfaces get a restrained finish without changing their layout. */
body.main-body :is(.card, .panel, .content-card, .dashboard-card, .metric-card, .stat-card, .table-card, .settings-card, .form-card, .commercial-card) {
  border-color: var(--ax-border);
  box-shadow: var(--ax-shadow);
}

body.main-body :is(.card, .panel, .content-card, .dashboard-card, .metric-card, .stat-card, .table-card, .settings-card, .form-card, .commercial-card):focus-within {
  border-color: var(--ax-border-strong);
}

body.main-body .card {
  transform: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.main-body .card:hover {
  transform: none;
  border-color: var(--ax-border-strong);
  box-shadow: 0 16px 38px rgba(0,0,0,.2);
}

html[data-appearance="claro"] body.main-body .card:hover {
  box-shadow: 0 16px 34px rgba(31,55,77,.1);
}

body.main-body :is(.commercial-shell, .dashboard-shell, .administrative-shell) {
  border-color: var(--ax-border);
}

body.main-body :is(.commercial-hero, .dashboard-hero, [class$="-hero"]) {
  border-color: var(--ax-border);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

/* Disable the decorative dashboard wallpaper that competed with real content. */
body.main-body .dashboard-animated-background {
  display: none !important;
}

/* Tables remain readable and stable. */
body.main-body :is(.table-wrap, .table-responsive, [class*="table-wrap"]) {
  border-radius: 14px;
}

body.main-body table {
  color: var(--text);
}

body.main-body table th {
  color: var(--ax-muted);
}

body.main-body table td,
body.main-body table th {
  border-bottom-color: var(--ax-border);
}

body.main-body table tbody tr {
  transition: background .16s ease;
}

body.main-body table tbody tr:hover {
  background: rgba(66,201,222,.035);
}

/* Inputs are refined only through existing shared classes. */
body.main-body :is(.input, .select, .textarea) {
  border-color: var(--ax-border);
  border-radius: 11px;
  background: var(--input-bg);
  box-shadow: none;
}

body.main-body :is(.input, .select, .textarea):focus {
  border-color: var(--ax-border-strong);
  box-shadow: 0 0 0 3px rgba(66,201,222,.08);
}

body.main-body :is(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ax-focus);
}

body.main-body :is(.btn-primary, .primary-btn) {
  border-radius: 11px;
  background: linear-gradient(135deg, #48d4e8, #5ba3e9);
  box-shadow: 0 8px 20px rgba(37,153,190,.17);
  transition: filter .18s ease, transform .18s ease;
}

body.main-body :is(.btn-primary, .primary-btn):hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

body.main-body :is(.btn-secondary, .secondary-btn) {
  border-color: var(--ax-border);
  border-radius: 11px;
  box-shadow: none;
}

/* Kanban: no width, drag, overflow or positioning changes. */
body.main-body :is(.kanban-column, .pipeline-column) {
  border-color: var(--ax-border);
}

body.main-body :is(.kanban-card, .pipeline-card, .task-card) {
  border-color: var(--ax-border);
  box-shadow: 0 7px 18px rgba(0,0,0,.12);
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.main-body :is(.kanban-card, .pipeline-card, .task-card):hover {
  transform: none;
  border-color: var(--ax-border-strong);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Executive dashboard image is decorative and never covers real values. */
body.main-body .dashboard-hero {
  isolation: isolate;
  min-height: 220px;
  padding-right: clamp(270px, 28vw, 410px) !important;
  background:
    linear-gradient(112deg, rgba(7,17,31,.98) 0%, rgba(10,28,46,.96) 64%, rgba(11,30,49,.84) 100%);
}

body.main-body .dashboard-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 45%, rgba(66,201,222,.055));
}

.dashboard-hero-visual {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 18px;
  width: clamp(230px, 27vw, 390px);
  height: clamp(190px, 25vw, 350px);
  object-fit: contain;
  opacity: .92;
  transform: translateY(-50%);
  mask-image: radial-gradient(ellipse at center, #000 42%, transparent 76%);
}

body.main-body .dashboard-hero > :not(.dashboard-hero-visual) {
  position: relative;
  z-index: 1;
}

html[data-appearance="claro"] body.main-body .dashboard-hero {
  color: #102136;
  background: linear-gradient(112deg, #fff 0%, #f5fbfd 65%, #eaf7fa 100%);
}

html[data-appearance="claro"] .dashboard-hero-visual {
  opacity: .84;
}

/* Commercial illustration enriches the hero while preserving its actions. */
body.main-body .comx-hero {
  position: relative;
  isolation: isolate;
  min-height: 152px;
  padding-right: clamp(230px, 22vw, 330px);
}

.comx-hero-visual {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 94px;
  width: 220px;
  height: 220px;
  object-fit: contain;
  opacity: .72;
  transform: translateY(-50%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 76%);
}

body.main-body .comx-hero > :not(.comx-hero-visual) {
  position: relative;
  z-index: 1;
}

/* Light-theme bridge for the newer commercial workspace. */
html[data-appearance="claro"] body.main-body .comx-shell {
  --cb: rgba(76, 107, 137, .18);
}

html[data-appearance="claro"] body.main-body .comx-hero {
  color: #102136;
  background:
    radial-gradient(circle at 84% 4%, rgba(35,181,197,.12), transparent 35%),
    #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .comx-shortcuts,
  .comx-tabs,
  .comx-metrics article,
  .comx-dashboard > section,
  .comx-report,
  .comx-search,
  .comx-global-search,
  .comx-leads > article,
  .comx-goals > article,
  .comx-table table,
  .comx-activity-list article,
  .comx-rules article,
  .comx-dashboard-notes a
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .comx-search input,
  .comx-global-search input,
  .comx-dialog input,
  .comx-dialog select,
  .comx-dialog textarea
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .comx-dialog {
  color: #102136;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(31,55,77,.2);
}

html[data-appearance="claro"] body.main-body .comx-hero a {
  color: #075f69;
  background: rgba(25,157,164,.09);
}

/* Light-theme bridges for recent module families that were authored on dark-only surfaces. */
html[data-appearance="claro"] body.main-body .admin-page {
  --admin-line: rgba(76,107,137,.2);
  --admin-muted: #64748b;
  color: #102136;
}

html[data-appearance="claro"] body.main-body :is(
  .admin-hero,
  .admin-card,
  .admin-metrics article,
  .admin-modules a,
  .admin-modal > section
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .admin-filters input,
  .admin-filters select,
  .admin-form-grid input,
  .admin-form-grid select,
  .admin-form-grid textarea
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body :is(.admin-table td, .admin-activity-list a, .admin-modules a) {
  color: #1f3348;
}

html[data-appearance="claro"] body.main-body .gcal-shell {
  --gcal-border: rgba(76,107,137,.18);
  --gcal-surface: #ffffff;
  --gcal-soft: #edf4fa;
  color: #102136;
}

html[data-appearance="claro"] body.main-body :is(
  .gcal-toolbar,
  .gcal-sidebar,
  .gcal-main,
  .gcal-view-switch,
  .gcal-summary,
  .gcal-dialog
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(.gcal-day.is-outside, .gcal-today-button, .gcal-icon-button) {
  background: #f5f8fb;
}

html[data-appearance="claro"] body.main-body :is(
  .gcal-create-dialog input,
  .gcal-create-dialog select,
  .gcal-create-dialog textarea
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .adm-task-shell {
  --task-border: rgba(76,107,137,.18);
  --task-panel: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .adm-task-hero,
  .adm-task-column,
  .adm-task-card,
  .adm-task-report-card,
  .adm-task-dialog,
  .adm-task-detail
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body .adm-task-card.priority-urgente {
  background: #fff7f7;
}

html[data-appearance="claro"] body.main-body :is(
  .adm-task-filters input,
  .adm-task-filters select,
  .adm-task-board-tools button,
  .adm-task-board-tools select,
  .adm-task-form-grid input,
  .adm-task-form-grid select,
  .adm-task-form-grid textarea
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .hrm-shell {
  --hr-border: rgba(76,107,137,.18);
  --hr-card: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .hrm-hero,
  .hrm-tabs,
  .hrm-panel,
  .hrm-metrics article,
  .hrm-employee-grid > article,
  .hrm-org > section,
  .hrm-report-grid a,
  .hrm-dialog,
  .hrm-detail
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .hrm-filters input,
  .hrm-filters select,
  .hrm-form-sections input,
  .hrm-form-sections select,
  .hrm-form-sections textarea,
  .hrm-dynamic-fields input,
  .hrm-dynamic-fields select,
  .hrm-dynamic-fields textarea,
  .hrm-detail-layout [data-document-form] > *
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .monitor-page {
  --monitor-line: rgba(76,107,137,.2);
  --monitor-muted: #64748b;
  color: #102136;
}

html[data-appearance="claro"] body.main-body :is(
  .monitor-hero,
  .monitor-schedule-card,
  .monitor-process-card,
  .monitor-movements-card,
  .monitor-history-card,
  .monitor-metrics article,
  .monitor-governance article,
  .monitor-modal > section
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .monitor-filters input,
  .monitor-filters select,
  .monitor-log-detail textarea
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .monitor-table td {
  color: #1f3348;
}

html[data-appearance="claro"] body.main-body :is(
  .mastercfg-shell > header,
  .mastercfg-summary article,
  .mastercfg-tools a,
  .mastercfg-grid > section,
  .mastercfg-grid > aside
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .mastercfg-head input,
  .mastercfg-companies input,
  .mastercfg-companies select
) {
  color: #102136;
  background: #f8fbfd;
}

html[data-appearance="claro"] body.main-body .ccfg-shell {
  --cc-line: rgba(76,107,137,.18);
  --cc-card: #ffffff;
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .ccfg-nav,
  .ccfg-welcome,
  .ccfg-summary article,
  .ccfg-area-grid a,
  .ccfg-form,
  .ccfg-plan,
  .ccfg-updates,
  .ccfg-link-grid > a,
  .ccfg-toggle-grid label
) {
  color: #102136;
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body :is(
  .ccfg-top > label,
  .ccfg-search-results,
  .ccfg-form-grid input,
  .ccfg-form-grid select,
  .ccfg-form-grid textarea
) {
  color: #102136;
  background: #f8fbfd;
}

/* Reusable empty states receive the exclusive asset without replacing their copy/actions. */
body.main-body :is(
  .empty-state,
  .admin-empty,
  .gcal-empty,
  .documents-empty,
  .cs-empty,
  .cp-empty,
  .client-custom-empty,
  .comx-empty,
  .chat-empty,
  .finance-empty,
  .inventory-empty,
  .monitor-empty,
  .legal-cost-empty,
  .summary-history-empty,
  .deadline-empty,
  .contracts-empty,
  .hrm-empty,
  .pos-empty
) {
  position: relative;
}

body.main-body :is(
  .admin-empty,
  .gcal-empty,
  .documents-empty,
  .cs-empty,
  .cp-empty,
  .client-custom-empty,
  .comx-empty,
  .chat-empty,
  .finance-empty,
  .inventory-empty,
  .monitor-empty,
  .legal-cost-empty,
  .summary-history-empty,
  .deadline-empty,
  .contracts-empty,
  .hrm-empty,
  .pos-empty
)::before {
  content: "";
  display: block;
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: url("assets/crm-visuals/empty-state.webp") center / cover no-repeat #0a1424;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* Authentication experience */
body.auth-body {
  position: relative;
  overflow-x: hidden;
  padding: 28px;
  font-family: var(--ax-font-sans);
  background:
    radial-gradient(circle at 12% 15%, rgba(66,201,222,.1), transparent 28rem),
    var(--bg);
}

.atlas-auth-theme-toggle {
  position: fixed;
  z-index: 20;
  top: 22px;
  right: 22px;
}

body.auth-body > .atlas-auth-wrap {
  position: relative;
  z-index: 2;
  width: min(1080px, 100%);
  max-width: 1080px !important;
}

body.auth-body .atlas-auth-shell {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(300px,.9fr) minmax(390px,1.1fr);
  overflow: hidden;
  padding: 0 !important;
  border-radius: 24px;
  background: var(--card-bg);
}

.atlas-auth-visual {
  position: relative;
  display: grid;
  min-height: 670px;
  align-content: space-between;
  overflow: hidden;
  padding: 38px;
  color: #eef8ff;
  background: linear-gradient(145deg, #071321, #0c2338);
}

.atlas-auth-visual::after {
  display: none;
}

.atlas-auth-mockup {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border: 1px solid rgba(126,171,205,.24);
  border-radius: 18px;
  background: #0a1422;
  box-shadow: 0 26px 60px rgba(0,0,0,.4);
  animation: ax-auth-float 7s ease-in-out infinite;
}

.atlas-auth-mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(126,171,205,.16);
  background: #0d1929;
}

.atlas-auth-mockup-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a4b61;
}

.atlas-auth-mockup-bar i:first-child { background: #4ddbf7; }

.atlas-auth-mockup-bar span {
  margin-left: 6px;
  color: #aab8ca !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.atlas-auth-mockup-bar b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #8ce9bb;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.atlas-auth-mockup-bar b i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50dda6;
  box-shadow: 0 0 10px #50dda6;
}

.atlas-auth-mockup-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 16px 0;
}

.atlas-auth-mockup-metrics div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(126,171,205,.14);
  border-radius: 12px;
  background: #0d1a2b;
}

.atlas-auth-mockup-metrics small { color: #778aa2; font-size: .58rem; }
.atlas-auth-mockup-metrics strong { color: #f5f8fd !important; font-size: 1rem !important; font-family: inherit !important; }
.atlas-auth-mockup-metrics em { color: #5bdfa9; font-size: .58rem; font-style: normal; }

.atlas-auth-mockup-chart {
  padding: 14px 16px 4px;
}

.atlas-auth-mockup-chart svg { width: 100%; height: 90px; overflow: visible; }
.atlas-auth-mockup-chart .mockup-area { fill: url(#authMockupFill); }
.atlas-auth-mockup-chart .mockup-line {
  fill: none;
  stroke: #67e8f9;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  filter: drop-shadow(0 0 6px rgba(103,232,249,.5));
  animation: ax-mockup-draw 2.4s ease-out .3s forwards;
}

.atlas-auth-mockup-rows {
  display: grid;
  gap: 8px;
  padding: 4px 16px 16px;
}

.atlas-auth-mockup-rows span {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: rgba(126,171,205,.16);
}

.atlas-auth-mockup-rows span:nth-child(1) { width: 92%; }
.atlas-auth-mockup-rows span:nth-child(2) { width: 68%; }
.atlas-auth-mockup-rows span:nth-child(3) { width: 78%; }

@keyframes ax-mockup-draw {
  to { stroke-dashoffset: 0; }
}

.atlas-auth-visual > div {
  position: relative;
  z-index: 3 !important;
  display: grid;
  gap: 8px;
}

.atlas-auth-visual span {
  color: #5bd5e8;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.atlas-auth-visual strong {
  max-width: 380px;
  color: #eef8ff !important;
  font-family: var(--ax-font-display);
  font-size: clamp(1.55rem,2.5vw,2.4rem);
  line-height: 1.13;
  letter-spacing: -.04em;
}

.atlas-auth-visual p {
  margin: 0;
  color: #9badc2 !important;
  font-size: .9rem;
}

.atlas-auth-content {
  min-width: 0;
  align-self: center;
  padding: clamp(30px,5vw,64px);
}

.atlas-auth-content > h1 {
  font-family: var(--ax-font-display);
  letter-spacing: -.035em;
}

@keyframes ax-auth-float {
  50% { transform: translateY(-8px); }
}

/* ---------- Login/auth cinematic upgrade ---------- */

.atlas-auth-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.atlas-auth-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .38;
  animation: ax-aurora-drift 20s ease-in-out infinite;
}

.atlas-auth-aurora span:nth-child(1) { width: 42vw; height: 42vw; top: -14%; left: -10%; background: #3ac8e8; }
.atlas-auth-aurora span:nth-child(2) { width: 36vw; height: 36vw; bottom: -16%; right: -8%; background: #8b6cff; animation-duration: 24s; animation-delay: -6s; }
.atlas-auth-aurora span:nth-child(3) { width: 26vw; height: 26vw; bottom: 8%; left: 20%; background: #d9c6a2; opacity: .2; animation-duration: 26s; animation-delay: -12s; }

html[data-appearance="claro"] .atlas-auth-aurora span { opacity: .2; filter: blur(105px); }
html[data-appearance="claro"] .atlas-auth-aurora span:nth-child(3) { opacity: .14; }

@keyframes ax-aurora-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(4%, 6%, 0) scale(1.08); }
  66% { transform: translate3d(-5%, -3%, 0) scale(.96); }
}

body.auth-body > .atlas-auth-wrap {
  animation: ax-shell-enter .85s cubic-bezier(.16,1,.3,1) both;
}

@keyframes ax-shell-enter {
  from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

body.auth-body .atlas-auth-shell {
  position: relative;
  box-shadow: 0 40px 110px rgba(3,10,20,.35), 0 0 0 1px rgba(103,232,249,.06);
}

.atlas-auth-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
  background: radial-gradient(320px circle at var(--ax-cursor-x, 50%) var(--ax-cursor-y, 50%), rgba(103,232,249,.55), transparent 65%);
  transition: opacity .4s ease;
}

body.auth-body .atlas-auth-shell:hover .atlas-auth-cursor-glow {
  opacity: 1;
}

.atlas-auth-visual {
  isolation: isolate;
  transform: perspective(1200px) rotateY(var(--ax-tilt-ry, 0deg)) rotateX(var(--ax-tilt-rx, 0deg)) scale(1.001);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.atlas-auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 24%, rgba(103,232,249,.24), transparent 55%),
    radial-gradient(circle at 78% 74%, rgba(139,108,255,.22), transparent 55%);
}

.atlas-auth-visual-grid {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-image:
    linear-gradient(rgba(103,232,249,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,249,.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%);
  animation: ax-grid-drift 16s linear infinite;
}

@keyframes ax-grid-drift { to { background-position: 34px 34px; } }

.atlas-auth-visual-glow {
  position: absolute;
  inset: 16% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103,232,249,.32), transparent 68%);
  filter: blur(34px);
  animation: ax-glow-pulse 5s ease-in-out infinite;
}

@keyframes ax-glow-pulse {
  50% { transform: scale(1.12); opacity: .7; }
}

.atlas-auth-visual-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(153,231,255,.7);
  box-shadow: 0 0 8px rgba(103,232,249,.8);
  animation: ax-particle-drift 6s ease-in-out infinite;
}

.atlas-auth-visual-particles span:nth-child(1) { top: 18%; left: 22%; animation-delay: 0s; }
.atlas-auth-visual-particles span:nth-child(2) { top: 68%; left: 78%; animation-delay: -2s; }
.atlas-auth-visual-particles span:nth-child(3) { top: 78%; left: 28%; animation-delay: -4s; }
.atlas-auth-visual-particles span:nth-child(4) { top: 30%; left: 82%; animation-delay: -1s; }

@keyframes ax-particle-drift {
  0%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  50% { transform: translateY(-16px) scale(1.3); opacity: 1; }
}

body.auth-body .btn-primary {
  position: relative;
  overflow: hidden;
}

body.auth-body .btn-primary::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -20%;
  width: 22%;
  transform: rotate(18deg) translateX(-260%);
  background: rgba(255,255,255,.55);
  transition: transform .6s ease;
  pointer-events: none;
}

body.auth-body .btn-primary:hover::before {
  transform: rotate(18deg) translateX(520%);
}

body.auth-body .social-login-btn,
body.auth-body .btn-secondary {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.auth-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 12px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  transition: color .2s ease, gap .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.auth-back-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .2s ease;
}

.auth-back-link:hover {
  color: var(--text);
  gap: 11px;
  background: rgba(103,232,249,.08);
  border-color: rgba(103,232,249,.4);
  transform: translateY(-1px);
}

.auth-back-link:hover svg {
  transform: translateX(-2px);
}

body.auth-body :is(.input, .btn-primary, .btn-secondary, .social-login-btn, .auth-back-link) {
  animation: ax-enter .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--ax-auth-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .atlas-auth-aurora,
  .atlas-auth-visual-grid,
  .atlas-auth-visual-glow,
  .atlas-auth-visual-particles span {
    animation: none !important;
  }
  body.auth-body > .atlas-auth-wrap,
  body.auth-body :is(.input, .btn-primary, .btn-secondary, .social-login-btn) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .atlas-auth-visual { transform: none !important; }
}

/* Purpose-built 404, 500 and maintenance states. */
body.atlas-error-body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
  color: var(--text);
  font-family: var(--ax-font-sans);
  background:
    radial-gradient(circle at 14% 18%, rgba(66,201,222,.09), transparent 34rem),
    var(--bg);
}

.atlas-error-theme-toggle {
  position: fixed;
  z-index: 5;
  top: 22px;
  right: 22px;
}

.atlas-error-card {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
  align-items: center;
  gap: clamp(22px, 5vw, 72px);
  padding: clamp(28px, 6vw, 76px);
  overflow: hidden;
  border: 1px solid var(--ax-border);
  border-radius: 28px;
  background: var(--ax-surface-raised);
  box-shadow: 0 26px 80px rgba(0,0,0,.2);
}

.atlas-error-copy {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.atlas-error-brand img {
  display: block;
  width: auto;
  height: 54px;
  margin-bottom: 20px;
  object-fit: contain;
}

.atlas-error-code {
  color: var(--ax-accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .16em;
}

.atlas-error-copy h1 {
  max-width: 640px;
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.atlas-error-copy p {
  max-width: 580px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.94rem, 1.4vw, 1.08rem);
  line-height: 1.7;
}

.atlas-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.atlas-error-primary,
.atlas-error-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--ax-border-strong);
  border-radius: 12px;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.atlas-error-primary {
  color: #041118;
  border-color: var(--ax-accent);
  background: var(--ax-accent);
}

.atlas-error-secondary {
  color: var(--text);
  background: transparent;
}

.atlas-error-visual img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.24));
  animation: ax-auth-float 7s ease-in-out infinite;
}

/* Entry animation is subtle and never keeps content hidden if JS is late. */
.ax-reveal {
  animation: ax-enter .42s ease both;
  animation-delay: var(--ax-delay, 0ms);
}

@keyframes ax-enter {
  from { opacity: .72; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* Auth and client portal: no global form selectors, therefore embedded forms stay intact. */
body.auth-body .card,
body.client-portal-body :is(.card, .portal-card) {
  border-color: var(--ax-border);
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

@media (max-width: 1280px) {
  body.main-body .topbar > .flex {
    grid-template-columns: minmax(140px, auto) minmax(210px, 1fr) auto;
    gap: 12px !important;
  }

  body.main-body .topbar-user-name,
  body.main-body .logout-btn span {
    display: none;
  }

  .topbar-module-visual {
    width: 42px;
    height: 42px;
  }

  body.main-body .topbar-page-heading {
    grid-template-columns: 42px minmax(0,1fr);
  }
}

@media (max-width: 900px) {
  body.main-body .topbar {
    padding: 12px 14px;
  }

  body.main-body .topbar > .flex {
    grid-template-columns: minmax(0,1fr) auto;
  }

  body.main-body .topbar > .flex > form {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none !important;
  }

  body.main-body .topbar > .flex > :last-child {
    grid-column: 2;
    grid-row: 1;
  }

  body.main-body .atlas-page-stage {
    padding: 20px !important;
  }

  body.main-body .dashboard-hero {
    padding-right: 24px !important;
  }

  .dashboard-hero-visual,
  .comx-hero-visual {
    display: none;
  }

  body.main-body .comx-hero {
    padding-right: inherit;
  }
}

@media (max-width: 620px) {
  body.main-body .topbar-page-context,
  body.main-body .topbar :is(.mail-btn, .notif-bell-btn) {
    display: none;
  }

  body.main-body .topbar > .flex > :last-child {
    gap: 7px !important;
  }

  body.main-body .atlas-page-stage {
    padding: 14px 10px 76px !important;
  }

  .topbar-module-visual {
    display: none;
  }

  body.main-body .topbar-page-heading {
    display: block;
  }
}

@media (max-width: 820px) {
  body.auth-body { padding: 16px; }
  body.auth-body .atlas-auth-shell { grid-template-columns: 1fr; }
  .atlas-auth-visual { display: none; }
  .atlas-auth-content { padding: 32px 24px; }
  .atlas-error-card { grid-template-columns: 1fr; }
  .atlas-error-visual { grid-row: 1; }
  .atlas-error-visual img { max-height: 250px; }
}

/* ================================================================
   Kanban board — Bitrix24-style column/card system.
   Loaded after app.css, so these rules win over the older/duplicated
   .kanban-* declarations scattered through that file.
   ================================================================ */

.kanban-board-shell {
  position: relative;
  margin-top: 4px;
}

.kanban-scroll-wrap {
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

.kanban {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 200px;
  padding: 2px 2px 6px;
}

.kanban-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  width: 300px;
  max-height: min(74vh, 780px);
  overflow: hidden;
  border: 1px solid var(--ax-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--stage-color, var(--ax-accent)) 10%, transparent), transparent 90px),
    var(--ax-surface-raised);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kanban-column.is-drag-over {
  border-color: var(--stage-color, var(--ax-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color, var(--ax-accent)) 22%, transparent), 0 18px 40px rgba(0,0,0,.14);
  transform: translateY(-2px);
}

.kanban-column-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--ax-border);
}

.kanban-column-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--stage-color, var(--ax-accent));
  border-radius: 14px 14px 0 0;
}

.kanban-stage-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 7px;
  color: #fff;
  font-size: .7rem;
  background: var(--stage-color, var(--ax-accent));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--stage-color, var(--ax-accent)) 45%, transparent);
}

.kanban-stage-id {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 600;
  opacity: .65;
}

.kanban-column-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
}

.kanban-column-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.kanban-column-list::-webkit-scrollbar { width: 6px; }
.kanban-column-list::-webkit-scrollbar-thumb {
  background: var(--ax-border-strong);
  border-radius: 99px;
}

.kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border: 1px solid var(--ax-border);
  border-left: 3px solid color-mix(in srgb, var(--stage-color, var(--ax-accent)) 55%, var(--ax-border));
  border-radius: 11px;
  background: var(--card-bg, var(--ax-surface-raised));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  cursor: grab;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
  border-color: var(--ax-border-strong);
}

.kanban-card:active { cursor: grabbing; }

.kanban-card.is-dragging {
  opacity: .45;
  transform: scale(.98) rotate(-1deg);
  box-shadow: none;
}

.kanban-card.is-vip { border-left-color: #a855f7; }
.kanban-card.is-hot { border-left-color: #f97316; }
.kanban-card.is-overdue { border-left-color: #ef4444; }
.kanban-card.is-stalled { border-left-color: #eab308; }
.kanban-card.is-unassigned { border-left-style: dashed; }

.kanban-card-open {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: inherit;
}

.kanban-card-avatar {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  background: linear-gradient(135deg, var(--stage-color, var(--ax-accent)), color-mix(in srgb, var(--stage-color, var(--ax-accent)) 55%, #4338ca));
}

.kanban-card-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.kanban-card-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: .88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .76rem;
}

.kanban-card-meta > span:first-child {
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--text);
  font-weight: 750;
  background: color-mix(in srgb, var(--stage-color, var(--ax-accent)) 16%, transparent);
}

.kanban-card-meta > span:last-child {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kanban-card-tags span {
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--ax-border);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 650;
}

.kanban-card-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}

.kanban-card:hover .kanban-card-actions,
.kanban-card:focus-within .kanban-card-actions {
  opacity: 1;
  transform: none;
}

.kanban-card-actions a,
.kanban-card-actions span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .74rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--ax-accent) 10%, transparent);
  transition: background .15s ease, color .15s ease;
}

.kanban-card-actions a:hover { background: var(--ax-accent); color: #fff; }
.kanban-card-actions .is-disabled { opacity: .35; }

.kanban-card-next {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: .7rem;
}

body.kanban-dragging .kanban-card:not(.is-dragging) {
  opacity: .85;
}

/* ---------- Kanban page shell ---------- */

.kanban-page {
  display: grid;
  gap: 16px;
}

.kanban-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border: 1px solid var(--ax-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--ax-accent) 14%, transparent), transparent 60%),
    var(--ax-surface-raised);
}

.kanban-hero-eyebrow {
  color: var(--ax-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kanban-hero-copy h1 {
  margin: 6px 0 4px;
  font-family: var(--ax-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.02em;
}

.kanban-hero-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.kanban-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kanban-hero-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.kanban-alert {
  border-radius: 14px;
}

.kanban-panel {
  padding: 16px 20px;
  border: 1px solid var(--ax-border);
  border-radius: 16px;
  background: var(--ax-surface-raised);
}

.kanban-pipeline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pipeline-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ax-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pipeline-tab i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pipeline-color, var(--ax-accent));
}

.pipeline-tab:hover { border-color: var(--ax-border-strong); color: var(--text); }

.pipeline-tab.is-active {
  border-color: var(--pipeline-color, var(--ax-accent));
  color: var(--text);
  background: color-mix(in srgb, var(--pipeline-color, var(--ax-accent)) 14%, transparent);
}

.kanban-pipeline-bar-tools {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kanban-view-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ax-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ax-accent) 6%, transparent);
}

.kanban-view-pill {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.kanban-view-pill.is-active { color: #fff; background: var(--ax-accent); }

.kanban-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ax-border);
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  list-style: none;
}

.kanban-icon-btn::-webkit-details-marker { display: none; }

.kanban-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanban-icon-btn:hover { border-color: var(--ax-border-strong); color: var(--ax-accent); }

.kanban-settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 14px;
  border: 1px solid var(--ax-border);
  border-radius: 14px;
  background: var(--ax-surface-raised);
  box-shadow: 0 24px 50px rgba(0,0,0,.18);
}

.kanban-settings-popover-title {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kanban-settings-popover label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: .84rem;
}

.kanban-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.kanban-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ax-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ax-accent) 4%, transparent);
}

.kanban-kpi-icon {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--ax-accent);
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
}

.kanban-kpi-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanban-kpi div { display: grid; min-width: 0; }
.kanban-kpi strong { overflow: hidden; color: var(--text); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.kanban-kpi span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.kanban-automation-preset-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 10px;
  color: var(--ax-accent);
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
}

.kanban-automation-preset-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanban-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  color: var(--muted);
  font-size: .86rem;
}

.kanban-column-empty {
  padding: 18px 10px;
  border: 1px dashed var(--ax-border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

.kanban-column-add {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ax-accent);
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
  text-decoration: none;
}

.kanban-column-add svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.pipeline-filters-summary svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ax-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipeline-filters-summary span {
  flex: 0 0 auto;
}

.pipeline-filters-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-funnel-panel .kanban-funnel-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.kanban-funnel-step {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--ax-border);
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.kanban-funnel-step:hover { border-color: var(--stage-color, var(--ax-accent)); transform: translateY(-1px); }
.kanban-funnel-step strong { overflow: hidden; color: var(--text); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

.kanban-funnel-step i {
  display: block;
  overflow: hidden;
  height: 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--stage-color, var(--ax-accent)) 20%, transparent);
}

.kanban-funnel-step i::after {
  content: "";
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--stage-color, var(--ax-accent));
}

.kanban-funnel-step span { color: var(--muted); font-size: .7rem; }

@media (max-width: 720px) {
  .kanban-column { flex-basis: 264px; width: 264px; }
  .kanban-hero { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ax-reveal { animation: none; }
  .atlas-auth-visual > img,
  .atlas-error-visual img { animation: none; }
  .kanban-card,
  .kanban-column { transition: none; }
}