:root {
  --flex-navy-900: #0b1b4d;
  --flex-navy-800: #132a67;
  --flex-navy-700: #1f3b8a;
  --flex-accent: #1f6fff;
  --flex-bg: #f3f6fb;
  --flex-surface: #ffffff;
  --flex-border: #d8e0ee;
  --flex-text: #0d1f44;
  --flex-muted: #61739b;
  --flex-success: #14b86f;
  --flex-danger: #db3a44;
}

body.twilio-flex {
  background: linear-gradient(180deg, #eef3fb 0%, #f8fbff 100%);
  color: var(--flex-text);
}

body.twilio-flex .btn {
  border-radius: 10px;
  font-weight: 600;
}

body.twilio-flex .btn-primary {
  background-color: var(--flex-accent);
  border-color: var(--flex-accent);
}

body.twilio-flex .card,
body.twilio-flex .card-custom,
body.twilio-flex .card-standard,
body.twilio-flex .panel,
body.twilio-flex .modal-content {
  border-radius: 14px;
  border: 1px solid var(--flex-border);
  box-shadow: 0 12px 28px -22px rgba(10, 37, 115, 0.55);
}

body.twilio-flex .table th {
  background: #f3f7ff;
  color: var(--flex-muted);
  border-bottom-color: var(--flex-border);
  font-size: 0.78rem;
  letter-spacing: .02em;
}

body.twilio-flex .table td { border-bottom-color: #e8edf6; }

body.twilio-flex .form-control,
body.twilio-flex .form-select,
body.twilio-flex textarea {
  border-radius: 10px;
  border-color: #c9d4eb;
}

body.twilio-flex .form-control:focus,
body.twilio-flex .form-select:focus,
body.twilio-flex textarea:focus {
  border-color: var(--flex-accent);
  box-shadow: 0 0 0 .22rem rgba(31, 111, 255, .16);
}

body.twilio-flex header#topbar,
body.twilio-flex .topbar,
body.twilio-flex .wb-header,
body.twilio-flex .login-header,
body.twilio-flex .page-header {
  background: linear-gradient(90deg, var(--flex-navy-900), var(--flex-navy-700));
  color: #fff;
  border-color: rgba(255,255,255,.16);
}

body.twilio-flex .nav-item.active,
body.twilio-flex .nav-link.active,
body.twilio-flex .menu-item.active {
  background: #e8f0ff !important;
  color: #1848a6 !important;
}