:root{color-scheme:light}
:root[data-theme] button{transition:filter .15s}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0;padding:0;margin:0;min-width:0}
.theme-options legend{font-size:12px;color:var(--muted);margin-bottom:16px}
.theme-choice{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px 8px;border:1px solid var(--line);border-radius:9px;padding:14px;cursor:pointer;color:inherit;font-size:12px}
.theme-choice:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.theme-choice:focus-within{outline:3px solid #8bcbb3;outline-offset:3px}
.theme-choice input{width:16px;height:16px;margin:0;accent-color:var(--green);align-self:center}
.theme-preview{grid-column:1/-1;display:grid;grid-template-columns:22% 1fr;gap:6px;height:96px;border:1px solid #d7e3dc;border-radius:6px;background:#f6f8f7;padding:7px;overflow:hidden}
.theme-preview::before{content:'';background:#fff;border-radius:3px}
.theme-preview::after{content:'';background:linear-gradient(#fff 0 24%,transparent 24% 32%,#fff 32% 100%);border-radius:3px}
.theme-preview-dark{background:#0b0b0b;border-color:#343434}.theme-preview-dark::before{background:#242424}.theme-preview-dark::after{background:linear-gradient(#303030 0 24%,transparent 24% 32%,#242424 32% 100%)}
.theme-preview-system{background:linear-gradient(90deg,#f6f8f7 50%,#0b0b0b 50%);border-color:#909090}.theme-preview-system::before{background:#fff}.theme-preview-system::after{background:linear-gradient(90deg,#fff 35%,#242424 35%)}
@media(max-width:760px){.theme-options{gap:10px}.theme-choice{padding:10px;gap:10px 5px;font-size:11px}.theme-preview{height:72px;padding:5px;gap:4px}}

:root[data-theme="dark"]{color-scheme:dark;--green:#70d2ac;--muted:#a8a8a8;--line:#303030;--theme-bg:#0b0b0b;--theme-surface:#171717;--theme-raised:#242424;--theme-text:#ededed;--theme-soft:#c6c6c6;color:var(--theme-text);background:var(--theme-bg);scrollbar-color:#515151 var(--theme-bg)}
:root[data-theme="dark"] body{background:var(--theme-bg);color:var(--theme-text)}
:root[data-theme="dark"] :is(aside,header,.panel,.stat,.lead-card,dialog,.login,.profile-menu,.connection){background:var(--theme-surface);color:var(--theme-text);border-color:var(--line)}
:root[data-theme="dark"] :is(h1,h2,h3,.brand,.stat-value,.event strong,.lead-card strong,.contact-cell strong,.table-primary,.task-row strong,.profile-identity b,.header-profile-name,.empty b){color:var(--theme-text)}
:root[data-theme="dark"] :is(p,small,.eyebrow,.nav-group h2,.brand span,nav button,header,header strong,.axis,.bar-wrap span,.bar-wrap b,.event time,.stat-label,.stat small,td,th,.contact-cell small,.lead-card p,.lead-card small,.table-foot,.empty,footer,.integration label,.form-grid label,.login label,.pro-filters label,.pro-pipeline-selector label,.profile-menu-heading,.profile-menu button,.profile-trigger,.profile-identity small,.profile-chevron,.connection #connectionDetail,.connection #connectionTitle){color:var(--muted)}
:root[data-theme="dark"] :is(input,select,textarea){background-color:#101010;color:var(--theme-text);border-color:#3d3d3d}
:root[data-theme="dark"] :is(input,textarea)::placeholder{color:#969696;opacity:1}
:root[data-theme="dark"] :is(input,select,textarea):focus{border-color:var(--green);box-shadow:0 0 0 3px #70d2ac20}
:root[data-theme="dark"] :is(.subtle-button,.copy-row button,.webhook-banner button){background:var(--theme-raised);border-color:var(--line);color:var(--theme-text)}
:root[data-theme="dark"] :is(button.primary){background:var(--green);color:#071a12}
:root[data-theme="dark"] button.primary.destructive{background:#944c4c;color:#fff}
:root[data-theme="dark"] :is(.text-link,a,.stat small b,.lead-card b){color:var(--green)}
:root[data-theme="dark"] :is(.danger,.task-delete,.form-message,#formError,#authError,#mappingError,.task-row.overdue strong){color:#f0b4ad}
:root[data-theme="dark"] :is(.inbox-dialog summary,.remember){color:var(--theme-soft)}
:root[data-theme="dark"] .inbox-status{color:#f2d495}
:root[data-theme="dark"] :is(th,nav em){background:#111111;border-color:var(--line)}
:root[data-theme="dark"] :is(td,.event,.task-row){border-color:var(--line)}
:root[data-theme="dark"] tbody tr:hover{background:#232323}
:root[data-theme="dark"] :is(nav button.active,.profile-trigger:hover,.profile-trigger[aria-expanded="true"],.profile-menu button:hover,.profile-menu button:focus-visible){background:#242424;color:var(--green)}
:root[data-theme="dark"] :is(.stat-icon,.event-icon,.contact-avatar,.profile-avatar){background:#272727;color:#70d2ac;border-color:var(--line)}
:root[data-theme="dark"] :is(.pipeline .column){background:#111111;border-color:var(--line)}
:root[data-theme="dark"] .pipeline .column.drop-target{background:#222222;box-shadow:inset 0 0 0 2px var(--green)}
:root[data-theme="dark"] .badge{background:#233b4c;color:#b3d7f2}
:root[data-theme="dark"] .badge.qualified{background:#372f48;color:#d5beee}
:root[data-theme="dark"] .badge.proposal{background:#453b25;color:#f2d495}
:root[data-theme="dark"] .badge.won{background:#254231;color:#addfbb}
:root[data-theme="dark"] .badge.lost{background:#472e30;color:#f1b5b9}
:root[data-theme="dark"] .webhook-banner{background:#1b1b1b;border-color:#353535}
:root[data-theme="dark"] .webhook-banner :is(h3,.symbol){color:#70d2ac}
:root[data-theme="dark"] .operation-alert{background:#433a24;color:#f2d495}
:root[data-theme="dark"] .auth{background:radial-gradient(ellipse at 70% 20%,#272727,transparent 65%),var(--theme-bg)}
:root[data-theme="dark"] dialog::backdrop{background:#000000b3}
:root[data-theme="dark"] .bars{background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%)}
:root[data-theme="dark"] :is(.payload-code,.integration pre){background:#0d0d0d;color:#d4d4d4;border-color:var(--line)}
:root[data-theme="dark"] .profile-menu #logout{color:#f0b4ad}
:root[data-theme="dark"] :is(.profile-menu #logout:hover,.profile-menu #logout:focus-visible){background:#472e30}
:root[data-theme="dark"] #toast{background:#222222;color:#f3f3f3}

#app #mobileSidebar .brand span {
  color: var(--green);
}

:root[data-theme] #auth .brand span {
  color: var(--green);
}