:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --ink: #17202a;
  --muted: #627084;
  --line: #d8dee8;
  --accent: #0f7b6c;
  --accent-strong: #095f54;
  --warn: #a34500;
  --bad: #b42318;
  --good: #087443;
}

[hidden] { display: none !important; }


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ─── Login Page ─────────────────────────────────────────── */

.loginBody {
  min-height: 100vh;
  background: #F2EEE5;
  background-image:
    radial-gradient(ellipse 75% 55% at 38% -8%, rgba(79, 70, 229, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 88% 98%, rgba(99, 102, 241, 0.07) 0%, transparent 60%);
}

.loginShell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

.loginPanel {
  width: min(740px, 100%);
  background: #FDFCFB;
  border-radius: 18px;
  padding: 48px 46px 42px;
  box-shadow:
    0 0 0 1px rgba(20, 20, 60, 0.06),
    0 2px 6px rgba(20, 20, 60, 0.04),
    0 22px 60px rgba(20, 20, 60, 0.13);
  position: relative;
  overflow: hidden;
}

/* Top accent strip */
.loginPanel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3730A3 0%, #4F46E5 35%, #6366F1 65%, #4F46E5 100%);
  border-radius: 18px 18px 0 0;
}

/* Brand header */
.loginBrand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 32px;
}

.loginMark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(140deg, #4338CA 0%, #4F46E5 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(79, 70, 229, 0.32);
}

.loginPanel h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 720;
  color: #0f0f1e;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

#loginHint {
  margin: 5px 0 0;
  color: #64748B;
  font-size: 13px;
  line-height: 1.5;
}

/* SSO section */
.ssoBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ssoLabel {
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A3B8;
}

.ssoChoices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

/* Entry cards */
.ssoButton {
  position: relative;
  min-height: 56px;
  padding: 12px 36px 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #E5E0D5;
  border-radius: 12px;
  background: #FAF8F4;
  color: #1E2035;
  font-size: 14px;
  font-weight: 580;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s, transform 0.13s, color 0.14s;
  cursor: pointer;
}

/* Colored workbench icon block */
.ssoButton::before {
  content: "";
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #E0E7FF;
}

