:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24233a;background:#f6f4fb;font-synthesis:none;--accent:#7138a5;--accent-soft:#f0e8f8;--line:#e7e1ee;--muted:#7e7a8c;--surface:#fff;--danger:#b42318;--warn:#a85c12;--good:#18805a}*{box-sizing:border-box}body{margin:0;min-height:100vh}.hidden{display:none!important}.ops-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.ops-tabs [aria-selected="true"]{background:#4b286d;color:#fff;border-color:#4b286d}.ops-panel{margin-bottom:16px}.ops-panel label{min-width:180px}.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{background:#211a2d;color:#fff;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 30px}.brand b,.brand small{display:block}.brand small{color:#bdb1ca;font-size:11px;margin-top:4px}.brand-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#8f58bd,#61348c);color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:-1px}.brand-mark.small{width:36px;height:36px;border-radius:11px;font-size:12px}nav{display:grid;gap:6px}nav button{border:0;background:transparent;color:#d0c5d9;text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;font:inherit}nav button:hover,nav button.active{background:#382a47;color:#fff}.sidebar-foot{margin-top:auto;color:#d8c9e4;font-size:12px;line-height:1.8;padding:14px 8px}.sidebar-foot span{color:#a99ab4}.main{padding:28px clamp(20px,4vw,56px);max-width:1680px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h1{font-size:28px;margin:4px 0}.top-actions{display:flex;align-items:center;gap:10px}button{font:inherit}#refresh,.login-card button{border:0;border-radius:9px;padding:10px 16px;background:var(--accent);color:#fff;cursor:pointer}.quiet{border:1px solid var(--line);background:#fff;color:#494458;border-radius:9px;padding:9px 12px;cursor:pointer}.eyebrow{font-size:10px;letter-spacing:1.25px;color:#9277a4;font-weight:700;margin:0 0 6px}.muted{color:var(--muted);font-size:13px}.kpis{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px;margin-bottom:18px}.kpi,.panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 18px rgba(43,30,61,.035)}.kpi{padding:17px}.kpi span{display:block;color:var(--muted);font-size:12px}.kpi b{display:block;font-size:28px;margin-top:12px}.kpi small{display:block;color:#958d9c;margin-top:5px}.grid{display:grid;gap:16px;margin-bottom:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:20px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel h2{font-size:17px;margin:0}.chip{background:var(--accent-soft);color:var(--accent);font-size:11px;padding:6px 9px;border-radius:999px}.flow-list,.priority-list,.metric-list{display:grid;gap:8px}.flow-row,.metric-row,.priority-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #f0edf3;border-radius:10px}.flow-row strong{font-size:12px}.flow-meta{display:flex;gap:13px;color:var(--muted);font-size:11px;white-space:nowrap}.metric-row span:first-child,.priority-row span:first-child{color:var(--muted);font-size:13px}.metric-row b,.priority-row b{font-size:14px}.notice{padding:12px 14px;border-radius:10px;background:#fff2e7;border:1px solid #f6d1ac;color:#754316;margin-bottom:14px}.error{min-height:20px;color:var(--danger);font-size:12px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #f0edf3;white-space:nowrap}th{font-size:11px;color:var(--muted);font-weight:600}td.num{text-align:right;font-variant-numeric:tabular-nums}.empty{padding:24px;color:var(--muted);text-align:center;font-size:13px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#fff 0,#f1eaf8 60%,#f6f4fb 100%)}.login-card{width:min(420px,100%);padding:34px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(46,24,67,.1)}.login-card h1{font-size:25px;margin:4px 0}.login-card>p{margin:8px 0 24px}.login-card label{display:grid;gap:7px;font-size:12px;color:#5f5968;margin:15px 0}.login-card input{width:100%;border:1px solid #ddd6e5;border-radius:9px;padding:11px 12px;font:inherit}.login-card button{width:100%;margin-top:6px}.login-card .brand-mark{margin-bottom:18px}.view{animation:appear .18s ease}@keyframes appear{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}@media(max-width:1050px){.kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{padding:12px}.brand{padding-bottom:12px}nav{display:flex;overflow:auto}nav button{white-space:nowrap}.sidebar-foot{display:none}.main{padding:20px 14px}.topbar{align-items:flex-start;gap:12px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.grid.two{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi b{font-size:23px}}
:root{--admin-gap:12px}.panel{margin-bottom:16px}.button{border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#fff;color:#4d4356;cursor:pointer}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button:disabled{opacity:.5;cursor:wait}.user-create{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}.user-create summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.form-grid label{display:grid;gap:6px;color:#5f5968;font-size:12px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #ddd6e5;border-radius:8px;padding:9px 10px;font:inherit;color:inherit}.form-grid .wide{grid-column:1/-1}.form-grid button{justify-self:start}@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.preview-button{width:100%;margin-top:10px;padding:10px 12px;border:1px solid #d5c1e5;border-radius:9px;background:#faf6ff;color:#60358a;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.preview-button:hover{background:#f2eafb}.demo-caption{font-size:11px!important;line-height:1.5;color:#756c7d!important;margin:8px 0 0!important}.env-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#513b64;color:#f5eafa!important;font-size:10px;font-weight:700;letter-spacing:.5px}.data-mode,.system-status{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;background:#f1edf5;color:#51465c;font-size:11px;font-weight:650;white-space:nowrap}.data-mode.demo{background:#fff1d6;color:#84510b}.data-mode.live{background:#e7f6ee;color:#166344}.system-status.ok{background:#e7f6ee;color:#166344}.system-status.warn{background:#fff1d6;color:#84510b}.system-status.error{background:#fde8e7;color:#9a261e}.search-form{display:flex;gap:8px}.search-form input{min-width:220px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}.customer-open{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:650;cursor:pointer;padding:0}.customer-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-field{padding:11px;border:1px solid #f0edf3;border-radius:9px;min-width:0}.detail-field span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.detail-field b{font-size:13px;overflow-wrap:anywhere}.detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.detail-head h2{font-size:18px;margin:0}@media(max-width:1100px){.top-actions{gap:6px}.data-mode,.system-status{font-size:10px;padding:0 7px}}@media(max-width:760px){.topbar{display:block}.top-actions{justify-content:flex-start;margin-top:12px}.search-form input{min-width:0;width:100%}.customer-detail-grid{grid-template-columns:1fr}}
.task-filters{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:12px 0}.task-filters label{display:grid;gap:5px;font-size:11px;color:var(--muted)}.task-filters select,.task-filters input{min-width:130px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 8px;color:inherit;font:inherit}.task-kpis{grid-template-columns:repeat(6,minmax(0,1fr));margin:12px 0}.task-kpis .kpi{padding:10px}.task-kpis .kpi b{font-size:20px;margin-top:6px}.kpi-link{cursor:pointer;transition:transform .12s,box-shadow .12s}.kpi-link:hover,.kpi-link:focus{outline:2px solid #b89ad1;transform:translateY(-2px);box-shadow:0 8px 22px #7138a51c}@media(max-width:1100px){.task-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.task-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.task-filters label{flex:1 1 42%}}

/* Phase 2.6C: use the established V1 light violet theme and compact workbench rhythm. */
:root{color:#2d2d2d;background:#f5f0ff;--accent:#7b2fbe;--accent-soft:#ede4ff;--line:#e0d5f0;--muted:#737373;--page:#f5f0ff;--ink:#2d2d2d;--shadow-sm:0 2px 8px rgba(45,45,45,.08)}
body{background:radial-gradient(ellipse at 50% 0,#fff 0,#f5f0ff 64%);overflow-x:hidden}
.shell{grid-template-columns:260px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,rgba(123,47,190,.08),transparent 34%),#fff;color:#2d2d2d;border-right:1px solid var(--line);padding:22px 16px}
.brand{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.brand small{color:#737373}
.brand-mark{border-radius:12px;background:linear-gradient(135deg,#7b2fbe,#a855f7)}
nav{gap:4px;min-width:0}
nav button{color:#2d2d2d;padding:10px 12px;border-radius:12px;font-weight:650}
nav button:hover,nav button.active{background:#ede4ff;color:#6b28a6}
nav button.active{box-shadow:inset 3px 0 0 #7b2fbe,var(--shadow-sm)}
.sidebar-foot{color:#5f5369;font-size:11px;line-height:1.7}
.main{padding:22px clamp(16px,2.4vw,34px);min-width:0}
.topbar{gap:12px;margin-bottom:14px;min-width:0}
.topbar>div:first-child{min-width:0}
.topbar h1{font-size:24px}
.top-actions{gap:8px;min-width:0;flex-wrap:wrap}
.kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.kpi,.panel{border-radius:12px;box-shadow:var(--shadow-sm)}
.kpi{padding:12px}
.kpi span{font-size:11px}
.kpi b{font-size:23px;margin-top:7px}
.grid{gap:12px;margin-bottom:12px;min-width:0}
.panel{padding:14px}
.panel-head{gap:10px;margin-bottom:10px}
.flow-list,.priority-list,.metric-list{gap:6px}
.flow-row,.metric-row,.priority-row{gap:10px;padding:8px 10px;border-radius:8px;min-width:0}
.metric-row span:first-child,.priority-row span:first-child{font-size:12px}
.metric-row b,.priority-row b{font-size:12px}
.notice{padding:9px 11px;border-radius:8px;margin-bottom:10px;font-size:12px;overflow-wrap:anywhere}
.table-wrap{overflow:auto;max-width:100%;min-width:0}
table{font-size:12px}
th,td{padding:8px}
th{font-size:10px;background:#faf8fd}
.empty{padding:18px}
.button{border-radius:7px;padding:7px 10px}
.task-filters select,.task-filters input,.search-form input,.form-grid input,.form-grid select,.form-grid textarea{border-radius:7px}
.customer-detail-grid{gap:8px}
.detail-field{padding:9px;border-radius:7px}
.task-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.sales-task-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:200px}
.sales-task-actions .button{padding:5px 7px;font-size:11px}
.sales-task-main{display:grid;gap:4px}
.sales-task-main small{color:var(--muted);font-size:11px}
.sales-task-item{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sales-task-item .chip{padding:3px 6px}
.sales-detail-section{margin-top:14px}
.sales-detail-section h3{font-size:14px;margin:14px 0 8px}
.sales-stage-chip{display:inline-block;background:#f0e8f8;color:#6b28a6;padding:3px 7px;border-radius:5px;font-size:11px}
@media(max-width:1100px){.task-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.shell{grid-template-columns:minmax(0,1fr);min-width:0}.sidebar,.main{min-width:0;width:100%;max-width:100%}.sidebar{padding:12px;border-right:0;border-bottom:1px solid var(--line)}#navigation{grid-template-columns:repeat(2,minmax(0,1fr))}#navigation button{min-width:0}.brand{padding-bottom:10px;margin-bottom:0}.main{padding:16px 12px}.topbar{align-items:flex-start;flex-wrap:wrap}.top-actions{max-width:100%;flex-wrap:wrap}.task-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.table-wrap{max-width:100%;overflow-x:auto}}
/* V1-shaped grouped customer cards on the Sales Today Task page. */
.sales-v1-customer-card{background:#fff;border:1px solid #e8dcfa;border-radius:14px;padding:16px;margin:12px 0;box-shadow:0 2px 8px rgba(25,15,40,.04)}
.sales-v1-customer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sales-v1-customer-head>.muted,.sales-v1-customer-head>div:first-child>.muted{margin-top:5px}
.sales-v1-customer-head .customer-open{border:0;background:none;padding:0;color:#282036;font:inherit;font-weight:750;text-align:left;cursor:pointer}
.sales-v1-customer-actions,.sales-v1-task-label,.sales-v1-task-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sales-v1-channel-row{margin:12px 0;color:#6f6878;font-size:13px}
.sales-v1-task-row{border-top:1px dashed #e9e4ef;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.sales-v1-task-info{grid-column:1/-1;color:#5a5262;font-size:13px}.sales-v1-task-info summary{cursor:pointer;color:#65359b;font-weight:650}.sales-v1-task-info>div{padding:8px 10px;background:#f8f7fb;border-radius:8px;white-space:pre-wrap}
.sales-v1-customer-foot{border-top:1px solid #f0edf4;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;color:#6f6878;font-size:13px}
.sales-detail-dialog{width:min(980px,94vw);max-width:94vw;max-height:90vh;padding:0;border:0;border-radius:18px;background:#f7f8fc;color:inherit;overflow:auto;box-shadow:0 18px 60px #1e163466}.sales-detail-dialog::backdrop{background:#17132188}.sales-detail-dialog .panel{margin:0;border:0;border-radius:18px;box-shadow:none}
.allocation-simple .task-filters{align-items:start}.simple-field{display:flex;flex-direction:column;gap:8px}.inline-check,.inline-checks,.inline-checks label{display:flex;align-items:center;gap:7px}.inline-checks{flex-wrap:wrap}.simple-field .help,.allocation-simple .help{color:#707786;font-size:12px;line-height:1.5}.more-filters{grid-column:1/-1;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px}.more-filters>summary{cursor:pointer;color:#4b5563;font-weight:600}.compact-filters{margin-top:12px}.sequence-plan{display:flex;gap:12px;flex-wrap:wrap;padding:12px 0}.sequence-plan label{display:flex;align-items:center;gap:7px;border:1px solid #e5e7eb;border-radius:9px;padding:10px 12px;background:#fff}
@media(max-width:760px){.sales-v1-task-row{grid-template-columns:1fr}.sales-v1-task-actions{grid-column:1/-1}.sales-v1-task-actions .button{flex:1 1 42%}.sales-detail-dialog{width:96vw;max-width:96vw;max-height:94vh}.sales-v1-customer-foot{align-items:flex-start}}
.today-channel-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:12px 0 18px}.today-channel-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 14px;border:1px solid #e8dcfa;border-radius:12px;background:#fff;color:inherit;cursor:pointer;text-align:left}.today-channel-card:hover,.today-channel-card:focus-visible{border-color:#8d3bd1;box-shadow:0 2px 10px #7532a51c}.today-channel-card strong{font-size:24px;color:#702ac0}.today-channel-card span{color:#706b78;font-size:13px}@media(max-width:1000px){.today-channel-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.today-channel-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.today-summary-host .task-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}@media(max-width:650px){.today-summary-host .task-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-link{text-align:left;color:inherit;font:inherit}.kpi-link.is-active,.today-channel-card.is-active{border:2px solid #7138a5;background:#f2e8fc;box-shadow:0 3px 14px #7138a526}.allocation-fields{display:contents;border:0;margin:0;padding:0}.allocation-fields:disabled{opacity:.52}.allocation-capabilities{display:flex;gap:10px;flex-wrap:wrap}.allocation-capabilities label,.allocation-option,.allocation-switch{display:flex!important;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 12px;cursor:pointer}.allocation-switch{justify-content:space-between;min-width:230px}.allocation-option{width:fit-content}.allocation-fields:disabled .allocation-capabilities label,.allocation-fields:disabled .allocation-option,.allocation-fields:disabled .allocation-switch{cursor:not-allowed}.allocation-switch strong{color:var(--accent)}.allocation-fields legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ops-panel .allocation-capabilities label,.ops-panel .allocation-option,.ops-panel .allocation-switch{display:inline-flex!important;justify-content:flex-start!important;flex:0 0 auto!important;min-width:0!important;width:auto!important;gap:8px!important}.ops-panel .allocation-capabilities input,.ops-panel .allocation-option input,.ops-panel .allocation-switch input{width:auto!important;margin:0!important;flex:0 0 auto}
.today-task-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 4px;border-bottom:1px solid var(--line)}.today-task-toolbar h3{margin:0;font-size:16px}.today-task-toolbar-actions{display:flex;gap:8px;align-items:center}.today-task-toolbar .quiet{font-size:12px;padding:7px 10px;cursor:pointer}.button:not(:disabled),a.button{cursor:pointer;transition:background-color .14s,border-color .14s,box-shadow .14s,transform .14s}.button:not(:disabled):hover,a.button:hover{border-color:#9660bd;box-shadow:0 3px 12px #7138a51c;transform:translateY(-1px)}.button:not(:disabled):active,a.button:active{transform:translateY(0);box-shadow:inset 0 1px 3px #20102b22}.button:disabled{cursor:not-allowed;opacity:.58;box-shadow:none}
.today-communication-popover{position:fixed;z-index:1000;width:min(380px,calc(100vw - 24px));max-height:min(440px,70vh);overflow:auto;padding:12px;background:#fff;border:1px solid #ded2eb;border-radius:13px;box-shadow:0 14px 40px #21152a38}.today-communication-popover[hidden]{display:none}.communication-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 9px;border-bottom:1px solid #eee8f4}.communication-popover-head .quiet{font-size:20px;line-height:1;padding:3px 9px}.communication-popover-list{display:grid}.communication-popover-row{display:grid;grid-template-columns:84px 1fr;gap:9px;padding:9px 2px;border-bottom:1px solid #f0edf3;font-size:12px}.communication-popover-row time{color:var(--muted);font-variant-numeric:tabular-nums}.communication-popover-row div{display:grid;gap:3px;min-width:0}.communication-popover-row small{overflow-wrap:anywhere;color:#6b6572}.communication-popover-row span{color:#5d5663}.communication-all{display:block;width:100%;margin-top:8px;padding:8px;border:0;border-radius:8px;background:#f3eafa;color:#673495;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.communication-all:hover{background:#e8d8f6}.sales-v1-customer-actions .button:focus-visible,.sales-v1-task-actions .button:focus-visible{outline:2px solid #7138a5;outline-offset:2px}
@media(max-width:760px){.today-task-toolbar{align-items:flex-start;flex-wrap:wrap}.today-task-toolbar-actions{margin-left:auto}.today-communication-popover{position:fixed;left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto;max-height:min(70vh,620px);border-radius:18px;box-shadow:0 18px 60px #17132166;padding:16px}.today-communication-popover::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:#d8d0df;margin:0 auto 12px}}

/* Phase 2 final UI polish: shared controls and modal surfaces. */
:root{--primary:var(--accent);--primary-hover:#64249c;--primary-light:var(--accent-soft);--surface-soft:#faf8fd;--border:var(--line);--text-primary:#2d2d2d;--text-secondary:var(--muted);--danger:#b42318;--warning:#a85c12;--success:#18805a;--radius-control:8px;--radius-card:12px;--radius-modal:12px;--shadow-modal:0 18px 54px rgba(33,21,42,.24)}
button,a.button,.customer-open,summary{transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s,transform .14s}
button:not(:disabled),a.button,.customer-open,summary{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #b58ad8;outline-offset:2px}
button:disabled,.button:disabled,[aria-disabled="true"]{cursor:not-allowed!important;opacity:.55;filter:saturate(.55);box-shadow:none!important;transform:none!important}
input,select,textarea{accent-color:var(--primary)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:#9863c0;box-shadow:0 0 0 3px #7b2fbe1c;outline:0}
.button.danger{background:#fff5f4;border-color:#efc4c0;color:#9d2118}.button.danger:hover{background:#fde8e6;border-color:#d58a83}
button[id$="-save"]{scroll-margin-bottom:80px}
.view .panel button[id$="-save"],.tools-panel button[id$="-save"]{position:sticky;bottom:10px;z-index:4;box-shadow:0 4px 18px rgba(45,30,60,.12)}
.modal-dialog{max-width:calc(100vw - 28px);max-height:min(90dvh,900px);padding:0;border:1px solid var(--border);border-radius:var(--radius-modal);background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-modal);overflow:auto}
.modal-dialog::backdrop{background:rgba(34,25,44,.48);backdrop-filter:blur(1px)}
.history-dialog{width:min(1040px,calc(100vw - 32px));max-height:min(90dvh,900px)}
.sales-detail-dialog{width:min(980px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:min(90dvh,900px);padding:0;border:1px solid var(--border);border-radius:var(--radius-modal);background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-modal);overflow:auto}
.sales-detail-dialog .panel{margin:0;border:0;border-radius:0;box-shadow:none;padding:0 18px 18px}
.modal-sticky-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:10px 16px!important;margin:0 0 12px!important;border-bottom:1px solid var(--border);background:rgba(255,255,255,.97);backdrop-filter:blur(8px)}
.modal-sticky-header h2,.modal-sticky-header h3{margin:0!important;font-size:18px!important;color:var(--text-primary)}
.modal-close-button{flex:none;width:36px;height:36px;padding:0!important;border-radius:9px!important;font-size:23px;line-height:1;color:#554b60!important;background:#fff!important;border-color:var(--border)!important}
.modal-close-button:hover{background:var(--primary-light)!important;color:var(--primary)!important;border-color:var(--primary)!important}
.customer-detail-content{min-width:0;padding:0 0 14px}
.customer-detail-content>.customer-detail-section{margin:10px 14px}
.customer-detail-section{border:1px solid var(--border);border-radius:10px;background:#fff;overflow:clip}
.customer-detail-section>summary{padding:11px 13px;color:#563675;font-weight:700;background:var(--surface-soft);list-style-position:inside}
.customer-detail-section[open]>summary{border-bottom:1px solid var(--border)}
.customer-detail-section-body{display:grid;gap:8px;padding:10px 12px}
.customer-detail-section-body>.customer-detail-section{margin:0}
.customer-detail-section .metric-row{align-items:flex-start}
.customer-detail-section .metric-row b{max-width:64%;overflow-wrap:anywhere;text-align:right}
.customer-detail-section .metric-row small{color:var(--text-secondary);font-weight:400}
.sales-detail-section{margin:10px 0!important}
.sales-detail-section>summary{padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:#563675;font-weight:700;list-style-position:inside}
.sales-detail-section[open]>summary{border-radius:9px 9px 0 0}
.sales-detail-section .customer-detail-section-body{padding:9px 10px;border:1px solid var(--border);border-top:0;border-radius:0 0 9px 9px}
#sales-outcome-form>label{display:grid;gap:6px;margin:12px 18px;color:var(--text-secondary)}
#sales-outcome-form>.ops-tabs{position:sticky;bottom:0;margin:0;padding:12px 18px;background:rgba(255,255,255,.97);border-top:1px solid var(--border);z-index:10}
@media(max-width:760px){.modal-dialog,.history-dialog{width:100%;max-width:100%;max-height:96dvh;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0}.sales-detail-dialog{position:fixed;inset:auto 0 0;width:100%;max-width:100%;max-height:96dvh;margin:0;border-radius:18px 18px 0 0;border-bottom:0}.sales-detail-dialog .panel{padding:0 12px 14px}.modal-sticky-header{min-height:54px;padding:9px 12px!important}.customer-detail-content>.customer-detail-section{margin:9px 10px}.customer-detail-section .metric-row{display:grid;grid-template-columns:1fr;gap:4px}.customer-detail-section .metric-row b{max-width:100%;text-align:left}}
[data-ui-dirty="true"] button[id$="-save"]{border-color:var(--primary);background:var(--primary);color:#fff}
.ui-save-feedback{display:inline-flex;align-items:center;min-height:30px;margin-left:9px;font-size:12px;color:var(--success)}.ui-save-feedback.is-error{color:var(--danger);max-width:100%;overflow-wrap:anywhere}
#sales-gmail-disconnect{background:#fff5f4;border-color:#efc4c0;color:#9d2118}#sales-gmail-disconnect:hover{background:#fde8e6;border-color:#d58a83}

/* Current production brand and lavender UI tokens shared by Admin and Sales. */
:root{--ink:#2d2d2d;--muted:#737373;--soft:#9a8dae;--line:#e0d5f0;--surface:#fff;--surface-soft:#f5f0ff;--page:#f5f0ff;--nav:#fff;--nav-soft:#ede4ff;--accent:#7b2fbe;--accent-dark:#6b28a6;--purple:#7b2fbe;--magenta:#ff6b9d;--coral:#ff7043;--gold:#ffc857;--warning:#b86615;--danger:#b42318;--blue:#00a9b3;--primary:#7b2fbe;--primary-hover:#6b28a6;--primary-light:#ede4ff;--border:#e0d5f0;--text-primary:#2d2d2d;--text-secondary:#737373;--success:#18805a;--shadow-sm:0 2px 8px rgba(45,45,45,.08)}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,rgba(123,47,190,.08),transparent 34%),#fff;color:#2d2d2d;border-right:1px solid var(--line);box-shadow:none}
.brand-logo{background:#fff!important;box-shadow:0 0 18px rgba(123,47,190,.12)!important;padding:5px;overflow:hidden}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain}
.brand b,.brand strong{color:#2d2d2d;letter-spacing:0}
.brand small{color:#737373!important;line-height:1.45}
.sidebar-foot{color:#5f5369!important}
#navigation button,#sales-nav button{color:#2d2d2d;background:transparent;padding:10px 12px;border-radius:12px;font-weight:650}
#navigation button:hover,#sales-nav button:hover,#navigation button.active,#sales-nav button.active{background:#ede4ff;color:#6b28a6}
#navigation button.active,#sales-nav button.active{box-shadow:inset 3px 0 0 #7b2fbe,var(--shadow-sm)}
#sales-nav{display:grid;gap:4px;min-width:0}
.sales-version{display:inline-block;margin-top:8px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#7b2fbe!important;font-size:10px}
.sales-login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sales-login-brand .brand-logo{width:64px;height:52px;flex:none;margin:0!important}
.login-card .eyebrow{margin-bottom:4px;color:#7b2fbe}
.login-card h1{font-size:20px;line-height:1.4}
.result-modal-card{width:min(680px,calc(100vw - 28px));max-height:min(90dvh,820px);padding:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#fbf9ff);box-shadow:0 8px 24px rgba(45,45,45,.12);color:#2d2d2d}
.result-modal-card h3{font-size:20px}
.result-modal-select,.result-modal-input,.result-modal-note,.result-referral-fields input{border-color:#e0d5f0;border-radius:8px}
.result-referral-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#faf8fd}
.result-referral-fields[hidden]{display:none}
.result-modal-help{grid-column:1/-1;margin:0;color:#737373;font-size:12px;line-height:1.5}
.result-modal-actions{position:sticky;bottom:-24px;margin:12px -24px -24px;padding:12px 24px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);z-index:5}
.result-modal-actions .button,.result-modal-actions .cm-btn{min-height:42px}
.result-field-error{display:none;grid-column:1/-1;color:#b42318;font-size:12px}
.result-field-error.is-visible{display:block}
@media(max-width:760px){.sidebar{position:relative;height:auto;overflow:visible;background:#fff}.result-modal-card{width:100%;max-height:calc(96dvh - 16px);margin:0;padding:18px 14px;border-radius:18px 18px 0 0}.result-modal-actions{bottom:-18px;margin:12px -14px -18px;padding:12px 14px}.result-referral-fields{grid-template-columns:1fr}.result-modal-help{grid-column:1}}

/* Read-only sent-message facts and operations progress. */
.sent-content-popover{position:fixed;z-index:1200;width:min(410px,calc(100vw - 24px));max-height:min(460px,75vh);overflow:auto;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px #21152a38}
.sent-content-popover[hidden]{display:none}.sent-content-dialog{width:min(750px,calc(100vw - 24px));max-height:90dvh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink)}
.sent-content-dialog::backdrop{background:#1e132d88}.sent-content-head{position:sticky;top:-14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 10px;background:#fff;border-bottom:1px solid var(--line)}
.sent-content-dialog .sent-content-head{top:-20px}.sent-content-head h2{margin:0;font-size:20px}.sent-content-meta{display:grid;gap:5px;margin:12px 0;color:var(--ink);font-size:13px;overflow-wrap:anywhere}.sent-content-body{margin:10px 0;padding:14px;border-radius:9px;background:#f8f5fc;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.65}.sent-content-excerpt{max-height:180px;overflow:auto}.sent-content-button{white-space:nowrap}
.team-progress-panel{border-color:#e8dcf5;background:linear-gradient(125deg,#fff 75%,#f9f3ff)}.team-progress-scroll{max-width:100%;overflow-x:auto}.team-progress-table{min-width:1120px}.team-progress-table th,.team-progress-table td{padding:13px 11px;vertical-align:middle;font-variant-numeric:tabular-nums}.team-progress-table tbody th{font-size:15px;color:#68349a;text-align:left}.team-progress-link{border:0;background:transparent;padding:3px 0;color:#6b28a6;font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:#d5b9e8;text-underline-offset:3px;cursor:pointer}.team-progress-link:hover,.team-progress-link:focus-visible{color:#40136b;text-decoration-color:currentColor}.team-progress-track{display:block;width:95px;height:5px;margin-top:6px;border-radius:99px;background:#e9e0f0;overflow:hidden}.team-progress-track>span{display:block;height:100%;border-radius:inherit;background:#8a3cc4}.team-live-balance{display:inline-block;padding:4px 8px;border-radius:7px;background:#f2eafa;color:#68349a}
.team-social-detail{margin-top:7px;font-size:11px;color:#716781}.team-social-detail summary{cursor:pointer;color:#68349a}.team-social-detail>div{display:flex;justify-content:space-between;gap:9px;padding:3px 0;white-space:nowrap}
@media(max-width:600px){.sent-content-popover{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto;max-height:75dvh}.sent-content-dialog{max-height:96dvh;margin:auto 12px;padding:15px}.sent-content-dialog .sent-content-head{top:-15px}}

/* Task-specific outcome cards; shared by Admin and Sales Production shell. */
.result-task-goal{margin:-8px 0 14px;color:#665a72;font-size:13px;line-height:1.5}
.result-choice-list{display:grid;gap:14px;margin:10px 0 16px}
.result-choice-group h4{margin:0 0 7px;color:#6b4a89;font-size:12px;font-weight:800}
.result-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.result-choice-card{min-height:45px;padding:9px 12px;text-align:left;font:inherit;font-size:13px;font-weight:650;color:#553772;background:#fff;border:1px solid #e7d9f3;border-radius:11px;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
.result-choice-card:hover,.result-choice-card:focus-visible{border-color:#9f63d6;box-shadow:0 0 0 2px #f0e3fb;outline:none}
.result-choice-card.warning{color:#9a570a;border-color:#f5d6ae;background:#fffcf7}
.result-choice-card.terminal{color:#a32d45;border-color:#f3ccd3;background:#fffafb}
.result-choice-card.selected{color:#6e21aa;border-color:#7b2fbe;background:#f4eafb;box-shadow:inset 0 0 0 1px #7b2fbe}
.result-choice-card.warning.selected{color:#8a4d08;border-color:#d4892f;background:#fff2df;box-shadow:inset 0 0 0 1px #d4892f}
.result-choice-card.terminal.selected{color:#96233a;border-color:#ce5067;background:#fff0f2;box-shadow:inset 0 0 0 1px #ce5067}
@media(max-width:520px){.result-choice-grid{grid-template-columns:1fr}.result-choice-card{min-height:48px}}
.detail-followup-heading{margin:18px 0 7px;color:#633581;font-size:14px;font-weight:800}
.detail-sequence-plan{margin:0 0 15px;padding:11px 13px;border:1px solid #e6d6f4;border-radius:10px;background:#f8f2fe;color:#5b2788;font-size:13px;font-weight:700}
.detail-copy-card{margin:10px 0;padding:14px;border:1px solid #e9def3;border-radius:12px}
.detail-copy-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.detail-copy-subject{margin:11px 0;font-weight:700}.detail-copy-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.detail-copy-card small{display:block;margin-top:10px;color:#8c8295}.detail-copy-history{margin-top:17px}.detail-copy-history summary{color:#7136a4;font-weight:800;cursor:pointer}
.list-pager{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;color:#666;font-size:13px}
.list-pager:empty{display:none}
.list-pager .button{min-width:76px}
@media(max-width:390px){.list-pager{gap:6px}.list-pager .button{min-width:64px;padding:8px}}

.manual-allocation-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;border:1px solid #e8dcfa;border-radius:18px;padding:24px;color:#31233f}
.manual-allocation-dialog::backdrop{background:rgba(35,20,50,.4)}
.manual-allocation-dialog input[type=number]{display:block;width:100%;box-sizing:border-box;margin:8px 0;padding:12px;border:1px solid #dac9ec;border-radius:10px}
.manual-allocation-dialog button{margin:6px 8px 6px 0;max-width:100%}
.manual-allocation-dialog table{width:100%;table-layout:fixed;overflow-wrap:anywhere}
.team-progress-table small.muted{display:block;white-space:nowrap}

[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --ink: #2d2d2d;
  --muted: #737373;
  --soft: #9a8dae;
  --line: #e0d5f0;
  --surface: #ffffff;
  --surface-soft: #f5f0ff;
  --page: #f5f0ff;
  --nav: #ffffff;
  --nav-soft: #ede4ff;
  --accent: #7b2fbe;
  --accent-dark: #6b28a6;
  --cyan-soft: #e7fbfc;
  --purple: #7b2fbe;
  --magenta: #ff6b9d;
  --coral: #ff7043;
  --gold: #ffc857;
  --warning: #b86615;
  --danger: #b42318;
  --blue: #00c4cc;
  --grid-rgb: 123, 47, 190;
  --page-top: #ffffff;
  --page-end: #f5f0ff;
  --button-hover: #6b28a6;
  --nav-glow: rgba(123, 47, 190, 0.08);
  --brand-glow: rgba(123, 47, 190, 0.2);
  --shadow-sm: 0 2px 8px rgba(45, 45, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(45, 45, 45, 0.12);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body[data-theme="sky"] {
  --ink: #10263c;
  --muted: #5c748f;
  --soft: #8ba4b8;
  --line: #cfe2f5;
  --surface-soft: #f5fbff;
  --page: #eef8ff;
  --nav: #123451;
  --nav-soft: #1d4c73;
  --accent: #3ab7ff;
  --accent-dark: #146da3;
  --cyan-soft: #e2f6ff;
  --purple: #6d7df7;
  --gold: #f5c84b;
  --warning: #bd6c20;
  --blue: #226fd6;
  --grid-rgb: 58, 183, 255;
  --page-top: #ffffff;
  --page-end: #e4f3ff;
  --button-hover: #68c9ff;
  --nav-glow: rgba(58, 183, 255, 0.12);
  --brand-glow: rgba(58, 183, 255, 0.26);
}

body[data-theme="emerald"] {
  --ink: #132820;
  --muted: #60776f;
  --soft: #90a59e;
  --line: #d3e6dc;
  --surface-soft: #f5fcf8;
  --page: #f0faf5;
  --nav: #143329;
  --nav-soft: #1f4a3c;
  --accent: #31c58d;
  --accent-dark: #177352;
  --cyan-soft: #e2f8ee;
  --purple: #5277dd;
  --gold: #f1c84d;
  --warning: #b96e22;
  --blue: #2d75bd;
  --grid-rgb: 49, 197, 141;
  --page-top: #ffffff;
  --page-end: #e5f5ed;
  --button-hover: #55d4a3;
  --nav-glow: rgba(49, 197, 141, 0.12);
  --brand-glow: rgba(49, 197, 141, 0.24);
}

body[data-theme="violet"] {
  --ink: #211d36;
  --muted: #6e6687;
  --soft: #9a92ae;
  --line: #ddd8f2;
  --surface-soft: #fbf9ff;
  --page: #f5f2ff;
  --nav: #251f45;
  --nav-soft: #342b62;
  --accent: #8b7cff;
  --accent-dark: #5748c7;
  --cyan-soft: #f0edff;
  --purple: #8b7cff;
  --gold: #f1c84d;
  --warning: #b86c20;
  --blue: #406fce;
  --grid-rgb: 139, 124, 255;
  --page-top: #ffffff;
  --page-end: #ece8fb;
  --button-hover: #a094ff;
  --nav-glow: rgba(139, 124, 255, 0.13);
  --brand-glow: rgba(139, 124, 255, 0.25);
}

body[data-theme="gold"] {
  --ink: #2b2517;
  --muted: #776b54;
  --soft: #a89b81;
  --line: #eadfca;
  --surface-soft: #fffdf7;
  --page: #fbf6e8;
  --nav: #342918;
  --nav-soft: #4b3a20;
  --accent: #f2c94c;
  --accent-dark: #9b6917;
  --cyan-soft: #fff5cf;
  --purple: #6f68d9;
  --gold: #f2c94c;
  --warning: #b86718;
  --blue: #336db3;
  --grid-rgb: 242, 201, 76;
  --page-top: #fffef9;
  --page-end: #f5ecd1;
  --button-hover: #f7d76f;
  --nav-glow: rgba(242, 201, 76, 0.14);
  --brand-glow: rgba(242, 201, 76, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 107, 157, 0.16), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(0, 196, 204, 0.16), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 55%, var(--page-end) 100%);
  background-size: auto;
  color: var(--ink);
  font-family:
    "Canva Sans", Circular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.mobile-appbar,
.mobile-nav-scrim {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.08), transparent 34%),
    var(--nav);
  color: var(--ink);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 24px var(--brand-glow);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  letter-spacing: 0;
}

.brand span,
.account-card label,
.account-card span {
  color: var(--muted);
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 700;
}

.nav-item.active,
.nav-item:hover {
  background: var(--nav-soft);
  color: var(--accent-dark);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

.nav-icon,
.btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

.nav-icon {
  background: rgba(123, 47, 190, 0.1);
  color: var(--accent-dark);
}

.account-card {
  width: 100%;
  min-width: 0;
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.08), rgba(255, 255, 255, 0) 48%),
    #ffffff;
  box-shadow: var(--shadow-sm);
}

.account-card select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 10px;
  color: #ffffff;
  background: var(--nav-soft);
}

.sidebar-logo-link {
  display: block;
  width: 92px;
  margin: 0 0 0 10px;
  border-radius: 8px;
  overflow: hidden;
}

.sidebar-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

.maker-box {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(123, 47, 190, 0.1), rgba(255, 107, 157, 0.08));
}

.maker-title {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.maker-logo-link {
  display: block;
  width: min(100%, 148px);
  justify-self: center;
  border-radius: 12px;
  overflow: hidden;
}

.maker-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

.maker-site {
  line-height: 1;
}

.maker-version {
  line-height: 1;
}

.maker-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.maker-box span,
.maker-contact strong {
  color: var(--muted);
  font-size: 12px;
}

.maker-box a:not(.maker-logo-link),
.support-panel a {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.maker-box a:not(.maker-logo-link):hover,
.support-panel a:hover {
  text-decoration: underline;
}

.maker-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(123, 47, 190, 0.14);
}

.maker-contact a,
.maker-contact strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.support-panel {
  gap: 12px;
  padding: 28px;
  border-color: rgba(123, 47, 190, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.04), rgba(255, 255, 255, 0) 38%),
    #ffffff;
}

.support-brand {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.support-logo-link {
  display: block;
}

.support-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

.support-brand h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.support-brand span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.support-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2px;
}

.support-contact-grid div {
  min-width: 0;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 18px;
  background: rgba(123, 47, 190, 0.07);
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.support-contact-grid span,
.support-contact-grid strong {
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.support-contact-grid a,
.support-contact-grid strong {
  overflow-wrap: anywhere;
  font-size: 17px;
}

.wechat-link {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(123, 47, 190, 0.18);
  border-radius: 9999px;
  padding: 6px 12px;
  background: #ffffff;
}

.local-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.local-stats span {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.local-stats strong {
  display: block;
  color: var(--accent-dark);
  font-size: 16px;
  line-height: 1.2;
}

.local-config-btn {
  width: 100%;
  min-height: 34px;
  border-color: rgba(123, 47, 190, 0.18);
  background: rgba(123, 47, 190, 0.08);
  color: var(--accent-dark);
}

.account-meta {
  display: grid;
  gap: 6px;
}

.account-meta span {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(123, 47, 190, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#syncStatus {
  color: var(--accent-dark);
  font-weight: 800;
}

.login-box {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(139, 235, 255, 0.16);
}

.login-box input {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(139, 235, 255, 0.2);
  border-radius: 8px;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.login-box input::placeholder {
  color: #a8d6df;
}

.login-box .btn {
  width: 100%;
  box-shadow: none;
}

.main {
  min-width: 0;
  padding: 28px;
}

/* 页面标题和业务内容共用同一自适应宽度，避免上下边缘错位。 */
.topbar,
#viewRoot {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#viewRoot {
  min-width: 0;
}

/* 顶部标题卡与每个业务页面的左右边界保持一致。 */
#viewRoot > :first-child,
#viewRoot > .cm-page,
#viewRoot > .acq-sub-page,
#viewRoot > .d-page,
#viewRoot > .o-page,
#viewRoot > .s-page {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.topbar {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.title-block {
  min-width: 240px;
}

.page-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: 0;
}

h2 {
  font-size: 16px;
  line-height: 1.3;
}

.topbar p,
.section-bar p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.top-actions,
.toolbar,
.modal-actions,
.panel-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 540px;
}

.btn {
  min-height: 42px;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-spring), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.link-btn:hover,
.icon-btn:hover,
.nav-item:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.link-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.btn.is-loading {
  border-color: rgba(123, 47, 190, 0.26);
  background: rgba(123, 47, 190, 0.09);
  color: var(--accent-dark);
  opacity: 1;
}

.btn.primary {
  background: var(--accent);
  color: #ffffff;
}

.btn.primary:hover {
  background: var(--button-hover);
}

.btn.secondary,
.btn.compact {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn.secondary:hover,
.btn.compact:hover {
  border-color: var(--line);
  background: var(--surface-soft);
}

.btn.danger,
.btn.compact.danger {
  color: var(--danger);
  border-color: #f4b4ae;
  background: #fff6f5;
}

.btn.danger:hover,
.btn.compact.danger:hover {
  background: #fee4e2;
  border-color: #ee8b83;
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
}

.btn.compact {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.18);
}

.btn.secondary .btn-icon {
  background: #e7faff;
  color: var(--muted);
}

.view {
  display: none;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 44px;
}

.active-view {
  display: block;
  animation: view-in 0.18s var(--ease-spring);
}

.support-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 5px 10px 5px 6px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.support-corner span {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(123, 47, 190, 0.12);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
}

.support-corner:hover {
  border-color: rgba(123, 47, 190, 0.28);
  background: #ffffff;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric,
.panel,
.table-wrap,
.section-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.next-step {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(123, 47, 190, 0.1), rgba(255, 107, 157, 0.06) 42%, transparent),
    var(--surface);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.next-step div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.next-step span {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 8px;
  background: rgba(123, 47, 190, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.next-step strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.next-step small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.next-step .btn {
  flex: 0 0 auto;
}

.metric {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  padding: 16px;
  display: grid;
  align-content: space-between;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}

.metric-leads::before {
  background: var(--accent);
}

.metric-hot::before {
  background: var(--magenta);
}

.metric-draft::before {
  background: var(--blue);
}

.metric-sent::before {
  background: var(--coral);
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 32px;
  color: var(--accent-dark);
  line-height: 1;
}

.metric small {
  color: var(--soft);
  font-size: 12px;
}

.dashboard-grid,
.settings-grid,
.acquisition-grid,
.automation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  gap: 12px;
  margin-top: 12px;
}

.panel {
  padding: 18px;
}

.panel-head {
  justify-content: space-between;
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 15px 16px;
}

.priority-list,
.activity-log,
.draft-board,
.strategy-list,
.acquisition-results,
.queue-list,
.auto-send-summary {
  display: grid;
  gap: 10px;
}

.draft-board,
.acquisition-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.priority-item,
.activity-item,
.draft-card,
.discovery-card,
.queue-item,
.strategy-list div {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.priority-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  align-items: center;
}

.queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.queue-item strong,
.queue-item span,
.queue-item small {
  display: block;
}

.queue-item span,
.queue-item small {
  color: var(--muted);
  font-size: 13px;
}

.queue-item small {
  margin-top: 5px;
}

.queue-item.has-warning {
  background: #fff7f4;
  border-color: rgba(255, 112, 67, 0.28);
}

.auto-send-summary div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.auto-send-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.auto-send-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.priority-item.enhanced {
  grid-template-columns: minmax(180px, 1fr) max-content max-content minmax(116px, max-content);
  column-gap: 10px;
}

.priority-item.enhanced > div:first-child,
.queue-item > div:first-child,
.draft-card header > div,
.discovery-card header > div,
.company-cell {
  min-width: 0;
}

.priority-item:hover,
.draft-card:hover,
.discovery-card:hover {
  border-color: rgba(123, 47, 190, 0.35);
  box-shadow: var(--shadow-sm);
}

.priority-item strong,
.priority-item span,
.activity-item span,
.draft-card span,
.discovery-card span,
.strategy-list span {
  display: block;
}

.priority-item span,
.activity-item,
.draft-card .meta,
.discovery-card span,
.strategy-list span,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.priority-item strong,
.priority-item span,
.queue-item strong,
.queue-item span,
.queue-item small,
.draft-card h2,
.draft-card .meta,
.discovery-card h2,
.discovery-card span,
.company-cell strong,
.company-cell span,
td {
  overflow-wrap: anywhere;
}

.acquisition-results-head {
  margin-top: 12px;
}

.acquisition-summary {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.strategy-list div {
  padding: 12px;
}

.strategy-list strong {
  display: block;
  margin-bottom: 5px;
}

.discovery-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.acquisition-risk {
  grid-column: 1 / -1;
  margin-top: 0;
}

.discovery-card.is-muted {
  opacity: 0.62;
}

.discovery-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.discovery-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.line-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discovery-meta {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.workflow-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-checks span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 9999px;
  background: rgba(123, 47, 190, 0.07);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.acquisition-funnel {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.acquisition-progress {
  grid-column: 1 / -1;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.06), rgba(255, 255, 255, 0) 52%),
    #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.progress-head {
  min-height: 68px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.progress-head span,
.progress-item span,
.progress-item small {
  color: var(--muted);
  font-size: 12px;
}

.progress-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 16px;
}

.progress-head small {
  flex: 0 0 auto;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 9999px;
  padding: 5px 9px;
  background: rgba(123, 47, 190, 0.07);
  color: var(--accent-dark);
  font-weight: 900;
}

.progress-log {
  max-height: 260px;
  overflow: auto;
  display: grid;
}

.progress-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: start;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(123, 47, 190, 0.09);
}

.progress-item:last-child {
  border-bottom: 0;
}

.progress-item.is-active {
  background: rgba(0, 194, 255, 0.07);
}

.progress-item strong,
.progress-item small {
  display: block;
}

.progress-item strong {
  color: var(--ink);
  font-size: 13px;
}

.progress-item small {
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.progress-item em {
  align-self: center;
  min-width: 48px;
  border-radius: 9999px;
  padding: 4px 8px;
  background: var(--surface-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.risk-flags span {
  border-color: rgba(255, 112, 67, 0.25);
  background: rgba(255, 112, 67, 0.08);
  color: #9d3f1d;
}

.score {
  width: clamp(38px, 4.2vw, 48px);
  min-height: 30px;
  border-radius: 9999px;
  display: inline-grid;
  place-items: center;
  background: var(--cyan-soft);
  color: #12666a;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.activity-log {
  max-height: 338px;
  overflow: auto;
  padding-right: 2px;
}

.activity-item {
  position: relative;
  padding: 10px 12px 10px 28px;
}

.activity-item strong,
.activity-item small {
  display: block;
}

.activity-item strong {
  color: var(--ink);
  font-size: 12px;
  margin-bottom: 3px;
}

.activity-item small {
  margin-top: 5px;
  color: var(--soft);
}

.activity-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.toolbar {
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bulk-action-bar {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  border-radius: 16px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.bulk-action-bar strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.search-box {
  min-width: min(440px, 100%);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0 12px;
}

.search-box span {
  color: var(--soft);
  font-weight: 900;
}

.search-box input {
  min-height: 40px;
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
}

.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  background: #ffffff;
  color: var(--ink);
}

.toolbar select {
  width: auto;
  min-width: 142px;
  min-height: 40px;
  background: #ffffff;
}

.secret-input {
  -webkit-text-security: disc;
}

.table-wrap {
  overflow: auto;
  box-shadow: var(--shadow-md);
}

table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-soft);
  font-weight: 900;
}

tbody tr {
  background: #ffffff;
}

tbody tr:hover {
  background: #fbf8ff;
}

tbody tr.is-selected {
  background: var(--surface-soft);
}

tbody tr.is-overdue .company-cell strong::after {
  content: "待跟进";
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #fff2ed;
  color: var(--coral);
  font-size: 11px;
  font-weight: 900;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.select-col {
  width: 44px;
  text-align: center;
}

.select-col input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.company-cell strong,
.company-cell span {
  display: block;
}

.company-cell strong {
  margin-bottom: 3px;
}

.company-cell span {
  color: var(--muted);
  font-size: 12px;
}

.lead-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.lead-issues span,
.email-warning {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 9999px;
  padding: 2px 7px;
  color: #9d3f1d;
  background: #fff2ed;
  font-size: 11px;
  font-weight: 900;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-width: clamp(56px, 6.2vw, 78px);
  min-height: 28px;
  border-radius: 9999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  background: #eef1f4;
  color: var(--muted);
}

.status.new {
  background: var(--surface-soft);
  color: var(--accent-dark);
}

.status.drafted {
  background: #f0edff;
  color: var(--accent-dark);
}

.status.approved {
  background: #fff0f6;
  color: #b82763;
}

.status.sent {
  background: var(--cyan-soft);
  color: #12666a;
}

.status.replied {
  background: #fff2ed;
  color: #9d3f1d;
}

.status.blocked {
  background: #fee4e2;
  color: var(--danger);
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.priority-item .row-actions,
.queue-item .row-actions {
  justify-content: flex-end;
}

.link-btn {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--accent-dark);
  background: transparent;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.link-btn:hover {
  background: var(--surface-soft);
  border-color: var(--line);
}

.link-btn.primary-action {
  border-color: rgba(123, 47, 190, 0.18);
  background: var(--surface-soft);
}

.link-btn.danger {
  color: var(--danger);
}

.link-btn.danger:hover {
  border-color: #f4b4ae;
  background: #fff1f0;
}

.row-menu {
  position: relative;
}

.row-menu summary {
  list-style: none;
}

.row-menu summary::-webkit-details-marker {
  display: none;
}

.row-menu summary::after {
  content: "v";
  margin-left: 6px;
  color: var(--soft);
  font-size: 10px;
}

.row-menu[open] summary {
  background: var(--surface-soft);
  border-color: var(--line);
}

.row-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 4;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

.menu-action {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.menu-action:hover {
  background: var(--surface-soft);
}

.menu-action.danger {
  color: var(--danger);
}

.menu-action.danger:hover {
  background: #fff1f0;
}

.draft-card {
  padding: 15px;
  display: grid;
  gap: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.draft-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.draft-card pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
}

.draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.form-grid textarea {
  resize: vertical;
}

#draftBody {
  min-height: 320px;
  line-height: 1.55;
}

.wide {
  grid-column: 1 / -1;
}

.settings-grid .panel > h2 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.check-list {
  display: grid;
  gap: 11px;
}

.theme-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.theme-picker select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(var(--grid-rgb), 0.12), transparent 38%),
    #ffffff;
}

.check-list label {
  min-height: 38px;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.check-list input {
  accent-color: var(--accent);
}

.notice {
  margin-top: 14px;
  border-radius: 16px;
  padding: 13px;
  display: grid;
  gap: 6px;
  background: #fff7f4;
  color: #7d3419;
  border: 1px solid rgba(255, 112, 67, 0.24);
}

.config-checklist,
.wizard-steps {
  display: grid;
  gap: 10px;
}

.config-modal {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.config-checklist {
  margin-bottom: 12px;
}

.config-checklist span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.config-checklist strong {
  color: var(--ink);
}

.config-checklist .is-ready strong {
  color: var(--accent-dark);
}

.config-checklist .is-missing strong {
  color: var(--warning);
}

#configDialog {
  width: min(860px, calc(100vw - 28px));
}

.wizard-steps section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.wizard-steps h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.field-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.field-actions .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-dir-structure {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
}

.recommended-dir {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  border-radius: 16px;
  background: var(--surface-soft);
}

.recommended-dir strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.recommended-dir span {
  color: var(--muted);
  font-size: 13px;
}

.advanced-dir {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.advanced-dir summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
}

.advanced-dir .form-grid {
  margin-top: 10px;
}

.data-dir-structure code {
  color: var(--ink);
  overflow-wrap: anywhere;
}

dialog {
  width: min(780px, calc(100vw - 28px));
  border: 0;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 22px 70px rgba(16, 24, 40, 0.22);
}

dialog::backdrop {
  background: rgba(45, 45, 45, 0.38);
}

.modal {
  padding: 18px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 900;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.decision-modal {
  display: grid;
  gap: 14px;
}

.decision-message {
  color: var(--ink);
  line-height: 1.55;
}

.decision-details {
  display: none;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.decision-details:not(:empty) {
  display: grid;
}

.decision-details strong {
  color: var(--ink);
}

.decision-details ul {
  margin: 0;
  padding-left: 18px;
}

.decision-details li + li {
  margin-top: 4px;
}

.decision-modal.is-danger #decisionConfirmBtn {
  color: #ffffff;
  background: var(--danger);
}

.decision-modal.is-danger #decisionConfirmBtn:hover {
  background: #8f1d14;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

/* ============================================================
   V2.2 卡片式导航 + 模块分色（市场=蓝 / 客户=绿 / 开发=橙 / 沟通=紫）
   ============================================================ */
.nav-list {
  display: grid;
  gap: 8px;
  grid-auto-rows: max-content;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
  margin-right: -4px;
}
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: rgba(123, 47, 190, 0.18); border-radius: 99px; }
.nav-list::-webkit-scrollbar-track { background: transparent; }

/* 图标改为 emoji 风格（去掉字母徽章背景） */
.nav-item .nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: transparent;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

/* 顶级项：工作台 / 数据分析 / 设置 */
.nav-item.nav-top {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.nav-item.nav-top:hover {
  background: var(--surface-soft);
  border-color: rgba(123, 47, 190, 0.28);
  transform: none;
}
.nav-item.nav-top.active {
  background: linear-gradient(135deg, rgba(123, 47, 190, 0.14), rgba(168, 85, 247, 0.06));
  border-color: transparent;
  color: var(--accent-dark);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

/* 分组卡片 + 模块色变量 */
.nav-group {
  --mc: #7b2fbe;
  --mc-soft: #f5f0ff;
  min-height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mc);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.nav-group.c-blue { --mc: #2563eb; --mc-soft: #eff6ff; }
.nav-group.c-green { --mc: #059669; --mc-soft: #ecfdf5; }
.nav-group.c-orange { --mc: #ea580c; --mc-soft: #fff7ed; }
.nav-group.c-purple { --mc: #7c3aed; --mc-soft: #f5f3ff; }

.nav-item.nav-group-toggle {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  padding: 11px 12px;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}
.nav-item.nav-group-toggle:hover {
  background: var(--mc-soft);
  color: var(--mc);
  transform: none;
}
.nav-item.nav-group-toggle.active {
  background: var(--mc-soft);
  color: var(--mc);
  box-shadow: none;
}
.nav-item.nav-group-toggle .nav-icon { color: var(--mc); }
.nav-arrow { margin-left: auto; font-size: 11px; color: var(--muted); transition: transform 0.2s ease; }
.nav-group.expanded .nav-arrow { transform: rotate(180deg); }

/* 子菜单：可折叠 */
.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 8px;
}
.nav-group.expanded .nav-submenu { max-height: 460px; padding-bottom: 8px; }

/* 子项：圆角卡片，统一高度/间距，图标+文字 */
.nav-sub-item {
  position: relative;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nav-sub-item .ns-ico { font-size: 15px; width: 20px; text-align: center; flex: 0 0 auto; line-height: 1; }
.nav-sub-item:hover {
  background: var(--mc-soft);
  border-color: var(--line);
  transform: none;
}
.nav-sub-item.active {
  background: var(--mc-soft);
  border-color: transparent;
  color: var(--mc);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--mc);
}

.empty strong,
.empty span {
  display: block;
}

.empty strong {
  color: var(--ink);
  margin-bottom: 6px;
}

.action-empty {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.email-warning {
  display: inline-flex;
  margin-top: 4px;
}

.check-inline {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-spring), transform 0.2s var(--ease-spring);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .priority-item.enhanced {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }

  .priority-item.enhanced .row-actions {
    grid-column: 1 / -1;
  }

  .draft-board,
  .acquisition-results {
    grid-template-columns: 1fr;
  }

  .settings-grid .support-brand {
    grid-template-columns: 1fr;
  }

  .settings-grid .support-logo-link {
    max-width: 220px;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding-top: 64px;
  }

  .sidebar {
    position: fixed;
    z-index: 110;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    height: 100dvh;
    padding: 18px 14px;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 18px 0 44px rgba(34, 23, 48, 0.18);
  }

  .mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .mobile-appbar {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto 0;
    height: 64px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
  }

  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--accent-dark);
    font-size: 24px;
    line-height: 1;
  }

  .mobile-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 3px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 18px var(--brand-glow);
  }

  .mobile-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mobile-brand strong,
  .mobile-brand small {
    display: block;
    max-width: calc(100vw - 128px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-brand strong { font-size: 14px; }
  .mobile-brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }

  .mobile-nav-scrim {
    position: fixed;
    z-index: 105;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(26, 20, 34, 0.42);
    backdrop-filter: blur(2px);
  }

  body.mobile-nav-lock {
    overflow: hidden;
  }

  .brand {
    padding: 0;
    border-bottom: 0;
  }

  .nav-list {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .nav-group {
    grid-column: auto;
  }

  .nav-item {
    justify-content: flex-start;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
  }

  .priority-item.enhanced {
    grid-template-columns: 1fr;
  }

  .priority-item.enhanced .score,
  .priority-item.enhanced .status,
  .priority-item.enhanced .row-actions {
    justify-self: start;
  }

  .nav-item.active {
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  .nav-icon { display: inline-grid; }
  .sidebar-logo-link { display: none; }

  .main {
    padding: 16px;
  }

  .topbar,
  .dashboard-grid,
  .settings-grid,
  .acquisition-grid,
  .automation-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .support-brand,
  .support-contact-grid {
    grid-template-columns: 1fr;
  }

  .support-logo-link {
    max-width: 180px;
  }

  .next-step {
    display: grid;
    align-items: stretch;
  }

  .next-step .btn {
    width: 100%;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
    justify-content: flex-start;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .top-actions .btn {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .active-view {
    animation: none;
  }

  .btn:hover,
  .link-btn:hover,
  .icon-btn:hover,
  .nav-item:hover {
    transform: none;
  }
}

@media (max-width: 680px) {
  body { overflow-x: hidden; }

  h1 {
    font-size: 21px;
  }

  .metric-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  .main { padding: 10px; }

  .topbar {
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .title-block { min-width: 0; }
  .page-kicker { margin-bottom: 5px; font-size: 10px; }
  .topbar p { font-size: 13px; }

  .panel,
  .card,
  .cm-card,
  .d-card,
  .s-card {
    max-width: 100%;
    padding: 14px;
    border-radius: 14px;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .btn,
  .cm-btn,
  .link-btn {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .table-wrap {
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .table-wrap::after {
    content: "左右滑动查看完整表格";
    position: sticky;
    left: 10px;
    display: block;
    width: max-content;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 11px;
  }

  table { min-width: 760px; }
  th, td { padding: 10px 11px; }

  .modal-host {
    align-items: end;
    padding: 8px;
  }

  .modal-host .modal-card,
  .modal-host .modal,
  .modal-host .modal-card .m-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 20px 20px 14px 14px;
  }

  .drawer {
    top: auto;
    bottom: 0;
    width: 100vw;
    height: min(88dvh, 760px);
    padding: 16px;
    border-radius: 22px 22px 0 0;
  }

  .modal-actions,
  .section-actions,
  .row-actions {
    flex-wrap: wrap;
  }

  .modal-actions .btn,
  .section-actions .btn {
    flex: 1 1 120px;
  }

  img,
  video,
  iframe { max-width: 100%; }

  .toolbar select,
  .search-box {
    width: 100%;
  }

  .top-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions .btn:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .section-bar,
  .toolbar,
  .bulk-action-bar {
    display: grid;
  }

  .bulk-action-bar .row-actions,
  .bulk-action-bar .btn {
    width: 100%;
  }

  .draft-card header,
  .discovery-card header,
  .queue-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  .queue-item .score,
  .queue-item .row-actions,
  .draft-card header .status,
  .discovery-card header .score {
    justify-self: start;
  }

  .progress-head,
  .progress-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  .progress-head small,
  .progress-item em {
    justify-self: start;
  }
}

/* ========== AUTH SCREEN ========== */

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(var(--grid-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 52%, var(--page-end) 100%);
  background-size: 28px 28px, 28px 28px, auto;
  padding: 20px;
}

.auth-card {
  width: min(400px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-md);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.auth-brand strong {
  font-size: 18px;
}

.auth-brand span {
  color: var(--muted);
  font-size: 13px;
}

.auth-card h2 {
  margin-bottom: 18px;
  font-size: 20px;
}

.auth-card form {
  display: grid;
  gap: 14px;
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
}

.auth-card input:focus {
  border-color: var(--accent);
}

.auth-card .btn.primary {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

.auth-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
  min-height: 1.2em;
}

.auth-toggle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.auth-toggle a {
  color: var(--accent-dark);
  font-weight: 900;
  cursor: pointer;
}

.user-box {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 194, 255, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.1), rgba(123, 47, 190, 0.08));
}

.user-box span {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-box .btn {
  width: 100%;
  min-height: 34px;
  box-shadow: none;
}

/* ===================== CUSTOM (云拓) EXTENSIONS ===================== */
/* Auth screen (not present in base reference CSS) */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 107, 157, 0.16), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(0, 196, 204, 0.16), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 55%, var(--page-end) 100%);
}
.auth-card {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.auth-brand {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  margin-bottom: 18px;
}
.auth-brand .brand-mark {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center;
  padding: 5px; background: #fff;
  box-shadow: 0 0 24px var(--brand-glow);
}
.auth-brand strong { font-size: 18px; }
.auth-brand span { color: var(--muted); font-size: 12px; }
#authForm { display: grid; gap: 12px; }
#authForm h2 { font-size: 18px; margin-bottom: 2px; }
#authForm label { color: var(--muted); font-size: 13px; font-weight: 800; }
#authForm input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; background: #fff; color: var(--ink);
}
.auth-error { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; }
.auth-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 12px; }

/* Sidebar footer */
.sidebar-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; line-height: 1.5;
}

/* Overlay / Drawer / Modal hosts */
.overlay {
  position: fixed; inset: 0; background: rgba(45, 45, 45, 0.38);
  z-index: 40;
}
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 94vw);
  background: var(--surface); z-index: 50; box-shadow: var(--shadow-md);
  overflow: auto; padding: 22px;
  animation: drawer-in 0.2s var(--ease-spring);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.modal-host {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(45, 45, 45, 0.38);
}
.modal-host .modal-card {
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: flex;
  justify-content: center;
}
.sales-customer-manager { width: 100%; box-sizing: border-box; padding: 26px; background: #fff; border-radius: 22px; }
.sales-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:2px 2px 18px;border-bottom:1px solid #eee6f7;margin-bottom:16px}
.sales-manager-head h2{font-size:26px;margin:8px 0 4px!important}.sales-manager-head .modal-x{position:static;flex:0 0 auto;width:40px;height:40px;border:1px solid #e5d9f2;border-radius:50%;background:#fff;color:#5f526b;font-size:24px;cursor:pointer;box-shadow:0 5px 16px rgba(76,29,149,.08)}
.sales-customer-manager h2 { margin: 0 0 6px; color: #20192c; }
.sales-customer-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 10px; }
.sales-customer-list { max-height: 430px; overflow:auto; border:1px solid #e8ddf5; border-radius:14px; background:#fcfbff; }
.sales-customer-row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:12px 14px; border-bottom:1px solid #eee8f6; align-items:center; }
.sales-customer-row:last-child { border-bottom:0; }
.sales-customer-row strong,.sales-customer-row small { display:block; overflow-wrap:anywhere; }
.sales-customer-row small { color:#81768c; margin-top:3px; }
.sales-customer-actions { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; margin-top:16px; align-items:center; }
.sales-customer-actions select { width:100%; min-height:42px; border:1px solid #d8ccf0; border-radius:11px; padding:0 12px; background:#fff; }
@media(max-width:700px){.sales-customer-actions{grid-template-columns:1fr}.sales-customer-manager{padding:20px 16px}}
.modal-host .modal-card .m-card {
  width: min(920px, 100%);
}
.modal-host .modal {
  width: min(720px, 100%); border: 0; border-radius: 20px; padding: 20px;
  background: var(--surface); box-shadow: 0 22px 70px rgba(16, 24, 40, 0.22);
  max-height: calc(100vh - 40px); overflow: auto;
}

/* Shared theme controls for every dialog, including dialogs rendered outside a page view. */
.cm-btn {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #d8ccf0;
  border-radius: 10px;
  background: #ffffff;
  color: #5a3a8a;
  font: 700 13px/1.2 inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cm-btn:hover {
  border-color: #a855f7;
  box-shadow: 0 5px 14px rgba(123, 47, 190, 0.12);
  transform: translateY(-1px);
}

.cm-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7b2fbe, #a855f7);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(123, 47, 190, 0.2);
}

.cm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.theme-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e8e0f2;
  border-radius: 50%;
  background: #ffffff;
  color: #5a3a8a;
  font: 400 24px/34px inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 24, 40, 0.1);
}

.theme-modal-close:hover {
  color: #7b2fbe;
  border-color: #cdb8f0;
  background: #faf8ff;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9999px; background: #fff; color: var(--muted); font-weight: 900; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 80; padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warning); }

/* Tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
  min-height: 38px; border: 1px solid var(--line); border-radius: 9999px;
  padding: 8px 14px; background: var(--surface); color: var(--muted);
  font-weight: 800; font-size: 13px; cursor: pointer;
}
.tab.active { background: var(--accent); color: #fff; border-color: transparent; }

/* Misc helpers */
.helper { color: var(--muted); font-size: 13px; line-height: 1.5; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.kpi-sub { color: var(--soft); font-size: 12px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; border-radius: 9999px; padding: 2px 8px; font-size: 11px; font-weight: 900; }
.tag.green { background: #e7f8ee; color: #1c7a45; }
.tag.blue { background: var(--cyan-soft); color: #12666a; }
.tag.amber { background: #fff2ed; color: #9d3f1d; }
.tag.gray { background: #eef1f4; color: var(--muted); }
.badge-line { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer h3 { font-size: 15px; margin: 16px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.reasons li { margin: 4px 0; color: var(--ink); }
.reasons .bad { color: #9d3f1d; }
.reasons .good { color: #1c7a45; }
.note-box { padding: 12px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 13px; }
.copy-btn { min-height: 30px; border: 1px solid var(--line); border-radius: 9999px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: #fff; cursor: pointer; color: var(--accent-dark); }
.copy-btn:hover { background: var(--surface-soft); }

.auth-hint { margin: 6px 0 0; text-align: center; color: var(--accent-dark); font-size: 12px; font-weight: 800; }

/* ========== Dashboard Stat Grid ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(56, 239, 125, 0.3); }
.stat-card.green:hover { box-shadow: 0 6px 20px rgba(56, 239, 125, 0.4); }
.stat-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3); }
.stat-card.blue:hover { box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4); }
.stat-card.purple { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); box-shadow: 0 4px 15px rgba(161, 140, 209, 0.3); }
.stat-card.purple:hover { box-shadow: 0 6px 20px rgba(161, 140, 209, 0.4); }
.stat-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3); }
.stat-card.orange:hover { box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4); }

.stat-icon { font-size: 32px; line-height: 1; }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 28px; font-weight: 800; line-height: 1.2; }
.stat-label { font-size: 13px; opacity: 0.9; font-weight: 500; }

.funnel-card, .quick-actions, .recent-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--line);
}

.funnel-card h3, .quick-actions h3, .recent-card h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.funnel-item {
  margin-bottom: 16px;
}

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

.funnel-item label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.funnel-bar {
  height: 36px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  width: 0;
  transition: width 0.6s ease;
  min-width: 40px;
}

.funnel-bar.blue { background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); }
.funnel-bar.purple { background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%); }

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.action-icon { font-size: 24px; }
.action-btn label { font-size: 13px; font-weight: 600; }

.recent-list { display: flex; flex-direction: column; gap: 12px; }

.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-soft);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.recent-item:hover { background: #eef1f4; }

.recent-info { display: flex; flex-direction: column; gap: 2px; }
.recent-info strong { font-size: 14px; color: var(--ink); }
.recent-info span { font-size: 12px; color: var(--muted); }
.recent-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .action-grid { grid-template-columns: 1fr; }
}

/* ========== Section Actions ========== */
.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.section-actions { display: flex; gap: 8px; }

/* ========== RPA Views ========== */
.rpa-status-box, .rpa-result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--surface-soft);
  border-radius: 14px;
  border: 2px dashed var(--line);
  text-align: center;
  gap: 12px;
  min-height: 200px;
}
.rpa-status-box p, .rpa-result-box p { color: var(--muted); margin: 0; font-size: 14px; }
.rpa-status-icon { font-size: 48px; line-height: 1; }

.rpa-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
}
.rpa-loading p { color: var(--muted); margin: 0; }

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Settings Grid ========== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.config-card { display: flex; flex-direction: column; }
.config-card .form-grid { flex: 1; }
.config-card .btn { align-self: flex-start; margin-top: 16px; }

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ========== Tag amber ========== */
.tag.amber { background: #fff4e6; color: #b35900; }
.status.success { background: #e6f7ee; color: #1c7a45; }
.status.danger { background: #fde8e8; color: #c01f3c; }

/* ========== Enhanced Panel & Table ========== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.panel-head .muted { margin: 0; font-size: 13px; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap thead { background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); }
.table-wrap th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--line);
}
.table-wrap td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.table-wrap tbody tr { transition: background 0.15s ease; }
.table-wrap tbody tr:hover { background: #f8f9fb; }
.table-wrap tbody tr:last-child td { border-bottom: none; }

/* Empty state */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.empty::before {
  content: "📭";
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* Config card enhanced */
.config-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.config-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Form grid enhanced */
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.1);
}

/* Flat business-flow navigation */
.nav-list-flat {
  display: grid;
  gap: 7px;
}
.nav-list-flat .nav-item.nav-top {
  width: 100%;
  justify-content: flex-start;
}

/* Friendly fallback when index.html is opened directly with file:// */
.local-open-warning {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f5f0ff, #f7f9fc);
  color: #1a1a2e;
}
.local-open-warning > div {
  max-width: 560px;
  padding: 36px;
  text-align: center;
  background: #fff;
  border: 1px solid #e0d4f5;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(45, 24, 77, 0.12);
}
.local-open-warning .warning-icon {
  display: block;
  font-size: 42px;
  margin-bottom: 12px;
}
.local-open-warning h2 { margin: 0 0 10px; }
.local-open-warning p { color: #666; line-height: 1.7; }
.local-open-warning a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  color: #fff;
  background: #7b2fbe;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
}
.global-job-panel{position:fixed;right:20px;bottom:20px;z-index:10020;width:min(380px,calc(100vw - 32px));max-height:55vh;overflow:auto;background:#fff;border:1px solid #dfd2f6;border-radius:16px;box-shadow:0 18px 55px rgba(51,24,89,.24);padding:14px}
.global-job-title{font-weight:800;color:#53238a;margin-bottom:8px}
.global-job-row{padding:10px 0;border-top:1px solid #eee6f7}
.global-job-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}.global-job-row span,.global-job-row small{color:#777;font-size:12px}.global-job-row small{display:block;color:#c01f3c;margin-top:6px;overflow-wrap:anywhere}
.global-job-track{height:6px;background:#eee8f7;border-radius:99px;overflow:hidden;margin:7px 0}.global-job-track i{display:block;height:100%;background:linear-gradient(90deg,#7b2fbe,#d94da5);transition:width .25s}
.global-job-actions{display:flex;justify-content:flex-end;gap:7px}.global-job-actions button{border:1px solid #d8c9ed;border-radius:99px;background:#fff;color:#65359b;padding:5px 11px;cursor:pointer}

/* Final mobile safeguards live at the end so later component styles cannot
   accidentally override responsive behavior. Desktop styles are untouched. */
@media (max-width: 680px) {
  #viewRoot,
  #viewRoot > *,
  .panel,
  .card,
  .cm-card,
  .config-card {
    min-width: 0;
    max-width: 100%;
  }

  .panel,
  .config-card { padding: 14px; }

  .table-wrap {
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar,
  .bulk-action-bar,
  .panel-head,
  .section-bar {
    align-items: stretch;
  }

  .toolbar > *,
  .bulk-action-bar > *,
  .section-bar > * {
    min-width: 0;
    max-width: 100%;
  }

  .global-job-panel {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    max-height: 42dvh;
  }
}
.cm-next-action{border:0;background:transparent;color:#5b21b6;padding:4px 0;text-align:left;cursor:pointer;max-width:240px;line-height:1.35}.cm-next-action strong{display:block;font-size:12px}.cm-next-action small{display:block;color:#888;font-size:11px;margin-top:3px}.cm-next-action:hover strong{text-decoration:underline}.mobile-ocr-button{background:linear-gradient(135deg,#7c2dd2,#b645e6)!important;color:#fff!important;border-color:transparent!important}
.tt-task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:14px 0;border-bottom:1px dashed #eee}.tt-task-main{min-width:0}.tt-task-name{display:block;font-size:13px;color:#1a1a2e;overflow-wrap:anywhere}.tt-task-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tt-task-detail{margin-top:8px}.tt-task-detail summary{cursor:pointer;color:#65359b;font-size:12px;font-weight:800}.tt-task-detail-body{white-space:pre-wrap;background:#f8f9fb;border:1px solid #eef0f4;border-radius:10px;padding:10px 12px;margin-top:7px;font-size:12px;line-height:1.6;color:#333}

/* Responsive table enhancer: desktop remains a normal table. */
.mobile-row-toggle,
.mobile-panel-toggle { display: none; }
.mobile-customer-list { display: none; }

@media (max-width: 680px), (max-width: 900px) and (max-height: 520px) {
  html,
  body,
  .app-shell,
  .main,
  #viewRoot {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  #viewRoot,
  #viewRoot * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .tt-task-row{grid-template-columns:auto minmax(0,1fr);padding:12px 0}.tt-task-actions{grid-column:1/-1;justify-content:flex-start}.tt-task-actions .cm-btn,.tt-task-actions a.cm-btn{flex:1 1 calc(50% - 6px);min-width:0}.tt-task-detail{margin-top:7px}.tt-task-detail-body{max-height:260px;overflow:auto}.tt-task-name{font-size:15px;line-height:1.35;word-break:normal;overflow-wrap:anywhere}

  pre,
  code,
  .error,
  .auth-error,
  .global-job-row small {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .mobile-panel-toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 10px 0 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8c9ed;
    border-radius: 12px;
    background: #fff;
    color: #65359b;
    font-weight: 800;
  }

  .lib-filter-panel,
  .lib-bulk-panel {
    display: none !important;
    width: 100%;
    align-items: stretch !important;
    flex-direction: column;
  }

  .lib-filter-panel.mobile-panel-open,
  .lib-bulk-panel.mobile-panel-open { display: flex !important; }

  .lib-filter-panel > *,
  .lib-bulk-panel > * {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .lib-stage-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-stage-cards > * { min-width: 0 !important; }

  .desktop-customer-table { display: none !important; }
  .mobile-customer-list {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .mobile-customer-card {
    width: 100%;
    padding: 16px;
    border: 1px solid #e8def2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(76, 29, 149, .08);
  }

  .mobile-customer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: start;
  }

  .mobile-company-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5b21b6;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.3;
    text-align: left;
  }

  .mobile-customer-sub {
    margin-top: 5px;
    color: #81768a;
    font-size: 12px;
    line-height: 1.45;
  }

  .mobile-customer-check {
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
  }

  .mobile-customer-contact {
    display: flex;
    min-width: 0;
    margin-top: 13px;
    align-items: center;
    gap: 8px;
    color: #6f6678;
    font-size: 12px;
  }

  .mobile-customer-contact strong {
    min-width: 0;
    overflow: hidden;
    color: #2e2833;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-customer-contact .cm-tag { margin-left: auto; flex: 0 0 auto; }

  .mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .mobile-action {
    display: flex;
    min-width: 0;
    min-height: 78px;
    padding: 9px 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6dcf1;
    border-radius: 14px;
    background: #faf7ff;
    color: #5b21b6;
    text-align: center;
    text-decoration: none;
  }

  .mobile-action.call {
    border-color: #b9ead5;
    background: #f0fbf6;
    color: #087a50;
  }

  .mobile-action > span { font-size: 20px; line-height: 1; }
  .mobile-action b { margin-top: 6px; font-size: 12px; }
  .mobile-action small {
    display: block;
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #82788b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-action.disabled { opacity: .55; color: #777; }

  .mobile-next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    width: 100%;
    min-height: 58px;
    margin-top: 12px;
    padding: 10px 12px;
    align-items: center;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4edff, #fbf8ff);
    color: #53238a;
    text-align: left;
  }

  .mobile-next-action small,
  .mobile-next-action strong { grid-column: 1; display: block; }
  .mobile-next-action small { color: #8b7b9d; font-size: 10px; }
  .mobile-next-action strong { margin-top: 2px; font-size: 13px; line-height: 1.4; }
  .mobile-next-action > span { grid-column: 2; grid-row: 1 / 3; font-size: 25px; }

  .mobile-customer-more {
    margin-top: 10px;
    border-top: 1px solid #eee7f4;
  }

  .mobile-customer-more summary {
    min-height: 44px;
    padding: 13px 2px 0;
    color: #74667f;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    list-style: none;
  }

  .mobile-customer-more summary::-webkit-details-marker { display: none; }
  .mobile-customer-more summary::after { content: '⌄'; margin-left: 6px; }
  .mobile-customer-more[open] summary::after { content: '⌃'; }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 8px;
  }

  .mobile-more-grid > div {
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
    background: #fafafa;
  }

  .mobile-more-grid span,
  .mobile-more-grid strong { display: block; }
  .mobile-more-grid span { color: #918897; font-size: 10px; }
  .mobile-more-grid strong { margin-top: 4px; color: #332c38; font-size: 12px; line-height: 1.4; }

  .mobile-empty-card {
    padding: 30px 16px;
    border-radius: 16px;
    background: #fff;
    color: #888;
    text-align: center;
  }

  .table-wrap,
  .cm-card[style*="overflow-x:auto"],
  .cm-card[style*="overflow-x: auto"] {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .table-wrap::after { display: none; content: none; }

  table.mobile-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    background: transparent;
  }

  .mobile-card-table thead { display: none; }
  .mobile-card-table tbody { display: grid; gap: 12px; width: 100%; }
  .mobile-card-table tbody tr {
    position: relative;
    display: block !important;
    width: 100%;
    padding: 13px;
    border: 1px solid #e9e1f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.06);
  }

  .mobile-card-table tbody td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .mobile-card-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #8a8094;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
  }

  .mobile-card-table tbody td[data-label=""]::before,
  .mobile-card-table tbody td.mobile-row-toggle::before { display: none; }

  .mobile-card-table tbody td:not(.mobile-summary-field):not(.mobile-check-field):not(.mobile-row-toggle) {
    display: none;
  }

  .mobile-card-table tbody tr.mobile-expanded td { display: block; }
  .mobile-card-table tbody tr.mobile-expanded td.mobile-check-field {
    display: flex;
  }

  .mobile-card-table tbody td.mobile-check-field {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    width: 32px !important;
    padding: 0 !important;
    justify-content: flex-end;
  }

  .mobile-card-table tbody td.mobile-row-toggle {
    display: block;
    padding-top: 9px !important;
    border-top: 1px dashed #e7def1 !important;
  }

  .mobile-row-toggle-btn {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d8c9ed;
    border-radius: 11px;
    background: #faf7ff;
    color: #65359b;
    font-weight: 800;
  }

  .mobile-card-table .cm-btn,
  .mobile-card-table .btn,
  .mobile-card-table a[href^="tel:"],
  .mobile-card-table a[href^="mailto:"] {
    min-height: 44px;
  }

  .mobile-card-table td:last-child .cm-btn,
  .mobile-card-table td:last-child .btn {
    width: 100%;
    margin: 4px 0;
  }

  .customer-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .customer-profile-grid > div {
    padding: 11px;
    border: 1px solid #eee7f5;
    border-radius: 11px;
    background: #fcfaff;
  }

  .cust-detail {
    width: 100% !important;
    max-width: 100% !important;
    height: min(94dvh, 900px);
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    overscroll-behavior: contain;
  }

  .cust-detail .theme-modal-close {
    position: sticky !important;
    z-index: 8;
    top: 8px !important;
    float: right;
    margin: 8px 8px -48px 0;
  }

  .cust-pane-wrap { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)) !important; }
  .cust-tabs {
    position: sticky;
    z-index: 5;
    top: 0;
    padding: 0 8px !important;
    background: #fff;
  }

  .cust-tab {
    flex: 1 1 calc(33.333% - 6px);
    min-height: 44px;
    padding: 9px 5px !important;
    font-size: 12px !important;
  }

  .modal-host {
    padding: max(6px, env(safe-area-inset-top)) 6px 0 !important;
    overflow-x: hidden;
  }

  .modal-host > *,
  .modal-host .modal-card,
  .modal-host .m-card,
  .modal-host .ct-modal,
  .modal-host .ocr-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: calc(100dvh - max(6px, env(safe-area-inset-top))) !important;
    overflow-x: hidden !important;
  }

  .modal-actions,
  .btns {
    position: sticky;
    z-index: 6;
    bottom: 0;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
  }

  .global-job-panel {
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 38dvh;
  }
}
.ai-phone-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid #b7e5ce;
  border-radius: 10px;
  background: #edf9f3;
  color: #08784b;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  word-break: break-all;
}

.team-notice-banner {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #d8c7f3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7f0ff 0%, #fff8ed 100%);
  box-shadow: 0 5px 20px rgba(92, 45, 145, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.team-notice-banner[hidden] { display: none !important; }
.team-notice-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.team-notice-icon { font-size: 24px; line-height: 1; }
.team-notice-copy strong { display: block; color: #522181; font-size: 15px; }
.team-notice-copy p { margin: 5px 0 0; color: #51475c; font-size: 13px; line-height: 1.65; }

@media (max-width: 720px) {
  .team-notice-banner {
    margin: 0 12px 14px;
    padding: 15px;
    align-items: stretch;
    flex-direction: column;
  }
  .team-notice-banner .btn { width: 100%; min-height: 46px; }
}

.ai-phone-link.compact {
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.ai-research-templates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ai-research-template {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ai-research-template:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px var(--nav-glow); }
.ai-research-template strong, .ai-research-template span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-research-template strong { font-size: 13px; }
.ai-research-template span { margin-top: 4px; color: var(--muted); font-size: 12px; }

.owner-filter { position: relative; display: flex; align-items: center; gap: 7px; }
.owner-filter-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.owner-filter-trigger {
  min-width: 148px; min-height: 38px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow-sm);
}
.owner-filter-trigger b { color: var(--accent); font-size: 16px; line-height: 1; }
.owner-filter-menu {
  position: absolute; z-index: 40; top: calc(100% + 7px); right: 0;
  min-width: 178px; padding: 6px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-md);
}
.owner-filter-option {
  width: 100%; padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: left;
}
.owner-filter-option:hover { background: var(--surface-soft); color: var(--accent-dark); }
.owner-filter-option.active { background: var(--accent); color: #fff; font-weight: 700; }

.lib-themed-filter { position:relative; flex:1 1 190px; min-width:0; max-width:280px; }
.lib-themed-trigger { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:linear-gradient(135deg,var(--surface),var(--surface-soft)); box-shadow:var(--shadow-sm); cursor:pointer; }
.lib-themed-trigger span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-themed-trigger b { color:var(--accent); font-size:16px; }
.lib-themed-menu { position:absolute; z-index:80; top:calc(100% + 7px); left:0; width:min(360px,calc(100vw - 42px)); max-height:320px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-md); }
.lib-themed-option { display:block; width:100%; padding:9px 11px; border:0; border-radius:9px; background:transparent; color:var(--ink); text-align:left; line-height:1.35; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.lib-themed-option:hover { background:var(--surface-soft); color:var(--accent-dark); }
.lib-themed-option.active { background:var(--accent); color:#fff; font-weight:700; }
.lib-stage-tabs { display:flex; gap:8px; margin:14px 0; padding:7px; overflow-x:auto; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.72); box-shadow:var(--shadow-sm); }
.lib-stage-tab { flex:1 0 105px; min-height:58px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.lib-stage-tab strong { color:var(--accent); font-size:20px; line-height:1; }
.lib-stage-tab span { font-size:12px; font-weight:700; white-space:nowrap; }
.lib-stage-tab:hover { background:var(--surface-soft); color:var(--accent-dark); }
.lib-stage-tab.active { color:#fff; border-color:var(--accent); background:linear-gradient(135deg,var(--accent),#a855f7); box-shadow:0 6px 16px var(--nav-glow); }
.lib-stage-tab.active strong { color:#fff; }

@media (max-width: 720px) {
  .ai-research-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-research-template { min-height: 52px; }
  .owner-filter { width: 100%; justify-content: space-between; }
  .owner-filter-trigger { flex: 1; }
  .owner-filter-menu { left: 0; right: 0; }
  .lib-themed-filter { width:100%; max-width:none; flex-basis:100%; }
  .lib-themed-menu { width:100%; box-sizing:border-box; }
  .ai-phone-link:not(.compact) {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }
}


/* Customer outcome modal follows the main lavender theme. */
.result-modal-card { position:relative;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;box-sizing:border-box;margin:20px auto;padding:24px;color:var(--ink);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--surface-soft));box-shadow:var(--shadow-md); }
.result-modal-kicker { margin-bottom:5px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; }
.result-modal-card h3 { margin:0 0 18px;font-size:21px; }
.result-modal-select,.result-modal-input,.result-modal-note,.result-referral-fields input { width:100%;box-sizing:border-box;padding:11px 12px;color:var(--ink);border:1px solid var(--line);border-radius:11px;background:var(--surface);outline:none;font:inherit; }
.result-modal-select { min-height:46px;margin:6px 0 14px;color:var(--ink);accent-color:var(--accent);cursor:pointer; } .result-modal-input { min-height:46px;margin:6px 0 14px; } .result-modal-note { min-height:106px;margin:6px 0 14px;resize:vertical; }
.result-modal-select:focus,.result-modal-input:focus,.result-modal-note:focus,.result-referral-fields input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--nav-glow); }
.result-modal-error { margin:0 0 14px;padding:10px 12px;color:#b4233b;border:1px solid #f3c3cc;border-radius:10px;background:#fff1f3;font-size:13px; }
.result-modal-error[hidden] { display:none; }
.result-modal-actions .cm-btn:disabled { opacity:.62;cursor:wait; }
.result-referral-fields { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.58); }
.result-referral-fields[hidden] { display:none; } .result-modal-actions { display:flex;justify-content:flex-end;gap:9px; }
@media (max-width:520px) { .result-modal-card{padding:20px 16px;border-radius:16px}.result-referral-fields{grid-template-columns:1fr}.result-modal-actions .cm-btn{min-height:44px;flex:1} }
/* 2026-09-06: bounded detail and email dialogs */
.modal-host, .modal-host .modal-card { overflow-x: hidden; }
.modal-host .modal-card { max-width: calc(100vw - 32px); }
.cust-detail { width:min(980px,calc(100vw - 40px))!important; max-width:min(980px,calc(100vw - 40px))!important; max-height:calc(100dvh - 32px)!important; margin:0!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; }
.cust-detail * { min-width:0; max-width:100%; overflow-wrap:anywhere; box-sizing:border-box; }
.email-content-modal { width:min(820px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); overflow:hidden; display:flex; flex-direction:column; background:#fff; border:1px solid #eadff5; border-radius:20px; box-shadow:0 22px 70px rgba(56,23,87,.22); }
.email-content-modal header { display:flex; justify-content:space-between; gap:16px; padding:22px 24px 15px; background:linear-gradient(135deg,#fbf7ff,#f4faff); border-bottom:1px solid #eadff5; }
.email-content-modal h2 { margin:9px 0 5px; font-size:20px; color:#24162f; }
.email-content-modal p { margin:0; color:#786d81; font-size:13px; }
.email-content-body { padding:22px 24px; white-space:pre-wrap; line-height:1.75; overflow:auto; overflow-wrap:anywhere; }
.email-content-modal footer { display:flex; justify-content:flex-end; padding:12px 24px; border-top:1px solid #eadff5; background:#fff; }
@media(max-width:700px){.cust-detail{width:100%!important;max-width:100%!important;max-height:100dvh!important;border-radius:16px 16px 0 0!important}.email-content-modal{width:100%;max-height:96dvh;border-radius:18px 18px 0 0}.email-content-modal header,.email-content-body{padding-left:16px;padding-right:16px}}

/* Customer detail close stays visible at the top-right while its content scrolls. */
.cust-detail .theme-modal-close { position:sticky!important; z-index:30!important; top:10px!important; right:10px!important; float:right; margin:10px 10px -48px 0!important; box-shadow:0 6px 20px rgba(68,28,108,.18)!important; }

/* Dialogs must stay above the mobile navigation and sidebar. */
.overlay { z-index:20000; }
.drawer { z-index:20005; }
.modal-host { z-index:20010; }
.toast { z-index:20030; }

/* One bounded frame for all dialogs; only the body scrolls. */
html.dialog-open { overflow:hidden; }
#overlay { background:transparent!important; }
#modal { display:flex!important; position:fixed!important; inset:0!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; margin:0!important; padding:12px!important; box-sizing:border-box!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:var(--surface-soft,#f7f2fc)!important; }
#modal[hidden] { display:none!important; }
#modal > .dialog-frame { display:flex!important;flex-direction:column!important;width:100%!important;max-width:980px!important;max-height:100%!important;min-width:0!important;margin:0!important;overflow:hidden!important;border:1px solid var(--line);border-radius:20px;background:var(--surface,#fff);box-sizing:border-box; }
#modal .dialog-toolbar { display:flex;justify-content:flex-end;flex:0 0 auto;padding:8px 12px;background:var(--surface-soft,#f7f2fc);border-bottom:1px solid var(--line); }
#modal .dialog-close { width:40px;height:40px;flex:0 0 40px;border:1px solid #d8c6f0;border-radius:50%;background:white;color:#7132aa;font-size:26px;cursor:pointer; }
#modal .dialog-body { display:block;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;max-width:100%; }
#modal .dialog-body > *,#modal .dialog-body .cust-detail,#modal .dialog-body .ct-modal,#modal .dialog-body .result-modal-card { box-sizing:border-box!important;width:100%!important;max-width:100%!important;max-height:none!important;min-width:0!important;margin:0!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important; }
#modal .dialog-body .theme-modal-close,#modal .dialog-body .modal-x,#modal .dialog-body .ct-close { display:none!important; }
#modal .dialog-body input,#modal .dialog-body textarea { box-sizing:border-box;max-width:100%; }
#modal .dialog-body p,#modal .dialog-body .cm-card { overflow-wrap:anywhere;min-width:0; }
.result-choice-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 18px; }
.result-choice { display:flex;align-items:center;gap:8px;padding:11px;border:1px solid #dfd2ee;border-radius:12px;background:#faf7ff;cursor:pointer;font-size:14px; }
.result-choice:has(input:checked) { background:#f0e5ff;border-color:#8b43d7;color:#7024b3; }
.result-choice input { accent-color:#8134cc;flex:0 0 auto; }
@media(max-width:520px){#modal{padding:6px!important}.result-choice-grid{grid-template-columns:1fr 1fr}.result-choice{padding:9px;font-size:13px}}

/* Served Production CSS with a zero-specificity active-page boundary. */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) [hidden]{ display: none !important; }

:where(body.production-sales-active){
  color-scheme: light;
  --ink: #2d2d2d;
  --muted: #737373;
  --soft: #9a8dae;
  --line: #e0d5f0;
  --surface: #ffffff;
  --surface-soft: #f5f0ff;
  --page: #f5f0ff;
  --nav: #ffffff;
  --nav-soft: #ede4ff;
  --accent: #7b2fbe;
  --accent-dark: #6b28a6;
  --cyan-soft: #e7fbfc;
  --purple: #7b2fbe;
  --magenta: #ff6b9d;
  --coral: #ff7043;
  --gold: #ffc857;
  --warning: #b86615;
  --danger: #b42318;
  --blue: #00c4cc;
  --grid-rgb: 123, 47, 190;
  --page-top: #ffffff;
  --page-end: #f5f0ff;
  --button-hover: #6b28a6;
  --nav-glow: rgba(123, 47, 190, 0.08);
  --brand-glow: rgba(123, 47, 190, 0.2);
  --shadow-sm: 0 2px 8px rgba(45, 45, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(45, 45, 45, 0.12);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) body[data-theme="sky"]{
  --ink: #10263c;
  --muted: #5c748f;
  --soft: #8ba4b8;
  --line: #cfe2f5;
  --surface-soft: #f5fbff;
  --page: #eef8ff;
  --nav: #123451;
  --nav-soft: #1d4c73;
  --accent: #3ab7ff;
  --accent-dark: #146da3;
  --cyan-soft: #e2f6ff;
  --purple: #6d7df7;
  --gold: #f5c84b;
  --warning: #bd6c20;
  --blue: #226fd6;
  --grid-rgb: 58, 183, 255;
  --page-top: #ffffff;
  --page-end: #e4f3ff;
  --button-hover: #68c9ff;
  --nav-glow: rgba(58, 183, 255, 0.12);
  --brand-glow: rgba(58, 183, 255, 0.26);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) body[data-theme="emerald"]{
  --ink: #132820;
  --muted: #60776f;
  --soft: #90a59e;
  --line: #d3e6dc;
  --surface-soft: #f5fcf8;
  --page: #f0faf5;
  --nav: #143329;
  --nav-soft: #1f4a3c;
  --accent: #31c58d;
  --accent-dark: #177352;
  --cyan-soft: #e2f8ee;
  --purple: #5277dd;
  --gold: #f1c84d;
  --warning: #b96e22;
  --blue: #2d75bd;
  --grid-rgb: 49, 197, 141;
  --page-top: #ffffff;
  --page-end: #e5f5ed;
  --button-hover: #55d4a3;
  --nav-glow: rgba(49, 197, 141, 0.12);
  --brand-glow: rgba(49, 197, 141, 0.24);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) body[data-theme="violet"]{
  --ink: #211d36;
  --muted: #6e6687;
  --soft: #9a92ae;
  --line: #ddd8f2;
  --surface-soft: #fbf9ff;
  --page: #f5f2ff;
  --nav: #251f45;
  --nav-soft: #342b62;
  --accent: #8b7cff;
  --accent-dark: #5748c7;
  --cyan-soft: #f0edff;
  --purple: #8b7cff;
  --gold: #f1c84d;
  --warning: #b86c20;
  --blue: #406fce;
  --grid-rgb: 139, 124, 255;
  --page-top: #ffffff;
  --page-end: #ece8fb;
  --button-hover: #a094ff;
  --nav-glow: rgba(139, 124, 255, 0.13);
  --brand-glow: rgba(139, 124, 255, 0.25);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) body[data-theme="gold"]{
  --ink: #2b2517;
  --muted: #776b54;
  --soft: #a89b81;
  --line: #eadfca;
  --surface-soft: #fffdf7;
  --page: #fbf6e8;
  --nav: #342918;
  --nav-soft: #4b3a20;
  --accent: #f2c94c;
  --accent-dark: #9b6917;
  --cyan-soft: #fff5cf;
  --purple: #6f68d9;
  --gold: #f2c94c;
  --warning: #b86718;
  --blue: #336db3;
  --grid-rgb: 242, 201, 76;
  --page-top: #fffef9;
  --page-end: #f5ecd1;
  --button-hover: #f7d76f;
  --nav-glow: rgba(242, 201, 76, 0.14);
  --brand-glow: rgba(242, 201, 76, 0.28);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) *{
  box-sizing: border-box;
}

:where(html:has(body.production-sales-active)){
  min-width: 320px;
}

:where(body.production-sales-active){
  margin: 0;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 107, 157, 0.16), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(0, 196, 204, 0.16), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 55%, var(--page-end) 100%);
  background-size: auto;
  color: var(--ink);
  font-family:
    "Canva Sans", Circular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) button, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) input, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) textarea{
  font: inherit;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) button{
  cursor: pointer;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) button:focus-visible, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) input:focus-visible, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) select:focus-visible, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-appbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-nav-scrim{
  display: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.08), transparent 34%),
    var(--nav);
  color: var(--ink);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand-mark{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 24px var(--brand-glow);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand-mark img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand span{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand strong{
  letter-spacing: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-card label, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-card span{
  color: var(--muted);
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list{
  display: grid;
  gap: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item{
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 700;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.active, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item:hover{
  background: var(--nav-soft);
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.active{
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-icon, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn-icon{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-icon{
  background: rgba(123, 47, 190, 0.1);
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-card{
  width: 100%;
  min-width: 0;
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.08), rgba(255, 255, 255, 0) 48%),
    #ffffff;
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-card select{
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 10px;
  color: #ffffff;
  background: var(--nav-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar-logo-link{
  display: block;
  width: 92px;
  margin: 0 0 0 10px;
  border-radius: 8px;
  overflow: hidden;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar-logo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-box{
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(123, 47, 190, 0.1), rgba(255, 107, 157, 0.08));
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-title{
  display: grid;
  gap: 4px;
  justify-items: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-logo-link{
  display: block;
  width: min(100%, 148px);
  justify-self: center;
  border-radius: 12px;
  overflow: hidden;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-logo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-site{
  line-height: 1;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-version{
  line-height: 1;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-box p{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-box span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-contact strong{
  color: var(--muted);
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-box a:not(.maker-logo-link), :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-panel a{
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-box a:not(.maker-logo-link):hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-panel a:hover{
  text-decoration: underline;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-contact{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(123, 47, 190, 0.14);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-contact a, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .maker-contact strong{
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-panel{
  gap: 12px;
  padding: 28px;
  border-color: rgba(123, 47, 190, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.04), rgba(255, 255, 255, 0) 38%),
    #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-brand{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-logo-link{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-logo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2383 / 860;
  object-fit: contain;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-brand h2{
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-brand span{
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid div{
  min-width: 0;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 18px;
  background: rgba(123, 47, 190, 0.07);
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid strong{
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid a, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid strong{
  overflow-wrap: anywhere;
  font-size: 17px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .wechat-link{
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(123, 47, 190, 0.18);
  border-radius: 9999px;
  padding: 6px 12px;
  background: #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-stats span{
  min-width: 0;
  padding: 9px 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-stats strong{
  display: block;
  color: var(--accent-dark);
  font-size: 16px;
  line-height: 1.2;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-config-btn{
  width: 100%;
  min-height: 34px;
  border-color: rgba(123, 47, 190, 0.18);
  background: rgba(123, 47, 190, 0.08);
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-meta{
  display: grid;
  gap: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .account-meta span{
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(123, 47, 190, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #syncStatus{
  color: var(--accent-dark);
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .login-box{
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(139, 235, 255, 0.16);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .login-box input{
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(139, 235, 255, 0.2);
  border-radius: 8px;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .login-box input::placeholder{
  color: #a8d6df;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .login-box .btn{
  width: 100%;
  box-shadow: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .main{
  min-width: 0;
  padding: 28px;
}

/* 页面标题和业务内容共用同一自适应宽度，避免上下边缘错位。 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot{
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot{
  min-width: 0;
}

/* 顶部标题卡与每个业务页面的左右边界保持一致。 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > :first-child, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > .cm-page, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > .acq-sub-page, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > .d-page, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > .o-page, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > .s-page{
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar{
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .title-block{
  min-width: 240px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .page-kicker{
  display: block;
  margin-bottom: 7px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) h1, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) h2, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) p{
  margin: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) h1{
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) h2{
  font-size: 16px;
  line-height: 1.3;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar p, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar p{
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head{
  display: flex;
  gap: 10px;
  align-items: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions{
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 540px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn{
  min-height: 42px;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-spring), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .icon-btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item:hover{
  transform: translateY(-1px);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn:disabled, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn:disabled{
  cursor: not-allowed;
  opacity: 0.58;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.is-loading{
  border-color: rgba(123, 47, 190, 0.26);
  background: rgba(123, 47, 190, 0.09);
  color: var(--accent-dark);
  opacity: 1;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.primary{
  background: var(--accent);
  color: #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.primary:hover{
  background: var(--button-hover);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.secondary, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.compact{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.secondary:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.compact:hover{
  border-color: var(--line);
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.danger, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.compact.danger{
  color: var(--danger);
  border-color: #f4b4ae;
  background: #fff6f5;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.danger:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.compact.danger:hover{
  background: #fee4e2;
  border-color: #ee8b83;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.ghost{
  background: transparent;
  box-shadow: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.compact{
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn-icon{
  background: rgba(255, 255, 255, 0.18);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn.secondary .btn-icon{
  background: #e7faff;
  color: var(--muted);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .view{
  display: none;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 44px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .active-view{
  display: block;
  animation: view-in 0.18s var(--ease-spring);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-corner{
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 5px 10px 5px 6px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-corner span{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(123, 47, 190, 0.12);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-corner:hover{
  border-color: rgba(123, 47, 190, 0.28);
  background: #ffffff;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step{
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(123, 47, 190, 0.1), rgba(255, 107, 157, 0.06) 42%, transparent),
    var(--surface);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step div{
  min-width: 0;
  display: grid;
  gap: 4px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step span{
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 8px;
  background: rgba(123, 47, 190, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step strong{
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step small{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step .btn{
  flex: 0 0 auto;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric{
  position: relative;
  overflow: hidden;
  min-height: 124px;
  padding: 16px;
  display: grid;
  align-content: space-between;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-leads::before{
  background: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-hot::before{
  background: var(--magenta);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-draft::before{
  background: var(--blue);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-sent::before{
  background: var(--coral);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric span{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric strong{
  display: block;
  margin-top: 8px;
  font-size: 32px;
  color: var(--accent-dark);
  line-height: 1;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric small{
  color: var(--soft);
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .dashboard-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .automation-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  gap: 12px;
  margin-top: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel{
  padding: 18px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head{
  justify-content: space-between;
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 15px 16px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-list, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-log, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-board, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-results, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-list, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auto-send-summary{
  display: grid;
  gap: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-board, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-results{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list div{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  align-items: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item small{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item small{
  color: var(--muted);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item small{
  margin-top: 5px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item.has-warning{
  background: #fff7f4;
  border-color: rgba(255, 112, 67, 0.28);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auto-send-summary div{
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auto-send-summary span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auto-send-summary strong{
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced{
  grid-template-columns: minmax(180px, 1fr) max-content max-content minmax(116px, max-content);
  column-gap: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced > div:first-child, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item > div:first-child, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card header > div, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card header > div, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell{
  min-width: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card:hover{
  border-color: rgba(123, 47, 190, 0.35);
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list span{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card .meta, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .muted{
  color: var(--muted);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item small, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card h2, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card .meta, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card h2, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) td{
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-results-head{
  margin-top: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-summary{
  grid-column: 1 / -1;
  margin-bottom: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list div{
  padding: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .strategy-list strong{
  display: block;
  margin-bottom: 5px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card{
  display: grid;
  gap: 12px;
  padding: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-risk{
  grid-column: 1 / -1;
  margin-top: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card.is-muted{
  opacity: 0.62;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card p{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .line-clamp{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-meta{
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .workflow-checks{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .workflow-checks span{
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 9999px;
  background: rgba(123, 47, 190, 0.07);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-funnel{
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-progress{
  grid-column: 1 / -1;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.06), rgba(255, 255, 255, 0) 52%),
    #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head{
  min-height: 68px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item small{
  color: var(--muted);
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head strong{
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 16px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head small{
  flex: 0 0 auto;
  border: 1px solid rgba(123, 47, 190, 0.16);
  border-radius: 9999px;
  padding: 5px 9px;
  background: rgba(123, 47, 190, 0.07);
  color: var(--accent-dark);
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-log{
  max-height: 260px;
  overflow: auto;
  display: grid;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item{
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: start;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(123, 47, 190, 0.09);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item:last-child{
  border-bottom: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item.is-active{
  background: rgba(0, 194, 255, 0.07);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item small{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item strong{
  color: var(--ink);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item small{
  margin-top: 3px;
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item em{
  align-self: center;
  min-width: 48px;
  border-radius: 9999px;
  padding: 4px 8px;
  background: var(--surface-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .risk-flags span{
  border-color: rgba(255, 112, 67, 0.25);
  background: rgba(255, 112, 67, 0.08);
  color: #9d3f1d;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .score{
  width: clamp(38px, 4.2vw, 48px);
  min-height: 30px;
  border-radius: 9999px;
  display: inline-grid;
  place-items: center;
  background: var(--cyan-soft);
  color: #12666a;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-log{
  max-height: 338px;
  overflow: auto;
  padding-right: 2px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item{
  position: relative;
  padding: 10px 12px 10px 28px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item small{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item strong{
  color: var(--ink);
  font-size: 12px;
  margin-bottom: 3px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item small{
  margin-top: 5px;
  color: var(--soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .activity-item::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar{
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar{
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  border-radius: 16px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar strong{
  color: var(--accent-dark);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .search-box{
  min-width: min(440px, 100%);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .search-box span{
  color: var(--soft);
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .search-box input{
  min-height: 40px;
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid input, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  background: #ffffff;
  color: var(--ink);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar select{
  width: auto;
  min-width: 142px;
  min-height: 40px;
  background: #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .secret-input{
  -webkit-text-security: disc;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap{
  overflow: auto;
  box-shadow: var(--shadow-md);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) table{
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) th, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) td{
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) th{
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-soft);
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) tbody tr{
  background: #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) tbody tr:hover{
  background: #fbf8ff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) tbody tr.is-selected{
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) tbody tr.is-overdue .company-cell strong::after{
  content: "待跟进";
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #fff2ed;
  color: var(--coral);
  font-size: 11px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) tbody tr:last-child td{
  border-bottom: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .select-col{
  width: 44px;
  text-align: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .select-col input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell span{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell strong{
  margin-bottom: 3px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .company-cell span{
  color: var(--muted);
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lead-issues{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lead-issues span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-warning{
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 9999px;
  padding: 2px 7px;
  color: #9d3f1d;
  background: #fff2ed;
  font-size: 11px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-width: clamp(56px, 6.2vw, 78px);
  min-height: 28px;
  border-radius: 9999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  background: #eef1f4;
  color: var(--muted);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.new{
  background: var(--surface-soft);
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.drafted{
  background: #f0edff;
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.approved{
  background: #fff0f6;
  color: #b82763;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.sent{
  background: var(--cyan-soft);
  color: #12666a;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.replied{
  background: #fff2ed;
  color: #9d3f1d;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.blocked{
  background: #fee4e2;
  color: var(--danger);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item .row-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item .row-actions{
  justify-content: flex-end;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn{
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--accent-dark);
  background: transparent;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn:hover{
  background: var(--surface-soft);
  border-color: var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn.primary-action{
  border-color: rgba(123, 47, 190, 0.18);
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn.danger{
  color: var(--danger);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn.danger:hover{
  border-color: #f4b4ae;
  background: #fff1f0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu{
  position: relative;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu summary{
  list-style: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu summary::-webkit-details-marker{
  display: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu summary::after{
  content: "v";
  margin-left: 6px;
  color: var(--soft);
  font-size: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu[open] summary{
  background: var(--surface-soft);
  border-color: var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-menu-list{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 4;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .menu-action{
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .menu-action:hover{
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .menu-action.danger{
  color: var(--danger);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .menu-action.danger:hover{
  background: #fff1f0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card{
  padding: 15px;
  display: grid;
  gap: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card pre{
  max-height: 360px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid label{
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid textarea{
  resize: vertical;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #draftBody{
  min-height: 320px;
  line-height: 1.55;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .wide{
  grid-column: 1 / -1;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid .panel > h2{
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .check-list{
  display: grid;
  gap: 11px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .theme-picker{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .theme-picker select{
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(var(--grid-rgb), 0.12), transparent 38%),
    #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .check-list label{
  min-height: 38px;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .check-list input{
  accent-color: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .notice{
  margin-top: 14px;
  border-radius: 16px;
  padding: 13px;
  display: grid;
  gap: 6px;
  background: #fff7f4;
  color: #7d3419;
  border: 1px solid rgba(255, 112, 67, 0.24);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .wizard-steps{
  display: grid;
  gap: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-modal{
  max-height: calc(100vh - 40px);
  overflow: auto;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist{
  margin-bottom: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist span{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist strong{
  color: var(--ink);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist .is-ready strong{
  color: var(--accent-dark);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-checklist .is-missing strong{
  color: var(--warning);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #configDialog{
  width: min(860px, calc(100vw - 28px));
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .wizard-steps section{
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .wizard-steps h3{
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .field-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .field-actions .muted{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .data-dir-structure{
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recommended-dir{
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  border-radius: 16px;
  background: var(--surface-soft);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recommended-dir strong{
  color: var(--ink);
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recommended-dir span{
  color: var(--muted);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .advanced-dir{
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .advanced-dir summary{
  cursor: pointer;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .advanced-dir .form-grid{
  margin-top: 10px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .data-dir-structure code{
  color: var(--ink);
  overflow-wrap: anywhere;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) dialog{
  width: min(780px, calc(100vw - 28px));
  border: 0;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 22px 70px rgba(16, 24, 40, 0.22);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) dialog::backdrop{
  background: rgba(45, 45, 45, 0.38);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal{
  padding: 18px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .icon-btn{
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 900;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions{
  justify-content: flex-end;
  margin-top: 16px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-modal{
  display: grid;
  gap: 14px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-message{
  color: var(--ink);
  line-height: 1.55;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-details{
  display: none;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-details:not(:empty){
  display: grid;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-details strong{
  color: var(--ink);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-details ul{
  margin: 0;
  padding-left: 18px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-details li + li{
  margin-top: 4px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-modal.is-danger #decisionConfirmBtn{
  color: #ffffff;
  background: var(--danger);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .decision-modal.is-danger #decisionConfirmBtn:hover{
  background: #8f1d14;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty{
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

/* ============================================================
   V2.2 卡片式导航 + 模块分色（市场=蓝 / 客户=绿 / 开发=橙 / 沟通=紫）
   ============================================================ */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list{
  display: grid;
  gap: 8px;
  grid-auto-rows: max-content;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
  margin-right: -4px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list::-webkit-scrollbar{ width: 6px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list::-webkit-scrollbar-thumb{ background: rgba(123, 47, 190, 0.18); border-radius: 99px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list::-webkit-scrollbar-track{ background: transparent; }

/* 图标改为 emoji 风格（去掉字母徽章背景） */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item .nav-icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: transparent;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

/* 顶级项：工作台 / 数据分析 / 设置 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-top{
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-top:hover{
  background: var(--surface-soft);
  border-color: rgba(123, 47, 190, 0.28);
  transform: none;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-top.active{
  background: linear-gradient(135deg, rgba(123, 47, 190, 0.14), rgba(168, 85, 247, 0.06));
  border-color: transparent;
  color: var(--accent-dark);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

/* 分组卡片 + 模块色变量 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group{
  --mc: #7b2fbe;
  --mc-soft: #f5f0ff;
  min-height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mc);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.c-blue{ --mc: #2563eb; --mc-soft: #eff6ff; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.c-green{ --mc: #059669; --mc-soft: #ecfdf5; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.c-orange{ --mc: #ea580c; --mc-soft: #fff7ed; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.c-purple{ --mc: #7c3aed; --mc-soft: #f5f3ff; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-group-toggle{
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  padding: 11px 12px;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-group-toggle:hover{
  background: var(--mc-soft);
  color: var(--mc);
  transform: none;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-group-toggle.active{
  background: var(--mc-soft);
  color: var(--mc);
  box-shadow: none;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.nav-group-toggle .nav-icon{ color: var(--mc); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-arrow{ margin-left: auto; font-size: 11px; color: var(--muted); transition: transform 0.2s ease; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.expanded .nav-arrow{ transform: rotate(180deg); }

/* 子菜单：可折叠 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-submenu{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 8px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group.expanded .nav-submenu{ max-height: 460px; padding-bottom: 8px; }

/* 子项：圆角卡片，统一高度/间距，图标+文字 */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-sub-item{
  position: relative;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-sub-item .ns-ico{ font-size: 15px; width: 20px; text-align: center; flex: 0 0 auto; line-height: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-sub-item:hover{
  background: var(--mc-soft);
  border-color: var(--line);
  transform: none;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-sub-item.active{
  background: var(--mc-soft);
  border-color: transparent;
  color: var(--mc);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--mc);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty span{
  display: block;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty strong{
  color: var(--ink);
  margin-bottom: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-empty{
  display: grid;
  gap: 10px;
  justify-items: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-warning{
  display: inline-flex;
  margin-top: 4px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .check-inline{
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
}

:where(body.production-sales-active) .toast{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-spring), transform 0.2s var(--ease-spring);
}

:where(body.production-sales-active) .toast.show{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .app-shell{
    grid-template-columns: 220px minmax(0, 1fr);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced{
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced .row-actions{
    grid-column: 1 / -1;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-board, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-results{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid .support-brand{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid .support-logo-link{
    max-width: 220px;
  }
}

@media (max-width: 980px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .app-shell{
    grid-template-columns: 1fr;
    padding-top: 64px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar{
    position: fixed;
    z-index: 110;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    height: 100dvh;
    padding: 18px 14px;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 18px 0 44px rgba(34, 23, 48, 0.18);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-nav-open .sidebar{
    transform: translateX(0);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-appbar{
    position: fixed;
    z-index: 100;
    inset: 0 0 auto 0;
    height: 64px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-menu-btn{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--accent-dark);
    font-size: 24px;
    line-height: 1;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand-mark{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 3px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 18px var(--brand-glow);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand-mark img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand small{
    display: block;
    max-width: calc(100vw - 128px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand strong{ font-size: 14px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-brand small{ margin-top: 2px; color: var(--muted); font-size: 11px; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-nav-scrim{
    position: fixed;
    z-index: 105;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(26, 20, 34, 0.42);
    backdrop-filter: blur(2px);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) body.mobile-nav-lock{
    overflow: hidden;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .brand{
    padding: 0;
    border-bottom: 0;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list{
    grid-template-columns: 1fr;
    overflow: visible;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-group{
    grid-column: auto;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item{
    justify-content: flex-start;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced .score, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced .status, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .priority-item.enhanced .row-actions{
    justify-self: start;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item.active{
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-icon{ display: inline-grid; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar-logo-link{ display: none; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .main{
    padding: 16px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .dashboard-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .acquisition-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .automation-grid{
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-brand, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-contact-grid{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .support-logo-link{
    max-width: 180px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step{
    display: grid;
    align-items: stretch;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .next-step .btn{
    width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
    justify-content: flex-start;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions .btn{
    min-width: 0;
    width: 100%;
    white-space: normal;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) *, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) *::before, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) *::after{
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .active-view{
    animation: none;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .icon-btn:hover, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-item:hover{
    transform: none;
  }
}

@media (max-width: 680px) {
  :where(body.production-sales-active){ overflow-x: hidden; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) h1{
    font-size: 21px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .metric-grid, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list{
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .main{ padding: 10px; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar{
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .title-block{ min-width: 0; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .page-kicker{ margin-bottom: 5px; font-size: 10px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .topbar p{ font-size: 13px; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .d-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .s-card{
    max-width: 100%;
    padding: 14px;
    border-radius: 14px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) input, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) textarea{
    max-width: 100%;
    font-size: 16px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .link-btn{
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap{
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap::after{
    content: "左右滑动查看完整表格";
    position: sticky;
    left: 10px;
    display: block;
    width: max-content;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 11px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) table{ min-width: 760px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) th, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) td{ padding: 10px 11px; }

  :where(body.production-sales-active) .modal-host{
    align-items: end;
    padding: 8px;
  }

  :where(body.production-sales-active) .modal-host .modal-card, :where(body.production-sales-active) .modal-host .modal, :where(body.production-sales-active) .modal-host .modal-card .m-card{
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 20px 20px 14px 14px;
  }

  :where(body.production-sales-active) .drawer{
    top: auto;
    bottom: 0;
    width: 100vw;
    height: min(88dvh, 760px);
    padding: 16px;
    border-radius: 22px 22px 0 0;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .row-actions{
    flex-wrap: wrap;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions .btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-actions .btn{
    flex: 1 1 120px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) img, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) video, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) iframe{ max-width: 100%; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .search-box{
    width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .top-actions .btn:nth-child(3):last-child{
    grid-column: 1 / -1;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar{
    display: grid;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar .row-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar .btn{
    width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card header, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card header, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item{
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item .score, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .queue-item .row-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .draft-card header .status, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .discovery-card header .score{
    justify-self: start;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item{
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-head small, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .progress-item em{
    justify-self: start;
  }
}

/* ========== AUTH SCREEN ========== */

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-screen{
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(var(--grid-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 52%, var(--page-end) 100%);
  background-size: 28px 28px, 28px 28px, auto;
  padding: 20px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card{
  width: min(400px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-md);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand strong{
  font-size: 18px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand span{
  color: var(--muted);
  font-size: 13px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card h2{
  margin-bottom: 18px;
  font-size: 20px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card form{
  display: grid;
  gap: 14px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card label{
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card input{
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card input:focus{
  border-color: var(--accent);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card .btn.primary{
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-error{
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
  min-height: 1.2em;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-toggle{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-toggle a{
  color: var(--accent-dark);
  font-weight: 900;
  cursor: pointer;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .user-box{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 194, 255, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.1), rgba(123, 47, 190, 0.08));
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .user-box span{
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .user-box .btn{
  width: 100%;
  min-height: 34px;
  box-shadow: none;
}

/* ===================== CUSTOM (云拓) EXTENSIONS ===================== */
/* Auth screen (not present in base reference CSS) */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-screen{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 107, 157, 0.16), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(0, 196, 204, 0.16), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 55%, var(--page-end) 100%);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-card{
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand{
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  margin-bottom: 18px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand .brand-mark{
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center;
  padding: 5px; background: #fff;
  box-shadow: 0 0 24px var(--brand-glow);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand strong{ font-size: 18px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-brand span{ color: var(--muted); font-size: 12px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #authForm{ display: grid; gap: 12px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #authForm h2{ font-size: 18px; margin-bottom: 2px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #authForm label{ color: var(--muted); font-size: 13px; font-weight: 800; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #authForm input{
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; background: #fff; color: var(--ink);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-error{ color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-note{ margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 12px; }

/* Sidebar footer */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sidebar-foot{
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; line-height: 1.5;
}

/* Overlay / Drawer / Modal hosts */
:where(body.production-sales-active) .overlay{
  position: fixed; inset: 0; background: rgba(45, 45, 45, 0.38);
  z-index: 40;
}
:where(body.production-sales-active) .drawer{
  position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 94vw);
  background: var(--surface); z-index: 50; box-shadow: var(--shadow-md);
  overflow: auto; padding: 22px;
  animation: drawer-in 0.2s var(--ease-spring);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
:where(body.production-sales-active) .modal-host{
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(45, 45, 45, 0.38);
}
:where(body.production-sales-active) .modal-host .modal-card{
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: flex;
  justify-content: center;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-manager{ width: 100%; box-sizing: border-box; padding: 26px; background: #fff; border-radius: 22px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:2px 2px 18px;border-bottom:1px solid #eee6f7;margin-bottom:16px}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-manager-head h2{font-size:26px;margin:8px 0 4px!important}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-manager-head .modal-x{position:static;flex:0 0 auto;width:40px;height:40px;border:1px solid #e5d9f2;border-radius:50%;background:#fff;color:#5f526b;font-size:24px;cursor:pointer;box-shadow:0 5px 16px rgba(76,29,149,.08)}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-manager h2{ margin: 0 0 6px; color: #20192c; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 10px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-list{ max-height: 430px; overflow:auto; border:1px solid #e8ddf5; border-radius:14px; background:#fcfbff; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-row{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:12px 14px; border-bottom:1px solid #eee8f6; align-items:center; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-row:last-child{ border-bottom:0; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-row strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-row small{ display:block; overflow-wrap:anywhere; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-row small{ color:#81768c; margin-top:3px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-actions{ display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; margin-top:16px; align-items:center; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-actions select{ width:100%; min-height:42px; border:1px solid #d8ccf0; border-radius:11px; padding:0 12px; background:#fff; }
@media(max-width:700px){:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-actions{grid-template-columns:1fr}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .sales-customer-manager{padding:20px 16px}}
:where(body.production-sales-active) .modal-host .modal-card .m-card{
  width: min(920px, 100%);
}
:where(body.production-sales-active) .modal-host .modal{
  width: min(720px, 100%); border: 0; border-radius: 20px; padding: 20px;
  background: var(--surface); box-shadow: 0 22px 70px rgba(16, 24, 40, 0.22);
  max-height: calc(100vh - 40px); overflow: auto;
}

/* Shared theme controls for every dialog, including dialogs rendered outside a page view. */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-btn{
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #d8ccf0;
  border-radius: 10px;
  background: #ffffff;
  color: #5a3a8a;
  font: 700 13px/1.2 inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-btn:hover{
  border-color: #a855f7;
  box-shadow: 0 5px 14px rgba(123, 47, 190, 0.12);
  transform: translateY(-1px);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, #7b2fbe, #a855f7);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(123, 47, 190, 0.2);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .theme-modal-close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e8e0f2;
  border-radius: 50%;
  background: #ffffff;
  color: #5a3a8a;
  font: 400 24px/34px inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 24, 40, 0.1);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .theme-modal-close:hover{
  color: #7b2fbe;
  border-color: #cdb8f0;
  background: #faf8ff;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-head h2{ font-size: 18px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .icon-btn{ width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9999px; background: #fff; color: var(--muted); font-weight: 900; cursor: pointer; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Toast */
:where(body.production-sales-active) .toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 80; padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
:where(body.production-sales-active) .toast.show{ opacity: 1; transform: translateX(-50%) translateY(-4px); }
:where(body.production-sales-active) .toast.error{ background: var(--danger); }
:where(body.production-sales-active) .toast.warn{ background: var(--warning); }

/* Tabs */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tab{
  min-height: 38px; border: 1px solid var(--line); border-radius: 9999px;
  padding: 8px 14px; background: var(--surface); color: var(--muted);
  font-weight: 800; font-size: 13px; cursor: pointer;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tab.active{ background: var(--accent); color: #fff; border-color: transparent; }

/* Misc helpers */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .helper{ color: var(--muted); font-size: 13px; line-height: 1.5; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .field-row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .muted{ color: var(--muted); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .spacer{ flex: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .kpi-sub{ color: var(--soft); font-size: 12px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag{ display: inline-flex; align-items: center; min-height: 22px; border-radius: 9999px; padding: 2px 8px; font-size: 11px; font-weight: 900; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag.green{ background: #e7f8ee; color: #1c7a45; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag.blue{ background: var(--cyan-soft); color: #12666a; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag.amber{ background: #fff2ed; color: #9d3f1d; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag.gray{ background: #eef1f4; color: var(--muted); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .badge-line{ display: flex; gap: 6px; flex-wrap: wrap; }
:where(body.production-sales-active) .drawer h3{ font-size: 15px; margin: 16px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .reasons li{ margin: 4px 0; color: var(--ink); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .reasons .bad{ color: #9d3f1d; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .reasons .good{ color: #1c7a45; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .note-box{ padding: 12px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 13px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .copy-btn{ min-height: 30px; border: 1px solid var(--line); border-radius: 9999px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: #fff; cursor: pointer; color: var(--accent-dark); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .copy-btn:hover{ background: var(--surface-soft); }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-hint{ margin: 6px 0 0; text-align: center; color: var(--accent-dark); font-size: 12px; font-weight: 800; }

/* ========== Dashboard Stat Grid ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.green{ background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(56, 239, 125, 0.3); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.green:hover{ box-shadow: 0 6px 20px rgba(56, 239, 125, 0.4); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.blue{ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.blue:hover{ box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.purple{ background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); box-shadow: 0 4px 15px rgba(161, 140, 209, 0.3); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.purple:hover{ box-shadow: 0 6px 20px rgba(161, 140, 209, 0.4); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.orange{ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-card.orange:hover{ box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4); }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-icon{ font-size: 32px; line-height: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-info{ display: flex; flex-direction: column; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-value{ font-size: 28px; font-weight: 800; line-height: 1.2; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-label{ font-size: 13px; opacity: 0.9; font-weight: 500; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .quick-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-card{
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--line);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-card h3, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .quick-actions h3, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-card h3{
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-item{
  margin-bottom: 16px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-item:last-child{ margin-bottom: 0; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-item label{
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-bar{
  height: 36px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  width: 0;
  transition: width 0.6s ease;
  min-width: 40px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-bar.blue{ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .funnel-bar.purple{ background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%); }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-btn:hover{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-icon{ font-size: 24px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-btn label{ font-size: 13px; font-weight: 600; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-list{ display: flex; flex-direction: column; gap: 12px; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-soft);
  border-radius: 10px;
  transition: background 0.2s ease;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-item:hover{ background: #eef1f4; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-info{ display: flex; flex-direction: column; gap: 2px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-info strong{ font-size: 14px; color: var(--ink); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-info span{ font-size: 12px; color: var(--muted); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .recent-meta{ font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

@media (max-width: 1200px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-grid{ grid-template-columns: repeat(3, 1fr); }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .action-grid{ grid-template-columns: 1fr; }
}

/* ========== Section Actions ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-actions{ display: flex; gap: 8px; }

/* ========== RPA Views ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-status-box, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-result-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--surface-soft);
  border-radius: 14px;
  border: 2px dashed var(--line);
  text-align: center;
  gap: 12px;
  min-height: 200px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-status-box p, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-result-box p{ color: var(--muted); margin: 0; font-size: 14px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-status-icon{ font-size: 48px; line-height: 1; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-loading{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .rpa-loading p{ color: var(--muted); margin: 0; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .spinner{
  width: 40px;
  height: 40px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Settings Grid ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card{ display: flex; flex-direction: column; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card .form-grid{ flex: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card .btn{ align-self: flex-start; margin-top: 16px; }

@media (max-width: 900px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .settings-grid{ grid-template-columns: 1fr; }
}

/* ========== Tag amber ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tag.amber{ background: #fff4e6; color: #b35900; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.success{ background: #e6f7ee; color: #1c7a45; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .status.danger{ background: #fde8e8; color: #c01f3c; }

/* ========== Enhanced Panel & Table ========== */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
  margin-bottom: 20px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head h2, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head h3{
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head .muted{ margin: 0; font-size: 13px; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap table{ width: 100%; border-collapse: collapse; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap thead{ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap th{
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--line);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap td{
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap tbody tr{ transition: background 0.15s ease; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap tbody tr:hover{ background: #f8f9fb; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap tbody tr:last-child td{ border-bottom: none; }

/* Empty state */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty{
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .empty::before{
  content: "📭";
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* Config card enhanced */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card:hover{
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Form grid enhanced */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid input, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid textarea{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid input:focus, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid select:focus, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .form-grid textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.1);
}

/* Flat business-flow navigation */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list-flat{
  display: grid;
  gap: 7px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .nav-list-flat .nav-item.nav-top{
  width: 100%;
  justify-content: flex-start;
}

/* Friendly fallback when index.html is opened directly with file:// */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f5f0ff, #f7f9fc);
  color: #1a1a2e;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning > div{
  max-width: 560px;
  padding: 36px;
  text-align: center;
  background: #fff;
  border: 1px solid #e0d4f5;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(45, 24, 77, 0.12);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning .warning-icon{
  display: block;
  font-size: 42px;
  margin-bottom: 12px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning h2{ margin: 0 0 10px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning p{ color: #666; line-height: 1.7; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .local-open-warning a{
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  color: #fff;
  background: #7b2fbe;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-panel{position:fixed;right:20px;bottom:20px;z-index:10020;width:min(380px,calc(100vw - 32px));max-height:55vh;overflow:auto;background:#fff;border:1px solid #dfd2f6;border-radius:16px;box-shadow:0 18px 55px rgba(51,24,89,.24);padding:14px}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-title{font-weight:800;color:#53238a;margin-bottom:8px}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row{padding:10px 0;border-top:1px solid #eee6f7}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row small{color:#777;font-size:12px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row small{display:block;color:#c01f3c;margin-top:6px;overflow-wrap:anywhere}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-track{height:6px;background:#eee8f7;border-radius:99px;overflow:hidden;margin:7px 0}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-track i{display:block;height:100%;background:linear-gradient(90deg,#7b2fbe,#d94da5);transition:width .25s}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-actions{display:flex;justify-content:flex-end;gap:7px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-actions button{border:1px solid #d8c9ed;border-radius:99px;background:#fff;color:#65359b;padding:5px 11px;cursor:pointer}

/* Final mobile safeguards live at the end so later component styles cannot
   accidentally override responsive behavior. Desktop styles are untouched. */
@media (max-width: 680px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot > *, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-card, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card{
    min-width: 0;
    max-width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .config-card{ padding: 14px; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap{
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .panel-head, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar{
    align-items: stretch;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .toolbar > *, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .bulk-action-bar > *, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .section-bar > *{
    min-width: 0;
    max-width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-panel{
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    max-height: 42dvh;
  }
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-next-action{border:0;background:transparent;color:#5b21b6;padding:4px 0;text-align:left;cursor:pointer;max-width:240px;line-height:1.35}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-next-action strong{display:block;font-size:12px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-next-action small{display:block;color:#888;font-size:11px;margin-top:3px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-next-action:hover strong{text-decoration:underline}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-ocr-button{background:linear-gradient(135deg,#7c2dd2,#b645e6)!important;color:#fff!important;border-color:transparent!important}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:14px 0;border-bottom:1px dashed #eee}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-main{min-width:0}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-name{display:block;font-size:13px;color:#1a1a2e;overflow-wrap:anywhere}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-detail{margin-top:8px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-detail summary{cursor:pointer;color:#65359b;font-size:12px;font-weight:800}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-detail-body{white-space:pre-wrap;background:#f8f9fb;border:1px solid #eef0f4;border-radius:10px;padding:10px 12px;margin-top:7px;font-size:12px;line-height:1.6;color:#333}

/* Responsive table enhancer: desktop remains a normal table. */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-row-toggle, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-panel-toggle{ display: none; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-list{ display: none; }

@media (max-width: 680px), (max-width: 900px) and (max-height: 520px) {
  :where(html:has(body.production-sales-active)), :where(body.production-sales-active), :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .app-shell, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .main, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot{
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) #viewRoot *{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-row{grid-template-columns:auto minmax(0,1fr);padding:12px 0}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-actions{grid-column:1/-1;justify-content:flex-start}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-actions .cm-btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-actions a.cm-btn{flex:1 1 calc(50% - 6px);min-width:0}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-detail{margin-top:7px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-detail-body{max-height:260px;overflow:auto}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .tt-task-name{font-size:15px;line-height:1.35;word-break:normal;overflow-wrap:anywhere}

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) pre, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) code, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .error, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .auth-error, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-row small{
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-panel-toggle{
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 10px 0 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8c9ed;
    border-radius: 12px;
    background: #fff;
    color: #65359b;
    font-weight: 800;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-filter-panel, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-bulk-panel{
    display: none !important;
    width: 100%;
    align-items: stretch !important;
    flex-direction: column;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-filter-panel.mobile-panel-open, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-bulk-panel.mobile-panel-open{ display: flex !important; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-filter-panel > *, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-bulk-panel > *{
    width: 100% !important;
    margin-left: 0 !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-cards{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-cards > *{ min-width: 0 !important; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .desktop-customer-table{ display: none !important; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-list{
    display: grid;
    gap: 12px;
    width: 100%;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-card{
    width: 100%;
    padding: 16px;
    border: 1px solid #e8def2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(76, 29, 149, .08);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: start;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-company-link{
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5b21b6;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.3;
    text-align: left;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-sub{
    margin-top: 5px;
    color: #81768a;
    font-size: 12px;
    line-height: 1.45;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-check{
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-contact{
    display: flex;
    min-width: 0;
    margin-top: 13px;
    align-items: center;
    gap: 8px;
    color: #6f6678;
    font-size: 12px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-contact strong{
    min-width: 0;
    overflow: hidden;
    color: #2e2833;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-contact .cm-tag{ margin-left: auto; flex: 0 0 auto; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-quick-actions{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action{
    display: flex;
    min-width: 0;
    min-height: 78px;
    padding: 9px 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6dcf1;
    border-radius: 14px;
    background: #faf7ff;
    color: #5b21b6;
    text-align: center;
    text-decoration: none;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action.call{
    border-color: #b9ead5;
    background: #f0fbf6;
    color: #087a50;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action > span{ font-size: 20px; line-height: 1; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action b{ margin-top: 6px; font-size: 12px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action small{
    display: block;
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #82788b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-action.disabled{ opacity: .55; color: #777; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    width: 100%;
    min-height: 58px;
    margin-top: 12px;
    padding: 10px 12px;
    align-items: center;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4edff, #fbf8ff);
    color: #53238a;
    text-align: left;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action small, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action strong{ grid-column: 1; display: block; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action small{ color: #8b7b9d; font-size: 10px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action strong{ margin-top: 2px; font-size: 13px; line-height: 1.4; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-next-action > span{ grid-column: 2; grid-row: 1 / 3; font-size: 25px; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-more{
    margin-top: 10px;
    border-top: 1px solid #eee7f4;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-more summary{
    min-height: 44px;
    padding: 13px 2px 0;
    color: #74667f;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    list-style: none;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-more summary::-webkit-details-marker{ display: none; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-more summary::after{ content: '⌄'; margin-left: 6px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-customer-more[open] summary::after{ content: '⌃'; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 8px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid > div{
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
    background: #fafafa;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid span, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid strong{ display: block; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid span{ color: #918897; font-size: 10px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-more-grid strong{ margin-top: 4px; color: #332c38; font-size: 12px; line-height: 1.4; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-empty-card{
    padding: 30px 16px;
    border-radius: 16px;
    background: #fff;
    color: #888;
    text-align: center;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-card[style*="overflow-x:auto"], :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cm-card[style*="overflow-x: auto"]{
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .table-wrap::after{ display: none; content: none; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) table.mobile-card-table{
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    background: transparent;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table thead{ display: none; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody{ display: grid; gap: 12px; width: 100%; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody tr{
    position: relative;
    display: block !important;
    width: 100%;
    padding: 13px;
    border: 1px solid #e9e1f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.06);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #8a8094;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td[data-label=""]::before, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td.mobile-row-toggle::before{ display: none; }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td:not(.mobile-summary-field):not(.mobile-check-field):not(.mobile-row-toggle){
    display: none;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody tr.mobile-expanded td{ display: block; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody tr.mobile-expanded td.mobile-check-field{
    display: flex;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td.mobile-check-field{
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    width: 32px !important;
    padding: 0 !important;
    justify-content: flex-end;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table tbody td.mobile-row-toggle{
    display: block;
    padding-top: 9px !important;
    border-top: 1px dashed #e7def1 !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-row-toggle-btn{
    width: 100%;
    min-height: 44px;
    border: 1px solid #d8c9ed;
    border-radius: 11px;
    background: #faf7ff;
    color: #65359b;
    font-weight: 800;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table .cm-btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table .btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table a[href^="tel:"], :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table a[href^="mailto:"]{
    min-height: 44px;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table td:last-child .cm-btn, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .mobile-card-table td:last-child .btn{
    width: 100%;
    margin: 4px 0;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .customer-profile-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .customer-profile-grid > div{
    padding: 11px;
    border: 1px solid #eee7f5;
    border-radius: 11px;
    background: #fcfaff;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail{
    width: 100% !important;
    max-width: 100% !important;
    height: min(94dvh, 900px);
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    overscroll-behavior: contain;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail .theme-modal-close{
    position: sticky !important;
    z-index: 8;
    top: 8px !important;
    float: right;
    margin: 8px 8px -48px 0;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-pane-wrap{ padding: 14px 12px calc(20px + env(safe-area-inset-bottom)) !important; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-tabs{
    position: sticky;
    z-index: 5;
    top: 0;
    padding: 0 8px !important;
    background: #fff;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-tab{
    flex: 1 1 calc(33.333% - 6px);
    min-height: 44px;
    padding: 9px 5px !important;
    font-size: 12px !important;
  }

  :where(body.production-sales-active) .modal-host{
    padding: max(6px, env(safe-area-inset-top)) 6px 0 !important;
    overflow-x: hidden;
  }

  :where(body.production-sales-active) .modal-host > *, :where(body.production-sales-active) .modal-host .modal-card, :where(body.production-sales-active) .modal-host .m-card, :where(body.production-sales-active) .modal-host .ct-modal, :where(body.production-sales-active) .modal-host .ocr-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: calc(100dvh - max(6px, env(safe-area-inset-top))) !important;
    overflow-x: hidden !important;
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .modal-actions, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .btns{
    position: sticky;
    z-index: 6;
    bottom: 0;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
  }

  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .global-job-panel{
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 38dvh;
  }
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-phone-link{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid #b7e5ce;
  border-radius: 10px;
  background: #edf9f3;
  color: #08784b;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  word-break: break-all;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-banner{
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #d8c7f3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7f0ff 0%, #fff8ed 100%);
  box-shadow: 0 5px 20px rgba(92, 45, 145, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-banner[hidden]{ display: none !important; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-copy{ display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-icon{ font-size: 24px; line-height: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-copy strong{ display: block; color: #522181; font-size: 15px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-copy p{ margin: 5px 0 0; color: #51475c; font-size: 13px; line-height: 1.65; }

@media (max-width: 720px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-banner{
    margin: 0 12px 14px;
    padding: 15px;
    align-items: stretch;
    flex-direction: column;
  }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .team-notice-banner .btn{ width: 100%; min-height: 46px; }
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-phone-link.compact{
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-templates{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template{
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template:hover{ border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px var(--nav-glow); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template strong, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template span{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template strong{ font-size: 13px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template span{ margin-top: 4px; color: var(--muted); font-size: 12px; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter{ position: relative; display: flex; align-items: center; gap: 7px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-label{ color: var(--muted); font-size: 12px; white-space: nowrap; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-trigger{
  min-width: 148px; min-height: 38px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow-sm);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-trigger b{ color: var(--accent); font-size: 16px; line-height: 1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-menu{
  position: absolute; z-index: 40; top: calc(100% + 7px); right: 0;
  min-width: 178px; padding: 6px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-md);
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-option{
  width: 100%; padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: left;
}
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-option:hover{ background: var(--surface-soft); color: var(--accent-dark); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-option.active{ background: var(--accent); color: #fff; font-weight: 700; }

:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-filter{ position:relative; flex:1 1 190px; min-width:0; max-width:280px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-trigger{ width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:linear-gradient(135deg,var(--surface),var(--surface-soft)); box-shadow:var(--shadow-sm); cursor:pointer; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-trigger span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-trigger b{ color:var(--accent); font-size:16px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-menu{ position:absolute; z-index:80; top:calc(100% + 7px); left:0; width:min(360px,calc(100vw - 42px)); max-height:320px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-md); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-option{ display:block; width:100%; padding:9px 11px; border:0; border-radius:9px; background:transparent; color:var(--ink); text-align:left; line-height:1.35; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-option:hover{ background:var(--surface-soft); color:var(--accent-dark); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-option.active{ background:var(--accent); color:#fff; font-weight:700; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tabs{ display:flex; gap:8px; margin:14px 0; padding:7px; overflow-x:auto; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.72); box-shadow:var(--shadow-sm); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab{ flex:1 0 105px; min-height:58px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab strong{ color:var(--accent); font-size:20px; line-height:1; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab span{ font-size:12px; font-weight:700; white-space:nowrap; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab:hover{ background:var(--surface-soft); color:var(--accent-dark); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab.active{ color:#fff; border-color:var(--accent); background:linear-gradient(135deg,var(--accent),#a855f7); box-shadow:0 6px 16px var(--nav-glow); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-stage-tab.active strong{ color:#fff; }

@media (max-width: 720px) {
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-templates{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-research-template{ min-height: 52px; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter{ width: 100%; justify-content: space-between; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-trigger{ flex: 1; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .owner-filter-menu{ left: 0; right: 0; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-filter{ width:100%; max-width:none; flex-basis:100%; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .lib-themed-menu{ width:100%; box-sizing:border-box; }
  :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .ai-phone-link:not(.compact){
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }
}


/* Customer outcome modal follows the main lavender theme. */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-card{ position:relative;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;box-sizing:border-box;margin:20px auto;padding:24px;color:var(--ink);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--surface),var(--surface-soft));box-shadow:var(--shadow-md); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-kicker{ margin-bottom:5px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-card h3{ margin:0 0 18px;font-size:21px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-select, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-input, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-note, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-referral-fields input{ width:100%;box-sizing:border-box;padding:11px 12px;color:var(--ink);border:1px solid var(--line);border-radius:11px;background:var(--surface);outline:none;font:inherit; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-select{ min-height:46px;margin:6px 0 14px;color:var(--ink);accent-color:var(--accent);cursor:pointer; } :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-input{ min-height:46px;margin:6px 0 14px; } :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-note{ min-height:106px;margin:6px 0 14px;resize:vertical; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-select:focus, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-input:focus, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-note:focus, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-referral-fields input:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--nav-glow); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-error{ margin:0 0 14px;padding:10px 12px;color:#b4233b;border:1px solid #f3c3cc;border-radius:10px;background:#fff1f3;font-size:13px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-error[hidden]{ display:none; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-actions .cm-btn:disabled{ opacity:.62;cursor:wait; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-referral-fields{ display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.58); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-referral-fields[hidden]{ display:none; } :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-actions{ display:flex;justify-content:flex-end;gap:9px; }
@media (max-width:520px) { :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-card{padding:20px 16px;border-radius:16px}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-referral-fields{grid-template-columns:1fr}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-modal-actions .cm-btn{min-height:44px;flex:1} }
/* 2026-09-06: bounded detail and email dialogs */
:where(body.production-sales-active) .modal-host, :where(body.production-sales-active) .modal-host .modal-card{ overflow-x: hidden; }
:where(body.production-sales-active) .modal-host .modal-card{ max-width: calc(100vw - 32px); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail{ width:min(980px,calc(100vw - 40px))!important; max-width:min(980px,calc(100vw - 40px))!important; max-height:calc(100dvh - 32px)!important; margin:0!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail *{ min-width:0; max-width:100%; overflow-wrap:anywhere; box-sizing:border-box; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal{ width:min(820px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); overflow:hidden; display:flex; flex-direction:column; background:#fff; border:1px solid #eadff5; border-radius:20px; box-shadow:0 22px 70px rgba(56,23,87,.22); }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal header{ display:flex; justify-content:space-between; gap:16px; padding:22px 24px 15px; background:linear-gradient(135deg,#fbf7ff,#f4faff); border-bottom:1px solid #eadff5; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal h2{ margin:9px 0 5px; font-size:20px; color:#24162f; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal p{ margin:0; color:#786d81; font-size:13px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-body{ padding:22px 24px; white-space:pre-wrap; line-height:1.75; overflow:auto; overflow-wrap:anywhere; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal footer{ display:flex; justify-content:flex-end; padding:12px 24px; border-top:1px solid #eadff5; background:#fff; }
@media(max-width:700px){:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail{width:100%!important;max-width:100%!important;max-height:100dvh!important;border-radius:16px 16px 0 0!important}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal{width:100%;max-height:96dvh;border-radius:18px 18px 0 0}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-modal header, :where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .email-content-body{padding-left:16px;padding-right:16px}}

/* Customer detail close stays visible at the top-right while its content scrolls. */
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .cust-detail .theme-modal-close{ position:sticky!important; z-index:30!important; top:10px!important; right:10px!important; float:right; margin:10px 10px -48px 0!important; box-shadow:0 6px 20px rgba(68,28,108,.18)!important; }

/* Dialogs must stay above the mobile navigation and sidebar. */
:where(body.production-sales-active) .overlay{ z-index:20000; }
:where(body.production-sales-active) .drawer{ z-index:20005; }
:where(body.production-sales-active) .modal-host{ z-index:20010; }
:where(body.production-sales-active) .toast{ z-index:20030; }

/* One bounded frame for all dialogs; only the body scrolls. */
:where(html:has(body.production-sales-active)).dialog-open{ overflow:hidden; }
:where(body.production-sales-active) #overlay{ background:transparent!important; }
:where(body.production-sales-active) #modal{ display:flex!important; position:fixed!important; inset:0!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; margin:0!important; padding:12px!important; box-sizing:border-box!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:var(--surface-soft,#f7f2fc)!important; }
:where(body.production-sales-active) #modal[hidden]{ display:none!important; }
:where(body.production-sales-active) #modal > .dialog-frame{ display:flex!important;flex-direction:column!important;width:100%!important;max-width:980px!important;max-height:100%!important;min-width:0!important;margin:0!important;overflow:hidden!important;border:1px solid var(--line);border-radius:20px;background:var(--surface,#fff);box-sizing:border-box; }
:where(body.production-sales-active) #modal .dialog-toolbar{ display:flex;justify-content:flex-end;flex:0 0 auto;padding:8px 12px;background:var(--surface-soft,#f7f2fc);border-bottom:1px solid var(--line); }
:where(body.production-sales-active) #modal .dialog-close{ width:40px;height:40px;flex:0 0 40px;border:1px solid #d8c6f0;border-radius:50%;background:white;color:#7132aa;font-size:26px;cursor:pointer; }
:where(body.production-sales-active) #modal .dialog-body{ display:block;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;max-width:100%; }
:where(body.production-sales-active) #modal .dialog-body > *, :where(body.production-sales-active) #modal .dialog-body .cust-detail, :where(body.production-sales-active) #modal .dialog-body .ct-modal, :where(body.production-sales-active) #modal .dialog-body .result-modal-card{ box-sizing:border-box!important;width:100%!important;max-width:100%!important;max-height:none!important;min-width:0!important;margin:0!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important; }
:where(body.production-sales-active) #modal .dialog-body .theme-modal-close, :where(body.production-sales-active) #modal .dialog-body .modal-x, :where(body.production-sales-active) #modal .dialog-body .ct-close{ display:none!important; }
:where(body.production-sales-active) #modal .dialog-body input, :where(body.production-sales-active) #modal .dialog-body textarea{ box-sizing:border-box;max-width:100%; }
:where(body.production-sales-active) #modal .dialog-body p, :where(body.production-sales-active) #modal .dialog-body .cm-card{ overflow-wrap:anywhere;min-width:0; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 18px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice{ display:flex;align-items:center;gap:8px;padding:11px;border:1px solid #dfd2ee;border-radius:12px;background:#faf7ff;cursor:pointer;font-size:14px; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice:has(input:checked){ background:#f0e5ff;border-color:#8b43d7;color:#7024b3; }
:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice input{ accent-color:#8134cc;flex:0 0 auto; }
@media(max-width:520px){:where(body.production-sales-active) #modal{padding:6px!important}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice-grid{grid-template-columns:1fr 1fr}:where(body.production-sales-active) :where(.production-sales-surface, #modal, #overlay) .result-choice{padding:9px;font-size:13px}}

/* Only host integration. All transplanted component styles come from served Production CSS. */
.production-sales-surface{font-family:inherit;min-width:0}.production-sales-surface .cm-page{max-width:none}.production-sales-surface .topbar{display:flex}.production-sales-surface .page-kicker{text-transform:uppercase}#modal[hidden],#overlay[hidden]{display:none!important}#modal{z-index:100020}#overlay{z-index:100019}.production-sales-surface .cm-table{width:100%}.production-sales-surface .lib-stage-tabs{overflow-x:auto}.production-sales-surface .lib-filter-panel{min-width:0}.production-sales-surface .asq-input{min-width:0}
.production-sales-surface,#modal{font-family:"Canva Sans",Circular,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#2d2d2d}.production-sales-surface{width:100%;max-width:1440px;margin-inline:auto}header.topbar[hidden]{display:none!important}

/* Served Production workspace grid and padding apply equally to both role scopes. */
@media(min-width:761px){body.production-sales-active .shell,body.production-sales-active .app-shell{grid-template-columns:260px minmax(0,1fr);min-width:0}body.production-sales-active .main{width:auto;min-width:0;margin:0;padding:28px;max-width:none}}

/* Production theme tokens and page canvas, active only on transplanted pages. */
body.production-sales-active{
  color-scheme: light;
  --ink: #2d2d2d;
  --muted: #737373;
  --soft: #9a8dae;
  --line: #e0d5f0;
  --surface: #ffffff;
  --surface-soft: #f5f0ff;
  --page: #f5f0ff;
  --nav: #ffffff;
  --nav-soft: #ede4ff;
  --accent: #7b2fbe;
  --accent-dark: #6b28a6;
  --cyan-soft: #e7fbfc;
  --purple: #7b2fbe;
  --magenta: #ff6b9d;
  --coral: #ff7043;
  --gold: #ffc857;
  --warning: #b86615;
  --danger: #b42318;
  --blue: #00c4cc;
  --grid-rgb: 123, 47, 190;
  --page-top: #ffffff;
  --page-end: #f5f0ff;
  --button-hover: #6b28a6;
  --nav-glow: rgba(123, 47, 190, 0.08);
  --brand-glow: rgba(123, 47, 190, 0.2);
  --shadow-sm: 0 2px 8px rgba(45, 45, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(45, 45, 45, 0.12);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  margin: 0;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 107, 157, 0.16), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(0, 196, 204, 0.16), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page) 55%, var(--page-end) 100%);
  background-size: auto;
  color: var(--ink);
  font-family:
    "Canva Sans", Circular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}
/* Remove only the pre-existing Admin table nowrap reset; Production controls its cells. */
body.production-sales-active .cm-table td{white-space:normal}

/* Preserve the served Production desktop table proportions inside the narrower
   local Admin/Sales shell. The table scrolls within its card instead of
   compressing company names and action buttons into vertical text. */
body.production-sales-active .production-sales-surface .desktop-customer-table{
  overflow-x:auto!important;
  overflow-y:hidden;
}
body.production-sales-active .production-sales-surface .desktop-customer-table .cm-table{
  width:1180px;
  min-width:1180px;
  table-layout:fixed;
}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(1){width:42px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(2){width:178px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(3){width:118px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(4){width:120px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(5){width:126px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(6){width:96px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(7){width:96px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(8){width:104px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(9){width:174px}
body.production-sales-active .production-sales-surface .desktop-customer-table th:nth-child(10){width:126px}
body.production-sales-active .production-sales-surface .desktop-customer-table td:nth-child(2) a{
  overflow-wrap:normal;
  word-break:normal;
}
body.production-sales-active .production-sales-surface .desktop-customer-table td:last-child{
  white-space:nowrap;
}

/* Exact served Production heading metrics, overriding the Admin host header reset. */
body.production-sales-active .production-page-hero h1{font-size:28px;line-height:1.18;margin:0;letter-spacing:0}

@media(max-width:680px){body.production-sales-active .production-page-hero h1{font-size:21px}body.production-sales-active .main{padding:10px}}

/* Same explicit test annotation in both role scopes, outside Production business DOM. */
.production-test-notice{margin:0 0 10px;border-radius:16px;padding:13px;background:#fff7f4;color:#7d3419;border:1px solid rgba(255,112,67,.24);font-size:12px}

/* The Sales host has inline navigation, not Production's drawer/appbar.
   Keep its existing menu reachable when the imported CSS collapses a drawer. */
@media(max-width:980px){
  .sales-shell{padding-top:0}
  .sales-shell>.sales-sidebar{position:relative;inset:auto;width:auto;height:auto;transform:none;overflow:visible;box-shadow:none}
  .sales-shell>.sales-sidebar #sales-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sales-shell>.sales-sidebar #sales-nav button{text-align:center;min-width:0}
}