/* All application colors live here. Components consume semantic variables. */
:root,[data-theme="dark"]{
 --control-bg:#121212;--control-border:#1a1a1a;--control-hover-bg:#171717;--control-hover-border:#2b2b2b;--control-active-bg:rgb(28 39 30);--control-active-border:rgb(33 37 34);--nav-active-ink:#b0c0b2;
 --dot-color:rgba(255,255,255,.065);--dot-hover:rgba(255,255,255,.12);
 color-scheme:dark;--bg:#000000;--mesh-a:rgb(36 71 27 / 10%);--mesh-first-end:#05430308;--mesh-second-end:#01390a08;--mesh-b:rgb(25 25 25 / 12%);--mesh-c:rgba(36,36,36,.32);--mesh-end:#0000000a;
 --surface:#141414;--surface-sunken:#0c0c0c;--surface-raised:#232323;--surface-2:#1b1b1b;--surface-3:#2a2a2a;
 --text:#f0f0ee;--muted:#b2b2ad;--subtle:#93938d;--line:#2c2c2c;--line-strong:#484848;--header-border:rgba(44,44,44,.5);--accent:#65ca72;--on-accent:#0b2410;--accent-ink:var(--accent);--focus-ring:var(--accent);
 --panel-opaque:#090909;--panel-glass:rgb(23 23 23 / 31%);--panel-border:#2c2c2c57;--metric-glass:var(--panel-glass);--metric-border:var(--panel-border);--metric-opaque:var(--panel-opaque);--dialog-opaque:#111111;--dialog-glass:rgba(10,10,10,.91);--dialog-border:#1c1c1c;--dropdown-glass:rgba(16,16,16,.96);--header-glass:rgba(5,5,5,.88);
 --overlay:rgba(0,0,0,.7);--shadow-color:rgba(0,0,0,.32);--panel-shadow:0 10px 34px rgba(0,0,0,.12);--floating-shadow:0 22px 70px rgba(0,0,0,.42);
 --success-bg:#202b24;--success-fg:#b4d6bd;--danger-bg:#322321;--red:#efa69b;--warning-bg:#302a20;--orange:#e3c398;--info-bg:#242932;--info-fg:#bfcee1;--green:var(--success-fg);
 --cta-ink:#f3fff3;--cta-base:#184c26;--cta-border:#237330;--cta-glow:rgba(82,183,94,.15);--cta-mesh:radial-gradient(ellipse at 0% 100%,#0e6219 0%,transparent 65%),radial-gradient(ellipse at 92% 0%,#173c20 0%,transparent 66%),linear-gradient(125deg,#4aff71,#124a22 60%,#11471e);
 --accent-soft:rgba(101,202,114,.10);--accent-border:rgba(101,202,114,.32);--ring-track:#343434;--chart-grid:#343434;--chart-collection:#858585;--chart-expense-bg:#292929;--chart-expense-line:#898989;--logo-filter:none;--header-height:84px;--weight-body:400;--weight-medium:500;--weight-semibold:550;--weight-heading:400;--weight-value:500;
}
[data-theme="light"]{
 --control-bg:#fafbf8;--control-border:#e2e5dd;--control-hover-bg:#f0f3ed;--control-hover-border:#d4dacd;--control-active-bg:#e5eee3;--control-active-border:#cfddca;--nav-active-ink:var(--accent-ink);
 --dot-color:rgba(32,34,30,.075);--dot-hover:rgba(32,34,30,.10);
 color-scheme:light;--bg:#f4f4f2;--mesh-a:rgba(36,71,27,.045);--mesh-first-end:rgba(5,67,3,.015);--mesh-second-end:rgba(1,57,10,.015);--mesh-b:rgba(230,230,227,.64);--mesh-c:rgba(220,220,217,.42);--mesh-end:transparent;
 --surface:#f6f6f4;--surface-sunken:#fafaf8;--surface-raised:#e9e9e6;--surface-2:#ededea;--surface-3:#e2e2de;
 --text:#20221e;--muted:#555950;--subtle:#62665d;--line:#d6d7d1;--line-strong:#b7bab0;--header-border:rgba(214,215,209,.5);--accent:#65ca72;--on-accent:#0b2410;--accent-ink:#246238;--focus-ring:#246238;
 --panel-opaque:#ffffff;--panel-glass:rgba(255,255,255,.78);--panel-border:var(--line);--metric-glass:var(--panel-glass);--metric-border:var(--panel-border);--metric-opaque:var(--panel-opaque);--dialog-opaque:#fafaf9;--dialog-glass:rgba(255,255,255,.94);--dialog-border:#d8d8d2;--dropdown-glass:rgba(255,255,255,.97);--header-glass:rgba(248,248,246,.92);
 --overlay:rgba(18,20,16,.42);--shadow-color:rgba(25,28,20,.11);--panel-shadow:0 8px 30px rgba(30,32,26,.045);--floating-shadow:0 20px 65px rgba(24,27,19,.16);
 --success-bg:#eaf1e9;--success-fg:#2f5e3b;--danger-bg:#faeae6;--red:#9e3929;--warning-bg:#f4eddf;--orange:#785421;--info-bg:#e9eef4;--info-fg:#385272;--green:var(--success-fg);
 --cta-border:#237330;--cta-glow:rgba(36,98,56,.12);
 --accent-soft:rgba(43,119,61,.09);--accent-border:rgba(43,119,61,.28);--ring-track:#dddfd7;--chart-grid:#d9dbd4;--chart-collection:#777e69;--chart-expense-bg:#e4e6df;--chart-expense-line:#747a69;--logo-filter:brightness(0);--weight-body:500;--weight-medium:600;--weight-semibold:600;--weight-heading:650;--weight-value:650;
}
html{background:var(--bg);scroll-padding-top:calc(var(--header-height) + 24px)}
body{background:var(--bg);padding-top:var(--header-height);isolation:isolate;color:var(--text);font-weight:var(--weight-body)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 8%,var(--mesh-a),var(--mesh-first-end) 48%),radial-gradient(ellipse at 91% 34%,var(--mesh-b),var(--mesh-second-end) 54%),radial-gradient(ellipse at 30% 97%,var(--mesh-c),var(--mesh-end) 52%);background-color:var(--bg)}
.brand img{filter:var(--logo-filter)}
h1,h2,h3{font-weight:var(--weight-heading)}
.metric-value,.chart-stat-value,.detail-stat strong{font-weight:var(--weight-value)}
.app-header{position:fixed;inset:0 0 auto;height:var(--header-height);z-index:40;background:transparent;border-bottom:1px solid transparent;transform:translateY(0);transition:transform .22s ease,background-color .2s ease,border-color .2s ease;will-change:transform}
.app-header.is-scrolled{background:var(--panel-opaque);border-bottom-color:var(--header-border)}
.app-header.is-hidden{transform:translateY(calc(-100% - 2px))}
.app-header:focus-within{transform:translateY(0)}
.main{min-height:calc(100dvh - var(--header-height))}
.panel,.metric,.client-financial-strip .detail-stat,.settings-card{background:var(--panel-opaque);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow)}
.metric,.metric.featured{background:var(--metric-opaque);border:1px solid var(--metric-border);color:var(--text)}
.metric.featured .metric-top,.metric.featured .metric-meta{color:var(--muted)}
.metric.featured .metric-value,.metric.featured .metric-meta strong{color:var(--accent-ink)}
.metric.featured .round-arrow,.nav-btn.active,.client-tab.active .count-badge{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-border)}
.metric.featured .metric-footer{background:var(--ring-track)}
.metric:hover{border-color:var(--line-strong)}
.metric.featured:hover{border-color:var(--accent)}
.dialog,.drawer,.dropdown{background:var(--dialog-opaque);border:1px solid var(--dialog-border);box-shadow:var(--floating-shadow)}
.overlay{background:var(--overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.drawer{border-right:0}.dialog-head{border-color:var(--line)}
.dialog-head .icon-btn,.icon-btn,.detail-stat,.contact-card,.lead-note,.conversion-preview,.message-recipient,.contribution{background:var(--panel-opaque);border-color:var(--panel-border);color:var(--text)}
.field input,.field select,.field textarea,.search-input,.sales-search input,.sales-filters select,.sales-filters input{background:var(--surface-sunken);border-color:var(--line-strong);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--subtle)}
select option{background:var(--panel-opaque);color:var(--text)}
.dropdown button,.dropdown a,.nav-btn,.icon-btn,.profile-btn{color:var(--muted)}
.dropdown button:hover,.dropdown a:hover,.dropdown a.active,.nav-btn:hover,.nav-btn[aria-expanded=true],.search-result:hover,.search-result:focus{background:var(--surface-raised);color:var(--text)}
.nav-btn.active{color:var(--accent-ink)}
.btn,.filter-select,.channel-tab,.stage,.count-badge{color:var(--text);border-color:var(--line-strong);background:var(--surface-raised)}
.btn:hover{background:var(--surface-3)}
.btn-primary,.quick-add,.skip-link{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover,.quick-add:hover{background:var(--accent);filter:brightness(1.07);color:var(--on-accent)}
.text-btn,.info-button{color:var(--muted)}.text-btn:hover{color:var(--accent-ink)}
.notice,.attention-footer,.service-icon{background:var(--panel-opaque);border-color:var(--panel-border);color:var(--muted)}
.notice .icon,.contribution-label .icon{color:var(--muted)}
.attention-tab.active,.channel-tab.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.attention-tab.active .tab-count{background:var(--accent-soft);color:var(--accent-ink)}
.attention-action{background:var(--surface-raised);border-color:var(--line-strong);color:var(--text)}
.stage-badge,.stage-new,.stage-contacted,.stage-qualified,.stage-proposal-sent,.stage-negotiation{background:var(--surface-raised);color:var(--text);border-color:var(--line-strong)}
.stage-won,.health.on-track{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-bg)}
.stage-lost,.health.blocked,.btn-danger,.form-error,.loss-reason{background:var(--danger-bg);color:var(--red);border-color:var(--red)}
.health.at-risk,.duplicate-warning,.due-badge,.blocker{background:var(--warning-bg);color:var(--orange);border-color:var(--line-strong)}
.due-badge.late{background:var(--danger-bg);color:var(--red)}
.loss-reason p,.duplicate-warning p,.duplicate-warning strong{color:inherit}.blocker{color:var(--orange)!important}
.overdue{color:var(--red)!important}.margin-value{color:var(--success-fg)}
.avatar.violet,.avatar.orange,.avatar.blue,.avatar.pink,.avatar.mint,.avatar.gold{background:var(--surface-raised);color:var(--text);border-color:var(--line-strong)}
.activity-icon,.activity-icon.payment{background:var(--panel-opaque);color:var(--accent-ink);border-color:var(--panel-border)}
.toast{background:var(--panel-opaque);color:var(--text);border-color:var(--line-strong)}.toast .icon{color:var(--accent-ink)}
.chart-bar:hover .collection-bar,.chart-bar:focus .collection-bar{fill:var(--accent)}
.data-table tbody tr:hover{background:var(--surface-raised)}
.table-scroll{scrollbar-color:var(--line-strong) var(--surface-sunken);background:none}
.profile-btn{background:var(--panel-opaque);border-color:var(--panel-border);color:var(--text)}
.theme-toggle{flex-shrink:0}.theme-toggle .icon{width:19px;height:19px}
.integration-card,.integration-state,.service-card-icon,.period-control,.round-arrow{background:var(--panel-opaque);border-color:var(--panel-border)}
.icon-btn:hover,.profile-btn:hover{background:var(--panel-opaque);border-color:var(--line-strong)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .panel,.metric,.metric.featured,.client-financial-strip .detail-stat,.settings-card{background:var(--panel-glass);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
 .metric,.metric.featured{background:var(--metric-glass)}
 .detail-stat,.contact-card,.lead-note,.conversion-preview,.message-recipient,.contribution,.notice,.attention-footer,.integration-card,.integration-state,.period-control{background:var(--panel-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 .dialog-head .icon-btn,.icon-btn,.icon-btn:hover,.profile-btn,.profile-btn:hover,.service-icon,.service-card-icon,.activity-icon,.activity-icon.payment,.round-arrow{background:var(--panel-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 .dialog,.drawer{background:var(--dialog-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
 .dropdown{background:var(--dropdown-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
 .app-header.is-scrolled{background:var(--header-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
@media(max-width:1000px){:root{--header-height:75px}}
@media(max-width:1000px){.header-actions>.theme-toggle,.header-actions>.header-profile{display:none}}
@media(max-width:600px){:root{--header-height:68px}.header-inner{gap:6px}.brand img{width:126px}.brand{gap:5px}.header-actions{gap:5px}.header-actions .icon-btn{width:33px;height:33px}.header-actions .quick-add{width:33px;height:33px}}
@media(prefers-reduced-motion:reduce){.app-header{transition:none;will-change:auto}}
:root{--preview-dark-bg:#0a0a0a;--preview-dark-card:#242424;--preview-dark-line:#3b3b3b;--preview-light-bg:#ededeb;--preview-light-card:#ffffff;--preview-light-line:#d3d3cf}
.profile-btn[aria-current=page]{border-color:var(--accent);color:var(--accent-ink)}
@media(max-width:380px){.header-actions{gap:4px}.brand img{width:112px}.header-inner{padding-inline:12px}}

/* Brief motion, with no looping effects or layout shifts. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1)}
.btn,.quick-add,.text-btn,.icon-btn,.profile-btn,.nav-btn,.client-tab,.attention-tab,.channel-tab,.attention-action,.dropdown a,.dropdown button,.mobile-nav a,.settings-nav a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s var(--motion-ease),filter .18s ease}
.panel,.metric,.contact-card,.service-card,.delivery-task,.delivery-review{transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,transform .2s var(--motion-ease)}
.btn>.icon,.quick-add>.icon,.icon-btn>.icon,.text-btn>.icon,.nav-btn>.icon,.mobile-nav a>.icon,.round-arrow>.icon{transition:transform .18s var(--motion-ease),color .18s ease}
.btn:active,.quick-add:active,.icon-btn:active{transform:scale(.98)}
.overlay{animation:overlay-enter .18s ease both}
.dialog{animation:dialog-enter .22s var(--motion-ease) both}
.dialog.drawer{animation:drawer-enter .24s var(--motion-ease) both}
.dropdown{animation:dropdown-enter .16s var(--motion-ease) both;transform-origin:top}
.overlay.is-closing{animation:overlay-exit .16s ease both}
.overlay.is-closing>.dialog{animation:dialog-exit .16s ease both}
.overlay.is-closing>.drawer{animation:drawer-exit .16s ease both}
.mobile-menu-head{position:relative;display:block;padding:28px;border-bottom-color:var(--panel-border)}
.mobile-menu-profile{display:flex;gap:14px;align-items:center;padding-right:48px}
.mobile-menu-profile>.avatar{width:48px;height:48px;border-radius:14px;flex-shrink:0;font-size:16px}
.mobile-menu-profile strong{font-size:18px;font-weight:var(--weight-semibold);display:block}
.mobile-menu-profile p{font-size:14px;line-height:1.6;color:var(--muted);margin:5px 0 0}
.mobile-profile-actions{display:flex;align-items:center;gap:12px;margin:22px 0 0 62px}
.mobile-profile-actions .icon-btn{width:44px;height:44px;margin:0;border-radius:12px}
.mobile-profile-actions .icon-btn:disabled{opacity:.45;cursor:default;transform:none}
.mobile-menu-close{position:absolute;top:24px;right:24px}
.mobile-menu-search{width:100%;justify-content:flex-start}.mobile-menu-search .kbd{margin-left:auto}
.mobile-menu-dialog .mobile-nav a{border-radius:10px}
@media(hover:hover) and (pointer:fine){
 .btn:hover,.quick-add:hover{transform:translateY(-1px)}
 .icon-btn:not(:disabled):hover>.icon,.text-btn:hover>.icon,.round-arrow:hover>.icon{transform:translateY(-1px)}
 button.metric:hover,.service-card:hover,.contact-card:hover,.delivery-task:hover{border-color:var(--line-strong);box-shadow:var(--panel-shadow);transform:translateY(-2px)}
 .mobile-nav a:hover>.icon,.dropdown a:hover>.icon{transform:translateX(2px)}
}
@keyframes overlay-enter{from{opacity:0}to{opacity:1}}
@keyframes overlay-exit{from{opacity:1}to{opacity:0}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(5px) scale(.995)}}
@keyframes drawer-enter{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes drawer-exit{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(10px)}}
@keyframes dropdown-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.drawer .mobile-menu-head{padding:24px 21px}.mobile-menu-close{right:18px;top:20px}.mobile-profile-actions{margin-left:0;justify-content:center}}
@media(prefers-reduced-motion:reduce){.overlay,.dialog,.dialog.drawer,.dropdown,.overlay.is-closing,.overlay.is-closing>.dialog{animation:none}.btn,.quick-add,.text-btn,.icon-btn,.profile-btn,.nav-btn,.client-tab,.attention-tab,.channel-tab,.attention-action,.panel,.metric,.contact-card,.service-card,.delivery-task,.delivery-review{transition:none}button.metric:hover,.service-card:hover,.contact-card:hover,.delivery-task:hover,.btn:hover,.quick-add:hover,.btn:active,.quick-add:active,.icon-btn:active{transform:none}.icon-btn:hover>.icon,.text-btn:hover>.icon,.mobile-nav a:hover>.icon,.dropdown a:hover>.icon{transform:none}}

/* Forest-green mesh CTAs. Grain is a static background beneath the label. */
.btn.btn-primary,.quick-add{
 background-color:var(--cta-base);
 background-image:url('/assets/cta-grain.svg'),var(--cta-mesh);
 background-size:96px 96px,100% 100%,100% 100%,100% 100%;
 background-repeat:repeat,no-repeat,no-repeat,no-repeat;
 border:1px solid var(--cta-border);color:var(--cta-ink);
 box-shadow:inset 0 1px 0 rgba(216,255,219,.12),inset 0 -1px 0 rgba(0,0,0,.18),0 3px 12px var(--cta-glow);
 border-radius:999px;padding:12px 20px;font-size:15px;font-weight:500;
 text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.header-actions .quick-add{font-size:15px;padding:11px 17px}
@media(max-width:600px){.header-actions .quick-add{width:38px;height:38px;padding:0}}
.btn-primary:hover,.quick-add:hover{
 background-color:var(--cta-base);color:var(--cta-ink);filter:none;
}
@media(hover:hover) and (pointer:fine){
 .btn-primary:not(:disabled):not([aria-disabled="true"]):hover,.quick-add:not(:disabled):not([aria-disabled="true"]):hover{
  border-color:var(--accent);filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(216,255,219,.18),inset 0 -1px 0 rgba(0,0,0,.18),0 5px 20px var(--cta-glow);
 }
}
.btn-primary:disabled,.quick-add:disabled,.btn-primary[aria-disabled="true"],.quick-add[aria-disabled="true"]{transform:none;filter:none;box-shadow:none}
@media(forced-colors:active){.btn-primary,.quick-add{background-image:none;box-shadow:none}}

/* Fixed background texture keeps grid alignment during scrolling. */
:root{--dot-spacing:24px;--dot-radius:200px}
body::after{
 content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1.4px);
 background-size:var(--dot-spacing) var(--dot-spacing);
}
.background-dot-spotlight{
 --dot-x:0px;--dot-y:0px;
 position:fixed;left:0;top:0;width:calc(var(--dot-radius) * 2);height:calc(var(--dot-radius) * 2);
 z-index:-1;pointer-events:none;opacity:0;transition:opacity .24s ease;
 background-image:radial-gradient(circle,var(--dot-hover) 1px,transparent 1.4px);
 background-size:var(--dot-spacing) var(--dot-spacing);
 background-position:calc(var(--dot-radius) - var(--dot-x,0px)) calc(var(--dot-radius) - var(--dot-y,0px));
 transform:translate3d(calc(var(--dot-x,0px) - var(--dot-radius)),calc(var(--dot-y,0px) - var(--dot-radius)),0);
 -webkit-mask-image:radial-gradient(circle,black 0%,rgba(0,0,0,.45) 38%,transparent 70%);
 mask-image:radial-gradient(circle,black 0%,rgba(0,0,0,.45) 38%,transparent 70%);
 contain:strict;
}
.background-dot-spotlight.is-active{opacity:1}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.background-dot-spotlight{display:none;transition:none}}
@media print{body::before,body::after,.background-dot-spotlight{display:none!important}}
@media(forced-colors:active){body::after,.background-dot-spotlight{display:none}}