:root {
  --bg: #eaf0f5;
  --card: #f8fbff;
  --line: #c7d8e8;
  --ink: #16324d;
  --sub: #4f6680;
  --accent: #16639b;
  --radius: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(165deg, #ecf2f8 0%, #dfe8f1 52%, #eef3f8 100%);
  color: var(--ink);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.wrap {
  width: min(1440px, calc(100vw - 14px));
  margin: 8px auto 14px;
  display: grid;
  gap: 10px;
}

.hero {
  border-radius: 20px;
  padding: 10px 12px;
  background: linear-gradient(125deg, #0d2f4f, #0672a8);
  color: #fff;
  box-shadow: 0 14px 30px rgba(13, 47, 79, 0.25);
  display: grid;
  gap: 10px;
}

.hero-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-logo {
  width: clamp(36px, 4.8vw, 50px);
  height: auto;
  flex: 0 0 auto;
}

.hero-copy {
  min-width: 0;
}

.hero h1 {
  margin: 0;
  font-family: "Outfit", "Manrope", sans-serif;
  font-size: clamp(22px, 3.3vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.hero p {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 14px);
  opacity: 0.96;
}

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

.btn-light {
  background: #fff;
  border: 1px solid #c9d8e8;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
}

.btn-light:hover { background: #f2f7fd; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 10px 24px rgba(15, 40, 62, 0.09);
}

.card h2 {
  margin: 0 0 5px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-family: "Outfit", "Manrope", sans-serif;
  letter-spacing: -0.02em;
}

.sub {
  margin: 0 0 12px;
  color: var(--sub);
  font-size: 14px;
}

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

.dash-kpi {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  min-height: 108px;
  display: grid;
  gap: 5px;
  align-content: start;
}

.dash-kpi .label {
  margin: 0;
  color: #506983;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 700;
  line-height: 1.2;
}

.dash-kpi .value {
  margin: 4px 0 0;
  font-size: clamp(19px, 2.1vw, 24px);
  font-family: "Outfit", "Manrope", sans-serif;
  letter-spacing: -0.02em;
  color: #0f4f7d;
  font-weight: 800;
  line-height: 1;
}

.dash-kpi .detail-line {
  margin: 0;
  color: #4f6680;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi .detail-line strong {
  color: #1d4768;
  font-weight: 800;
}

.dash-kpi-progress {
  height: 8px;
  border-radius: 999px;
  background: #e7eff7;
  border: 1px solid #d3e0ec;
  overflow: hidden;
  margin-top: 1px;
}

.dash-kpi-progress > span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2d7db2, #0f5d8f);
  transition: width 220ms ease;
}

.dash-kpi-progress > span.good {
  background: linear-gradient(90deg, #2e8e66, #1a6d4d);
}

.dash-kpi-progress > span.warn {
  background: linear-gradient(90deg, #c58a15, #a76f06);
}

.dash-kpi-progress > span.bad {
  background: linear-gradient(90deg, #bb4b4b, #983737);
}

.helper {
  margin: 10px 0 0;
  color: #425d77;
  font-size: 13px;
  line-height: 1.45;
}

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

.sdr-block {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: #fff;
}

.sdr-block h3 {
  margin: 0 0 6px;
  font-family: "Outfit", "Manrope", sans-serif;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.graph-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.graph-card {
  border: 1px solid #d7e4ef;
  border-radius: 12px;
  background: #fbfdff;
  padding: 10px;
  min-height: 210px;
}

.graph-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #345676;
  text-transform: uppercase;
}

.graph-stack {
  display: grid;
  gap: 8px;
}

.graph-row {
  display: grid;
  gap: 4px;
}

.graph-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #3f5d79;
  font-weight: 700;
}

.graph-row-head strong {
  color: #153d5b;
  font-weight: 800;
  font-size: 12px;
}

.graph-track {
  height: 8px;
  border-radius: 999px;
  background: #e6eef7;
  border: 1px solid #d1deeb;
  overflow: hidden;
}

.graph-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
}

.graph-fill.goal {
  background: linear-gradient(90deg, #8ba7c1, #6f8ca9);
}

.graph-fill.actual {
  background: linear-gradient(90deg, #2f83ba, #0f5e91);
}

.graph-fill.funnel {
  background: linear-gradient(90deg, #2e8e66, #1c6f50);
}

.sdr-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: #47627e;
  font-weight: 700;
}

.text-input,
.text-area {
  width: 100%;
  border: 1px solid #cad8e6;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #132f49;
  background: #fdfefe;
}

.text-area {
  min-height: 70px;
  resize: vertical;
}

.table-shell {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  background: #fff;
  margin-top: 10px;
}

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

th, td {
  padding: 9px 10px;
  border-bottom: 1px solid #d9e4ef;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
  line-height: 1.3;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 12px;
  color: #3f5d7a;
  background: #f0f5fa;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 1;
}

tr:last-child td { border-bottom: none; }

.foot {
  margin: 0;
  color: #5d748d;
  font-size: 12px;
  text-align: right;
}

@media (max-width: 1060px) {
  .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .graph-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wrap { width: min(1440px, calc(100vw - 10px)); margin-top: 6px; }
  .hero-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .brand-logo { width: min(50px, 16vw); }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: 1fr; }
}