:root {
  --bg: #f4f8fb;
  --surface: #ffffff;
  --surface-soft: #eaf5fc;
  --line: #d7e7f2;
  --text: #0b2740;
  --muted: #63778a;
  --blue: #005c99;
  --blue-dark: #00456f;
  --cyan: #14a3d8;
  --yellow: #ffc93d;
  --green: #138a52;
  --red: #b42318;
  --shadow: 0 10px 30px rgba(0, 59, 100, 0.08);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  letter-spacing: 0;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: var(--blue-dark);
}

.app-version {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  font-size: 21px;
  font-weight: 900;
}

.favicon-preview {
  width: 32px;
  height: 32px;
}

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

.sidebar {
  background: #073d63;
  color: white;
  padding: 22px 16px;
}

.sidebar .brand { color: white; margin-bottom: 28px; }
.nav { display: grid; gap: 6px; }
.nav a {
  color: #d8edf8;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 700;
}
.nav a.active, .nav a:hover {
  background: rgba(255,255,255,0.12);
  text-decoration: none;
  color: white;
}

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

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

h1 { margin: 0; font-size: 28px; line-height: 1.2; }
h2 { margin: 0 0 14px; font-size: 20px; }
h3 { margin: 0 0 10px; font-size: 16px; }
.muted { color: var(--muted); }

.grid {
  display: grid;
  gap: 16px;
}
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { grid-template-columns: 1.2fr 0.8fr; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sales-stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel, .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel { padding: 18px; overflow-x: auto; }
.stat { padding: 16px; }
.stat .number { font-size: 26px; font-weight: 800; color: var(--blue); margin-top: 6px; }

.dashboard-stack {
  display: grid;
  gap: 16px;
  align-content: start;
  align-self: start;
}

.dashboard-secondary {
  align-items: start;
}

.dashboard-secondary > * {
  align-self: start;
}

.dashboard-scroll-panel {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-color: var(--cyan) #e6f1f8;
  scrollbar-width: thin;
}

.dashboard-followups-panel {
  max-height: 280px;
}

.dashboard-scroll-panel::-webkit-scrollbar {
  width: 9px;
}

.dashboard-scroll-panel::-webkit-scrollbar-track {
  background: #e6f1f8;
  border-radius: 999px;
}

.dashboard-scroll-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  border: 2px solid #e6f1f8;
  border-radius: 999px;
}

.lead-mail-status-list {
  display: grid;
  gap: 10px;
}

.lead-mail-status-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.lead-mail-company {
  display: block;
  font-weight: 800;
}

.lead-mail-meta,
.lead-mail-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.inbound-reply-list {
  display: grid;
  gap: 10px;
}

.inbound-reply-item {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
  background: #fbfdff;
}

.inbound-reply-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.inbound-reply-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inbound-reply-heading a {
  font-weight: 800;
}

.followup-list {
  display: grid;
  gap: 10px;
}

.followup-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--text);
}

.followup-card:hover {
  border-color: #9fd4ef;
  box-shadow: 0 8px 18px rgba(0, 92, 153, 0.1);
}

.followup-card-link {
  color: var(--text);
  display: grid;
  gap: 6px;
  text-decoration: none;
}

.followup-card-link:hover {
  text-decoration: none;
}

.followup-dismiss-form {
  border-top: 1px solid var(--line);
  margin: 3px 0 0;
  padding-top: 9px;
}

.button-quiet {
  background: transparent;
  border: 0;
  color: #8a3f3a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 0;
}

.button-quiet:hover {
  color: #b12f27;
  text-decoration: underline;
}

.followup-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.finance-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fbfdff;
}

.finance-strip > div {
  padding: 16px;
  border-right: 1px solid var(--line);
}

.finance-strip > div:last-child { border-right: 0; }
.finance-strip span,
.finance-strip small {
  display: block;
  color: var(--muted);
  font-weight: 700;
}
.finance-strip strong {
  display: block;
  margin: 6px 0;
  color: var(--blue-dark);
  font-size: 24px;
}

