:root {
  --ink: #17213a;
  --muted: #69758b;
  --paper: #f5f7fb;
  --card: #ffffff;
  --line: #e1e6f0;
  --green: #4055d6;
  --green-soft: #eaedff;
  --amber: #d97706;
  --amber-soft: #fff3e0;
  --red: #c94955;
  --red-soft: #ffebee;
}

body {
  background: linear-gradient(135deg, #ffffff 0%, #fbfcff 48%, #e4e8ff 100%);
  background-attachment: fixed;
}

.topbar { border-color: #dfe5f0; }
.brand { color: #17213a; }
.brand-logo { width: 62px; height: 42px; object-fit: contain; object-position: center; }
.eyebrow, .intro .eyebrow { color: #4055d6; }
h1 em { color: #4055d6; }

.button { background: #4055d6; box-shadow: 0 4px 12px #4055d62e; }
.button:hover { background: #3246bd; }
.button.secondary { background: #edf0f8; color: #34405b; box-shadow: none; }
.button.secondary:hover { background: #e1e6f4; }
.text-button { color: #4055d6; }

.metrics article, .panel {
  border-color: #e1e6f0;
  box-shadow: 0 10px 24px #27385b08;
}
.metrics .attention { border-color: #f4c56e; background: #ffffff; }
.metrics .attention strong { color: #4055d6; }
.metrics .booked { border-color: #d6ddff; background: #f8f9ff; }
.count-pill { color: #b85c00; background: #fff0d8; }

.attention-item { border-color: #f4c56e; background: #ffffff; }
.attention-item button { border-color: #cbd4f3; background: #ffffff; color: #4055d6; }
.attention-item button:hover { background: #f3f5ff; }

.filter.active { background: #eaedff; color: #4055d6; }
.status.open, .status.won { color: #4055d6; background: #eaedff; }
.status.reply { color: #b85c00; background: #fff0d8; }
.status.lost { color: #b6404b; background: #ffebee; }

.playbook-icon { background: #eaedff; color: #4055d6; }
.playbook-icon { margin-right: 7px; }
.opportunity-name { display: inline-flex; max-width: 170px; min-width: 0; align-items: center; vertical-align: middle; white-space: nowrap; }
.opportunity-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quoteDialog input[readonly] { border-color: #e0e5ef; background: #f7f8fb; box-shadow: none; color: #5c687c; cursor: default; }
body.dark-mode #quoteDialog input[readonly] { border-color: #36415d; background: #171f31; color: #bac4d4; }

#quoteDialog { max-height: calc(100vh - 32px); overflow: auto; }
.opportunity-notes { display: grid; gap: 11px; margin: 4px 0 22px; padding-top: 20px; border-top: 1px solid #e4e8f1; }
.opportunity-notes h3 { margin: 0; color: #17213a; font-size: 16px; letter-spacing: -.35px; }
.opportunity-notes .eyebrow { margin-bottom: 5px; }
.note-list { display: grid; gap: 8px; max-height: 190px; overflow: auto; padding-right: 3px; }
.note-item { padding: 10px 12px; border: 1px solid #e5e9f2; border-radius: 10px; background: #fbfcff; }
.note-item time { display: block; margin-bottom: 5px; color: #77839a; font-size: 11px; font-weight: 700; }
.note-item p { margin: 0; color: #3f4d64; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.note-empty { padding: 4px 0; margin: 0; }
.opportunity-notes textarea { min-height: 74px; resize: vertical; }
.add-note-button { justify-self: start; min-height: 34px; padding: 7px 11px; font-size: 12px; }
body.dark-mode .opportunity-notes { border-color: #36415d; }
body.dark-mode .opportunity-notes h3 { color: #f4f6ff; }
body.dark-mode .note-item { border-color: #38445f; background: #19233a; }
body.dark-mode .note-item time { color: #9eabc1; }
body.dark-mode .note-item p { color: #d1d9e8; }
.playbook-icon.urgent { background: #ffebee; color: #bf4751; }
.playbook-icon.standard { background: #e8f4ff; color: #2573aa; }
.playbook-icon.high { background: #fff0d8; color: #b86a08; }

.row-action, .toggle { border-color: #d9e0ed; color: #536078; }
.row-action:hover, .toggle:hover { border-color: #aeb9e5; background: #f6f7ff; color: #4055d6; }
.approval-actions button { border-color: #c9d1f2; color: #4055d6; }
.approval-actions button:hover { background: #f4f6ff; }

input:focus, textarea:focus, .form-grid select:focus {
  border-color: #4055d6;
  box-shadow: 0 0 0 3px #4055d61d;
}
.incoming-message { border-color: #bfc8f6; background: #f5f6ff; color: #3e4a63; }
.email-connect { border-color: #d8def7; background: #f6f7ff; }

dialog { box-shadow: 0 25px 80px #17213a2b; }
dialog::backdrop { background: #17213a66; }
.automation-panel { background: linear-gradient(100deg, #f0f3ff, #f8f9ff); }
.playbook-settings-button { margin-top: 10px; }
.playbook-fields { display: grid; gap: 14px; margin: 20px 0 12px; }
.playbook-fields textarea { min-height: 46px; line-height: 1.45; }
.playbook-fields small { color: #69758b; font-size: 11px; font-weight: 500; }
.playbook-help { margin: 0; color: #69758b; font-size: 12px; line-height: 1.5; }
#headerDeliveryMode { color: #536078; }

.theme-toggle { border: 1px solid #d8def0; border-radius: 999px; padding: 6px 10px; background: #ffffffaa; color: #4055d6; font: 700 11px inherit; cursor: pointer; }
.theme-toggle:hover { border-color: #aeb9e5; background: #f4f6ff; }

body.dark-mode {
  --ink: #f4f6ff;
  --muted: #aeb8cc;
  --paper: #11172a;
  --card: #171f35;
  --line: #2d3855;
  --green: #8695ff;
  --green-soft: #27315c;
  --amber: #f2ae45;
  --amber-soft: #49381e;
  --red: #ff7c88;
  --red-soft: #492932;
  background: linear-gradient(135deg, #11172a 0%, #161d36 52%, #25285c 100%);
}
body.dark-mode .topbar { border-color: #2d3855; }
body.dark-mode .brand { color: #f4f6ff; }
body.dark-mode .lede, body.dark-mode .mode-help, body.dark-mode .next { color: #aeb8cc; }
body.dark-mode .button.secondary { background: #252f4c; color: #e1e6ff; }
body.dark-mode .button.secondary:hover { background: #303c60; }
body.dark-mode .metrics article, body.dark-mode .panel { border-color: #2d3855; box-shadow: 0 10px 24px #00000022; }
body.dark-mode .metrics .attention, body.dark-mode .attention-item { border-color: #9b752f; background: #1a2138; }
body.dark-mode .metrics .booked { border-color: #3c4b83; background: #1a2138; }
body.dark-mode .attention-item strong, body.dark-mode .attention-item span { color: inherit; }
body.dark-mode .attention-item button, body.dark-mode .row-action, body.dark-mode .toggle { border-color: #45558a; background: #1e2846; color: #cbd4ff; }
body.dark-mode .attention-item button:hover, body.dark-mode .row-action:hover, body.dark-mode .toggle:hover { background: #28345b; }
body.dark-mode .filter.active, body.dark-mode .status.open, body.dark-mode .status.won { background: #2b3768; color: #aeb9ff; }
body.dark-mode .status.reply, body.dark-mode .count-pill { background: #49381e; color: #f6bd61; }
body.dark-mode .status.lost { background: #492932; color: #ff9fa8; }
body.dark-mode .automation-panel { background: linear-gradient(100deg, #1c2545, #171f35); }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select, body.dark-mode .form-grid select { border-color: #45558a; background: #11182c; color: #f4f6ff; }
body.dark-mode .incoming-message, body.dark-mode .email-connect { border-color: #3c4b83; background: #1d2644; color: #dce2ff; }
body.dark-mode .theme-toggle { border-color: #46558a; background: #1d2644; color: #cbd4ff; }
body.dark-mode .theme-toggle:hover { background: #28345b; }
body.dark-mode #headerDeliveryMode { color: #d5dcfa; }

.modern-topbar { height: auto; min-height: 76px; margin-top: 22px; padding: 10px 16px; justify-content: initial; border: 1px solid #e1e6f0; border-radius: 14px; background: #ffffffd9; box-shadow: 0 9px 28px #17213a0d; }
.modern-topbar .brand { flex: 0 0 auto; gap: 2px; font-size: 18px; }
.brand-link { text-decoration: none; }
.brand-mark-frame { display: grid; width: 37px; height: 37px; place-items: center; }
.modern-topbar .brand-logo { width: 37px; height: 37px; max-width: none; object-fit: contain; mix-blend-mode: screen; }
.brand-wordmark { display: inline-flex; align-items: baseline; font-family: "Arial Black", "Trebuchet MS", system-ui, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -1.35px; line-height: 1; }
.brand-wordmark span:last-child { color: #4055d6; }
.primary-nav { display: flex; align-self: stretch; align-items: stretch; gap: 4px; margin-left: 72px; }
.nav-item { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: transparent; color: #536078; text-decoration: none; font: 650 14px inherit; cursor: pointer; }
.nav-item:hover { color: #4055d6; }
.nav-item.active { color: #4055d6; font-weight: 800; }
.nav-item.active::after { position: absolute; right: 13px; bottom: -10px; left: 13px; height: 2px; border-radius: 2px; background: #4055d6; content: ''; }
.user-controls { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.user-controls .mode { gap: 6px; padding-right: 9px; border-right: 1px solid #e3e7f0; }
.user-controls .theme-toggle { display: grid; width: 34px; min-width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 18px; }
.user-controls .theme-toggle:hover { background: #f1f3f8; }
body.dark-mode .user-controls .theme-toggle { border: 0; background: transparent; }
body.dark-mode .user-controls .theme-toggle:hover { background: #27315c; }
.user-controls .account-chip { display: grid; min-width: 34px; height: 34px; place-items: center; padding: 0 10px; border-radius: 999px; background: #f1f3f8; color: #4055d6; font-size: 12px; }
.user-controls .account-chip:hover { background: #e5e9fb; color: #4055d6; }
.user-controls .menu-button { width: 34px; height: 34px; border-color: #d8def0; border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; }
.user-controls .menu-button:hover { border-color: #d8def0; background: #f5f7fd; }
body.dark-mode .modern-topbar { border-color: #2d3855; background: #171f35e6; box-shadow: 0 9px 28px #0000002e; }
body.dark-mode .nav-item { color: #b6c0d7; }
body.dark-mode .nav-item:hover,body.dark-mode .nav-item.active { color: #aeb9ff; }
body.dark-mode .user-controls .mode { border-color: #2d3855; }
body.dark-mode .user-controls .account-chip { background: #27315c; color: #cbd4ff; }
body.dark-mode .brand-wordmark span:first-child { color: #f4f6ff; }
body.dark-mode .user-controls .menu-button { border-color: #46558a; }
.dashboard-return { margin-left: auto; }
@media(max-width:900px){.primary-nav{margin-left:24px}.nav-item{padding:0 9px}.user-controls .mode{display:none}}
@media(max-width:650px){.modern-topbar{padding:8px 10px}.modern-topbar .brand span,.primary-nav .nav-item:not(.active){display:none}.primary-nav{margin-left:10px}.nav-item{padding:0 7px}.nav-item.active::after{right:5px;left:5px}.user-controls{gap:3px}}

/* AfterLeads interface type system */
body,button,input,select,textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1,h2,h3 { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
h1 { font-size: clamp(38px, 4.1vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -2px; }
h1 em { font-family: inherit; font-style: italic; font-weight: 700; }
h2 { font-size: 21px; font-weight: 780; line-height: 1.2; letter-spacing: -0.8px; }
.lede { font-size: 15px; line-height: 1.65; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
label,th { font-size: 11px; font-weight: 700; letter-spacing: 0.1px; }
input,select,textarea { font-size: 14px; line-height: 1.4; }
.button { font-size: 13px; font-weight: 750; letter-spacing: -0.1px; }
.text-button,.nav-item { font-size: 13px; font-weight: 700; }
table { font-size: 13px; }

/* Dashboard layout */
.metrics { gap: 16px; margin-bottom: 20px; }
.metrics article { min-height: 126px; padding: 21px 22px; border: 1px solid #e3e8f2; border-radius: 16px; background: #ffffff; box-shadow: none; }
.metrics article:nth-child(2) { background: #fbfcff; }
.metrics .attention { border-color: #f2bf67; background: #fffdfa; }
.metrics .booked { border-color: #d9dfff; background: #f8f9ff; }
.metrics article > span { font-size: 12px; font-weight: 700; }
.metrics strong { margin: 9px 0 2px; font-size: 29px; letter-spacing: -1.4px; }
.metrics small { font-size: 12px; }
.grid { grid-template-columns: minmax(320px, .78fr) minmax(0, 1.42fr); gap: 20px; }
.panel { padding: 24px; border-radius: 16px; box-shadow: 0 10px 28px #27385b0a; }
.panel-heading { margin-bottom: 20px; }
.panel-heading h2 { font-size: 20px; }
.attention-panel { display: flex; flex-direction: column; }
.attention-list { gap: 12px; }
.attention-list .attention-item { padding: 17px; border-radius: 12px; border-left: 3px solid #f2bf67; }
.attention-list .attention-item strong { font-size: 14px; }
.attention-list .attention-item span { line-height: 1.5; }
.attention-list .approval-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 15px; }
.attention-list .approval-actions .action-spacer { display: none; }
.attention-list .approval-actions button { width: auto; min-height: 38px; padding: 8px; font-size: 11px; }
.attention-list .approval-actions button:first-child { grid-column: 1 / -1; border-color: #4055d6; background: #4055d6; color: #ffffff; }
.attention-list .approval-actions button:first-child:hover { background: #3147c4; }
.filters { gap: 5px; margin-bottom: 18px; }
.filter { padding: 7px 10px; border-radius: 8px; font-size: 12px; }
.table-wrap { margin: 0 -4px; }
th { padding: 0 10px 11px; font-size: 10px; letter-spacing: 0.4px; }
td { padding: 15px 10px; border-top-color: #edf0f5; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #fafbff; }
.customer-email { margin-top: 3px; font-size: 11px; }
.status { padding: 4px 8px; font-size: 10px; }
.pipeline-panel tr.is-due td:first-child { box-shadow: inset 3px 0 0 #ef9f31; }
.due-now-label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #f2b25b; border-radius: 999px; padding: 4px 8px; background: #fff3df; color: #a55a00; font-size: 11px; font-weight: 800; white-space: nowrap; }
.due-now-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e58a15; box-shadow: 0 0 0 3px #fce1ba; }
.row-menu { position: relative; display: inline-block; }
.row-action.quick-send { display: inline-block; margin: 0 6px 0 0; border-color: #4055d6; background: #4055d6; color: #ffffff; }
.row-action.quick-send:hover { border-color: #3245bd; background: #3245bd; color: #ffffff; }
.row-menu summary { list-style: none; min-width: 68px; border: 1px solid #dbe2f0; border-radius: 8px; padding: 6px 9px; color: #4055d6; background: #ffffff; font-size: 11px; font-weight: 700; text-align: center; cursor: pointer; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu[open] summary { border-color: #aeb9e5; background: #f4f6ff; }
.row-menu > div { position: absolute; z-index: 3; right: 0; top: 34px; display: grid; min-width: 142px; padding: 5px; border: 1px solid #e0e6f0; border-radius: 10px; background: #ffffff; box-shadow: 0 14px 30px #17213a1c; }
.row-menu.opens-up > div { top: auto; bottom: 34px; box-shadow: 0 -14px 30px #17213a1c; }
.row-menu .row-action { margin: 0; border: 0; border-radius: 6px; padding: 8px 9px; background: transparent; color: #536078; text-align: left; font-size: 11px; }
.row-menu .row-action:hover { border: 0; background: #f2f4ff; color: #4055d6; }
.row-menu .row-action.delete { color: #c44e5b; }
body.dark-mode .metrics article { border-color: #2d3855; background: #171f35; }
body.dark-mode .metrics article:nth-child(2) { background: #1a223b; }
body.dark-mode .metrics .attention { border-color: #9b752f; background: #1a2138; }
body.dark-mode .metrics .booked { border-color: #3c4b83; background: #1a2138; }
body.dark-mode tbody tr:hover { background: #1c2542; }
body.dark-mode .row-menu summary,body.dark-mode .row-menu > div { border-color: #45558a; background: #1b2440; color: #cbd4ff; }
body.dark-mode .row-action.quick-send { border-color: #7085ff; background: #5268ec; color: #ffffff; }
body.dark-mode .pipeline-panel tr.is-due td:first-child { box-shadow: inset 3px 0 0 #eaa139; }
body.dark-mode .due-now-label { border-color: #805622; background: #372917; color: #ffd08a; }
body.dark-mode .due-now-label::before { background: #f4ad45; box-shadow: 0 0 0 3px #5a3c1a; }
body.dark-mode .row-menu[open] summary,body.dark-mode .row-menu .row-action:hover { background: #28345b; }
body.dark-mode .row-menu .row-action { color: #cbd4ff; }

/* Shared visual polish */
::selection { background: #dfe4ff; color: #17213a; }
.panel,.metrics article,.pricing-card,.annual-note,.pricing-faq { backdrop-filter: blur(10px); }
.panel { border-color: #e4e8f1; }
.button { min-height: 40px; border-radius: 9px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 16px #4055d633; }
.button.secondary:hover { box-shadow: none; }
.text-button { border-radius: 7px; padding: 5px 6px; }
input,textarea,select,.form-grid select { border-color: #d8dfeb; border-radius: 9px; background: #ffffff; }
input:hover,textarea:hover,select:hover,.form-grid select:hover { border-color: #bdc8e5; }
dialog { border: 1px solid #e3e8f2; border-radius: 18px; }
dialog form { padding: 28px; }
.dialog-heading { gap: 18px; align-items: flex-start; }
.dialog-copy { max-width: 520px; line-height: 1.6; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 23px; }
.icon-button:hover { background: #f1f3f8; color: #4055d6; }
.form-grid { gap: 16px; margin: 22px 0; }
.toast { border-radius: 10px; box-shadow: 0 12px 28px #17213a2e; }
.automation-panel { border-radius: 16px; }
.modern-topbar .brand-logo { mix-blend-mode: normal; }

/* The mark is a transparent PNG. The dark-mode treatment lifts its blue strokes
   without introducing a background tile or altering the orange arrow. */
.brand-logo-dark { display: none; }
body.dark-mode .brand-logo-light { display: none; }
body.dark-mode .brand-logo-dark {
  display: block;
  filter: brightness(1.55) saturate(1.18) hue-rotate(7deg);
}

#responseDialog.with-details { width: min(1040px, calc(100% - 32px)); }
#responseDialog.with-details .response-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: start;
}
.response-details-panel {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  max-height: calc(100vh - 180px);
  overflow: auto;
}
.response-details-heading { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.response-details-heading .eyebrow { grid-column: 1 / -1; margin: 0; }
.response-details-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.details-edit { font-size: 13px; white-space: nowrap; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 20px; }
.details-grid div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%); }
.details-grid dt { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
.details-grid dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.response-notes { border-top: 1px solid var(--line); margin-bottom: 22px; padding-top: 18px; }
.response-notes .eyebrow { margin: 0 0 8px; }
.response-notes .note-list { margin-bottom: 12px; }
.response-notes textarea { min-height: 74px; overflow: auto; resize: vertical; }
.response-input-notice { margin: 0 0 10px; border: 1px solid #efb35c; border-radius: 9px; padding: 9px 11px; background: #fff5e6; color: #8b4d00; font-size: 12px; line-height: 1.45; }
.response-input-notice strong { color: #9a5100; }
.guard-mascot { display: flex; justify-content: center; height: 126px; margin: 8px 0 2px; }
.guard-mascot img { width: 126px; height: 126px; object-fit: contain; }
#mascotGuardDialog { width: min(510px, calc(100% - 32px)); }
#mascotConfirmDialog { width: min(510px, calc(100% - 32px)); }
.mascot-guard-content { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 16px; align-items: center; }
.mascot-guard-content > img { width: 108px; height: 108px; object-fit: contain; }
.mascot-guard-content .eyebrow { margin: 0 0 6px; }
.mascot-guard-content h2 { font-size: 21px; }
.mascot-guard-content .dialog-copy { margin: 8px 0 0; }
.mascot-confirm-action { background: #9f3e4c; }
.mascot-confirm-action:hover { background: #8c3542; }
.plan-lock-note { border: 0; padding: 0; background: transparent; color: #98a2b2; font: inherit; cursor: pointer; }
.plan-lock-note:hover { color: #65738a; }

/* Compact reply controls: reopen is secondary; confirmation completes the step. */
#responseDialog .dialog-actions { gap: 7px; }
#responseDialog .dialog-actions .button { min-height: 34px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.15; }
#responseDialog .response-notes .add-note-button { width: fit-content; min-height: 32px; margin-top: 8px; padding: 7px 10px; border: 1px solid #d5ddec; background: #f5f7fb; color: #4b5b78; }
#responseDialog .response-notes .add-note-button:hover { border-color: #b9c4ee; background: #edf0ff; color: #4055d6; }
#responseDialog .response-open-email { border: 1px solid #b9c4ee; background: #f6f7ff; color: #4055d6; }
#responseDialog .response-open-email:hover { border-color: #8fa0df; background: #edf0ff; color: #3147c4; }
#responseDialog .response-confirm-sent { background: #19764a; color: #ffffff; }
#responseDialog .response-confirm-sent:hover { background: #12673e; }
body.dark-mode #responseDialog .response-open-email { border-color: #52649c; background: #202a49; color: #cbd4ff; }
body.dark-mode #responseDialog .response-open-email:hover { border-color: #7388ca; background: #29355a; }
body.dark-mode #responseDialog .response-confirm-sent { background: #267f53; }
body.dark-mode #responseDialog .response-confirm-sent:hover { background: #1e7046; }
body.dark-mode #responseDialog .response-notes .add-note-button { border-color: #45558a; background: #202a49; color: #cbd4ff; }
body.dark-mode #responseDialog .response-notes .add-note-button:hover { border-color: #6478b7; background: #29355a; }
body.dark-mode .response-input-notice { border-color: #8d6127; background: #392a18; color: #ffd192; }
body.dark-mode .response-input-notice strong { color: #ffdba6; }
body.dark-mode .mascot-guard-content h2 { color: #f4f6ff; }
body.dark-mode .mascot-confirm-action { background: #a94c59; }
body.dark-mode .plan-lock-note { color: #8190ad; }

/* Pipeline colour discipline: blue = active, green = won, amber = due. */
.pipeline-panel .playbook-icon,.pipeline-panel .playbook-icon.urgent,.pipeline-panel .playbook-icon.standard,.pipeline-panel .playbook-icon.high { background: #f2f4f8; color: #6d7b91; }
.pipeline-panel .status.reply,.pipeline-panel .status.conversation,.pipeline-panel .status.lost { background: #f2f4f8; color: #66748a; }
.recent-booking { display: inline-flex; margin-left: 5px; border-radius: 999px; padding: 3px 6px; background: #e7f8ed; color: #187248; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
.pipeline-panel tr.is-due td:first-child { box-shadow: none; }
body.dark-mode .pipeline-panel .playbook-icon,body.dark-mode .pipeline-panel .playbook-icon.urgent,body.dark-mode .pipeline-panel .playbook-icon.standard,body.dark-mode .pipeline-panel .playbook-icon.high { background: #26314b; color: #aeb8cc; }
body.dark-mode .pipeline-panel .status.reply,body.dark-mode .pipeline-panel .status.conversation,body.dark-mode .pipeline-panel .status.lost { background: #273148; color: #b8c2d4; }
body.dark-mode .recent-booking { background: #173d29; color: #a8ebba; }
body.dark-mode .pipeline-panel tr.is-due td:first-child { box-shadow: none; }

/* Customer replies use the same coral treatment in the metric and its queue card. */
.attention-list .attention-item { border-color: #f2a493; border-left-color: #df725f; background: #fff8f6; }
body.dark-mode .attention-list .attention-item { border-color: #904f48; border-left-color: #ef8878; background: #2c1d24; }

@media (max-width: 820px) {
  #responseDialog.with-details .response-workspace { grid-template-columns: 1fr; }
  .response-details-panel { border-top: 1px solid var(--line); border-left: 0; max-height: none; padding-top: 22px; padding-left: 0; }
}

@media (max-width: 480px) {
  .mascot-guard-content { grid-template-columns: 78px minmax(0,1fr); gap: 12px; }
  .mascot-guard-content > img { width: 78px; height: 78px; }
  .mascot-guard-content h2 { font-size: 19px; }
}
body.dark-mode input,body.dark-mode textarea,body.dark-mode select,body.dark-mode .form-grid select { background: #11182c; }
body.dark-mode .icon-button:hover { background: #27315c; }
body.dark-mode ::selection { background: #33427a; color: #f4f6ff; }

/* Dashboard outcome colours: pipeline, action, urgency, and success should read at a glance. */
.metrics article:nth-child(1) { border-color: #cbd5ff; background: #f7f9ff; }
.metrics article:nth-child(1) > span,.metrics article:nth-child(1) small { color: #536ea8; }
.metrics article:nth-child(1) strong { color: #2448a6; }
.metrics article:nth-child(2) { border-color: #f2ca75; background: #fffcf5; }
.metrics article:nth-child(2) > span,.metrics article:nth-child(2) small { color: #9a6a19; }
.metrics article:nth-child(2) strong { color: #b66b00; }
.metrics .attention { border-color: #f2a493; background: #fff8f6; }
.metrics .attention > span,.metrics .attention small { color: #a55245; }
.metrics .attention strong { color: #c44937; }
.metrics .booked { border-color: #8bd2a7; background: #f3fcf6; }
.metrics .booked > span,.metrics .booked small { color: #397b54; }
.metrics .booked strong { color: #137446; }

body.dark-mode .metrics article:nth-child(1) { border-color: #425aaf; background: #172445; }
body.dark-mode .metrics article:nth-child(1) > span,body.dark-mode .metrics article:nth-child(1) small { color: #a8bbff; }
body.dark-mode .metrics article:nth-child(1) strong { color: #c5d1ff; }
body.dark-mode .metrics article:nth-child(2) { border-color: #8d6a2c; background: #2b2418; }
body.dark-mode .metrics article:nth-child(2) > span,body.dark-mode .metrics article:nth-child(2) small { color: #f1ce83; }
body.dark-mode .metrics article:nth-child(2) strong { color: #ffd279; }
body.dark-mode .metrics .attention { border-color: #904f48; background: #2c1d24; }
body.dark-mode .metrics .attention > span,body.dark-mode .metrics .attention small { color: #f0aba2; }
body.dark-mode .metrics .attention strong { color: #ffb1a5; }
body.dark-mode .metrics .booked { border-color: #347f53; background: #172b22; }
body.dark-mode .metrics .booked > span,body.dark-mode .metrics .booked small { color: #9ed6b1; }
body.dark-mode .metrics .booked strong { color: #b6f0c8; }

/* Modern KPI-card treatment: a restrained accent rail makes the state legible without visual noise. */
.metrics article {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.metrics article::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 22px;
  left: 22px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: #4064d8;
}
.metrics article::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34px;
  right: -30px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #4064d810;
}
.metrics article:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #17213a12; }
.metrics article:nth-child(2)::before { background: #e3a334; }
.metrics article:nth-child(2)::after { background: #e3a33414; }
.metrics .attention::before { background: #df725f; }
.metrics .attention::after { background: #df725f12; }
.metrics .booked::before { background: #31a567; }
.metrics .booked::after { background: #31a56714; }
.metrics .booked { box-shadow: 0 11px 26px #31a56710; }

body.dark-mode .metrics article::after { background: #6e8fff1c; }
body.dark-mode .metrics article:nth-child(2)::after { background: #f0bd571f; }
body.dark-mode .metrics .attention::after { background: #ef88781f; }
body.dark-mode .metrics .booked::after { background: #5bc7831f; }

/* Emotional hierarchy: reward progress and commitment; keep loss and deletion available but visually quiet. */
.status.open { color: #3157bd; background: #eaf0ff; }
.status.won { color: #147147; background: #e6f7ec; }
.status.reply { color: #a66100; background: #fff1d9; }
.status.conversation { color: #6a4ea4; background: #f0ebff; }
.status.lost { color: #7c8797; background: #f1f3f6; }

.attention-list .approval-actions button[data-snooze],.attention-list .approval-actions button[data-book],.attention-list .approval-actions button[data-close-lost] { border-color: #cbd4f3; background: #ffffff; color: #4055d6; }
.attention-list .approval-actions button[data-snooze]:hover,.attention-list .approval-actions button[data-book]:hover,.attention-list .approval-actions button[data-close-lost]:hover { border-color: #aeb9e5; background: #f3f5ff; color: #3147c4; }
.attention-list .approval-actions button[data-book] { border-color: #cbd4f3; background: #ffffff; color: #4055d6; }
.attention-list .approval-actions button[data-book]:hover { border-color: #aeb9e5; background: #f3f5ff; color: #3147c4; }

.approval-actions button[data-approve] { border-color: #8bcda7; background: #f2fcf5; color: #157046; }
.approval-actions button[data-approve]:hover { border-color: #4da874; background: #e3f8ea; color: #0b6037; }
.approval-actions button[data-redraft] { color: #65738a; }

.row-menu .row-action[data-export],.row-menu .row-action[data-complete] { color: #177247; }
.row-menu .row-action[data-export]:hover,.row-menu .row-action[data-complete]:hover { background: #edf9f1; color: #0e653b; }
.row-menu .row-action.delete { color: #919aa8; }
.row-menu .row-action.delete:hover { background: #f7f8fa; color: #788393; }

.outcomes button[data-outcome="won"].selected { border-color: #67bd88; background: #edf9f1; color: #147047; }
.outcomes button[data-outcome="open"].selected { border-color: #9caceb; background: #f1f4ff; color: #3652ba; }
.outcomes button[data-outcome="lost"].selected { border-color: #d7dce4; background: #f5f6f8; color: #7a8493; }

body.dark-mode .status.open { color: #b5c3ff; background: #293867; }
body.dark-mode .status.won { color: #abedbf; background: #1c4930; }
body.dark-mode .status.reply { color: #ffd187; background: #4b371c; }
body.dark-mode .status.conversation { color: #d3c4ff; background: #3a2d5b; }
body.dark-mode .status.lost { color: #b6bfcd; background: #2b3342; }
body.dark-mode .attention-list .approval-actions button[data-snooze],body.dark-mode .attention-list .approval-actions button[data-book],body.dark-mode .attention-list .approval-actions button[data-close-lost] { border-color: #45558a; background: #1e2846; color: #cbd4ff; }
body.dark-mode .approval-actions button[data-approve] { border-color: #347e51; background: #173d29; color: #a8ebba; }
body.dark-mode .row-menu .row-action[data-export],body.dark-mode .row-menu .row-action[data-complete] { color: #9fe7b4; }
body.dark-mode .row-menu .row-action.delete { color: #aeb6c2; }
body.dark-mode .outcomes button[data-outcome="won"].selected { border-color: #3a8a5a; background: #173d29; color: #a8ebba; }
body.dark-mode .outcomes button[data-outcome="lost"].selected { border-color: #465168; background: #252d3c; color: #b5becb; }

/* Compact action hierarchy used throughout the app's working areas. */
.dialog-actions { gap: 8px; }
.dialog-actions .button { min-height: 34px; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.15; }
.dialog-actions .button.secondary { border: 1px solid #d8e0ed; background: #f5f7fb; color: #4d5b74; }
.dialog-actions .button.secondary:hover { border-color: #bbc7e6; background: #eef1f9; color: #4055d6; }
.opportunity-notes .add-note-button { min-height: 32px; margin-top: 3px; border: 1px solid #d5ddec; background: #f5f7fb; color: #4b5b78; }
.opportunity-notes .add-note-button:hover { border-color: #b9c4ee; background: #edf0ff; color: #4055d6; }

.approval-actions { gap: 6px; }
.approval-actions button { min-height: 32px; padding: 7px 9px; border-radius: 8px; font-size: 11px; line-height: 1.15; }
.approval-actions button[data-edit-draft],.approval-actions button[data-redraft] { border-color: #d9e0ed; background: #f7f8fb; color: #65738a; }
.approval-actions button[data-approve],.approval-actions button[data-open-pending-email] { border-color: #b9c4ee; background: #f5f7ff; color: #4055d6; }
.approval-actions button[data-confirm-email] { border-color: #8bcda7; background: #f2fcf5; color: #157046; }
.attention-list .approval-actions button[data-snooze] { border-color: #d9e0ed; background: #f7f8fb; color: #65738a; }
.attention-list .approval-actions button[data-book] { border-color: #b9c4ee; background: #f5f7ff; color: #4055d6; }
.attention-list .approval-actions button[data-book]:hover { border-color: #73bd91; background: #edf9f1; color: #157046; }
.attention-list .approval-actions button[data-close-lost] { border-color: #e1e5ec; background: #f8f9fb; color: #7a8493; }
.attention-list .approval-actions button[data-close-lost]:hover { border-color: #e2a7ae; background: #fff1f2; color: #bd4453; }
.row-menu .row-action[data-confirm-email] { color: #157046; }
.row-menu .row-action[data-confirm-email]:hover { background: #edf9f1; color: #0e653b; }

body.dark-mode .dialog-actions .button.secondary,body.dark-mode .opportunity-notes .add-note-button { border-color: #45558a; background: #202a49; color: #cbd4ff; }
body.dark-mode .dialog-actions .button.secondary:hover,body.dark-mode .opportunity-notes .add-note-button:hover { border-color: #6478b7; background: #29355a; color: #e3e7ff; }
body.dark-mode .approval-actions button[data-edit-draft],body.dark-mode .approval-actions button[data-redraft],body.dark-mode .attention-list .approval-actions button[data-snooze],body.dark-mode .attention-list .approval-actions button[data-close-lost] { border-color: #45558a; background: #202a49; color: #cbd4ff; }
body.dark-mode .approval-actions button[data-approve],body.dark-mode .approval-actions button[data-open-pending-email] { border-color: #52649c; background: #202a49; color: #cbd4ff; }
body.dark-mode .approval-actions button[data-confirm-email] { border-color: #347e51; background: #173d29; color: #a8ebba; }
body.dark-mode .attention-list .approval-actions button[data-book] { border-color: #52649c; background: #202a49; color: #cbd4ff; }
body.dark-mode .attention-list .approval-actions button[data-book]:hover { border-color: #347e51; background: #173d29; color: #a8ebba; }
body.dark-mode .attention-list .approval-actions button[data-close-lost]:hover { border-color: #95515d; background: #3c252d; color: #ffb1b9; }
body.dark-mode .row-menu .row-action[data-confirm-email] { color: #9fe7b4; }

/* Leave breathing room below the pipeline rows so its Manage menu always has
   a comfortable place to open, even with a short list of opportunities. */
.grid { grid-template-columns: 1fr; }
.attention-panel,
.pipeline-panel { grid-column: 1 / -1; }
.pipeline-panel { min-height: 590px; }
.grid.queue-empty { grid-template-columns: 1fr; }
@media (max-width: 820px) { .pipeline-panel { min-height: 0; } }

/* The response queue stays compact at low volume, then becomes denser before
   changing to an easy-to-scan list when there are many replies. */
.attention-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attention-list--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attention-list--grid .attention-item,
.attention-list--dense .attention-item { padding: 13px 14px; }
.attention-list--grid .attention-item span,
.attention-list--dense .attention-item span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 39px; }
.attention-list--grid .approval-actions,
.attention-list--dense .approval-actions { margin-top: 10px; }
.attention-list--grid .approval-actions button,
.attention-list--dense .approval-actions button { min-height: 31px; padding: 6px; }
.attention-list--list { grid-template-columns: 1fr; max-height: 440px; overflow-y: auto; padding-right: 3px; }
.attention-list--list .attention-item { display: grid; grid-template-columns: minmax(175px, .8fr) minmax(240px, 1.8fr) minmax(300px, 1fr); gap: 14px; align-items: center; padding: 12px 14px; }
.attention-list--list .attention-item span { margin: 0; }
.attention-list--list .approval-actions { display: flex; align-items: center; margin: 0; }
.attention-list--list .approval-actions button { width: auto; min-width: 0; min-height: 31px; padding: 6px 9px; border-color: #cbd4f3; background: #ffffff; color: #4055d6; }
.attention-list--list .approval-actions button:first-child { border-color: #4055d6; background: #4055d6; color: #ffffff; }
.attention-list--list .approval-actions button:first-child:hover { background: #3147c4; }
body.dark-mode .attention-list--list .approval-actions button { border-color: #45558a; background: #1e2846; color: #cbd4ff; }
body.dark-mode .attention-list--list .approval-actions button:first-child { border-color: #526de7; background: #4055d6; color: #ffffff; }
@media (max-width: 820px) {
  .attention-list--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attention-list--list .attention-item { grid-template-columns: 1fr; gap: 6px; }
  .attention-list--list .approval-actions { margin-top: 4px; }
}
@media (max-width: 560px) {
  .attention-list--grid,.attention-list--dense { grid-template-columns: 1fr; }
}

/* On wider screens the table has no need to clip an open Manage menu. */
@media (min-width: 821px) {
  .pipeline-panel .table-wrap { overflow: visible; }
}

.admin-plan-switcher { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px; border: 1px solid #d9e1f7; border-radius: 10px; background: #f7f8ff; }
.admin-plan-switcher .eyebrow { margin-bottom: 4px; }
.admin-plan-switcher strong { color: #24325d; font-size: 13px; }
.admin-plan-switcher p:not(.eyebrow) { margin: 3px 0 0; color: #65738a; font-size: 11px; }
.admin-plan-switcher label { min-width: 130px; }
body.dark-mode .admin-plan-switcher { border-color: #45558a; background: #202a49; }
body.dark-mode .admin-plan-switcher strong { color: #e3e7ff; }
body.dark-mode .admin-plan-switcher p:not(.eyebrow) { color: #aeb9d1; }

.plan-celebration-dialog { overflow: hidden; text-align: center; }
.plan-celebration-dialog form { padding: 22px 28px 26px; }
.plan-celebration-dialog .dialog-copy { margin: 10px auto 18px; max-width: 390px; }
.plan-celebration-dialog .dialog-actions { justify-content: center; }
.celebration-stage { position: relative; display: grid; place-items: center; height: 142px; margin: -6px 0 4px; overflow: hidden; }
.celebration-stage img { position: relative; z-index: 1; width: 126px; height: 126px; object-fit: contain; filter: drop-shadow(0 10px 13px #4055d629); }
.fireworks i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f3a62e; box-shadow: 0 -23px #ef6b59, 16px -16px #4d61e8, 23px 0 #f3a62e, 16px 16px #54b882, 0 23px #ef6b59, -16px 16px #4d61e8, -23px 0 #f3a62e, -16px -16px #54b882; animation: firework-pop 1.8s ease-out infinite; opacity: .9; }
.fireworks i:nth-child(1) { left: 18%; top: 40%; animation-delay: .15s; }
.fireworks i:nth-child(2) { right: 16%; top: 22%; transform: scale(.78); animation-delay: .55s; }
.fireworks i:nth-child(3) { right: 26%; bottom: 8%; transform: scale(.56); animation-delay: .95s; }
@keyframes firework-pop { 0%,100% { opacity: .1; } 28% { opacity: 1; } 55% { opacity: .3; transform: scale(1.18); } }
body.dark-mode .plan-celebration-dialog { background: #171f35; color: #edf0ff; }

/* Shared dark surfaces: dialogs, popovers and form controls should never fall
   back to the browser's white defaults. */
body.dark-mode dialog,
body.dark-mode .menu-popup { border-color: #354361; background: #171f35; color: #edf0ff; box-shadow: 0 22px 60px #05091499; }
body.dark-mode dialog .dialog-copy,
body.dark-mode dialog label,
body.dark-mode dialog small,
body.dark-mode .menu-popup button,
body.dark-mode .header-menu .menu-popup a { color: #b8c3dc; }
body.dark-mode dialog h2,
body.dark-mode dialog h3,
body.dark-mode .menu-popup button:hover,
body.dark-mode .header-menu .menu-popup a:hover { color: #edf0ff; }
body.dark-mode .menu-popup button:hover,
body.dark-mode .header-menu .menu-popup a:hover { background: #27345a; }
body.dark-mode .menu-button { border-color: #45558a; background: #1b2440; color: #cbd4ff; }
body.dark-mode .menu-button:hover { border-color: #6478b7; background: #28345b; color: #edf0ff; }
body.dark-mode dialog input,
body.dark-mode dialog textarea,
body.dark-mode dialog select,
body.dark-mode dialog .form-grid select { border-color: #45558a; background: #11182c; color: #edf0ff; }
body.dark-mode dialog select option { background: #1b2440; color: #edf0ff; }
body.dark-mode dialog .icon-button { color: #aeb9d1; }
body.dark-mode dialog .icon-button:hover { color: #edf0ff; }
body.dark-mode dialog .outcomes button { border-color: #45558a; background: #1e2846; color: #d9e1f4; }
body.dark-mode dialog .outcomes button:hover { background: #28345b; }
body.dark-mode .connection-status.disconnected { background: #49381e; color: #ffd187; }
body.dark-mode .connection-status.connected { background: #173d29; color: #a8ebba; }

/* Manual sending keeps its confirmation visible at the point of action. */
.table-wrap td > .row-action { display: inline-flex; align-items: center; min-height: 31px; margin: 0 5px 0 0; padding: 6px 8px; font-size: 10px; }
.table-wrap td > .row-action.pending-email { border-color: #b9c4ee; background: #f5f7ff; color: #4055d6; }
.table-wrap td > .row-action.confirm-sent { border-color: #8bcda7; background: #f2fcf5; color: #157046; }
.table-wrap td > .row-action.confirm-sent:hover { border-color: #4da874; background: #e3f8ea; color: #0b6037; }
body.dark-mode .table-wrap td > .row-action.pending-email { border-color: #52649c; background: #202a49; color: #cbd4ff; }
body.dark-mode .table-wrap td > .row-action.confirm-sent { border-color: #347e51; background: #173d29; color: #a8ebba; }

.signature-image-preview { display: flex; align-items: center; gap: 12px; margin-top: -6px; padding: 11px 12px; border: 1px solid #d9e1f7; border-radius: 10px; background: #f7f8ff; }
.signature-image-preview img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #ffffff; }
.signature-image-preview strong { display: block; color: #24325d; font-size: 12px; }
.signature-image-preview p { margin: 3px 0 0; color: #65738a; font-size: 11px; line-height: 1.4; }
.signature-image-preview .text-button { margin-left: auto; }
body.dark-mode .signature-image-preview { border-color: #45558a; background: #202a49; }
body.dark-mode .signature-image-preview img { background: #11182c; }
body.dark-mode .signature-image-preview strong { color: #edf0ff; }
body.dark-mode .signature-image-preview p { color: #aeb9d1; }

.pipeline-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: #6b7890; font-size: 11px; font-weight: 700; }
.pipeline-pagination > div { display: flex; gap: 6px; }
.pipeline-pagination button { min-height: 29px; border: 1px solid #d8e0ed; border-radius: 7px; padding: 5px 8px; background: #ffffff; color: #4055d6; font: 700 11px inherit; cursor: pointer; }
.pipeline-pagination button:hover:not(:disabled) { border-color: #b9c4ee; background: #f3f5ff; }
.pipeline-pagination button:disabled { opacity: .45; cursor: not-allowed; }
body.dark-mode .pipeline-pagination { color: #aeb9d1; }
body.dark-mode .pipeline-pagination button { border-color: #45558a; background: #1e2846; color: #cbd4ff; }
body.dark-mode .pipeline-pagination button:hover:not(:disabled) { border-color: #6478b7; background: #28345b; }

.plan-status { border: 1px solid #d8e0ed; border-radius: 999px; padding: 6px 9px; color: #4055d6; background: #f7f8ff; font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.plan-status:hover { border-color: #b9c4ee; background: #eef1ff; color: #3147c4; }
body.dark-mode .plan-status { border-color: #45558a; background: #202a49; color: #cbd4ff; }
body.dark-mode .plan-status:hover { border-color: #6478b7; background: #29355a; color: #edf0ff; }