:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text-primary: #102a43;
  --text-secondary: #486581;
  --border: #d9e2ec;
  --active: #2f6fed;
  --active-soft: #e7efff;
  --icon-muted: #829ab1;
  --radius-md: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
}

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

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 4px var(--space-3) var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3) 0 var(--space-5);
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.brand-logo {
  display: block;
  width: 100%;
  max-width: 84px;
  height: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.nav-item {
  width: 100%;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  line-height: 1.2;
  cursor: pointer;
}

.nav-icon {
  width: 16px;
  height: 16px;
  color: var(--icon-muted);
  flex: 0 0 16px;
}

.nav-label {
  white-space: nowrap;
}

.nav-button:hover {
  background: var(--surface-soft);
  color: var(--text-primary);
}

.nav-button.is-active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 1px 6px rgba(16, 42, 67, 0.12);
}

.nav-button.is-active .nav-icon {
  color: #111111;
}

.main-panel {
  background: var(--surface);
  padding: 4px var(--space-6) var(--space-5);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
  margin-left: calc(var(--space-6) * -1);
  margin-right: calc(var(--space-6) * -1);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.top-nav-left {
  min-width: 24px;
}

.main-panel h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 12px;
  padding-bottom: 12px;
}

#page-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profile-block {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  align-self: center;
}

.top-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  align-self: stretch;
  height: 100%;
}

.notification-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f8;
  color: #486581;
  cursor: pointer;
  margin: 0;
}

.notification-btn svg {
  width: 17px;
  height: 17px;
}

.profile-meta p {
  margin: 0;
  text-align: right;
}

.profile-name {
  font-size: 13px;
  font-weight: 600;
  color: #243b53;
}

.profile-email {
  margin-top: 2px;
  font-size: 12px;
  color: #829ab1;
}

.profile-initials {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b2d6b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.profile-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  padding: 6px;
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #243b53;
  cursor: pointer;
}

.profile-menu-header {
  border-bottom: 1px solid #e4e7eb;
  padding: 6px 8px 10px;
  margin-bottom: 4px;
}

.profile-menu-name,
.profile-menu-email {
  margin: 0;
}

.profile-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: #243b53;
}

.profile-menu-email {
  margin-top: 2px;
  font-size: 12px;
  color: #829ab1;
}

.profile-menu-item:hover {
  background: #f0f4f8;
}

.profile-menu-item.danger {
  color: #b42318;
}

.page-content {
  min-height: calc(100vh - 96px);
}

.brokers-layout h2 {
  margin: 0;
  font-size: 18px;
}

.brokers-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.brokers-empty-state {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef9;
  color: #0b2d6b;
}

.empty-state-icon svg {
  width: 26px;
  height: 26px;
}

.brokers-empty-message {
  margin: 0;
  font-size: 16px;
  color: #52606d;
}

.primary-btn,
.secondary-btn {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.primary-btn {
  background: #0b2d6b;
  color: #ffffff;
}

.secondary-btn {
  background: #ffffff;
  border-color: #d9e2ec;
  color: #243b53;
}

.broker-form {
  border: 0;
  border-radius: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

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

.form-field {
  display: grid;
  gap: 8px;
}

.form-field[hidden] {
  display: none !important;
}

.range-pair {
  display: grid;
  gap: 8px;
}

.range-caption {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 10px;
  color: #829ab1;
}

.kyc-question-form {
  display: grid;
  gap: 12px;
}

.form-field span {
  font-size: 11px;
  color: #52606d;
  font-weight: 600;
  letter-spacing: 0.15px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 13px;
  font-family: inherit;
  color: #102a43;
  background: #ffffff;
}

.modal-status-select {
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352606d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-field select[multiple] {
  min-height: 92px;
}

.status-field {
  gap: 5px;
}

.form-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-actions-split {
  justify-content: space-between;
}

.form-actions-left,
.form-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.flow-section {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.flow-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #243b53;
}

.table-wrap {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  overflow: auto;
}

.simple-list {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.simple-list-item {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f6;
  font-size: 13px;
  color: #243b53;
}

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

.brokers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.brokers-table th,
.brokers-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}

.brokers-table th {
  font-size: 12px;
  font-weight: 600;
  color: #52606d;
  background: #f8fafc;
}

.broker-row {
  cursor: pointer;
}

.broker-row:hover {
  background: #fafbfd;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #d9e2ec;
  padding: 2px 8px;
  font-size: 12px;
}

.table-action-btn {
  border: 0;
  background: transparent;
  color: #0b2d6b;
  cursor: pointer;
  padding: 0 8px 0 0;
  font-size: 12px;
}

.broker-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 20;
}

.broker-modal {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d9e2ec;
  padding: 12px 18px 16px;
}

.slim-modal {
  width: min(520px, 100%);
}

.modal-title-row {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding-bottom: 8px;
  margin-bottom: 6px;
}

.modal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.modal-header-btn {
  padding: 8px 12px;
  font-size: 13px;
}

.modal-title-row h2 {
  font-size: 16px;
  font-weight: 500;
}

.stepper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.stepper-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #829ab1;
  min-width: 116px;
}

.stepper-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cbd2d9;
  background: #ffffff;
}