.note-box {
  margin-top: 14px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mail-draft-history,
.mail-draft-active,
.finance-debug {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.mail-draft-active {
  border-left: 4px solid var(--yellow);
  background: #fffdf5;
}

.mail-draft-history {
  border-left: 4px solid var(--green);
}

.mail-draft-history summary,
.mail-draft-active summary,
.finance-debug summary {
  cursor: pointer;
  color: var(--blue-dark);
  font-weight: 700;
}

.mail-status-draft {
  box-shadow: inset 0 0 0 1px rgba(138, 91, 0, .18);
}

.mail-status-sent {
  box-shadow: inset 0 0 0 1px rgba(0, 122, 74, .18);
}

.mail-tracking-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
}

.mail-tracking-status strong {
  color: var(--blue-dark);
}

.mail-tracking-status span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.mail-tracking-status .tracking-good {
  background: #dff7ea;
  color: var(--green);
}

.mail-tracking-status .tracking-bad {
  background: #ffe5e5;
  color: var(--red);
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.ai-paste-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.ai-paste-form textarea {
  min-height: 180px;
}

.finance-debug table {
  margin-top: 12px;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 16px;
}

.tabs,
.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
  padding: 8px;
  background: linear-gradient(180deg, #edf7fc, #e4f1f8);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.main nav.tabs,
.main nav.section-tabs,
.main nav.subtabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.tabs a,
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid #cfe1ed;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
  color: var(--blue-dark);
  font-weight: 800;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tabs a::before,
.tab-pill::before,
.subtabs a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cyan);
  opacity: 0.45;
}

.tabs a.active,
.tab-pill.active {
  background: linear-gradient(180deg, #ffffff, #f8fcff);
  border-color: var(--blue);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 59, 100, 0.1);
}

.tabs a:hover,
.tab-pill:hover,
.subtabs a:hover {
  background: #ffffff;
  border-color: var(--cyan);
  box-shadow: 0 6px 14px rgba(0, 59, 100, 0.09);
  text-decoration: none;
  transform: translateY(-1px);
}

.tabs a.active::before,
.tab-pill.active::before,
.subtabs a.active::before {
  background: var(--yellow);
  opacity: 1;
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  background: #f2f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.subtabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 6px;
  background: white;
  border: 1px solid #d7e7f2;
  color: var(--blue-dark);
  font-weight: 800;
}

.subtabs a.active {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  border-color: var(--blue-dark);
  color: white;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 59, 100, 0.12);
}

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

.setting-toggle {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
}

.toolbar label {
  flex: 1 1 150px;
  max-width: 230px;
}

.toolbar label:first-of-type {
  flex-basis: 250px;
  max-width: 340px;
}

.toolbar button,
.toolbar .button {
  flex: 0 0 auto;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 11px;
  color: var(--text);
  background: white;
  font: inherit;
}
input[type="checkbox"] {
  accent-color: var(--blue);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}
textarea { min-height: 110px; resize: vertical; }
.prompt-box {
  font-family: Consolas, "Courier New", monospace;
  min-height: 260px;
  white-space: pre-wrap;
}

