:root {
  --md-primary: #3567e9;
  --md-on-primary: #ffffff;
  --md-primary-container: #dce5ff;
  --md-on-primary-container: #0b2f7a;
  --md-secondary: #59617a;
  --md-tertiary: #76558f;
  --md-surface: #faf9ff;
  --md-surface-container-low: #f3f4fb;
  --md-surface-container: #eceef6;
  --md-surface-container-high: #e5e7ef;
  --md-outline: #747783;
  --md-outline-variant: #c6c8d2;
  --md-shadow: rgba(25, 35, 65, .15);
  --bg: var(--md-surface);
  --bg-2: var(--md-surface-container-low);
  --surface: #ffffff;
  --surface-2: var(--md-surface-container-low);
  --surface-3: var(--md-surface-container);
  --line: #dfe3ed;
  --line-2: #d1d6e2;
  --text: #181b23;
  --text-2: #424653;
  --muted: #737887;
  --accent: var(--md-primary);
  --accent-hover: #2555d3;
  --accent-soft: var(--md-primary-container);
  --shadow-card: 0 1px 2px rgba(24, 34, 60, .05), 0 8px 24px rgba(24, 34, 60, .055);
  --shadow-node: 0 4px 16px rgba(24, 34, 60, .11);
  --shadow-pop: 0 18px 54px rgba(20, 27, 48, .2);
}

:root[data-theme="dark"] {
  --md-primary: #b5c5ff;
  --md-on-primary: #0d357f;
  --md-primary-container: #274b9f;
  --md-on-primary-container: #dce5ff;
  --md-secondary: #c1c6dc;
  --md-tertiary: #ddbae9;
  --md-surface: #111318;
  --md-surface-container-low: #191b21;
  --md-surface-container: #1e2027;
  --md-surface-container-high: #292b33;
  --md-outline: #8e909d;
  --md-outline-variant: #444751;
  --md-shadow: rgba(0, 0, 0, .55);
  --bg: #111318;
  --bg-2: #15171c;
  --surface: #1b1d23;
  --surface-2: #22242b;
  --surface-3: #2a2d35;
  --line: #30333c;
  --line-2: #3c404b;
  --text: #e5e8f2;
  --text-2: #c4c7d2;
  --muted: #979ba9;
  --accent: var(--md-primary);
  --accent-hover: #ccdaff;
  --accent-soft: var(--md-primary-container);
  --ok-soft: #143927;
  --err-soft: #49201f;
  --lav: #30283b;
  --lav-line: #5b496c;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .16);
  --shadow-node: 0 5px 20px rgba(0, 0, 0, .28);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, .5);
}

html {
  background: var(--bg);
  scrollbar-color: var(--md-outline-variant) transparent;
}

body {
  background: var(--bg);
  color: var(--text);
  accent-color: var(--md-primary);
}

body,
.rail,
.topbar,
.workarea,
.card,
.metric,
.subnav,
.subpage,
input,
select,
textarea,
button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rail,
.topbar,
.subnav {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.workarea {
  background:
    radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--md-primary) 8%, transparent), transparent 24%),
    var(--bg-2);
}

.card,
.metric,
.login-card,
.chat-layout,
.content-row,
.account-row,
.flow-row,
.preset-card,
.contact-item,
.team-member,
.calendar-day,
.calendar-composer {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.card {
  border-radius: 20px;
}

.metric {
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.metric::after {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

.metric:hover,
.card:hover {
  border-color: color-mix(in srgb, var(--md-primary) 25%, var(--line));
}

#tab-painel > .cards {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.planner-nav-icon {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
  font-size: 19px;
  line-height: 1;
}

.rail-logo::before,
.login-brand::before {
  background: linear-gradient(145deg, #3d76f3, #555de4 58%, #8b55e8);
}

.rail-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.rail-item:hover {
  color: var(--text);
  background: var(--surface-2);
}

.rail-item.active {
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  box-shadow: none;
}

button {
  position: relative;
  overflow: hidden;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s;
}

button:hover::before { opacity: .055; }
button:active::before { opacity: .12; }

button.primary,
.btn-link {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  color: var(--md-on-primary);
  background: var(--md-primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--md-primary) 24%, transparent);
}

button.primary:hover {
  background: color-mix(in srgb, var(--md-primary) 90%, #000);
  transform: translateY(-1px);
}

button.ghost,
button.secondary {
  border-color: var(--line);
  color: var(--text-2);
  background: var(--surface);
}

input,
select,
textarea {
  border-color: var(--line-2);
  color: var(--text);
  background: var(--surface-2);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 18%, transparent);
}

option {
  color: var(--text);
  background: var(--surface);
}

.topbar {
  border-color: var(--line);
  box-shadow: 0 1px 0 var(--line), 0 8px 22px rgba(22, 32, 58, .025);
}

.topbar select {
  color: var(--text);
  background: var(--surface-2);
}

.topbar-action {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--surface);
  cursor: pointer;
}

#theme-toggle {
  width: 38px;
  padding: 0;
  font-size: 18px;
}