.stepper-text {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.stepper-line {
  flex: 1;
  height: 1px;
  background: #d9e2ec;
  margin-top: 13px;
}

.icon-close-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d9e2ec;
  border-radius: 9px;
  background: #ffffff;
  color: #52606d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-close-btn svg {
  width: 14px;
  height: 14px;
}

.stepper-item.is-active {
  color: #243b53;
}

.stepper-item.is-active .stepper-dot {
  border-color: #0b2d6b;
  background: #0b2d6b;
  color: #ffffff;
}

.field-help {
  margin: 0;
  font-size: 12px;
  color: #6b7c93;
}

.inline-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.inline-empty-state {
  border: 1px dashed #d9e2ec;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #6b7c93;
}

.inline-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed #d9e2ec;
  border-radius: 8px;
  padding: 8px 10px;
}

.tiny-btn {
  border: 1px solid #cfd7df;
  background: #ffffff;
  color: #243b53;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.tag-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}

.tag-chip {
  border: 1px solid #cbd2d9;
  border-radius: 999px;
  padding: 4px 10px;
  background: #f8fafc;
  font-size: 12px;
  color: #243b53;
  cursor: pointer;
}

.commission-mode {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.commission-mode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #243b53;
}

.product-commission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--space-3);
}

.compact-field {
  max-width: 360px;
}

.product-config-list {
  display: grid;
  gap: var(--space-3);
  margin-top: 10px;
}

.product-config-card {
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: #ffffff;
}

.product-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.product-card-header h4 {
  margin: 0;
  font-size: 14px;
  color: #243b53;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #486581;
}

.switch-btn {
  width: 40px;
  height: 22px;
  border: 1px solid #cbd2d9;
  border-radius: 999px;
  background: #e4e7eb;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.switch-btn.is-on {
  background: #0b2d6b;
  border-color: #0b2d6b;
}

.switch-btn.is-on .switch-thumb {
  transform: translateX(17px);
}

.product-insurer-section {
  display: grid;
  gap: var(--space-2);
}

.tag-dropdown {
  width: 100%;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 13px;
  font-family: inherit;
  color: #102a43;
  background: #ffffff;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352606d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.linked-party-list {
  display: grid;
  gap: 8px;
}

.linked-party-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fbfcfe;
  font-size: 12px;
  color: #243b53;
}

.linked-party-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.linked-party-input {
  width: 150px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: #102a43;
}

.dual-range {
  position: relative;
  display: grid;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 4px;
  min-height: 68px;
}

.dual-range input[type="range"] {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  accent-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.dual-range-track,
.dual-range-fill {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 999px;
}

.dual-range-track {
  background: #e9eef5;
}

.dual-range-fill {
  left: 0;
  right: auto;
  width: 0;
  background: #2f6fed;
}

.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
  border: 0;
}

.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #2f6fed;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.18);
  margin-top: -7px;
  pointer-events: auto;
  cursor: pointer;
}

.dual-range input[type="range"]::-moz-range-track {
  height: 10px;
  background: transparent;
  border: 0;
}

.dual-range input[type="range"]::-moz-range-progress {
  background: transparent;
}

.dual-range input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #2f6fed;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.18);
  pointer-events: auto;
  cursor: pointer;
}

.dual-range-values {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #52606d;
  margin-top: 22px;
}

#broker-global-range-block,
#insurer-global-range-block {
  row-gap: 16px;
}

#broker-core-product-tags,
#insurer-core-product-tags {
  margin-top: 6px;
}

#broker-product-ranges,
#insurer-product-ranges {
  margin-top: 10px;
}

.product-subtitle {
  font-size: 12px;
  color: #52606d;
  font-weight: 600;
}

.details-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.danger-btn {
  color: #b42318;
  border-color: #efc4c4;
}

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

.integration-card {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: #ffffff;
}

.integration-card-head {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.integration-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #243b53;
}

.integration-title-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: #0b2d6b;
  flex: 0 0 26px;
}

.integration-title-icon svg {
  width: 14px;
  height: 14px;
}

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

.integration-meta p {
  margin: 0;
  font-size: 12px;
  color: #52606d;
}

.integration-meta span {
  color: #6b7c93;
}

.integration-meta strong {
  color: #243b53;
  font-weight: 600;
}