.ssoButton[data-workbench="visual"]::before      { background: #EDE9FE; }
.ssoButton[data-workbench="content"]::before     { background: #E0E7FF; }
.ssoButton[data-workbench="site"]::before        { background: #DBEAFE; }
.ssoButton[data-workbench="miniapp"]::before     { background: #EEF2FF; }
.ssoButton[data-workbench="amazon"]::before      { background: #EEE8DB; }
.ssoButton[data-workbench="walmart"]::before     { background: #E8EDFF; }
.ssoButton[data-workbench="tmall"]::before       { background: #E8E3D8; }
.ssoButton[data-workbench="tiktok"]::before      { background: #EDE9FE; }
.ssoButton[data-workbench="workflow"]::before    { background: #E0E7FF; }
.ssoButton[data-workbench="performance"]::before { background: #DBEAFE; }

/* Hover arrow */
.ssoButton::after {
  content: "›";
  position: absolute;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  color: #4F46E5;
  opacity: 0;
  transition: opacity 0.13s, transform 0.13s;
  transform: translateX(-4px);
}

.ssoButton:hover {
  border-color: rgba(79, 70, 229, 0.35);
  background: #F5F4FF;
  color: #3730A3;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.11);
  transform: translateY(-1px);
}

.ssoButton:hover::after {
  opacity: 0.65;
  transform: translateX(0);
}

.ssoButton[hidden] { display: none; }

.ssoButton.disabled {
  border-color: #E8E3D8;
  background: #F5F2EC;
  color: #B0AEAD;
  cursor: not-allowed;
}

.ssoButton.disabled::before { background: #E5E0D5; }

.ssoButton.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #E8E3D8;
  background: #F5F2EC;
  color: #B0AEAD;
}

#ssoNote {
  margin: 0;
  font-size: 12px;
  color: #A0A8B8;
  font-weight: 400;
}

/* Admin form */
.loginForm {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #EAE5DC;
  display: grid;
  gap: 13px;
}

.adminLoginTitle {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

.loginForm label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.loginForm input {
  min-height: 41px;
  padding: 8px 12px;
  border: 1.5px solid #E5E0D5;
  border-radius: 9px;
  background: #FFFFFF;
  color: #1E293B;
  transition: border-color 0.13s, box-shadow 0.13s;
}

.loginForm input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

.loginForm button {
  min-height: 42px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(140deg, #4338CA, #4F46E5);
  color: #ffffff;
  font-weight: 650;
  cursor: pointer;
  transition: opacity 0.13s, transform 0.13s, box-shadow 0.13s;
}

.loginForm button:hover {
  opacity: 0.90;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.24);
}

.loginForm button:disabled {
  background: #A5A3C0;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

#logoutButton {
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 650;
  cursor: pointer;
  transition: opacity 0.13s;
}

#logoutButton:hover { opacity: 0.88; }

#loginStatus {
  min-height: 17px;
  font-size: 13px;
  color: var(--bad);
}

@media (max-width: 600px) {
  .loginShell {
    padding: 16px;
    align-items: flex-start;
  }
  .loginPanel {
    padding: 36px 22px 30px;
    border-radius: 14px;
  }
  .loginBrand { gap: 12px; margin-bottom: 24px; }
  .loginMark  { width: 42px; height: 42px; font-size: 12px; border-radius: 11px; }
  .loginPanel h1 { font-size: 20px; }
  .ssoChoices { grid-template-columns: 1fr; }
}

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

.appShell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.appHeader {
  min-height: 72px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.viewNav,
.filterBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.viewTab,
.ghostButton {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: #324154;
  font-weight: 700;
  cursor: pointer;
}

.viewTab {
  min-width: 76px;
}

.viewTab.active {
  border-color: var(--accent);
  background: #eefaf7;
  color: var(--accent-strong);
}

.ghostButton {
  padding: 0 14px;
  color: var(--accent-strong);
}

.appView {
  display: none;
}

.appView.active {
  display: block;
}

#brandPortalView.active {
  display: block;
}

#creatorView.active {
  flex: 1;
  display: grid;
  grid-template-columns: var(--creator-left, minmax(520px, 0.95fr)) 5px minmax(380px, 1fr);
  gap: 0;
}

#opsWorkbenchView.active {
  flex: 1;
  display: grid;
  grid-template-columns: var(--ops-left, minmax(520px, 0.95fr)) 5px minmax(380px, 1fr);
  gap: 0;
}

.workspace,
.results {
  padding: 24px;
}

.workspace {
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.topbar,
.panelTitle,
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.accessProof {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  border: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto minmax(160px, 1fr);
  gap: 10px;
  align-items: end;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.2;
}

h2 {
  font-size: 18px;
}

.brandPortalView {
  padding: 28px 24px 36px;
}

.brandPortalHeader {
  min-height: 142px;
  margin: 0 auto 18px;
  max-width: 1180px;
  padding: 24px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 16px 36px rgba(25, 35, 52, 0.07);
}

.sectionKicker {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #d8e2ea;
  border-radius: 999px;
  background: #f7fafc;
  color: #536376;
  font-size: 12px;
  font-weight: 850;
}

.brandPortalHeader h1 {
  margin-top: 12px;
  font-size: 30px;
}

.brandPortalHeader p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.brandPortalMeta {
  min-width: 172px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 6px;
}

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

.brandPortalMeta strong {
  color: #203040;
  font-size: 18px;
  line-height: 1.2;
}

.portalGrid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.portalCard {
  --card-accent: #0f7b6c;
  --card-soft: #eef8f6;
  min-height: 166px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 22px rgba(21, 31, 44, 0.05);
}

.portalCard:nth-child(2) {
  --card-accent: #536dfe;
  --card-soft: #f0f3ff;
}

.portalCard:nth-child(3) {
  --card-accent: #2764b2;
  --card-soft: #edf4fc;
}

.portalCard:nth-child(4) {
  --card-accent: #b35c00;
  --card-soft: #fff4e8;
}

.portalCard:nth-child(5) {
  --card-accent: #255b7f;
  --card-soft: #eef6fa;
}

.portalCard:nth-child(6) {
  --card-accent: #a23b72;
  --card-soft: #fff0f7;
}

.portalCard:nth-child(7) {
  --card-accent: #7a5c12;
  --card-soft: #fbf6e6;
}

.portalCard:nth-child(8) {
  --card-accent: #4c6878;
  --card-soft: #f1f5f7;
}

.portalCard:hover,
.portalCard:focus-visible {
  border-color: var(--card-accent);
  box-shadow: 0 14px 32px rgba(16, 30, 48, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.portalCard.disabled {
  border-style: dashed;
  background: #f8fafc;
  color: #7b8794;
}

.portalCard.disabled:hover,
.portalCard.disabled:focus-visible {
  border-color: var(--line);
  box-shadow: none;
}

.cardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cardTop i {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--card-soft);
  color: var(--card-accent);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.cardTop b {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f5f7fa;
  color: #5b6878;
  font-size: 12px;
  font-weight: 850;
}

.portalCard strong {
  min-height: 30px;
  font-size: 20px;
  line-height: 1.25;
}

.portalCard em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.opsWorkbenchView .workspace {
  min-height: calc(100vh - 136px);
}

.creatorEntryGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.creatorEntryGrid span {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #2f3d4c;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.hiddenField {
  display: none;
}

.opsForm textarea {
  min-height: 180px;
}

.amazonKeepaPanel {
  margin-top: 16px;
}

.amazonKeepaPanel[hidden] {
  display: none;
}

.amazonKeepaPanel .panelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.amazonKeepaPanel .panelTitle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.keepaGrid {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, max-content);
  gap: 12px;
  align-items: end;
}

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

.keepaGrid textarea {
  min-height: 82px;
  resize: vertical;
}

.keepaGrid textarea,
.keepaGrid select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.keepaGrid textarea {
  padding: 10px 12px;
}

.keepaGrid select {
  min-height: 42px;
  padding: 0 10px;
}

.keepaActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 8px;
  align-items: center;
  min-width: 220px;
}

.keepaActions button {
  width: 100%;
  min-width: 104px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.keepaActions button + button {
  background: #fff;
  color: var(--accent-strong);
}

.keepaActions button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: wait;
}

.keepaTableWrap {
  border-top: 1px solid var(--line);
}

.keepaTableWrap td:nth-child(2) {
  min-width: 260px;
}

.amazonDataPanel {
  margin-top: 16px;
}

.amazonDataPanel[hidden] {
  display: none;
}

.amazonDataPanel .panelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.amazonDataPanel .panelTitle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.amazonDataToolbar {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(120px, 0.18fr) minmax(120px, 0.16fr) repeat(3, auto);
  gap: 10px;
  align-items: end;
}

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

.amazonDataToolbar select {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 0 10px;
}

.amazonDataToolbar button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.amazonDataToolbar button:first-of-type {
  background: var(--accent);
  color: #fff;
}

.amazonDataToolbar button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: wait;
}

.amazonMetricGrid {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.metricCard {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  align-content: center;
  gap: 4px;
}

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

.metricCard strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.amazonDataTabs {
  padding: 0 14px 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.amazonDataTab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  padding: 0 12px;
  cursor: pointer;
}

.amazonDataTab.active {
  border-color: var(--accent);
  background: #eefaf7;
  color: var(--accent-strong);
}

.amazonDataTableWrap {
  border-top: 1px solid var(--line);
}

.amazonDataTableWrap td:first-child,
.amazonDataTableWrap th:first-child {
  min-width: 140px;
}

.amazonDataTableWrap td {
  max-width: 420px;
}

.brandWorkflowView {
  overflow: auto;
}

.workflowPage {
  min-height: 100%;
  background: #f6f8fb;
}

.workflowChannelNote {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  min-width: 260px;
}

.workflowChannelNote strong {
  color: var(--accent-strong);
  font-size: 14px;
}

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

.workflowLayout {
  padding: 16px 24px 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(360px, 1.14fr);
  gap: 16px;
}

.workflowFormPanel,
.workflowListPanel,
.workflowPendingPanel,
.workflowDetailPanel {
  background: #fff;
}

.workflowFormPanel .panelTitle,
.workflowListPanel .panelTitle,
.workflowPendingPanel .panelTitle,
.workflowDetailPanel .panelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflowFormPanel .panelTitle span,
.workflowListPanel .panelTitle span,
.workflowPendingPanel .panelTitle span,
.workflowDetailPanel .panelTitle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workflowFormGrid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

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

.workflowFormGrid input,
.workflowFormGrid select,
.workflowFormGrid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.workflowFormGrid input,
.workflowFormGrid select {
  min-height: 40px;
  padding: 0 10px;
}

.workflowFormGrid textarea {
  min-height: 100px;
  resize: vertical;
  padding: 10px 12px;
}

.workflowFormGrid button,
.workflowStageActions button,
.workflowPendingActions button {
  min-height: 38px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 850;
  cursor: pointer;
}

.workflowFormGrid button:first-child {
  background: var(--accent);
  color: #fff;
}

.workflowFormGrid button:disabled,
.workflowStageActions button:disabled,
.workflowPendingActions button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: wait;
}

.workflowFilters {
  padding: 12px 14px 0;
  display: flex;
  gap: 8px;
}

.workflowScopeButton {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  padding: 0 12px;
  cursor: pointer;
}

.workflowScopeButton.active {
  border-color: var(--accent);
  background: #eefaf7;
  color: var(--accent-strong);
}

.workflowRows {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.workflowRow {
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.workflowRow.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 123, 108, 0.08);
}

.workflowRow strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.workflowRow span,
.workflowRow em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.workflowRow em {
  justify-self: end;
  align-self: center;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 850;
}

.workflowRow em.good,
.workflowStage.good .workflowStageMeta b {
  background: #ecfdf5;
  color: #047857;
}

.workflowRow em.warn,
.workflowStage.warn .workflowStageMeta b {
  background: #fff7ed;
  color: #c2410c;
}

.workflowRow em.bad {
  background: #fef2f2;
  color: #b91c1c;
}

.workflowPendingPanel {
  margin: 16px 24px 0;
}

.workflowPendingRows {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.workflowPendingRow {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.26fr) auto;
  gap: 12px;
  align-items: center;
}

.workflowPendingRow.warn {
  border-color: #fed7aa;
  background: #fffaf5;
}

.workflowPendingRow.good {
  border-color: #bbf7d0;
}

.workflowPendingMain {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflowPendingMain strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.workflowPendingMain span,
.workflowPendingMain em,
.workflowPendingMeta span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.workflowPendingMain em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflowPendingMeta {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.workflowPendingMeta b {
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  padding: 5px 8px;
}

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

.workflowDetailPanel {
  margin: 16px 24px 24px;
}

.workflowStages {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.workflowStage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.26fr) auto;
  gap: 12px;
  align-items: center;
}

.workflowStage.warn {
  border-color: #fed7aa;
}

.workflowStage.good {
  border-color: #bbf7d0;
}

.workflowStageMain {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.workflowStageMain > span {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.workflowStageMain strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.workflowStageMain em,
.workflowStageMeta span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.workflowStageMeta {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.workflowStageMeta b {
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  padding: 5px 8px;
}

.workflowStageActions {
  display: flex;
  gap: 8px;
}

.workflowStageActions:empty {
  display: none;
}

.workflowEmpty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  padding: 18px;
  font-weight: 800;
}

.handoffPanel {
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.handoffPanel[hidden] {
  display: none;
}

.handoffPanel > div:first-child {
  display: grid;
  gap: 3px;
}

.handoffPanel strong {
  color: var(--ink);
  font-size: 14px;
}

.handoffPanel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.handoffActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.handoffSelectLabel {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.handoffSelectLabel select {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.handoffActions button {
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 850;
  padding: 0 10px;
  cursor: pointer;
}

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

.pageTitle {
  padding: 22px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pageTitle p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.clientTools {
  min-width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto auto;
  align-items: end;
  gap: 8px;
}

.clientTools label {
  min-width: 160px;
}

.clientTools button {
  min-height: 38px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 800;
  cursor: pointer;
}

.clientTools button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: wait;
}

.clientTools span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}



.clientDevSubNav {
  margin: 16px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.clientDevSubTab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.clientDevSubTab.active {
  background: var(--surface);
  color: var(--accent-strong);
  border-color: var(--accent);
}

.clientDevSubPanel[hidden] {
  display: none;
}

.prospectPoolTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.prospectPoolTitle p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.prospectPoolToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.prospectPoolFilters {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

.prospectPoolFilters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.prospectPoolFilters input,
.prospectPoolFilters select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
}

.prospectPoolPager {
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.prospectPoolPager button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 800;
  cursor: pointer;
}

.prospectPoolPager button:disabled,
.prospectActions button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

.prospectTeamSummary {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.compactMetric {
  min-height: 72px;
}

.prospectTeamDetailWrap {
  border-top: 1px solid var(--line);
}

.mutedRow {
  opacity: .72;
}

.prospectForm {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.prospectForm textarea {
  min-height: 78px;
}

.prospectForm button {
  min-height: 38px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

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

.prospectTableWrap {
  border-top: 1px solid var(--line);
}

.prospectTableWrap table {
  min-width: 1160px;
}

.prospectMetaStack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 104px;
}

.prospectMetaStack small {
  color: var(--muted);
  line-height: 1.35;
}

.prospectMapCell,
.prospectGradeCell,
.prospectContactCell,
.prospectRiskTags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.prospectMapCell small,
.prospectGradeCell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.prospectGradePill {
  white-space: nowrap;
  font-weight: 800;
}

.fitScoreGrid {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  gap: 4px;
  align-items: center;
}

.fitScoreCell {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #12302b;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(15, 23, 42, .08);
}

.fitScoreCell.score-1 { background: #f1f5f9; color: #64748b; }
.fitScoreCell.score-2 { background: #fef3c7; color: #92400e; }
.fitScoreCell.score-3 { background: #dbeafe; color: #1d4ed8; }
.fitScoreCell.score-4 { background: #bbf7d0; color: #166534; }
.fitScoreCell.score-5 { background: #5eead4; color: #134e4a; }

.prospectInlineDetails {
  margin-top: 2px;
  max-width: 280px;
}

.prospectInlineDetails summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

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

.prospectRawOutput {
  min-height: 96px;
  max-height: 220px;
  margin: 12px 14px 14px;
}

#connectionText,
#proofText {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

#connectionText.ok {
  color: var(--good);
}

#connectionText.bad {
  color: var(--bad);
}

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

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: #2d3746;
  font-size: 13px;
  font-weight: 650;
}

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

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: #fbfcfe;
  color: var(--ink);
  outline: none;
}

textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.13);
}

.actions {
  justify-content: flex-start;
  margin-top: 4px;
}

#proofButton {
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 700;
  cursor: pointer;
}

#logoutButton {
  background: #ffffff;
  color: var(--accent-strong);
}

.results {
  overflow: auto;
}

.metricGrid {
  padding: 18px 24px 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.metricCard {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.metricCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metricCard strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.metricCard em {
  color: var(--good);
  font-size: 12px;
  font-style: normal;
}

.splitLayout {
  padding: 18px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
  gap: 16px;
}

.workPanel {
  margin: 18px 24px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.splitLayout .workPanel {
  margin: 0;
}

.workPanel .panelTitle {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.stageBoard {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.stageColumn {
  min-height: 260px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.stageColumn h3 {
  margin: 0 0 10px;
  color: #2d3746;
  font-size: 13px;
}

.paginationBar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.paginationBar button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.paginationBar button:disabled {
  background: #eef2f6;
  color: #94a3b8;
  cursor: not-allowed;
}

.stagePager {
  margin: -2px 0 9px;
  flex-wrap: wrap;
}

.tablePager {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.clientMiniCard,
.actionItem {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.clientMiniCard {
  cursor: pointer;
}

.clientMiniCard:focus,
.clientMiniCard:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.1);
  outline: none;
}

.clientMiniCard + .clientMiniCard,
.actionItem + .actionItem {
  margin-top: 8px;
}

.clientMiniCard strong,
.actionItem strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clientMiniCard .clientIndex {
  display: inline;
  margin: 0 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.clientMiniCard span,
.actionItem span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.actionList {
  padding: 12px;
  max-height: 368px;
  overflow: auto;
}

.clientDetailPanel {
  padding: 14px;
  display: grid;
  gap: 14px;
}

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

.clientDetailHeader h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.clientDetailHeader p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.clientFacts div {
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.clientFacts span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.clientFacts strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.clientProgress {
  padding: 10px;
  border: 1px solid #d7ebdf;
  border-radius: 8px;
  background: #f2fbf6;
  color: #254333;
  font-size: 13px;
  line-height: 1.45;
}

.advisorEntryBox {
  padding: 10px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  gap: 8px;
}

.advisorEntryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.advisorEntryActions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.advisorEntryActions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.advisorEntryActions button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

.advisorEntryBox p {
  color: #254333;
  font-size: 13px;
  line-height: 1.45;
}

.emailTrackBox {
  padding: 10px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  gap: 7px;
}

.emailTrackTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.emailTrackTitle strong {
  font-size: 13px;
}

.emailTrackBox p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.reassignBox {
  padding: 10px;
  border: 1px solid #eadfc8;
  border-radius: 8px;
  background: #fffaf0;
  display: grid;
  gap: 8px;
}

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

.reassignControls {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.reassignControls input,
.reassignControls select {
  min-height: 36px;
}

.reassignControls button {
  min-height: 36px;
  border: 1px solid #b7791f;
  border-radius: 8px;
  background: #fff4da;
  color: #7c4a03;
  font-weight: 800;
  cursor: pointer;
}

.reassignControls button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

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

.quickActions button,
.instructionBox button,
.rowAction {
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 800;
  cursor: pointer;
}

.quickActions button:disabled,
.instructionBox button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

.instructionBox {
  display: grid;
  gap: 8px;
}

.attachmentBox {
  padding: 10px;
  border: 1px solid #dce8ef;
  border-radius: 8px;
  background: #f8fbfd;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.attachmentBox > strong,
.attachmentBox > span {
  grid-column: 1 / -1;
}

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

.attachmentBox textarea {
  min-height: 68px;
}

.instructionBox textarea {
  min-height: 96px;
}

.instructionBox button {
  width: 132px;
}

.instructionOutput {
  min-height: 120px;
  max-height: 360px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #243447;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.agentResultBox {
  display: grid;
  gap: 10px;
  max-height: none;
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
}

.agentResultText {
  min-height: 78px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.agentResultWarning {
  padding: 8px 10px;
  border: 1px solid #f7c66f;
  border-radius: 8px;
  background: #fff7e6;
  color: #8a4b00;
  font-size: 12px;
  font-weight: 800;
}

.agentDebugDetails {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.agentDebugDetails summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agentDebugOutput {
  max-height: 280px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  color: #dbeafe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.prospectForm .instructionOutput {
  min-height: 180px;
}

.instructionStatus {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.confirmActionBox {
  padding: 10px;
  border: 1px solid #d7ebdf;
  border-radius: 8px;
  background: #f4fbf7;
  display: grid;
  gap: 8px;
}

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

.confirmControls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.7fr) auto;
  gap: 8px;
  align-items: center;
}

.confirmControls select,
.confirmControls input {
  min-height: 36px;
}

.confirmControls button {
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.confirmControls button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

.confirmActionBox textarea {
  min-height: 74px;
}

.rowAction {
  min-width: 78px;
  min-height: 32px;
  padding: 0 9px;
  font-size: 12px;
}

.selectedRow {
  background: #f3fbf8;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #39475a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tag.warn {
  background: #fff4e5;
  color: var(--warn);
}

.tag.good {
  background: #eaf8f1;
  color: var(--good);
}

.tag.bad {
  background: #feeceb;
  color: var(--bad);
}

.tableWrap {
  overflow: auto;
}

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

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

td strong {
  display: block;
  margin-bottom: 3px;
}

td small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.dialogOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialogOverlay[hidden] {
  display: none;
}

.advisorDialog {
  width: min(940px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  overflow: hidden;
}

.advisorDialogHeader {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.advisorDialogHeader h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.advisorDialogHeader p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.iconButton {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.advisorMessages {
  padding: 14px;
  overflow: auto;
  background: #f8fafc;
  display: grid;
  gap: 10px;
  align-content: start;
}

.advisorMessage {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.advisorMessage.user {
  justify-self: end;
  background: #eefaf7;
  border-color: #bfe5dc;
}

.advisorMessage strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 12px;
}

.advisorMessage p {
  white-space: pre-wrap;
  color: #243447;
  font-size: 13px;
  line-height: 1.45;
}

.advisorForm {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}

.advisorForm textarea {
  min-height: 86px;
  resize: vertical;
}

.advisorActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.advisorActions button {
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-weight: 800;
  cursor: pointer;
}

.advisorActions button:disabled {
  border-color: var(--line);
  background: #eef2f6;
  color: #8a97a8;
  cursor: not-allowed;
}

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

.pipelineBars {
  padding: 14px;
  display: grid;
  gap: 13px;
}

.pipelineRow {
  display: grid;
  grid-template-columns: 84px 1fr 36px;
  align-items: center;
  gap: 10px;
  color: #344256;
  font-size: 13px;
  font-weight: 700;
}

.barTrack {
  height: 10px;
  border-radius: 999px;
  background: #e8edf4;
  overflow: hidden;
}

.barFill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

#agentSubmitButton {
  min-width: 140px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #315c9f;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

#agentSubmitButton:disabled {
  background: #9aa8b5;
  cursor: wait;
}

.imageDropZone {
  position: relative;
  min-height: 112px;
  border: 1px dashed #aab6c5;
  border-radius: 8px;
  background: #fbfcfe;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.imageDropZone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.imageDropZone:focus,
.imageDropZone.dragging {
  border-color: var(--accent);
  background: #eefaf7;
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.13);
}

.dropText {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 500;
}

.dropText strong {
  color: var(--accent-strong);
  font-size: 15px;
}

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

.imagePreviewList.hasImages {
  display: grid;
}

.imagePreviewItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  min-width: 0;
}

.imagePreviewItem img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eef2f6;
}

.videoPreviewItem video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #101828;
}

.imagePreviewMeta {
  padding: 8px;
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.imagePreviewMeta strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imagePreviewItem button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  color: var(--bad);
  font-weight: 700;
  cursor: pointer;
}

.agentOutput {
  min-height: 120px;
  max-height: 280px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
}

.agentResultPanel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.agentResultPanel[hidden] {
  display: none;
}

.resultPanelHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
  color: var(--ink);
}

.resultPanelHeading strong {
  font-size: 15px;
}

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

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

.resultAssetCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.resultAssetCard img,
.resultAssetCard video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #101828;
}

.resultAssetCard.image img {
  aspect-ratio: 1 / 1;
  background: #eef2f6;
}

.resultAssetMeta {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.resultAssetMeta strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultAssetMeta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultAssetActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resultAssetActions a {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(15, 123, 108, 0.28);
  border-radius: 6px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.resultItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.resultItem img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #eef2f6;
}

.resultMeta {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.resultMeta a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
}

.emptyState {
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.65);
}

@media (max-width: 980px) {
  .appHeader,
  .pageTitle {
    align-items: stretch;
    flex-direction: column;
  }

  .viewNav,
  .filterBar {
    overflow-x: auto;
  }

  #creatorView.active,
  #opsWorkbenchView.active,
  .splitLayout {
    grid-template-columns: 1fr;
  }

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

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

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

  .workspace {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .formGrid {
    grid-template-columns: 1fr;
  }

  .clientTools,
  .reassignControls,
  .prospectForm {
    grid-template-columns: 1fr;
  }

  .accessProof {
    grid-template-columns: 1fr;
  }

  .agentForm {
    grid-template-columns: 1fr;
  }

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

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

  .stageBoard {
    grid-template-columns: repeat(5, 220px);
  }

  .portalGrid {
    grid-template-columns: 1fr;
  }

  .brandPortalHeader {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .brandPortalHeader h1 {
    font-size: 26px;
  }

  .brandPortalMeta {
    min-width: 0;
  }

  .creatorEntryGrid {
    grid-template-columns: 1fr;
  }

  .brandPortalView,
  .workspace,
  .results {
    padding: 16px;
  }
}

/* ─── 品牌视觉中心：任务入口选择器 ───────────────────────────────────────── */
.creatorTaskSelector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 4px;
}

.creatorTaskCard {
  min-height: 90px;
  padding: 14px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.creatorTaskCard:nth-child(1) { --ct: #6366f1; --ct-soft: #f5f3ff; --ct-ring: rgba(99,102,241,0.18); }
.creatorTaskCard:nth-child(2) { --ct: #0f7b6c; --ct-soft: #eefaf7; --ct-ring: rgba(15,123,108,0.16); }
.creatorTaskCard:nth-child(3) { --ct: #a13d63; --ct-soft: #fff1f5; --ct-ring: rgba(161,61,99,0.16); }
.creatorTaskCard:nth-child(4) { --ct: #b35c00; --ct-soft: #fff4e8; --ct-ring: rgba(179,92,0,0.16); }
.creatorTaskCard:nth-child(5) { --ct: #2764b2; --ct-soft: #edf4fc; --ct-ring: rgba(39,100,178,0.16); }

.creatorTaskCard:hover {
  border-color: var(--ct);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.creatorTaskCard.active {
  border-color: var(--ct);
  background: var(--ct-soft);
  box-shadow: 0 0 0 3px var(--ct-ring);
}

.ctIcon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.creatorTaskCard strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.creatorTaskCard em {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  line-height: 1.35;
}

/* ─── 创作子面板 ──────────────────────────────────────────────────────────── */
.creatorSubPanel[hidden] { display: none; }

/* ─── 上传数量提示 ────────────────────────────────────────────────────────── */
.uploadCountHint {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}
.uploadCountHint.ok  { color: var(--good); }
.uploadCountHint.warn { color: var(--warn); }
.uploadCountHint.bad  { color: var(--bad); }

/* ─── LoRA 状态面板 ───────────────────────────────────────────────────────── */
.loraStatusPanel { margin-top: 20px; }

.loraStatusBar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loraStatusBar button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #eefaf7;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.loraStatusBar button:hover { background: #d9f5ef; }

.mutedText {
  font-size: 12px;
  color: var(--muted);
}

.tableEmpty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0 !important;
}

/* ─── 响应式：创作任务选择器 ─────────────────────────────────────────────── */
@media (max-width: 800px) {
  .creatorTaskSelector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .creatorTaskSelector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── 客户开发中心 Portal ────────────────────────────────────────────────── */
.clientDevPortalGrid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 800px) {
  .clientDevPortalGrid {
    grid-template-columns: 1fr;
  }
}

/* ─── 网站建设板块 ─────────────────────────────────────────────────────────── */
.siteBuilderPanel {
  margin: 16px 0 8px; padding: 16px 18px; border: 1px solid #cfe3dc;
  border-radius: 12px; background: linear-gradient(120deg, #f2fbf7, #eef6ff);
}
.siteBuilderHead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.siteBuilderHead strong { font-size: 15px; color: #1f3a34; }
.siteBuilderHead span { font-size: 12px; color: #5c6f68; }
.siteBuilderRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.siteBuilderRow select { min-height: 38px; min-width: 260px; padding: 0 10px; border: 1px solid #c4d2cd; border-radius: 8px; background: #fff; font: inherit; }
.siteBuilderRow #sitePreviewBuild { min-height: 38px; }
.siteBuilderLink { font-weight: 700; color: #0b766e; }
.siteBuilderStatus { color: #5c6f68; font-size: 12px; }
.siteContentEditor { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #c4d9d1; }
.siteAiBox { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #b9d9ff; border-radius: 10px; background: #f2f8ff; }
.siteAiBox > strong { display: block; font-size: 13px; color: #14507f; margin-bottom: 8px; }
.siteAiRow { display: flex; gap: 8px; align-items: flex-start; }
.siteAiRow textarea { flex: 1; min-height: 46px; padding: 7px 9px; border: 1px solid #b9cde0; border-radius: 8px; font: inherit; resize: vertical; }
.siteAiRow button { white-space: nowrap; }
.sceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.sceGrid label { display: grid; gap: 4px; font-size: 12px; color: #46564f; }
.sceGrid label.wide { grid-column: 1 / -1; }
.sceGrid input, .sceGrid textarea { padding: 7px 9px; border: 1px solid #c4d2cd; border-radius: 7px; font: inherit; background: #fff; }
.scePages { margin-top: 12px; }
.scePagesHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.scePagesHead strong { font-size: 13px; color: #33474f; }
.scePageRow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.scePageRow textarea { grid-column: 1 / -1; padding: 6px 8px; border: 1px solid #c4d2cd; border-radius: 7px; font: inherit; }
.scePageRow input { padding: 6px 8px; border: 1px solid #c4d2cd; border-radius: 7px; font: inherit; }
.sceActions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
@media (max-width: 720px) { .sceGrid { grid-template-columns: 1fr; } }

.siteTaskSelector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 24px;
}
.siteTaskCard {
  min-height: 80px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.siteTaskCard:nth-child(1) { --st: #6366f1; --st-soft: #f5f3ff; }
.siteTaskCard:nth-child(2) { --st: #0f7b6c; --st-soft: #eefaf7; }
.siteTaskCard:nth-child(3) { --st: #b35c00; --st-soft: #fff4e8; }
.siteTaskCard:nth-child(4) { --st: #2764b2; --st-soft: #edf4fc; }
.siteTaskCard.active {
  border-color: var(--st);
  background: var(--st-soft);
  color: var(--st);
}
.siteTaskCard:hover:not(.active) { border-color: var(--st); }

.reqTagGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}
.reqTag {
  padding: 5px 12px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}
.reqTag:hover { border-color: var(--accent); color: var(--accent); }
.reqTag.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
@media (max-width: 800px) {
  .siteTaskSelector { grid-template-columns: repeat(2, 1fr); }
  .clientDevPortalGrid { grid-template-columns: repeat(2, 1fr); }
  .keepaGrid {
    grid-template-columns: 1fr;
  }
  .keepaActions {
    align-items: stretch;
  }
  .keepaActions button {
    flex: 1;
  }
}

/* ─── 绩效看板板块选择器 ────────────────────────────────────────────────── */
.perfBoardSelector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}
.perfBoardChip {
  padding: 5px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.perfBoardChip.active {
  border-color: var(--accent, #2764b2);
  background: var(--accent, #2764b2);
  color: #fff;
}
.perfBoardChip:hover:not(.active) {
  border-color: var(--accent, #2764b2);
  color: var(--accent, #2764b2);
}
.clientDevDomain .perfBoardSelector { display: none; }

/* ─── API 费用管理视图 ──────────────────────────────────────────────────── */
.adminView .pageTitle { margin-bottom: 8px; }

.apiCostTableWrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.apiCostTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--card);
}
.apiCostTable th {
  background: var(--header, #f3f4f6);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.apiCostTable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.apiCostTable tr:last-child td { border-bottom: none; }
.apiCostTable tr.apiCostRow:hover td { background: var(--hover, rgba(0,0,0,.03)); }

.apiCostCategoryBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.apiCostTypeBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.apiCostTypeBadge.statusGood { background: rgba(34,197,94,.12); color: #15803d; }
.apiCostTypeBadge.statusWarn { background: rgba(234,179,8,.12); color: #a16207; }
.apiCostTypeBadge.statusInfo { background: rgba(59,130,246,.12); color: #1d4ed8; }
.apiCostTypeBadge:not(.statusGood):not(.statusWarn):not(.statusInfo) { background: var(--line); color: var(--text); }

.apiKeyHint {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  background: var(--bg, #f8f9fa);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.apiCostActions { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.apiActionBtn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}
.apiActionBtn:hover { opacity: .75; }
.apiActionBtn.billing { background: var(--accent, #2764b2); color: #fff; }
.apiActionBtn.console { background: var(--line); color: var(--text); }

/* ─── 管理控制台内部 tab ────────────────────────────────────────────────── */
.adminInnerTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0;
}
.adminInnerTab {
  padding: 7px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.adminInnerTab.active { color: var(--accent, #2764b2); border-bottom-color: var(--accent, #2764b2); }
.adminInnerTab:hover:not(.active) { color: var(--text); }

.adminPanel { display: none; }
.adminPanel.active { display: block; }

/* ─── 服务状态卡片 ─────────────────────────────────────────────────────── */
.serviceStatusGrid { display: flex; flex-direction: column; gap: 20px; }
.svcGroup { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.svcGroupLabel {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--header, #f3f4f6);
  border-bottom: 1px solid var(--line);
}
.svcCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.svcCard:last-child { border-bottom: none; }
.svcCard.inactive { background: rgba(239,68,68,.03); }
.svcCardInfo { display: flex; flex-direction: column; gap: 2px; }
.svcCardInfo strong { font-size: 13px; }
.svcId { font-size: 11px; color: var(--muted); font-family: monospace; }
.svcCardRight { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.svcStatus {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: monospace;
}
.svcStatus.active { background: rgba(34,197,94,.12); color: #15803d; }
.svcStatus.inactive { background: rgba(239,68,68,.12); color: #b91c1c; }
.svcRestartBtn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--accent, #2764b2);
  background: transparent;
  color: var(--accent, #2764b2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.svcRestartBtn:hover:not(:disabled) { background: var(--accent, #2764b2); color: #fff; }
.svcRestartBtn:disabled { opacity: .5; cursor: default; }

/* ─── 到期日颜色与编辑 ──────────────────────────────────────────────────── */
.expiryDanger  { color: #dc2626; font-weight: 600; }
.expiryWarn    { color: #d97706; font-weight: 600; }
.expiryCaution { color: #ca8a04; }
.expiryOk      { color: #16a34a; }
.expirySubscription { color: var(--muted); font-style: italic; }

.expiryCell { position: relative; min-width: 180px; }
.expiryText { font-size: 12px; }
.expiryEditBtn {
  margin-left: 4px;
  background: none;
  border: none;
  font-size: 11px;
  opacity: 0;
  cursor: pointer;
  color: var(--muted);
  vertical-align: middle;
  transition: opacity .15s;
  padding: 1px 3px;
}
.expiryCell:hover .expiryEditBtn { opacity: 1; }
.expiryEditForm {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.expiryEditForm input { font-size: 12px !important; }
.expiryEditForm button {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.expiryEditForm .expirySaveBtn {
  background: var(--accent, #2764b2);
  color: #fff;
  border-color: transparent;
}

/* ── Panel resizer (drag divider between workspace & results) ── */
.panelResizer {
  width: 5px;
  background: var(--line);
  cursor: col-resize;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  transition: background 0.15s;
  user-select: none;
}
.panelResizer::after {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
.panelResizer:hover,
.panelResizer.dragging {
  background: var(--accent, #2764b2);
}

/* ── Table column resizer ── */
th {
  position: relative;
}
.colResizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
}
.colResizer::after {
  content: '';
  position: absolute;
  inset: 20% 1px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: background 0.15s;
}
.colResizer:hover::after,
.colResizer.dragging::after {
  background: var(--accent, #2764b2);
}
table.resizable-cols th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.resizable-cols td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Agent route hint (auto → resolved agent name) ── */
.agentRouteHint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent, #2764b2);
  font-family: monospace;
  min-height: 16px;
}

/* ── Staff section (brand portal team roster) ── */
.staffSection {
  width: min(1180px, 100%);
  margin: 24px auto 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.staffSectionHeader {
  margin-bottom: 14px;
}
.staffSectionLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.staffGrid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.staffCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  position: relative;
}
.staffAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--staff-color) 15%, #fff);
  color: var(--staff-color);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}
.staffInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.staffInfo strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.staffInfo span {
  font-size: 11px;
  color: var(--muted);
}
.staffDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: absolute;
  top: 10px;
  right: 12px;
  box-shadow: 0 0 0 2px var(--bg);
}

.agenticCrmView {
  display: none;
  gap: 16px;
}
.agenticCrmView.active {
  display: flex;
  flex-direction: column;
}
.crmPageTitle {
  align-items: flex-end;
}
.crmMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.crmMetric {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 118px;
}
.crmMetric span,
.crmPanelHead span,
.crmModule span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.crmMetric strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}
.crmMetric em,
.crmModule em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.crmFlowBoard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.crmCustomerPanel {
  overflow: hidden;
}
.crmCustomerTools,
.crmCustomerPager {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.crmCustomerTools button,
.crmCustomerPager button,
.crmCustomerTable button {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.crmCustomerPager button:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
.crmCustomerFilters {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) minmax(220px, 1.25fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.crmCustomerFilters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.crmCustomerFilters select,
.crmCustomerFilters input {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  min-height: 40px;
  padding: 0 10px;
  font: inherit;
}
.crmCustomerTableWrap {
  overflow-x: auto;
}
.crmCustomerTable {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
}
.crmCustomerTable th,
.crmCustomerTable td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.crmCustomerTable th {
  color: var(--muted);
  font-size: 12px;
  background: color-mix(in srgb, var(--accent) 4%, #fff);
}
.crmCustomerTable td strong,
.crmCustomerTable td span,
.crmCustomerTable td em {
  display: block;
}
.crmCustomerTable td strong {
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 4px;
}
.crmCustomerTable td span,
.crmCustomerTable td em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}
.crmBadge {
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  background: #eef7f4;
  color: var(--accent);
  padding: 4px 8px;
  font-weight: 800;
  margin-bottom: 6px;
}
.crmBadge.danger {
  background: #fef2f2;
  color: #b91c1c;
}
.crmCustomerPager {
  justify-content: flex-end;
  padding: 12px 16px;
  background: var(--panel);
}
.crmPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.crmPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.crmPanelHead h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0;
}
.crmFlowRows {
  display: flex;
  flex-direction: column;
}
.crmFlowRow {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(130px, 1fr) 64px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft, rgba(148, 163, 184, 0.2));
}
.crmFlowRow:last-child {
  border-bottom: 0;
}
.crmFlowLabel {
  min-width: 0;
}
.crmFlowLabel strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crmFlowLabel span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.crmFlowBar {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, #eef2f7);
  overflow: hidden;
}
.crmFlowBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.crmFlowRow b {
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}
.crmAutomationPanel {
  overflow: visible;
}
.crmAutomationFlow {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  padding: 16px;
}
.crmAutomationFlow button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 12px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.crmAutomationFlow button:hover,
.crmAutomationFlow button.active {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}
.crmAutomationFlow b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}
.crmAutomationFlow span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.crmAutomationFlow em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.crmStepDetail {
  border-top: 1px solid var(--line);
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr) auto;
  gap: 16px;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}
.crmStepDetail h4 {
  margin: 5px 0 6px;
  color: var(--ink);
  font-size: 18px;
}
.crmStepDetail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.crmStepDetail > div:first-child > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.crmStepDetail ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.75;
}
.crmStepActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.crmStepActions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}
.crmStepActions button:last-child {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.crmModuleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
}
.crmModule {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
}
.crmModule.ready span {
  color: #047857;
}
.crmModule.planned span {
  color: #a16207;
}
.crmModule strong {
  color: var(--ink);
  font-size: 15px;
}
.crmEmpty {
  padding: 18px 16px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .crmMetricGrid,
  .crmFlowBoard,
  .crmCustomerFilters,
  .crmModuleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crmAutomationFlow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crmStepDetail {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .crmStepActions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .crmPageTitle {
    align-items: stretch;
  }
  .crmMetricGrid,
  .crmFlowBoard,
  .crmCustomerFilters,
  .crmModuleGrid,
  .crmAutomationFlow {
    grid-template-columns: 1fr;
  }
  .crmFlowRow {
    grid-template-columns: 1fr 74px;
  }
  .crmFlowBar {
    grid-column: 1 / -1;
    order: 3;
  }
  .crmFlowRow b {
    align-self: start;
  }
}

.singleResultPanel .resultAssetGrid { grid-template-columns: minmax(0, 1fr); }
.singleResultPanel .resultAssetCard { max-width: 760px; }
.singleResultPanel .resultAssetCard img,
.singleResultPanel .resultAssetCard video { max-height: 640px; object-fit: contain; background: #f8fafc; }

/* CRM 子标签导航 */
.crmSubNav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e5e7;
  background: #f5f5f7;
  padding: 0 24px;
  flex-shrink: 0;
}
.crmSubTab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #6e6e73;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.crmSubTab:hover { color: #1d1d1f; }
.crmSubTab.active { color: #0071e3; border-bottom-color: #0071e3; }

/* CRM 子视图 */
.crmSubView { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.crmSubView.active { display: flex; flex-direction: column; }

/* agenticCrmView 需要 flex column 布局 */
.agenticCrmView { flex-direction: column !important; overflow: hidden !important; }

/* visionView 占满高度 */
#visionView { flex-direction: column; }


.clientFollowupPanel {
  display: grid;
  gap: 16px;
}

.clientOperationEmpty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.currentObjectBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 9px 12px;
  border-left: 4px solid var(--accent);
  background: #eefaf7;
}

.currentObjectBar > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.currentObjectBar > strong {
  margin-right: auto;
  color: var(--ink);
}

.sectionLabel {
  color: var(--ink);
  font-size: 13px;
}

.instructionTemplateFlash {
  animation: instructionTemplateFlash 1s ease;
}

@keyframes instructionTemplateFlash {
  0%, 100% { box-shadow: none; border-color: var(--line); }
  35% { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18); border-color: var(--accent); }
}

.draftConfirmShortcut {
  display: flex;
  justify-content: flex-start;
}

.draftConfirmShortcut:empty {
  display: none;
}

.draftConfirmShortcut button {
  width: auto;
  min-width: 180px;
}

.clientToastRegion {
  position: fixed;
  z-index: 1200;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}

.clientToast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid #76b7a9;
  border-radius: 8px;
  background: #f4fffc;
  color: #174b43;
  box-shadow: 0 10px 30px rgba(20, 39, 54, 0.18);
}

.clientToast.error {
  border-color: #d28d8d;
  background: #fff7f7;
  color: #8b2d2d;
}

.clientToast button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}

.prospectDetailDialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.prospectDetailDialog::backdrop {
  background: rgba(17, 32, 46, 0.46);
}

.prospectDetailPanel {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: auto;
  max-height: calc(100vh - 34px);
}

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

.prospectDetailPanel h2,
.prospectDetailPanel p {
  margin: 0;
}

.prospectDetailPanel header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.iconCloseButton {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 680px) {
  .prospectDetailDialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .prospectDetailPanel {
    padding: 12px;
    max-height: calc(100vh - 18px);
  }

  .clientToastRegion {
    right: 8px;
    bottom: 8px;
  }
}


.clientOrgContext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-left: 3px solid #0f766e;
  background: #ecfdf5;
  color: #115e59;
  font-size: 12px;
}
.clientOrgContext strong { font-size: 13px; }
.clientOrgContext em { color: #4b635f; font-style: normal; }
.clientOrgJump {
  border: 0;
  padding: 0;
  color: #0f766e;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.clientTodayActions { display: flex; flex-wrap: wrap; gap: 7px; }
.prospectDrawerMapLink { display: inline-flex; align-items: center; width: fit-content; margin-top: 10px; text-decoration: none; }

.clientTodayPanel { padding-bottom: 18px; }
.clientTodayPanel > .panelTitle { margin-bottom: 0; }
.clientTodayPanel > .metricGrid { margin: 16px 24px 0; }
.clientTodayQueue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 24px 0;
}
.clientTodayItem {
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 7px;
  background: #fff;
}
.clientTodayItem.priority-0 { border-left-color: #dc2626; background: #fff7f7; }
.clientTodayItem.priority-1 { border-left-color: #d97706; background: #fffbeb; }
.clientTodayItem.priority-2 { border-left-color: #0f766e; }
.clientTodayItemHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.clientTodayItemHead strong { color: var(--ink); }
.clientTodayTags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.clientTodayItem p { margin: 8px 0 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.clientTodayEmpty { grid-column: 1 / -1; padding: 32px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; background: #f8fafc; }
@media (max-width: 800px) {
  .clientTodayQueue { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .clientTodayPanel > .metricGrid { margin-left: 16px; margin-right: 16px; }
  .clientOrgContext { flex-wrap: wrap; }
}


/* Client-development workbench: queue-first, quiet density. */
.clientDevPage .pageTitle {
  padding-bottom: 14px;
  border-bottom: 1px solid #d9e3e1;
}
.clientDevPage .metricGrid { gap: 10px; }
.clientDevPage .metricCard { border-radius: 6px; box-shadow: none; }
.clientDevSubNav { border-bottom: 1px solid #cedad8; gap: 2px; }
.clientDevSubTab { border-radius: 6px 6px 0 0; border-bottom: 0; font-weight: 650; }
.clientDevSubTab.active { box-shadow: inset 0 3px 0 #0b7b72; }
.clientTodayQueue { display: block; padding: 16px 24px 20px; }
.workbenchFilters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.workbenchFilters button { min-height: 31px; padding: 0 10px; border: 1px solid #cddbd8; border-radius: 5px; background: #fff; color: #35514c; font-size: 12px; cursor: pointer; }
.workbenchFilters button.active { border-color: #08766e; color: #075c55; background: #eaf7f4; font-weight: 700; }
.workbenchList { border: 1px solid #d7e2df; border-radius: 7px; overflow: hidden; background: #fff; }
.workbenchItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #e5ecea; border-left: 3px solid #6b8d87; }
.workbenchItem:last-child { border-bottom: 0; }
.workbenchItem.priority-0 { border-left-color: #c24138; background: #fffafa; }
.workbenchItem.priority-1 { border-left-color: #c47a14; background: #fffdf7; }
.workbenchItem.priority-2 { border-left-color: #08766e; }
.workbenchItemMain { min-width: 0; }
.workbenchItemMain strong { display: block; color: #163b35; font-size: 13px; }
.workbenchItemMain p { margin: 4px 0; color: #506963; font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workbenchItemMain span { color: #78908b; font-size: 11px; }
.workbenchItemActions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; max-width: 330px; }
.workbenchItemActions .rowAction { min-width: 76px; }
.workbenchItemActions .workbenchStateAction { min-width: 64px; color: #506963; background: #fff; border-color: #cddbd8; }
.workbenchConsumerBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 9px 11px; border: 1px solid #e2c89f; border-left: 3px solid #b86f16; border-radius: 6px; background: #fffaf1; }
.workbenchConsumerBar.ready { border-color: #acd6cc; border-left-color: #08766e; background: #f0faf7; }
.workbenchConsumerBar strong { color: #24433d; font-size: 12px; }
.workbenchConsumerBar span { color: #6a7f7a; font-size: 11px; text-align: right; }
.workbenchFocusPanel { margin: 0 0 12px; border: 1px solid #cfe0dc; border-radius: 7px; background: #f7fbfa; overflow: hidden; }
.workbenchFocusPanel > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 11px; border-bottom: 1px solid #dbe8e5; }
.workbenchFocusPanel > header strong { color: #153f38; font-size: 12px; }
.workbenchFocusPanel > header span { color: #718681; font-size: 11px; }
.workbenchFocusList { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workbenchFocusCard { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-width: 0; min-height: 66px; padding: 8px 9px; border: 0; border-right: 1px solid #dbe8e5; background: #fff; color: #24433d; text-align: left; cursor: pointer; }
.workbenchFocusCard:last-child { border-right: 0; }
.workbenchFocusCard:hover { background: #edf8f5; }
.workbenchFocusCard b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #08766e; color: #fff; font-size: 11px; }
.workbenchFocusCard span { min-width: 0; }
.workbenchFocusCard strong, .workbenchFocusCard small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workbenchFocusCard strong { font-size: 12px; }
.workbenchFocusCard small { margin-top: 3px; color: #738782; font-size: 10px; }
.workbenchFocusCard em { color: #08766e; font-size: 10px; font-style: normal; white-space: nowrap; }
.workbenchActionLock { color: #9a5b11; font-size: 10px; white-space: nowrap; }
@media (max-width: 1180px) {
  .workbenchFocusList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbenchFocusCard { border-bottom: 1px solid #dbe8e5; }
}
@media (max-width: 720px) {
  .workbenchConsumerBar, .workbenchFocusPanel > header { align-items: flex-start; flex-direction: column; }
  .workbenchConsumerBar span { text-align: left; }
  .workbenchFocusList { grid-template-columns: 1fr; }
  .workbenchFocusCard { border-right: 0; }
}

.clientTimeline { display: grid; gap: 10px; border: 1px solid #d7e2df; border-radius: 7px; padding: 12px; background: #fcfefd; }
.clientTimelineHeader { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.clientTimelineHeader strong { color: #173b35; }
.clientTimelineHeader span { color: #6d827d; font-size: 11px; }
.timelineContacts { display: flex; flex-wrap: wrap; gap: 6px; }
.timelineContacts span { padding: 4px 7px; border-radius: 4px; background: #eef6f4; color: #37635b; font-size: 11px; }
.timelineSourceNotice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #d7e2df; border-radius: 6px; background: #f7faf9; color: #506762; font-size: 12px; line-height: 1.45; }
.timelineSourceNotice.suspected_unlinked { border-color: #e5bd73; background: #fff9ed; color: #76520f; }
.timelineSourceNotice.okki { border-color: #bfd7ef; background: #f1f7fd; color: #315d82; }
.timelineSourceNotice.unavailable { border-color: #e3c6c6; background: #fff5f5; color: #8a4444; }
.timelineSourceNotice button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid #0b806b; border-radius: 5px; background: #0b806b; color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.timelineSourceNotice button:disabled { opacity: .58; cursor: wait; }
.timelineList { display: grid; gap: 0; max-height: 430px; overflow-y: auto; padding-right: 3px; }
.timelineEvent { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; padding: 9px 0; border-bottom: 1px solid #edf2f1; }
.timelineEvent:last-child { border-bottom: 0; }
.timelineDot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #0b7b72; }
.timelineEvent.mail .timelineDot { background: #3b82a4; }
.timelineEvent.inquiry .timelineDot { background: #c47a14; }
.timelineEvent.okki_trail .timelineDot, .timelineEvent.okki_inquiry .timelineDot { background: #256aa3; }
.timelineEvent.task .timelineDot { background: #8b5c9f; }
.timelineEvent strong { color: #264842; font-size: 12px; }
.timelineEvent p { margin: 3px 0; color: #5f746f; font-size: 12px; line-height: 1.45; }
.timelineEvent small { color: #839590; font-size: 11px; }
.crmTimelineDetail { margin: 3px 0; color: #4c6a64; font-size: 12px; line-height: 1.5; }
.crmTimelineDetail summary { color: #0e7568; cursor: pointer; font-weight: 700; }
.crmTimelineDetail > div { margin-top: 6px; padding: 7px 8px; border-left: 2px solid #b9d8d0; background: #f4f9f7; white-space: pre-wrap; }
.timelineEmpty { margin: 0; padding: 10px 0; color: #7b8d89; font-size: 12px; }
.managementSnapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.managementMetric { padding: 11px; border: 1px solid #d7e2df; border-radius: 6px; background: #f8fcfb; }
.managementMetric strong { display: block; color: #0e625a; font-size: 20px; line-height: 1; }
.managementMetric span { display: block; margin-top: 5px; color: #315b54; font-weight: 650; font-size: 12px; }
.managementMetric small { display: block; margin-top: 3px; color: #78908b; font-size: 10px; }
.currentObjectBar { position: sticky; top: 0; z-index: 2; }
@media (max-width: 800px) {
  .clientTodayQueue { padding: 12px 16px 16px; }
  .workbenchItem { grid-template-columns: 1fr; gap: 9px; }
  .workbenchItemActions { justify-content: space-between; }
  .managementSnapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clientTimelineHeader { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* Unified foreign-trade CRM workflow */
.crmIntegratedView.active {
  display: grid;
  grid-template-columns: 204px minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  overflow: visible !important;
  padding: 0;
  background: #f4f6f8;
}
.crmIntegratedView > .crmWorkflowSidebar {
  grid-column: 1;
  grid-row: 1;
}
.crmIntegratedView > :not(.crmWorkflowSidebar) { grid-column: 2; min-width: 0; }
.crmWorkflowSidebar {
  position: sticky;
  top: 0;
  align-self: stretch;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 14px 10px;
  border-right: 1px solid #d8dee5;
  background: #17232d;
  color: #eaf0f4;
  z-index: 5;
}
.crmWorkflowSidebarTitle { padding: 2px 10px 16px; border-bottom: 1px solid #34434f; }
.crmWorkflowSidebarTitle strong, .crmWorkflowSidebarTitle span { display: block; }
.crmWorkflowSidebarTitle strong { font-size: 16px; }
.crmWorkflowSidebarTitle span { margin-top: 4px; color: #9fb0bd; font-size: 12px; }
.crmWorkflowSidebar nav { display: grid; gap: 2px; margin-top: 12px; }
.crmWorkflowSidebar button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 0;
  border-radius: 4px;
  color: #cbd6dd;
  background: transparent;
  text-align: left;
}
.crmWorkflowSidebar button:hover { background: #263641; color: #fff; }
.crmWorkflowSidebar button.active { background: #d9ece7; color: #12372e; font-weight: 700; }
.crmWorkflowSidebar button b { min-width: 22px; color: #7f96a5; font-size: 11px; text-align: right; }
.crmWorkflowSidebar button.active b { color: #285e50; }
.crmWorkflowDivider { height: 1px; margin: 8px 10px; background: #34434f; }
.crmOrgContext { display: grid; gap: 3px; color: #5c6871; font-size: 11px; }
.crmOrgContext select { min-width: 132px; }
.crmProspectingWorkspace { min-height: 100vh; background: #f4f6f8; }
.crmTodayWorkspace { min-height: 100vh; padding: 20px 24px 32px; background: #f4f6f8; }
.crmEmbeddedToday { min-width: 0; }
#crmProspectingMount { min-width: 0; }
.crmEmbeddedProspecting { min-width: 0; padding: 0 24px 28px; }
.crmEmbeddedProspecting > .pageTitle { margin-inline: -24px; padding-inline: 24px; background: #fff; border-bottom: 1px solid #d8e0e4; }
.crmEmbeddedProspecting .clientDevSubNav { position: sticky; top: 0; z-index: 4; background: #f4f6f8; }
#crmSubOverview.workflowActive > :not(.crmPageTitle):not(#crmWorkflowWorkspace) { display: none !important; }
.crmIntegratedView .crmSubView.active { min-height: 0; overflow: visible; }
.crmIntegratedView .crmPageTitle { align-items: center; padding: 10px 12px 8px; }
.crmIntegratedView .crmPageTitle h2 { margin: 1px 0; font-size: 18px; }
.crmIntegratedView .crmPageTitle p { margin-top: 2px; font-size: 12px; }
.crmIntegratedView .clientTools { min-width: 360px; grid-template-columns: 176px 176px; gap: 6px; }
.crmIntegratedView .clientTools label { min-width: 0; }
.crmIntegratedView .clientTools span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmWorkflowWorkspace {
  min-width: 0;
  min-height: 0;
  margin: 0 12px 12px;
  border: 1px solid #d7dde3;
  background: #fff;
}
.crmWorkflowHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e6ea;
}
.crmWorkflowHead > div:first-child { flex: 0 0 auto; max-width: 250px; }
.crmWorkflowHead h3 { margin: 1px 0; font-size: 18px; }
.crmWorkflowHead p, .crmWorkflowHead span { margin: 0; color: #68747d; font-size: 12px; }
.crmWorkflowActions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.crmWorkflowActions input { width: 190px; }
.crmWorkflowActions > select { width: 142px; }
.crmWorkflowActions input, .crmWorkflowActions select { min-height: 34px; padding: 6px 9px; border-radius: 4px; }
.crmWorkflowActions button { min-height: 34px; padding: 0 11px; }
.crmCustomerClassificationFilters { display: flex; min-width: 0; align-items: center; gap: 5px; flex-wrap: nowrap; }
.crmCustomerClassificationFilters[hidden] { display: none !important; }
.crmCustomerClassificationFilters select { flex: 0 1 124px; width: 124px; min-width: 104px; }
.crmWorkflowActions button, .crmImportDrop button, .crmWorkflowTable button, .crmWorkflowDetail button { border-radius: 4px; }
.crmWorkflowTableWrap { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.crmWorkflowTable { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.crmWorkflowTable--customer { min-width: 1180px; }
.crmWorkflowTable--opportunity { min-width: 1120px; }
.crmWorkflowTable--inquiry { min-width: 1080px; }
.crmWorkflowTable--supplier { min-width: 1120px; }
.crmWorkflowTable--document { min-width: 900px; }
.crmWorkflowTable--timeline { min-width: 760px; }
.crmWorkflowTable th { padding: 8px 9px; background: #f2f4f6; color: #5d6972; font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; }
.crmWorkflowTable td { padding: 8px 9px; border-top: 1px solid #e7eaed; vertical-align: middle; color: #263640; font-size: 13px; }
.crmWorkflowTable td strong { display: block; line-height: 1.35; overflow-wrap: anywhere; }
.crmWorkflowTable td span, .crmWorkflowTable td em { display: block; margin-top: 3px; color: #74818a; font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
.crmWorkflowTable .crmCell--number strong, .crmWorkflowTable .crmCell--owner strong, .crmWorkflowTable .crmCell--updated, .crmWorkflowTable .crmCell--status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crmWorkflowTable .crmCell--actions { position: sticky; right: 0; z-index: 1; display: table-cell; min-width: 0; white-space: nowrap; background: #fff; box-shadow: -8px 0 12px -12px #17232d; }
.crmWorkflowTable th.crmCol--actions { position: sticky; right: 0; z-index: 3; background: #f2f4f6; box-shadow: -8px 0 12px -12px #17232d; }
.crmWorkflowTable tr:hover .crmCell--actions, .crmWorkflowTable tr:focus .crmCell--actions { background: #f1f8f6; }
.crmWorkflowTable .crmCell--actions button { min-height: 28px; margin-right: 4px; padding-inline: 7px; white-space: nowrap; }
.crmWorkflowTable .crmCell--actions button:last-child { margin-right: 0; }
.crmWorkflowTable .crmCell--contactMethods { line-height: 1.35; }
.crmWorkflowTable--customer th:nth-child(1) { width: 7%; }
.crmWorkflowTable--customer th:nth-child(2) { width: 17%; }
.crmWorkflowTable--customer th:nth-child(3) { width: 16%; }
.crmWorkflowTable--customer th:nth-child(4) { width: 12%; }
.crmWorkflowTable--customer th:nth-child(5) { width: 16%; }
.crmWorkflowTable--customer th:nth-child(6) { width: 9%; }
.crmWorkflowTable--customer th:nth-child(7) { width: 8%; }
.crmWorkflowTable--customer th:nth-child(8) { width: 8%; }
.crmWorkflowTable--customer th:nth-child(9) { width: 7%; }
.crmWorkflowTable--opportunity th:nth-child(1) { width: 8%; }
.crmWorkflowTable--opportunity th:nth-child(2) { width: 18%; }
.crmWorkflowTable--opportunity th:nth-child(3) { width: 12%; }
.crmWorkflowTable--opportunity th:nth-child(4) { width: 17%; }
.crmWorkflowTable--opportunity th:nth-child(5) { width: 9%; }
.crmWorkflowTable--opportunity th:nth-child(6) { width: 9%; }
.crmWorkflowTable--opportunity th:nth-child(7) { width: 8%; }
.crmWorkflowTable--opportunity th:nth-child(8) { width: 9%; }
.crmWorkflowTable--opportunity th:nth-child(9) { width: 10%; }
.crmWorkflowTable--inquiry th:nth-child(1) { width: 8%; }
.crmWorkflowTable--inquiry th:nth-child(2) { width: 22%; }
.crmWorkflowTable--inquiry th:nth-child(3) { width: 12%; }
.crmWorkflowTable--inquiry th:nth-child(4) { width: 18%; }
.crmWorkflowTable--inquiry th:nth-child(5) { width: 9%; }
.crmWorkflowTable--inquiry th:nth-child(6) { width: 8%; }
.crmWorkflowTable--inquiry th:nth-child(7) { width: 9%; }
.crmWorkflowTable--inquiry th:nth-child(8) { width: 14%; }
.crmWorkflowTable--supplier th:nth-child(1) { width: 8%; }
.crmWorkflowTable--supplier th:nth-child(2) { width: 20%; }
.crmWorkflowTable--supplier th:nth-child(3) { width: 12%; }
.crmWorkflowTable--supplier th:nth-child(4) { width: 17%; }
.crmWorkflowTable--supplier th:nth-child(5) { width: 9%; }
.crmWorkflowTable--supplier th:nth-child(6) { width: 10%; }
.crmWorkflowTable--supplier th:nth-child(7) { width: 8%; }
.crmWorkflowTable--supplier th:nth-child(8) { width: 8%; }
.crmWorkflowTable--supplier th:nth-child(9) { width: 8%; }
.crmWorkflowTable--document th:nth-child(1) { width: 12%; }
.crmWorkflowTable--document th:nth-child(2) { width: 30%; }
.crmWorkflowTable--document th:nth-child(3) { width: 15%; }
.crmWorkflowTable--document th:nth-child(4) { width: 11%; }
.crmWorkflowTable--document th:nth-child(5) { width: 10%; }
.crmWorkflowTable--document th:nth-child(6) { width: 12%; }

.crmCustomerClassCell { min-width: 0; }
.crmCustomerClassCell strong { color: #0f3f39; }
.crmCustomerClassCell small, .crmCustomerClassCell em { display: inline-block; margin-top: 4px; margin-right: 4px; padding: 2px 6px; border-radius: 999px; background: #eef6f3; color: #0b6f61; font-size: 11px; line-height: 1.3; }
.crmCustomerClassCell em { background: #fff2d6; color: #9a5a00; font-style: normal; }
.crmCustomerClassificationPanel { background: #fbfdfc; }
.crmCustomerClassSummary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.crmCustomerClassSummary span { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border-radius: 999px; background: #e9f6f2; color: #075e53; font-size: 12px; font-weight: 700; }
.crmCustomerClassEditor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.crmCustomerClassEditor label, .crmCustomerBusinessLines { display: flex; flex-direction: column; gap: 5px; color: #5f6d76; font-size: 12px; }
.crmCustomerClassEditor select, .crmCustomerClassEditor textarea { width: 100%; border: 1px solid #cfd8df; border-radius: 4px; padding: 7px 8px; font: inherit; background: #fff; }
.crmCustomerBusinessLines { grid-column: 1 / -1; padding: 10px; border: 1px solid #dbe5e1; border-radius: 4px; background: #fff; }
.crmCustomerBusinessLines strong { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #24333d; }
.crmCustomerBusinessLines strong small { color: #73818a; font-weight: 400; }
.crmCustomerBusinessLineState { color: #9a5a00; }
.crmCustomerBusinessLineState.is-ready { color: #0b6f61; }
.crmCustomerBusinessLineOptions { display: flex !important; flex-flow: row wrap; gap: 8px; margin-top: 8px; align-items: center; }
.crmCustomerBusinessLineOptions label.crmBizChip { display: inline-flex !important; flex: 0 0 auto !important; flex-direction: row !important; align-items: center; gap: 7px; width: auto !important; max-width: none !important; min-width: 0; min-height: 0; margin: 0; padding: 5px 12px; border: 1px solid #d7e0e4; border-radius: 999px; background: #fff; color: #33454e; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: visible; cursor: pointer; }
.crmCustomerBusinessLineOptions label.crmBizChip:hover { border-color: #6aa69e; background: #f2f8f6; }
.crmCustomerBusinessLineOptions label.crmBizChip:has(input:checked) { border-color: #0b766e; background: #e5f3f0; color: #075e57; font-weight: 700; }
.crmCustomerBusinessLineOptions label.crmBizChip .crmBizChipText { flex: 0 0 auto; white-space: nowrap; overflow: visible; }
.crmCustomerBusinessLineOptions label.crmBizChip input { flex: 0 0 auto; width: auto; margin: 0; }
.crmCustomerClassNote { grid-column: 1 / -1; }
.crmCustomerClassNote textarea { min-height: 68px; resize: vertical; }
.crmCustomerClassificationPanel [data-crm-classification-save] { margin-top: 10px; min-height: 32px; }
.crmWorkflowTable--document th:nth-child(7) { width: 10%; }
.crmWorkflowTable--product th:nth-child(1) { width: 12%; }
.crmWorkflowTable--product th:nth-child(2) { width: 55%; }
.crmWorkflowTable--product th:nth-child(3) { width: 12%; }
.crmWorkflowTable--product th:nth-child(4) { width: 12%; }
.crmWorkflowTable--product th:nth-child(5) { width: 9%; }
.crmWorkflowTable--timeline th:nth-child(1) { width: 32%; }
.crmWorkflowTable--timeline th:nth-child(2) { width: 34%; }
.crmWorkflowTable--timeline th:nth-child(3) { width: 14%; }
.crmWorkflowTable--timeline th:nth-child(4) { width: 10%; }
.crmWorkflowTable--timeline th:nth-child(5) { width: 10%; }
.crmWorkflowTable--import th:nth-child(1) { width: 11%; }
.crmWorkflowTable--import th:nth-child(2) { width: 25%; }
.crmWorkflowTable--import th:nth-child(3) { width: 12%; }
.crmWorkflowTable--import th:nth-child(4) { width: 12%; }
.crmWorkflowTable--import th:nth-child(5) { width: 10%; }
.crmWorkflowTable--import th:nth-child(6) { width: 8%; }
.crmWorkflowTable--import th:nth-child(7) { width: 12%; }
.crmWorkflowTable--import th:nth-child(8) { width: 10%; }
.crmWorkflowTable--reconciliation th:nth-child(1) { width: 12%; }
.crmWorkflowTable--reconciliation th:nth-child(2) { width: 32%; }
.crmWorkflowTable--reconciliation th:nth-child(3) { width: 16%; }
.crmWorkflowTable--reconciliation th:nth-child(4) { width: 15%; }
.crmWorkflowTable--reconciliation th:nth-child(5) { width: 15%; }
.crmWorkflowTable--reconciliation th:nth-child(6) { width: 10%; }
.crmStatusPill { display: inline-block !important; width: fit-content; max-width: 100%; padding: 3px 7px; border-radius: 3px; background: #edf2f5; color: #41515c !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crmWorkflowPager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #e2e6ea; }
.crmImportWorkbench { padding: 14px 18px; border-bottom: 1px solid #e2e6ea; background: #f7faf9; }
.crmImportDrop { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.crmImportDrop label { display: grid; gap: 4px; color: #56636c; font-size: 12px; }
.crmImportResult { display: flex; gap: 12px; margin-top: 10px; color: #42515b; font-size: 13px; }
.crmWorkflowDetail { margin: 14px 18px; padding: 16px; border-left: 3px solid #28725e; background: #f7faf9; }
.crmWorkflowDetailHead { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.crmDocumentActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.crmWorkflowDetailHead h4 { margin: 2px 0; font-size: 18px; }
.crmWorkflowDetailHead p, .crmWorkflowDetailHead span { margin: 0; color: #67747d; font-size: 12px; }
.crmDetailLines { width: 100%; margin-top: 14px; border-collapse: collapse; }
.crmDetailLines th, .crmDetailLines td { padding: 8px; border-bottom: 1px solid #dfe6e3; text-align: left; }
.crmShipmentChildren { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.crmShipmentChildren span { padding: 4px 7px; background: #e6efec; }
.crmValidationOk { color: #176245; }
.crmValidationError { color: #a13a31; }
.crmEntityDialog { width: min(880px, calc(100vw - 32px)); max-height: 86vh; border: 0; border-radius: 6px; padding: 0; box-shadow: 0 18px 48px #0004; }
.crmEntityDialog::backdrop { background: #17232d99; }
.crmEntityDialog form { padding: 18px; }
.crmEntityFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.crmEntityFields label { display: grid; gap: 5px; color: #4f5c65; font-size: 12px; }
.crmShipmentLineInputs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid #dde3e6; }
.crmShipmentLineInputs > strong { grid-column: 1 / -1; }
.crmShipmentLineEditor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 10px; border: 1px solid #d8e0dd; }
.crmShipmentLineEditor legend { padding: 0 5px; color: #31594d; font-weight: 700; }
.crmShipmentLineEditor label { display: grid; gap: 4px; }
.crmEntityStatus { min-height: 20px; color: #285e50; }
@media (max-width: 1220px) {
  .crmWorkflowHead { align-items: stretch; flex-direction: column; }
  .crmWorkflowHead > div:first-child { max-width: none; }
  .crmWorkflowActions { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .crmIntegratedView.active { display: block; }
  .crmWorkflowSidebar { position: sticky; top: 0; min-height: auto; max-height: none; padding: 8px; }
  .crmWorkflowSidebarTitle { display: none; }
  .crmWorkflowSidebar nav { display: flex; overflow-x: auto; margin: 0; gap: 4px; }
  .crmWorkflowSidebar button { display: flex; width: auto; min-width: max-content; min-height: 34px; gap: 8px; }
  .crmWorkflowDivider { width: 1px; height: 26px; margin: 4px; flex: 0 0 auto; }
  .crmWorkflowHead { align-items: stretch; flex-direction: column; }
  .crmWorkflowActions { align-items: stretch; }
  .crmWorkflowActions input { width: min(100%, 280px); }
  .crmCustomerClassificationFilters { width: 100%; }
  .crmCustomerClassificationFilters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crmCustomerClassificationFilters select { width: 100%; min-width: 0; }
  .crmCustomerClassEditor { grid-template-columns: 1fr; }
  .crmEntityFields, .crmShipmentLineInputs { grid-template-columns: 1fr; }
  .crmShipmentLineEditor { grid-template-columns: 1fr; }
}
/* CRM detail and AI operation drawer */
.crmWorkflowTable tbody tr.crmInteractiveRow { cursor: pointer; }
.crmWorkflowTable tbody tr.crmInteractiveRow:hover,
.crmWorkflowTable tbody tr.crmInteractiveRow:focus { background: #f1f8f6; outline: 0; }
.crmWorkflowTable td:last-child { gap: 6px; }
.crmActionDrawerBackdrop { position: fixed; inset: 0; z-index: 90; background: #17232d66; }
.crmActionDrawer {
  position: fixed; top: 0; right: 0; z-index: 91; width: min(960px, 96vw); height: 100vh;
  display: grid; grid-template-rows: auto minmax(180px, 1fr) auto; border-left: 1px solid #cad5dc;
  background: #fff; box-shadow: -16px 0 42px #17232d2b; transform: translateX(102%); transition: transform 180ms ease;
}
.crmActionDrawer.open { transform: translateX(0); }
.crmActionDrawerHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #dde4e8; }
.crmActionDrawerHeader span { color: #0b766e; font-size: 11px; font-weight: 700; }
.crmActionDrawerHeader h2 { margin: 3px 0; font-size: 20px; letter-spacing: 0; }
.crmActionDrawerHeader p { margin: 0; color: #687780; font-size: 12px; }
.crmActionDrawerBody { min-height: 0; overflow-y: auto; padding: 16px 20px; }
.crmDrawerSummary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 22px; padding-bottom: 14px; border-bottom: 1px solid #e3e9ec; }
.crmDrawerSummary div { min-width: 0; }
.crmDrawerSummary span { display: block; color: #7b8991; font-size: 11px; }
.crmDrawerSummary strong { display: block; margin-top: 2px; color: #263943; font-size: 13px; overflow-wrap: anywhere; }
.crmDrawerSection { padding: 15px 0; border-bottom: 1px solid #e8edef; }
.crmDrawerSection:last-child { border-bottom: 0; }
.crmDrawerSection h3 { margin: 0 0 9px; color: #263943; font-size: 14px; letter-spacing: 0; }
.crmAuthorityBanner { max-width: 780px; margin-top: 6px !important; padding: 7px 9px; border-left: 3px solid #2f7d6b; background: #edf6f3; color: #31584f !important; font-size: 12px !important; }
.crmDrawerStatusActions { display: flex; flex-wrap: wrap; gap: 7px; }
.crmDrawerStatusActions button { min-height: 34px; padding: 0 10px; border: 1px solid #78a89d; border-radius: 4px; background: #edf7f4; color: #155f55; font-weight: 700; }
.crmDrawerStatusActions button:hover { background: #dceee9; }
.crmDrawerStatusActions button:disabled { opacity: .55; cursor: wait; }
.crmAuthorityNotice { padding: 11px 12px; border: 1px solid #d7e4df; background: #f5f9f7; }
.crmAuthorityNotice p { margin: 0; color: #5a6d66; font-size: 12px; line-height: 1.6; }
.crmDrawerMailMeta { color: #607078; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.crmDrawerMailBody { max-height: 460px; overflow: auto; margin-top: 10px; padding: 12px; border: 1px solid #dce4e7; background: #f8fafb; color: #263943; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.crmDrawerList { display: grid; gap: 6px; }
.crmDrawerList button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid #d9e2e5; border-radius: 4px; background: #fff; color: #2f454e; text-align: left; }
.crmDrawerList button:hover { border-color: #6aa69e; background: #f2f8f6; }
.crmDrawerList button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmDrawerList button small { color: #7b8991; }
.crmDrawerList > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 9px 10px; border: 1px solid #d9e2e5; background: #fff; }
.crmDrawerList > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmDrawerList > div small { color: #7b8991; }
.crmDrawerTimeline { display: grid; }
.crmDrawerTimeline article { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 2px 12px; padding: 0 0 14px 18px; border-left: 2px solid #d8e7e2; }
.crmDrawerTimeline article::before { position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #2f7d6b; content: ''; }
.crmDrawerTimeline time { grid-row: 1 / span 3; color: #77868d; font-size: 11px; }
.crmDrawerTimeline strong { color: #263943; font-size: 12px; }
.crmDrawerTimeline p { margin: 3px 0; color: #52656d; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.crmDrawerTimeline small { color: #859197; }
.crmDrawerTimeline .crmTimelineDetail { grid-column: 2; }
.crmDrawerEmpty { margin: 0; color: #7a8990; font-size: 12px; }
.crmDrawerAttachments { display: flex; gap: 6px; flex-wrap: wrap; }
.crmDrawerAttachments a { padding: 5px 8px; border: 1px solid #d4dfe2; border-radius: 4px; color: #17685f; font-size: 12px; text-decoration: none; }
.crmBrandPdfButton { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border: 1px solid #2f7d6b; border-radius: 4px; background: #edf7f4; color: #155f55; font-size: 12px; font-weight: 700; text-decoration: none; }
.crmActionPanel { max-height: 56vh; overflow-y: auto; padding: 15px 20px 18px; border-top: 1px solid #cfdadd; background: #f5f8f8; }
.crmActionPanelTitle { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.crmActionPanelTitle span { color: #6a7c82; font-size: 11px; }
.crmActionPanelTitle h3 { margin: 2px 0 0; font-size: 15px; letter-spacing: 0; }
.crmActionPanelTitle strong { color: #0a7067; font-size: 11px; overflow-wrap: anywhere; }
.crmActionModes { display: flex; gap: 5px; margin-top: 10px; overflow-x: auto; }
.crmActionModes button { flex: 0 0 auto; min-height: 32px; padding: 0 9px; border: 1px solid #cdd9dc; border-radius: 4px; background: #fff; color: #40555d; }
.crmActionModes button.active { border-color: #08766e; background: #e5f3f0; color: #075e57; font-weight: 700; }
.crmActionRequirement, .crmActionConfirm label { display: grid; gap: 5px; margin-top: 10px; color: #53656c; font-size: 11px; }
.crmActionRequirement textarea, .crmActionConfirm textarea { min-height: 62px; resize: vertical; }
#crmActionGenerate, #crmActionExecute { margin-top: 10px; }
.crmActionStatus { display: inline-block; margin: 10px 0 0 8px; color: #5e7278; font-size: 11px; }
.crmActionOutput { margin-top: 10px; max-height: 380px; overflow: auto; padding: 11px; border: 1px solid #d8e1e4; background: #fff; color: #263943; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.crmActionConfirm { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d1dcdf; }
.crmActionConfirm > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.crmActionConfirm > div span { color: #7b898f; font-size: 11px; }
.crmActionConfirm label { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.crmActionConfirm label textarea { grid-column: 1 / -1; }
.crmActionStructuredFields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 9px; border: 1px solid #d8e2e4; background: #fff; }
.crmActionStructuredFields[hidden] { display: none; }
.crmActionStructuredFields label { display: grid; grid-template-columns: 1fr; margin: 0; }
#crmActionBusinessFields { grid-template-columns: 1fr 1fr; }
#crmActionBusinessFields label:last-child { grid-column: 1 / -1; }
#crmActionBusinessFields label.wide { grid-column: 1 / -1; }
#crmActionLineItems { min-height: 72px; resize: vertical; }
#crmActionMailFields label.wide, #crmActionMailFields .wide { grid-column: 1 / -1; }
#crmActionMailBody { min-height: 190px; resize: vertical; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.crmActionRefineRow { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.crmActionRefineRow input { min-width: 0; }
.crmActionRefineRow button { white-space: nowrap; }
.crmActionMailWarning { margin: 0; padding: 6px 8px; border: 1px solid #e0b4b4; background: #fdf2f2; color: #97302f; font-size: 12px; line-height: 1.5; }
.crmActionMailWarning[hidden] { display: none; }
body.crmDrawerOpen { overflow: hidden; }
@media (max-width: 700px) {
  .crmActionDrawer { width: 100vw; }
  .crmDrawerSummary { grid-template-columns: 1fr; }
  .crmActionPanel { max-height: 52vh; }
  .crmActionConfirm label { grid-template-columns: 1fr; }
  .crmActionStructuredFields, #crmActionBusinessFields { grid-template-columns: 1fr; }
  #crmActionBusinessFields label:last-child { grid-column: auto; }
  .crmDrawerTimeline article { grid-template-columns: 1fr; }
  .crmDrawerTimeline time { grid-row: auto; }
  .crmDrawerTimeline .crmTimelineDetail { grid-column: auto; }
}
/* Client development data center */
.crmDataCenter { min-height: 100vh; padding: 0 24px 32px; background: #f4f6f8; }
.crmDataCenterHeader { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 0 14px; border-bottom: 1px solid #d4dde2; }
.crmDataCenterHeader h2 { margin: 3px 0; font-size: 22px; letter-spacing: 0; }
.crmDataCenterHeader p { margin: 0; color: #66757e; font-size: 12px; }
.crmDataCenterTools { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.crmDataCenterTools label { display: grid; gap: 4px; color: #64747c; font-size: 11px; }
.crmDataCenterTools select { min-width: 128px; }
.crmDataCenterTools span { padding-bottom: 8px; color: #6f7e85; font-size: 11px; }
.crmDataCenterMetrics { display: grid; grid-template-columns: repeat(8, minmax(110px, 1fr)); gap: 8px; padding: 14px 0; }
.crmDataMetric { min-width: 0; padding: 11px 12px; border: 1px solid #d6e0e3; border-radius: 6px; background: #fff; }
.crmDataMetric span { display: block; color: #63737a; font-size: 11px; }
.crmDataMetric strong { display: block; margin-top: 5px; color: #172f38; font-size: 22px; line-height: 1; overflow-wrap: anywhere; }
.crmDataMetric em { display: block; margin-top: 5px; color: #829097; font-size: 10px; font-style: normal; }
.crmDataSection { margin-top: 10px; border-top: 1px solid #d6dfe3; background: #fff; }
.crmDataSectionHead { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px 10px; }
.crmDataSectionHead h3 { margin: 0; color: #203a43; font-size: 15px; letter-spacing: 0; }
.crmDataSectionHead p { margin: 3px 0 0; color: #75848b; font-size: 11px; }
.crmDataTableWrap { overflow-x: auto; }
.crmDataTable { width: 100%; min-width: 860px; border-collapse: collapse; }
.crmDataTable th { padding: 8px 12px; background: #eef2f4; color: #617078; font-size: 11px; text-align: left; }
.crmDataTable td { padding: 11px 12px; border-top: 1px solid #e4eaed; color: #354b54; font-size: 12px; }
.crmDataTable td strong, .crmDataTable td span { display: block; }
.crmDataTable td span { margin-top: 3px; color: #7b8990; font-size: 10px; }
.crmDataSplit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 10px; }
.crmDataQualityList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e1e7ea; }
.crmDataQualityItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 10px 13px; border: 0; border-right: 1px solid #e5eaed; border-bottom: 1px solid #e5eaed; border-radius: 0; background: #fff; text-align: left; }
.crmDataQualityItem:hover { background: #f2f8f6; }
.crmDataQualityItem span { color: #40555d; font-size: 12px; }
.crmDataQualityItem strong { min-width: 38px; color: #9b3c35; font-size: 18px; text-align: right; }
.crmDataQualityItem.neutral strong { color: #60727a; }
.crmDataQualityItem.warn strong { color: #a86613; }
.crmDataMailHealth { display: grid; border-top: 1px solid #e1e7ea; }
.crmDataMailRow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #e5eaed; }
.crmDataMailRow strong { color: #314a53; font-size: 12px; }
.crmDataMailRow span { color: #718087; font-size: 10px; }
.crmDataMailRow b { display: grid; min-width: 38px; color: #41545c; font-size: 12px; text-align: right; }
.crmDataMailRow b small { color: #88959a; font-size: 9px; font-weight: 500; }
.crmDataMailRow b.bad { color: #aa3e36; }
.crmDataPipeline { display: grid; grid-template-columns: repeat(8, minmax(100px, 1fr)); gap: 1px; border-top: 1px solid #dde5e8; background: #dde5e8; }
.crmDataPipeline button { min-height: 84px; padding: 12px; border: 0; border-radius: 0; background: #fff; color: #41555d; text-align: left; }
.crmDataPipeline button:hover { background: #edf7f4; }
.crmDataPipeline button strong { display: block; color: #0a7067; font-size: 22px; }
.crmDataPipeline button span { display: block; margin-top: 6px; font-size: 11px; }
.mailBusinessActions { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid #dce4e7; background: #f6f9f9; }
.mailBusinessActions button { min-height: 31px; padding: 0 10px; border-radius: 4px; }
.mailBusinessActions span { margin-left: auto; color: #6b7c83; font-size: 11px; }
@media (max-width: 1180px) {
  .crmDataCenterMetrics { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .crmDataPipeline { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
}
@media (max-width: 760px) {
  .crmDataCenter { padding: 0 12px 22px; }
  .crmDataCenterHeader { align-items: stretch; flex-direction: column; }
  .crmDataCenterMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crmDataSplit { grid-template-columns: 1fr; }
  .crmDataQualityList { grid-template-columns: 1fr; }
  .crmDataPipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mailBusinessActions span { width: 100%; margin-left: 0; }
}

.crmIdentityCandidate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 9px 10px; border: 1px solid #d9e2e5; background: #fff; cursor: pointer; }
.crmIdentityCandidate:hover { border-color: #6aa69e; background: #f2f8f6; }
.crmIdentityCandidate input { grid-row: 1 / span 2; margin: 3px 0 0; }
.crmIdentityCandidate span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmIdentityCandidate small { color: #7b8991; }

.brandKnowledgeSearchRow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.brandKnowledgeSearchRow #brandKnowledgeQuery { flex:1 1 260px; min-width:220px; }
.brandKnowledgeSearchRow #brandKnowledgeKind { flex:0 1 150px; min-width:130px; }
.brandKnowledgeHistoryToggle { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:12px; }
.brandKnowledgeResults { display:grid; gap:8px; margin-top:10px; }
.brandKnowledgeResult { display:grid; gap:5px; padding:10px; border:1px solid #d7e0e8; border-radius:6px; background:#fff; }
.brandKnowledgeResult strong { overflow-wrap:anywhere; }
.brandKnowledgeResult small { color:#657486; }
.brandKnowledgeResult span { color:#344454; line-height:1.5; overflow-wrap:anywhere; }
.brandKnowledgeResultActions { display:flex; flex-wrap:wrap; gap:6px; }
.brandKnowledgePreview { max-height:280px; overflow:auto; padding:10px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; background:#f5f7fa; border-radius:4px; font:12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width:720px) { .brandKnowledgeSearchRow #brandKnowledgeQuery, .brandKnowledgeSearchRow #brandKnowledgeKind { flex-basis:100%; min-width:0; } }


/* Prospect detail drawer: use the available desktop canvas and keep every action usable without horizontal scrolling. */
.prospectDetailDialog {
  width: min(980px, calc(100vw - 48px));
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  margin: 16px 24px 16px auto;
  overflow: hidden;
}

.prospectDetailPanel {
  box-sizing: border-box;
  height: 100%;
  max-height: none;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 20px 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

.prospectDetailPanel > *,
.prospectDetailPanel > header > div,
.prospectDetailPanel .clientFacts > div,
.prospectDetailWorkflow > * {
  min-width: 0;
}

.prospectDetailPanel header p,
.prospectDetailPanel .clientFacts strong,
.prospectDetailPanel .clientProgress,
.prospectDetailPanel .currentObjectBar > strong,
.prospectDetailPanel .instructionStatus,
.prospectDetailPanel .agentResultText {
  overflow-wrap: anywhere;
}

.prospectDetailPanel .clientFacts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prospectDetailPanel .clientFacts div {
  min-height: 64px;
}

/* 潜客详情：视图(左)与操作(右)分栏，操作区更大更靠前，减少下滚 */
.prospectDetailBody {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.prospectDetailView { display: grid; gap: 10px; align-content: start; }
.prospectDetailView .clientFacts { grid-template-columns: 1fr; gap: 6px; }
.prospectDetailView .clientFacts div { min-height: 0; padding: 8px 10px; }
.prospectEnrichmentCandidates { display:grid; gap:6px; padding:10px; border:1px solid #d8e4ed; border-radius:6px; background:#fbfdff; }
.prospectEnrichmentCandidates > strong { font-size:13px; color:#25455a; }
.prospectEnrichmentCandidate { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #e6edf2; }
.prospectEnrichmentCandidate span { min-width:0; overflow-wrap:anywhere; font-size:12px; color:#495c6c; }
.prospectEnrichmentCandidate button { min-height:28px; padding:2px 8px; white-space:nowrap; }
.prospectDetailWorkflow {
  display: grid; gap: 10px; align-content: start;
  position: sticky; top: 0;
  padding: 14px; border: 1px solid #d7e5df; border-radius: 8px; background: #fafdfb;
}
.prospectDetailWorkflow .instructionBox { gap: 10px; }
.prospectDetailWorkflow .instructionBox textarea { min-height: 128px; }
.prospectDetailWorkflow .agentResultText { min-height: 200px; max-height: 44vh; overflow: auto; }
.instructionButtonRow { display: flex; flex-wrap: wrap; gap: 8px; }
.instructionButtonRow button { width: auto; min-width: 118px; }
.prospectAdvisorButton { background: #eef6f3; border: 1px solid #9cc7bd; color: #0b5f56; }
.prospectAdvisorButton:hover { background: #e2f0eb; }
@media (max-width: 820px) {
  .prospectDetailBody { grid-template-columns: 1fr; }
  .prospectDetailWorkflow { position: static; }
}

.prospectDetailPanel .prospectDrawerMapLink {
  width: auto;
  min-height: 30px;
  margin-top: 7px;
  padding: 0 9px;
}

.prospectDetailWorkflow {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.5fr);
  gap: 10px 14px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.prospectDetailWorkflow .sectionLabel {
  grid-column: 1 / -1;
}

.prospectDetailWorkflow .quickActions {
  grid-template-columns: minmax(0, 1fr);
}

.prospectDetailWorkflow .instructionBox {
  min-width: 0;
}

.prospectDetailWorkflow .instructionBox textarea {
  min-height: 78px;
}

.prospectDetailWorkflow .instructionOutput {
  min-height: 88px;
  max-height: 220px;
  overflow: auto;
}

@media (max-width: 1050px) {
  .prospectDetailDialog {
    width: min(840px, calc(100vw - 32px));
    margin: 16px auto;
  }

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

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

  .prospectDetailWorkflow .sectionLabel {
    grid-column: auto;
  }

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

@media (max-width: 680px) {
  .prospectDetailDialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px;
  }

  .prospectDetailPanel {
    padding: 14px;
  }

  .prospectDetailPanel .clientFacts,
  .prospectDetailWorkflow .quickActions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Client-development shell density and single-scroll behavior. */
body.clientDevDomain .appHeader { min-height: 56px; padding: 8px 14px; }
body.clientDevDomain .appHeader h1 { font-size: 21px; }
body.clientDevDomain .appHeader p { margin-top: 2px; font-size: 11px; }
body.clientDevDomain .viewTab { min-width: 0; min-height: 34px; padding: 0 10px; border-radius: 6px; }
body.clientDevDomain .accessProof {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto minmax(180px, 1fr) auto;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 0;
}
body.clientDevDomain .accessProof label { gap: 3px; font-size: 11px; }
body.clientDevDomain .accessProof input { min-height: 34px; padding: 6px 9px; }
body.clientDevDomain .accessProof button { min-height: 34px; }
body.clientDevDomain #proofText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
  body.clientDevDomain .accessProof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.clientDevDomain #proofText { grid-column: 1 / -1; }
  .crmIntegratedView .crmPageTitle { align-items: stretch; flex-direction: column; }
  .crmIntegratedView .clientTools { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body.clientDevDomain .accessProof { grid-template-columns: 1fr; }
  body.clientDevDomain #proofText { grid-column: auto; }
  .crmWorkflowWorkspace { margin-inline: 6px; }
  .crmCustomerClassificationFilters { grid-template-columns: 1fr; }
}

.contentJobPanel{margin-top:16px}.contentJobHint{display:block;color:var(--muted);font-size:12px;font-weight:600}.contentJobForm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}.contentJobForm label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:800}.contentJobForm .wide{grid-column:1/-1}.contentJobForm textarea{min-height:74px;resize:vertical}.contentJobForm select{min-height:92px}.contentJobGrid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:12px;padding:0 14px 14px}.subPanelTitle{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;color:var(--ink)}.contentJobRows{display:grid;gap:6px;max-height:290px;overflow:auto}.contentJobRow{display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-radius:7px;background:#fff;padding:9px 10px;cursor:pointer}.contentJobRow:hover,.contentJobRow.active{border-color:var(--accent);background:#effaf7}.contentJobRow span{color:var(--muted);font-size:11px}.contentJobDetail{min-width:0}.contentJobStageBar{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 8px}.contentJobStage{padding:4px 7px;border-radius:999px;background:#eef1f4;color:var(--muted);font-size:11px}.contentJobStage.active{background:#d7f2eb;color:var(--accent-strong);font-weight:800}.contentJobDetailOutput{max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:#f7f9fb;border:1px solid var(--line);border-radius:7px;padding:10px;font-size:11px;line-height:1.45}.contentJobActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.contentJobActions button{font-size:12px;padding:7px 9px}@media(max-width:900px){.contentJobForm,.contentJobGrid{grid-template-columns:1fr}.contentJobForm .wide{grid-column:auto}}

/* Content Job workbench: brand creation is a staged workspace, not a generic ops form. */
.opsForm.contentMode { display: none; }
.contentJobPanel { margin-top: 0; border: 0; background: transparent; }
.contentJobPanel[hidden] { display: none; }
.contentJobHeader { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.contentJobHeader h2 { margin: 3px 0 4px; font-size: 24px; line-height: 1.15; }
.contentJobHeader p { margin: 0; color: var(--muted); font-size: 12px; }
.contentJobEyebrow { display: block; color: var(--accent-strong); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.contentJobHeaderMeta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.quietButton { min-height: 32px; padding: 0 11px; }
.contentJobStart { display: grid; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #f8fafb; }
.contentJobStartMain { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.2fr) minmax(240px, 1.4fr); gap: 10px; }
.contentJobStart label, .contentJobBriefField, .contentJobInputGrid label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 850; }
.contentJobStart input, .contentJobStart select, .contentJobStart textarea { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; }
.contentJobStart input, .contentJobStart select { min-height: 36px; padding: 7px 9px; }
.contentJobStart textarea { min-height: 78px; padding: 9px; resize: vertical; }
.contentJobChannelsField { min-width: 0; margin: 0; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.contentJobChannelsField legend { padding: 0 4px; color: var(--muted); font-size: 11px; font-weight: 850; }
.contentJobChannelChoices { display: flex; flex-wrap: wrap; gap: 6px; }
.contentJobChannelChoices label { display: inline-flex; grid-template-columns: none; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border: 1px solid #d8e3e6; border-radius: 999px; background: #f9fcfb; cursor: pointer; font-weight: 750; }
.contentJobChannelChoices label:has(input:checked) { border-color: var(--accent); background: #e5f7f1; color: var(--accent-strong); }
.contentJobChannelChoices input { min-height: auto; accent-color: var(--accent); }
.contentJobInputGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.contentJobFieldHint { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.4; }
.contentJobFileList { min-height: 28px; padding: 7px 9px; white-space: pre-line; overflow-wrap: anywhere; border: 1px dashed #cbd8dc; border-radius: 6px; background: #fbfdfd; color: var(--muted); font-size: 11px; }
.contentJobStartActions { display: flex; align-items: center; gap: 10px; }
.contentJobStartActions button { min-height: 36px; padding: 0 14px; }
.contentJobStartActions span { color: var(--muted); font-size: 11px; }
.contentJobWorkspace { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(430px, 1.7fr) minmax(190px, .65fr); gap: 12px; padding: 14px 20px 20px; }
.contentJobQueue, .contentJobCanvas, .contentJobNext { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.contentJobQueue { padding: 11px; }
.contentJobQueueHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.contentJobQueueHead div { display: flex; align-items: center; gap: 7px; }
.contentJobQueueHead span { color: var(--muted); font-size: 11px; }
.contentJobQueueHead select { max-width: 100px; min-height: 28px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; font-size: 11px; }
.contentJobSearch { width: 100%; min-height: 32px; margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 12px; }
.contentJobRows { display: grid; gap: 5px; max-height: 560px; overflow: auto; }
.contentJobRow { display: grid; gap: 3px; width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.contentJobRow:hover, .contentJobRow.active { border-color: var(--accent); background: #effaf7; }
.contentJobRow strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.contentJobRow span, .contentJobRow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.contentJobCanvas { padding: 14px; }
.contentJobCanvasHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.contentJobCanvasHead h3 { margin: 3px 0 0; font-size: 18px; }
.contentJobStatusPill { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; background: #eef1f4; color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.contentJobStatusPill[data-status="pending_publish"] { background: #fff2d5; color: #946217; }
.contentJobStatusPill[data-status="published"] { background: #dcf5e9; color: #18744b; }
.contentJobStageBar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 14px 0; }
.contentJobStage { min-width: 0; padding: 6px 4px; border-radius: 4px; background: #eef1f4; color: var(--muted); text-align: center; font-size: 10px; font-weight: 750; }
.contentJobStage.done { background: #e5f7f1; color: var(--accent-strong); }
.contentJobStage.active { background: var(--accent); color: #fff; font-weight: 900; }
.contentJobCanvasGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contentJobCanvasCard { min-width: 0; min-height: 116px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfd; }
.contentJobCanvasCard h4 { margin: 0 0 7px; color: var(--ink); font-size: 12px; }
.contentJobPreview { max-height: 116px; overflow: auto; white-space: pre-line; overflow-wrap: anywhere; color: #4e5e6c; font-size: 11px; line-height: 1.5; }
.contentJobTechnical { margin-top: 9px; color: var(--muted); font-size: 11px; }
.contentJobTechnical summary { cursor: pointer; }
.contentJobDetailOutput { max-height: 190px; margin-top: 7px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fb; padding: 9px; font-size: 10px; line-height: 1.4; }
.contentJobNext { align-self: start; padding: 14px; background: #f8fbfa; }
.contentJobNext h3 { margin: 4px 0; font-size: 17px; }
.contentJobNext p { min-height: 42px; margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.contentJobActions { display: grid; gap: 6px; }
.contentJobActions button { width: 100%; min-height: 34px; padding: 0 8px; font-size: 11px; }
.contentJobActions button:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
@media (max-width: 1180px) { .contentJobWorkspace { grid-template-columns: minmax(210px, .7fr) minmax(380px, 1.3fr); } .contentJobNext { grid-column: 1 / -1; } .contentJobActions { display: flex; flex-wrap: wrap; } .contentJobActions button { width: auto; } }
@media (max-width: 820px) { .contentJobHeader, .contentJobWorkspace { padding-inline: 12px; } .contentJobStart { padding-inline: 12px; } .contentJobStartMain, .contentJobInputGrid, .contentJobWorkspace { grid-template-columns: 1fr; } .contentJobCanvasGrid { grid-template-columns: 1fr; } .contentJobStageBar { grid-template-columns: repeat(4, minmax(0, 1fr)); } .contentJobNext { grid-column: auto; } }
@media (max-width: 560px) { .contentJobHeader { flex-direction: column; } .contentJobStageBar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contentJobStartActions { align-items: flex-start; flex-direction: column; } }


/* Workbench draft review controls. */
.crmDraftControls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.crmDraftControls button { min-height: 34px; padding: 0 12px; }
.crmDraftControls #crmActionDraftSave { border-color: var(--accent); background: #e5f7f1; color: var(--accent-strong); font-weight: 800; }
#crmActionApprovalControls {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 -8px 18px rgb(15 45 55 / 8%);
}
#crmActionApprovalControls[hidden] { display: none; }
#crmActionApprovalControls .crmApprovalPhrase { min-width: 0; }
#crmActionApprovalControls .crmApprovalPhrase input { width: 100%; }
#crmActionApprovalControls .crmApprovalNote { grid-column: 1 / -1; }
#crmActionApprovalControls .crmApprovalNote textarea { min-height: 56px; max-height: 96px; }
#crmActionExecute { min-width: 132px; min-height: 38px; white-space: nowrap; }
@media (max-width: 720px) {
  #crmActionApprovalControls { grid-template-columns: 1fr; }
  #crmActionApprovalControls .crmApprovalNote { grid-column: 1; }
  #crmActionExecute { width: 100%; }
}
#crmActionDraftStatus { display: block; min-height: 18px; color: var(--muted); }