/* Appearance. Dark is the default. Light keeps the existing pages. */
html[data-theme="light"] .logoDark{display:none !important}
html[data-theme="dark"] .logoLight{display:none !important}
html[data-theme="dark"] .logoDark{display:block !important}
.themeToggle{border:1px solid #e4e4e8;background:#fff;color:#1d1d1f;border-radius:999px;padding:8px 12px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.login .themeToggle{position:fixed;top:16px;right:16px;z-index:5}

html[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#09090b;
  --bg:#09090b;
  --surface:#101012;
  --ink:#fafafa;
  --muted:#a1a1aa;
  --line:rgba(255,255,255,.12);
  --deep:#ffb4be;
  --red:#2F5D50;
  --brand-rgb:47,93,80;
  --shadow:none;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .login,
html[data-theme="dark"] .app{
  background:#09090b;
  color:#fafafa;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .cardName,
html[data-theme="dark"] .dsCardName,
html[data-theme="dark"] .boardMeta b,
html[data-theme="dark"] .actionMetric b,
html[data-theme="dark"] .relStat b{
  color:#fafafa;
}
html[data-theme="dark"] p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .top p,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .dashWelcome p,
html[data-theme="dark"] .loginbox p,
html[data-theme="dark"] .boardMeta,
html[data-theme="dark"] .attentionPerson small,
html[data-theme="dark"] .cardMetaLine,
html[data-theme="dark"] .dsMeta,
html[data-theme="dark"] .dsNext,
html[data-theme="dark"] .dsHint,
html[data-theme="dark"] .stepDetail,
html[data-theme="dark"] .makerEmpty,
html[data-theme="dark"] .handoffNote,
html[data-theme="dark"] .fuNotes,
html[data-theme="dark"] .filterField,
html[data-theme="dark"] .stageHead p,
html[data-theme="dark"] .stageHead small,
html[data-theme="dark"] .colHead h3,
html[data-theme="dark"] small{
  color:#a1a1aa;
}
html[data-theme="dark"] .cardMetaLine b,
html[data-theme="dark"] .stageHead h3,
html[data-theme="dark"] .stageHead p b{color:#fafafa}

html[data-theme="dark"] .topbar{
  background:rgba(9,9,11,.88);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
}
html[data-theme="dark"] .topnav .nav{color:#d4d4d8}
html[data-theme="dark"] .topnav .nav:hover,
html[data-theme="dark"] .nav:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .topnav .nav.active,
html[data-theme="dark"] .topnav .moreBtn.active,
html[data-theme="dark"] .nav.active{background:rgba(var(--brand-rgb),.22);color:#fff}
html[data-theme="dark"] .moreMenu{
  background:#121214;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .menuBtn,
html[data-theme="dark"] .themeToggle{
  background:transparent;
  color:#fafafa;
  border:1px solid rgba(255,255,255,.16);
}
html[data-theme="dark"] #nav.topnav{
  background:#0e0e11;
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:none;
}
html[data-theme="dark"] .pill{
  background:rgba(var(--brand-rgb),.22);
  color:#ffd0d6;
}
html[data-theme="dark"] .desktopUser #who{color:#fafafa}

html[data-theme="dark"] .loginbox,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .quietPanel,
html[data-theme="dark"] .dashPanel,
html[data-theme="dark"] .actionMetric,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dsCard,
html[data-theme="dark"] .backcard,
html[data-theme="dark"] .fuStage,
html[data-theme="dark"] .relationCard,
html[data-theme="dark"] .relCardModern,
html[data-theme="dark"] .relationshipCenter,
html[data-theme="dark"] .relStat,
html[data-theme="dark"] .reportHero,
html[data-theme="dark"] .reportnav,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .msgEmail,
html[data-theme="dark"] .switchRow,
html[data-theme="dark"] .movementBox{
  background-color:#101012;
  background-image:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.07), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.1);
  color:#fafafa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .dsCard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="dark"] .col,
html[data-theme="dark"] .stage{
  background-color:#101012 !important;
  background-image:radial-gradient(80% 36% at 50% 0%, rgba(255,255,255,.06), transparent 72%) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .col.dragover,
html[data-theme="dark"] .stage.dragover{
  background-color:#1a1012 !important;
  outline:2px solid var(--red);
}
html[data-theme="dark"] .stageHead{border-bottom-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .countBadge{
  background:rgba(255,255,255,.06);
  color:#d4d4d8;
}
html[data-theme="dark"] .dropEmpty,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .relEmpty{
  border:1px dashed rgba(255,255,255,.2);
  color:#a1a1aa;
  background:transparent;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .primary{
  background:var(--red);
  color:#fff;
  border:0;
}
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .primary:hover{background:#a10f28}
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .chipBtn{
  background:transparent;
  color:#fafafa;
  border:1px solid rgba(255,255,255,.16);
}
html[data-theme="dark"] .chipBtn:hover,
html[data-theme="dark"] .ghost:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .linkBtn{color:#ffb4be}
html[data-theme="dark"] .replyBadge{background:var(--red);color:#fff}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .searchWrap input,
html[data-theme="dark"] .filterChip,
html[data-theme="dark"] select.filterChip,
html[data-theme="dark"] .makerSelect,
html[data-theme="dark"] .roleSelect{
  background:#0c0c0e;
  color:#fafafa;
  border:1px solid rgba(255,255,255,.14);
}
html[data-theme="dark"] option{background:#141416;color:#fafafa}
html[data-theme="dark"] ::placeholder{color:#b8b8c2}
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible{outline:2px solid #ffb4be;outline-offset:2px}

html[data-theme="dark"] .table{background:transparent;color:#fafafa}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .page-people .table th{
  background:transparent;
  color:#a1a1aa;
  border-bottom:1px solid rgba(255,255,255,.1);
}
html[data-theme="dark"] .table td{border-bottom:1px solid rgba(255,255,255,.08);color:#fafafa}
html[data-theme="dark"] .page-people .table,
html[data-theme="dark"] .table{border-color:rgba(255,255,255,.1);box-shadow:none}
html[data-theme="dark"] .page-people .table tr:hover td{background:rgba(255,255,255,.04)}

html[data-theme="dark"] .modalbg{background:rgba(0,0,0,.62)}
html[data-theme="dark"] .notice{
  background:#141214;
  border:1px solid rgba(var(--brand-rgb),.45);
  color:#f4f4f5;
}
html[data-theme="dark"] .adminTab{color:#a1a1aa}
html[data-theme="dark"] .adminTab.active{
  background:#161618;
  color:#fafafa;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
html[data-theme="dark"] .reportHero{border-left:4px solid var(--red)}
html[data-theme="dark"] .item{border-bottom:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .reportnav button{color:#a1a1aa}
html[data-theme="dark"] .reportnav button.active{background:var(--red);color:#fff}
html[data-theme="dark"] .viewToggle{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .viewToggle button{color:#a1a1aa}
html[data-theme="dark"] .viewToggle button.active{
  background:#1c1c1f;
  color:#fafafa;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
html[data-theme="dark"] .profiletab{color:#a1a1aa}
html[data-theme="dark"] .profiletab.active{color:#ffb4be;border-bottom-color:var(--red)}
html[data-theme="dark"] .profiletabs,
html[data-theme="dark"] .attentionRow,
html[data-theme="dark"] .familyRow,
html[data-theme="dark"] .dsMakerBar,
html[data-theme="dark"] .fuRow,
html[data-theme="dark"] .dsNext{border-color:rgba(255,255,255,.1)}

html[data-theme="dark"] .milestoneTag,
html[data-theme="dark"] .stepTag{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#fafafa;
}
html[data-theme="dark"] .milestoneTag.selected{
  background:rgba(var(--brand-rgb),.2);
  border-color:var(--red);
  color:#ffd0d6;
}
html[data-theme="dark"] .pillOn{background:rgba(78,160,104,.2);color:#b7ebc6}
html[data-theme="dark"] .pillOff{background:rgba(255,255,255,.06);color:#c8c8d0}
html[data-theme="dark"] .timeline{border-left-color:rgba(var(--brand-rgb),.45)}
html[data-theme="dark"] .timelineWarn b,
html[data-theme="dark"] .needsMaker,
html[data-theme="dark"] .actionMetric.danger>span,
html[data-theme="dark"] .msgLabel{color:#ffb4be}
html[data-theme="dark"] .actionMetric.warning>span{color:#f5d37a}
html[data-theme="dark"] .actionMetric.healthy>span{color:#8ed4a4}
html[data-theme="dark"] .actionMetric.celebrate>span{color:#ffb4be}
html[data-theme="dark"] .funnelbar,
html[data-theme="dark"] .chartbar{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .funnelbar span,
html[data-theme="dark"] .chartbar span{background:var(--red)}

html[data-theme="dark"] .msgThread{background:#0c0c0e;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .msgRow.out .msgBubble{background:var(--red);color:#fff}
html[data-theme="dark"] .msgRow.in .msgBubble{
  background:#18181b;
  color:#fafafa;
  border:1px solid rgba(255,255,255,.1);
}
html[data-theme="dark"] .msgEmail{border-left:4px solid var(--red)}
html[data-theme="dark"] .avatarDot{background:rgba(var(--brand-rgb),.28);color:#ffd5db}
html[data-theme="dark"] .relNode,
html[data-theme="dark"] .backflow>div{
  background:#141416;
  border-color:rgba(255,255,255,.1);
  color:#fafafa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .miniTag{background:rgba(255,255,255,.08);color:#e4e4e7}
html[data-theme="dark"] .cardFooter{border-top-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .testnote{background:#16140f;border-color:rgba(245,211,122,.35);color:#fafafa}
html[data-theme="dark"] .dragHandle{color:#a1a1aa}
html[data-theme="dark"] .dragHandle:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .checkline,
html[data-theme="dark"] label{color:#fafafa}
html[data-theme="dark"] .filterField{color:#a1a1aa}
html[data-theme="dark"] input[type="checkbox"]{accent-color:var(--red)}
html[data-theme="dark"] ::selection{background:rgba(var(--brand-rgb),.45);color:#fff}
html[data-theme="dark"] .todayRow{border-bottom-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .todayReason,
html[data-theme="dark"] .dashCount:disabled,
html[data-theme="dark"] .dashNextBtn span{color:#a1a1aa}
html[data-theme="dark"] .dashCount,
html[data-theme="dark"] .dashName,
html[data-theme="dark"] .dashNextBtn{color:#fafafa}
html[data-theme="dark"] .dashName{background:transparent;border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .dashName:hover{border-color:var(--red);color:#ffd0d6}
html[data-theme="dark"] .dashKicker{color:#ffb4be}
html[data-theme="dark"] .dashHandoffFocus{border-color:var(--red);box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.45)}