.integration-meta .is-connected-text {
  color: #067647;
}

.integration-meta .is-disconnected-text {
  color: #52606d;
}

.integration-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.integration-toggle-btn {
  min-width: 84px;
  padding: 6px 10px;
  font-size: 12px;
}

.integrations-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #6b7c93;
}

.region-map-card,
.coming-soon-card {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
}

.page-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 8px 10px;
  color: #829ab1;
  background: #ffffff;
}

.page-search-wrap svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.page-search-wrap input {
  border: 0;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #243b53;
  font-family: inherit;
}

.page-tools-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}

.page-tool-btn svg {
  width: 14px;
  height: 14px;
}

.customer-details-layout {
  display: grid;
  gap: 12px;
}

.customer-back-row {
  display: flex;
  justify-content: flex-start;
}

.customer-core-card {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.customer-core-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-core-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #102a43;
}

.customer-core-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7c93;
}

.customer-core-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px;
}

.customer-core-grid div {
  display: grid;
  gap: 4px;
}

.customer-core-grid span {
  font-size: 11px;
  color: #829ab1;
}

.customer-core-grid strong {
  font-size: 13px;
  color: #243b53;
  font-weight: 500;
}

.customer-tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid #e4e7eb;
}

.customer-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #52606d;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.customer-tab-btn.is-active {
  color: #0b2d6b;
  background: #eef4ff;
  border-color: #dbe7ff;
}

.customer-tab-panel {
  display: grid;
  gap: 10px;
}

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

.ledger-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ledger-net-positive {
  color: #067647;
}

.customer-subsection {
  display: grid;
  gap: 8px;
}

.customer-subsection h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #243b53;
}

.customer-next-step-row {
  display: flex;
  justify-content: flex-end;
}

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

.kyc-image-card {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  min-height: 96px;
  background: #fbfcfe;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  gap: 5px;
}

.kyc-image-card span {
  font-size: 12px;
  color: #243b53;
  font-weight: 500;
}

.kyc-image-card p {
  margin: 0;
  font-size: 11px;
  color: #829ab1;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.ui-chip.is-success {
  background: #ecfdf3;
  color: #067647;
  border-color: #abefc6;
}

.ui-chip.is-warning {
  background: #fffaeb;
  color: #b54708;
  border-color: #fedf89;
}

.ui-chip.is-danger {
  background: #fef3f2;
  color: #b42318;
  border-color: #fecdca;
}

.ui-chip.is-info {
  background: #eef4ff;
  color: #1d4ed8;
  border-color: #c7d7fe;
}

.region-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.region-map-header h3,
.coming-soon-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.region-map-canvas {
  min-height: 320px;
  border: 1px dashed #d9e2ec;
  border-radius: 10px;
  display: grid;
  place-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #6b7c93;
}

.map-placeholder-shape {
  width: 180px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 40%, #dbe5f6, #c5d5ef);
}

.coming-soon-card p {
  margin: 8px 0 0;
  color: #6b7c93;
  font-size: 14px;
  max-width: 640px;
}

.reporting-center {
  min-height: calc(100vh - 190px);
  display: grid;
  place-items: center;
}

.reporting-center .coming-soon-card {
  border: 0;
  padding: 0;
  text-align: center;
  max-width: 560px;
}

.coming-soon-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef4ff;
  color: #0b2d6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.coming-soon-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-layout {
  display: grid;
  gap: 10px;
}

.dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}

.dashboard-action-btn svg {
  width: 14px;
  height: 14px;
}

.dashboard-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #829ab1;
  margin-top: 2px;
}

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

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

.metric-card,
.panel-card {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.metric-card {
  min-height: 94px;
}

.metric-card p,
.panel-card h4 {
  margin: 0;
  font-size: 12px;
  color: #6b7c93;
}

.metric-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: #0b2d6b;
  flex: 0 0 24px;
}

.metric-icon svg {
  width: 14px;
  height: 14px;
}

.metric-card h3 {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: #102a43;
}

.panel-card {
  grid-column: span 2;
  min-height: 220px;
}

.panel-card.full-width {
  grid-column: 1 / -1;
}

.mini-bars {
  margin-top: 12px;
  height: 130px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
}

.mini-bars span {
  background: #0b2d6b;
  border-radius: 6px 6px 0 0;
}

.line-chart-wrap {
  margin-top: 10px;
}