.button, button {
  border: 0;
  border-radius: 6px;
  padding: 10px 13px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.button.secondary, button.secondary { background: #dcecf6; color: var(--blue-dark); }
.button.warning { background: var(--yellow); color: #1f2a37; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }

.sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
}

.sortable-header:hover,
.sortable-header.active {
  color: var(--blue-dark);
  background: var(--surface-soft);
  text-decoration: none;
}

.sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  min-height: 14px;
  color: var(--blue);
  font-size: 13px;
  line-height: 1;
}

.sortable-header:not(.active) .sort-indicator::before {
  content: "\\2195";
  color: #9bb5c6;
  font-size: 11px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-soft);
  color: var(--blue-dark);
}
.badge.green { background: #dff7ea; color: var(--green); }
.badge.red { background: #ffe2df; color: var(--red); }
.badge.yellow { background: #fff3c4; color: #8a5b00; }
.badge.purple { background: #efe7ff; color: #6544a3; }
.badge.blue { background: #dcecf6; color: var(--blue-dark); }
.badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.notice {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.notice.error { background: #fff1f0; border-color: #ffc7c2; color: var(--red); }

.stat-list {
  display: grid;
  gap: 12px;
}
.daily-sales-list .stat-list {
  gap: 8px;
}
.stat-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(130px, 1.1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.daily-sales-list .stat-row {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.stat-row:last-child { border-bottom: 0; }
.bar-track {
  background: #e4eef6;
  border-radius: 999px;
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
}
.bar-track span {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
}
.compact-list,
.company-feed {
  display: grid;
  gap: 8px;
}
.compact-item,
.company-feed-item {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}
.compact-item:hover,
.company-feed-item:hover {
  background: var(--surface-soft);
  text-decoration: none;
}
.company-feed-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.company-feed-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 210px;
}
.sales-summary-panel .sales-stat-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sales-summary-panel .stat {
  box-shadow: none;
}
.dashboard-primary {
  margin-top: 16px;
}
.sales-chart-header {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 18px;
}
.sales-chart-header h3 {
  margin-bottom: 4px;
}
.chart-selector {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 190px;
  padding: 10px 12px;
}
.chart-selector select {
  border-color: #b7d3e5;
  font-weight: 800;
}
.invoice-chart {
  margin-top: 14px;
}

.dinero-overview-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(9, 62, 102, 0.08);
  padding: 24px 26px 22px;
}

.dinero-chart-top {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.dinero-chart-top h3 {
  font-size: 24px;
  margin: 0 0 4px;
}

.dinero-metric-strip {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 26px;
  overflow: hidden;
}

.dinero-metric-strip.single {
  grid-template-columns: 1fr;
}

.dinero-metric {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  text-align: center;
}

.dinero-metric + .dinero-metric {
  border-left: 1px solid var(--line);
}

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

.dinero-metric strong {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0;
  line-height: 1;
}

.dinero-metric.green strong {
  color: #0dbf9b;
}

.dinero-metric.blue strong {
  color: var(--blue);
}

.dinero-metric.dark strong {
  color: var(--ink);
}

.dinero-metric.result strong {
  color: #142f4f;
}

.dinero-column-chart {
  display: grid;
  gap: 14px;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 350px;
  overflow-x: auto;
  padding: 8px 4px 0;
}

.dinero-axis {
  color: #9aa9b7;
  display: grid;
  font-size: 13px;
  font-weight: 700;
  grid-template-rows: repeat(5, 1fr);
  padding-bottom: 44px;
  text-align: right;
}

.dinero-chart-plot {
  display: grid;
  gap: 18px;
  grid-auto-columns: minmax(42px, 1fr);
  grid-auto-flow: column;
  min-width: 620px;
  position: relative;
}

.dinero-grid-line {
  border-top: 1px solid #e7eef4;
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

.dinero-grid-line:nth-child(1) { top: 0; }
.dinero-grid-line:nth-child(2) { top: 25%; }
.dinero-grid-line:nth-child(3) { top: 50%; }
.dinero-grid-line:nth-child(4) { top: 75%; }
.dinero-grid-line:nth-child(5) { top: calc(100% - 44px); }

.dinero-chart-column {
  align-items: center;
  display: grid;
  grid-template-rows: 1fr 34px;
  min-height: 328px;
  position: relative;
  z-index: 1;
}

.dinero-bar-pair {
  align-items: end;
  align-self: stretch;
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 2px;
}

.dinero-bar-pair.single {
  justify-content: center;
}

.dinero-bar {
  border-radius: 999px;
  display: block;
  min-height: 0;
  width: 15px;
}

.dinero-bar.revenue {
  background: #12bfa4;
  box-shadow: 0 8px 18px rgba(18, 191, 164, 0.18);
  height: var(--bar-height);
}

.dinero-bar.invoices {
  background: #0b6fb3;
  box-shadow: 0 8px 18px rgba(11, 111, 179, 0.16);
  height: var(--bar-height);
}

.dinero-x-label {
  color: #8b9aaa;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.dinero-chart-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  justify-content: flex-end;
}

.dinero-chart-legend span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.chart-note {
  background: #f6fbff;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.legend-dot {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.legend-dot.revenue {
  background: #12bfa4;
}

.legend-dot.invoices {
  background: #0b6fb3;
}

.compact-header {
  margin-top: 0;
}

.compact-chart {
  box-shadow: none;
  padding: 18px;
}

.compact-chart .dinero-column-chart {
  min-height: 260px;
}

.compact-chart .dinero-chart-column {
  min-height: 238px;
}
.sales-columns {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
.recent-company-panel {
  margin-top: 16px;
  overflow: visible;
}
.company-feed.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.newsletter-tabs {
  margin-top: -6px;
}

.newsletter-card-list {
  display: grid;
  gap: 10px;
}

.newsletter-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
  text-decoration: none;
}

.newsletter-card strong,
.newsletter-card span {
  min-width: 0;
}

.newsletter-card:hover {
  background: var(--surface-soft);
  text-decoration: none;
}

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

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

.product-card img {
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: contain;
  width: 100%;
}

.product-price {
  color: var(--blue);
  font-weight: 900;
}

.email-preview-frame {
  background: #eef6fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.email-preview-frame iframe {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 620px;
  width: 100%;
}

.workflow-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

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

.company-edit-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  overflow: hidden;
}

.company-edit-box > summary {
  background: var(--surface-soft);
  color: var(--blue-dark);
  cursor: pointer;
  font-weight: 800;
  padding: 13px 15px;
}

.company-edit-box[open] > summary {
  border-bottom: 1px solid var(--line);
}

.company-edit-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.not-interested-fields {
  background: #fff8f7;
  border: 1px solid #f3c8c3;
  border-left: 4px solid #c8453c;
  border-radius: 7px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.not-interested-fields[hidden] {
  display: none;
}

.not-interested-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-column: 1 / -1;
}

.not-interested-heading strong {
  color: #9d2f29;
}

.not-interested-heading span {
  color: var(--muted);
}

.form-span-full {
  grid-column: 1 / -1;
}

.checkbox-field {
  align-items: center;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
}

.company-system-meta {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 11px 12px;
}

.company-system-meta strong {
  color: var(--text);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.timeline { display: grid; gap: 10px; }
.timeline-item {
  border-left: 3px solid var(--blue);
  padding-left: 12px;
}

.mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mail-actions form {
  margin: 0;
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .stats, .two, .three, .sales-stat-grid, .sales-summary-panel .sales-stat-grid.compact, .sales-columns, .split-form, .company-edit-form, .not-interested-fields, .settings-grid, .company-feed.two-column, .product-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .main { padding: 16px; }
  .company-feed-item,
  .stat-row {
    grid-template-columns: 1fr;
  }
  .sales-chart-header {
    align-items: stretch;
    flex-direction: column;
  }
  .dinero-overview-card {
    padding: 18px;
  }
  .dinero-chart-top,
  .dinero-chart-legend {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .dinero-chart-top,
  .dinero-metric-strip {
    grid-template-columns: 1fr;
  }
  .dinero-chart-top,
  .dinero-metric-strip {
    display: grid;
  }
  .dinero-metric + .dinero-metric {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .company-feed-meta,
  .badge-stack {
    justify-content: flex-start;
    min-width: 0;
  }
}

/* salesRadar 1.7 workspace and responsive navigation */
.brand small { font-size: 11px; font-weight: 700; opacity: .72; }
.nav-close,
.mobile-nav-button { display: none; }
.page-heading { align-items: center; display: flex; gap: 12px; min-width: 0; }
.dashboard-workspace {
  display: grid;
  gap: 16px;
  grid-template-areas: "inbox followups" "activity suppliers";
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  margin-top: 16px;
}
.dashboard-inbox { grid-area: inbox; }
.dashboard-followups-panel { grid-area: followups; }
.dashboard-activity { grid-area: activity; }
.dashboard-suppliers { grid-area: suppliers; }
.section-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.section-heading h2 { margin-bottom: 3px; }
.section-heading form { margin: 0; }
.eyebrow { color: var(--blue); display: block; font-size: 11px; font-weight: 900; margin-bottom: 4px; text-transform: uppercase; }
.text-action { font-size: 13px; font-weight: 800; white-space: nowrap; }
.section-gap { margin-top: 16px; }
.source-pill { background: #e1f6ee; border-radius: 999px; color: #08764a; font-size: 12px; font-weight: 900; padding: 7px 10px; white-space: nowrap; }
.lead-search-controls { display: grid; gap: 12px; grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px); max-width: 700px; }
.industry-picker { border: 0; margin: 18px 0 0; padding: 0; }
.industry-picker legend { font-weight: 800; margin-bottom: 9px; }
.industry-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { cursor: pointer; position: relative; }
.check-chip input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.check-chip span { background: #f5f9fc; border: 1px solid var(--line); border-radius: 999px; display: block; font-size: 13px; font-weight: 800; padding: 9px 12px; }
.check-chip input:checked + span { background: var(--blue); border-color: var(--blue); color: white; }
.check-chip input:focus-visible + span { outline: 3px solid rgba(20, 163, 216, .28); }
.action-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.lead-contact-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
.lead-contact-summary > div,
.lead-contact-summary > a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  text-decoration: none;
}
.lead-contact-summary > a:hover { background: var(--surface-soft); text-decoration: none; }
.lead-contact-summary span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.lead-contact-summary strong { color: var(--blue); font-size: 26px; }
.lead-contact-summary small { color: var(--muted); }
.candidate-list-heading { align-items: center; display: flex; gap: 8px; margin: 2px 0 12px; }
.candidate-list-heading > span:last-child { color: var(--muted); font-size: 13px; font-weight: 700; }
.candidate-contact-primary { font-weight: 800; }
.empty-state {
  align-items: flex-start;
  background: #f7fbfe;
  border: 1px dashed #bad8ea;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
}
.empty-state span { color: var(--muted); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 820px; }
.table-scroll thead th { background: var(--surface); position: sticky; top: 0; z-index: 1; }
.company-hero { align-items: center; display: flex; gap: 22px; justify-content: space-between; overflow: visible; }
.company-hero h2 { font-size: 26px; margin-bottom: 8px; }
.company-contact-strip { color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.company-primary-actions form { margin: 0; }
.company-local-nav { background: #e6f3fb; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 6px; margin: 12px 0 16px; overflow-x: auto; padding: 6px; }
.company-local-nav a { border-radius: 6px; color: var(--blue-dark); font-size: 13px; font-weight: 800; padding: 9px 12px; white-space: nowrap; }
.company-local-nav a:hover { background: white; text-decoration: none; }
.reply-review-queue { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.reply-review-item { background: #fff8e6; border-left: 3px solid #d89500; display: grid; gap: 3px; margin-top: 8px; padding: 10px 12px; }
.reply-review-item small { color: var(--muted); }

@media (max-width: 1180px) {
  .dashboard-workspace { grid-template-areas: "inbox followups" "activity activity" "suppliers suppliers"; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { bottom: 0; box-shadow: 12px 0 32px rgba(0,0,0,.25); left: 0; max-width: 310px; position: fixed; top: 0; transform: translateX(-105%); transition: transform .2s ease; width: 86vw; z-index: 50; }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-close { background: transparent; border: 0; color: white; display: inline-grid; font-size: 25px; margin-left: auto; padding: 4px; }
  .mobile-nav-button { background: var(--surface); border: 1px solid var(--line); color: var(--blue-dark); display: inline-grid; flex: 0 0 42px; font-size: 20px; height: 42px; padding: 0; place-items: center; width: 42px; }
  .dashboard-workspace { grid-template-areas: "inbox" "followups" "activity" "suppliers"; grid-template-columns: 1fr; }
  .company-hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .main { padding: 12px; }
  .topbar { margin-bottom: 14px; }
  .topbar-action { display: none; }
  h1 { font-size: 24px; }
  .panel { padding: 14px; }
  .stats { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 102px; padding: 13px; }
  .stat .number { font-size: 22px; }
  .lead-search-controls { grid-template-columns: 1fr; }
  .lead-contact-summary { grid-template-columns: 1fr; }
  .industry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-chip span { height: 100%; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 0; }
  .industry-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .source-pill { align-self: flex-start; }
}
.sync-status-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.sync-status-grid > div { background: #f6fafc; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 3px; padding: 12px; }
.sync-status-grid span { color: var(--muted); font-size: 12px; font-weight: 800; }
.sync-status-grid small { color: var(--muted); }
.integration-divider { border-top: 1px solid var(--line); margin: 18px 0; }
@media (max-width: 700px) { .sync-status-grid { grid-template-columns: 1fr; } }

.lead-archive-box {
  background: #fff8e8;
  border: 1px solid #f0d995;
  border-radius: 7px;
  margin-top: 14px;
  padding: 0 12px;
}
.lead-archive-box summary { color: #795800; cursor: pointer; font-weight: 900; padding: 12px 0; }
.lead-archive-form { display: grid; gap: 10px; padding: 0 0 12px; }
.lead-archive-form button { justify-self: start; }
.cvr-review-dialog {
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(4, 42, 67, .32);
  color: var(--text);
  max-height: min(760px, 86vh);
  max-width: 760px;
  overflow-y: auto;
  padding: 22px;
  width: calc(100% - 32px);
}
.cvr-review-dialog::backdrop { background: rgba(2, 24, 39, .58); backdrop-filter: blur(2px); }
.cvr-dialog-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.cvr-dialog-head h2 { margin-bottom: 6px; }
.dialog-close { background: transparent; border: 0; color: var(--muted); font-size: 27px; line-height: 1; padding: 2px; }
.cvr-review-list { display: grid; gap: 10px; margin-top: 16px; }
.cvr-review-item { align-items: center; background: #fff8f6; border: 1px solid #f1c9c2; border-left: 4px solid var(--red); border-radius: 7px; display: flex; gap: 16px; justify-content: space-between; padding: 13px; }
.cvr-review-item strong { display: block; margin-bottom: 6px; }
.cvr-review-item p { color: var(--muted); margin: 6px 0 0; }
.cvr-review-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.cvr-review-actions form { margin: 0; }
.dialog-footer { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; text-align: right; }
@media (max-width: 700px) {
  .cvr-review-dialog { padding: 16px; }
  .cvr-review-item { align-items: stretch; flex-direction: column; }
  .cvr-review-actions { display: grid; }
  .cvr-review-actions button { width: 100%; }
}