#install-app {
  gap: 6px;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  font-size: 12px;
  font-weight: 750;
}

.page:not(.hidden) {
  animation: material-page-in .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes material-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  color: var(--md-primary);
}

.analytics-toolbar,
.sync-status,
.oauth-box,
.diag-verdict {
  background: var(--surface);
  border-color: var(--line);
}

.performance-table th,
.content-table th {
  color: var(--muted);
  background: var(--surface-2);
}

.performance-table td,
.content-table td {
  border-color: var(--line);
}

.content-link,
.contact-item,
.account-name {
  color: var(--text);
}

.content-table tbody tr:hover,
.performance-table tbody tr:hover,
.contact-item:hover {
  background: var(--surface-2);
}

.ai-panel {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--md-tertiary) 18%, transparent), transparent 42%),
    var(--surface);
}

.metric-note {
  background: var(--surface);
}

.chart {
  padding: 20px 8px 0;
  border-radius: 14px;
  background: linear-gradient(to top, var(--line) 1px, transparent 1px);
  background-size: 100% 33%;
}

.bar {
  transition: height .45s cubic-bezier(.2, .8, .2, 1);
}

.bar.in { background: linear-gradient(180deg, var(--md-primary), #567ded); }
.bar.out { background: linear-gradient(180deg, #37b987, #169867); }

.funnel-flow {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.funnel-flow:last-child { margin-bottom: 0; }

.funnel-flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.funnel-flow-head .name {
  font-size: 13px;
  font-weight: 750;
}

.funnel-summary {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  font-size: 10px;
  font-weight: 800;
}

.funnel-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(120px, 1fr) 54px 104px;
  gap: 10px;
}

.funnel-name {
  width: auto;
}

.funnel-track {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-3);
}

.funnel-fill {
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--md-primary), #6d7ff2);
  transition: width .48s cubic-bezier(.2, .8, .2, 1);
}

.funnel-row.is-zero .funnel-track {
  border: 1px dashed var(--line-2);
  background: transparent;
}

.funnel-row.is-zero .funnel-fill {
  width: 0 !important;
}

.funnel-ctr.neutral {
  color: var(--muted);
}

.chat-list,
.chat-thread,
.thread,
.reply-box {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.message.in { background: var(--surface-2); }
.message.out { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.flow-canvas,
.editor-canvas,
.canvas {
  background-color: var(--bg-2);
}

.flow-node,
.node,
.properties-panel,
.editor-sidebar {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.calendar-board {
  background: var(--line);
  border-color: var(--line);
}

.calendar-weekday,
.calendar-day.outside {
  background: var(--surface-2);
}

.calendar-post.scheduled { background: color-mix(in srgb, #4774e7 15%, var(--surface)); }
.calendar-post.published { background: color-mix(in srgb, #24a271 15%, var(--surface)); }
.calendar-post.failed { background: color-mix(in srgb, #de4b3f 15%, var(--surface)); }

.media-upload {
  background: var(--surface-2);
}

.login-card label {
  color: var(--text-2);
}

:root[data-theme="dark"] .login-card {
  background: #1b1d24;
}

:root[data-theme="dark"] .login-brand {
  color: var(--text);
}

:root[data-theme="dark"] .rail-avatar {
  background: var(--surface-2);
}

:root[data-theme="dark"] img {
  opacity: .92;
}

:root[data-theme="dark"] .empty-analytics,
:root[data-theme="dark"] .sync-status.good {
  background: var(--surface-2);
}

@media (max-width: 720px) {
  .rail {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }

  .rail-nav {
    grid-template-columns: repeat(8, minmax(36px, 1fr));
  }

  .rail-item {
    min-width: 0;
  }

  .topbar {
    gap: 8px;
  }

  #install-app {
    font-size: 0;
    width: 38px;
    padding: 0;
  }

  #install-app::after {
    content: "↓";
    position: relative;
    font-size: 18px;
  }

  .funnel-row {
    grid-template-columns: 1fr 54px;
  }

  .funnel-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .funnel-num {
    display: none;
  }
}

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