.line-chart {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.line-grid line {
  stroke: #eef2f6;
  stroke-width: 1;
}

.line-area {
  fill: url(#submissionAreaFill);
}

.line-stroke {
  fill: none;
  stroke: #0b2d6b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-points circle {
  fill: #ffffff;
  stroke: #0b2d6b;
  stroke-width: 2;
  transition: r 0.15s ease, fill 0.15s ease;
  cursor: pointer;
}

.line-points circle:hover {
  r: 4.5;
  fill: #0b2d6b;
}

.line-chart-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  color: #829ab1;
  margin-top: 4px;
}

.horizontal-bars {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.horizontal-bars div {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #52606d;
}

.horizontal-bars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b2d6b, #3e7bfa);
}

.horizontal-bars strong {
  color: #243b53;
  font-size: 12px;
}

.region-bars {
  height: 90px;
  margin-bottom: 10px;
}

.grouped-bar-chart {
  margin-top: 8px;
}

.grouped-bar-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #6b7c93;
  margin-bottom: 8px;
}

.grouped-bar-grid {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.grouped-bar-item {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.grouped-bar-item span {
  font-size: 10px;
  color: #52606d;
  text-align: center;
}

.seg-bar {
  width: 18px;
  min-height: 18px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: #eef2f6;
}

.seg {
  width: 100%;
  display: block;
}

.seg.policies {
  background: #0b2d6b;
}

.seg.submissions {
  background: #d5dbe3;
}

.donut-chart-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.donut-placeholder {
  width: 130px;
  height: 130px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
}

.donut-placeholder::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #eef2f6;
}

.submissions-donut {
  background: conic-gradient(
    #0b2d6b 0 14%,
    #3e7bfa 14% 48%,
    #8fb4ff 48% 74%,
    #cedfff 74% 100%
  );
}

.policies-donut {
  background: conic-gradient(
    #0b2d6b 0 34%,
    #3e7bfa 34% 60%,
    #8fb4ff 60% 82%,
    #cedfff 82% 100%
  );
}

.legend-list {
  margin-top: 0;
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: #52606d;
  min-width: 170px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.legend-dot.a {
  background: #0b2d6b;
}
.legend-dot.b {
  background: #3e7bfa;
}
.legend-dot.c {
  background: #8fb4ff;
}
.legend-dot.d {
  background: #cedfff;
}

.legend-dot.e {
  background: #d5dbe3;
}

.list-compact {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.list-compact li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #243b53;
}

.scrollable-list {
  max-height: 156px;
  overflow-y: auto;
  padding-right: 4px;
}

.list-compact.warning strong {
  color: #b54708;
}

.list-compact.warning li {
  border-left: 2px solid #f79009;
  padding-left: 8px;
}

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

.snapshot-grid div {
  border: 1px solid #e4e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fbfcfe;
}

.snapshot-grid p {
  margin: 0;
  font-size: 11px;
  color: #6b7c93;
}

.snapshot-grid h5 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: #102a43;
}

.alert-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #243b53;
  font-size: 13px;
  display: grid;
  gap: 6px;
}

.details-grid {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.details-hero {
  border: 1px solid #e4e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.details-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #829ab1;
}

.details-hero h3 {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 500;
  color: #102a43;
}

.details-meta-chips {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3);
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row span {
  color: #52606d;
  font-size: 12px;
  font-weight: 500;
}

.detail-row strong {
  font-size: 14px;
  color: #102a43;
  font-weight: 400;
}

.broker-modal strong,
.broker-modal b {
  font-weight: 400;
}

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

.details-actions-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.advanced-metric-card {
  border: 1px solid #e4e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fbfcfe;
}

.advanced-metric-card p {
  margin: 0;
  font-size: 12px;
  color: #6b7c93;
}

.advanced-metric-card h3 {
  margin: 6px 0 0;
  font-size: 22px;
  color: #102a43;
  font-weight: 500;
}

.advanced-table-wrap {
  margin-top: 12px;
}

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

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .main-panel {
    padding: var(--space-4);
  }

  .top-nav {
    padding-bottom: var(--space-3);
  }

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

  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .advanced-metrics-grid {
    grid-template-columns: 1fr;
  }

  .details-actions-row {
    flex-wrap: wrap;
  }

  .dashboard-top-metrics,
  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }

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

  .integration-footer-row {
    flex-wrap: wrap;
  }

  .page-tools-row {
    flex-direction: column;
    align-items: stretch;
  }

  .page-search-wrap {
    width: 100%;
  }

  .page-tools-actions {
    flex-wrap: wrap;
  }

  .panel-card {
    grid-column: auto;
  }

  .panel-card.full-width {
    grid-column: auto;
  }

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

  .grouped-bar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 220px;
  }

  .donut-chart-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .customer-core-grid {
    grid-template-columns: 1fr 1fr;
  }

  .customer-overview-cards {
    grid-template-columns: 1fr 1fr;
  }

  .ledger-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .customer-tabs {
    flex-wrap: wrap;
  }

  .kyc-image-grid {
    grid-template-columns: 1fr;
  }
}