.provider-view {
  --provider-blue: #2f6fed;
  --provider-cyan: #21a6b8;
  --provider-ink: #16243a;
}

.provider-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid #d7e3f4;
  border-radius: 14px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 88% 10%, #72c9ff38, transparent 30%),
    linear-gradient(120deg, #f8fbff 0%, #eef5ff 55%, #f4fbfb 100%);
  box-shadow: 0 10px 30px #1b4f8a12;
}

.provider-hero::after {
  position: absolute;
  right: -48px;
  bottom: -62px;
  width: 180px;
  height: 180px;
  border: 1px solid #4d8ff12b;
  border-radius: 50%;
  content: '';
}

.provider-hero-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #3d7df4, #1d5acb);
  box-shadow: 0 9px 20px #2366da40;
  color: #fff;
  font-size: 27px;
}

.provider-hero small {
  color: #2a6ddd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.provider-hero h2 {
  margin: 4px 0 5px;
  color: var(--provider-ink);
  font-size: 19px;
}

.provider-hero p {
  margin: 0;
  color: #617187;
  font-size: 12px;
}

.provider-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 9px;
}

.provider-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.72fr)) minmax(240px, 1.45fr);
  gap: 13px;
  margin-bottom: 15px;
}

.provider-metrics article {
  position: relative;
  min-height: 114px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px 18px;
  background: #fff;
  box-shadow: 0 5px 18px #16365f0a;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.provider-metrics article:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #16365f14;
}

.provider-metrics span,
.provider-metrics small {
  display: block;
  color: #758196;
  font-size: 11px;
}

.provider-metrics strong {
  display: block;
  overflow: hidden;
  margin: 8px 0 6px;
  color: #17263b;
  font-size: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-metrics article:not(.active-route-metric)::after {
  position: absolute;
  top: 17px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8c5d7;
  box-shadow: 0 0 0 5px #eef3f9;
  content: '';
}

.provider-metrics .active-route-metric {
  border-color: #bfd9f3;
  background: linear-gradient(130deg, #ffffff, #f0f7ff 58%, #eaf9fa);
}

.active-route-metric strong {
  color: #2466cf;
  font-size: 20px;
}

.provider-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 15px;
  align-items: start;
}

.provider-layout:has(.provider-create-panel[hidden]) {
  grid-template-columns: 1fr;
}

.provider-list-panel,
.provider-create-panel {
  overflow: visible;
}

.provider-panel-head {
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

.provider-live {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #607086;
  font-size: 11px;
  font-style: normal;
}

.provider-live b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #13a471;
  box-shadow: 0 0 0 4px #13a47119;
}

.provider-list {
  display: grid;
  gap: 0;
}

.provider-item {
  display: grid;
  grid-template-columns: minmax(210px, 1.25fr) minmax(180px, 0.85fr) minmax(235px, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 104px;
  padding: 18px;
  border-bottom: 1px solid #e7ecf2;
  background: #fff;
}

.provider-item:last-child {
  border-bottom: 0;
  border-radius: 0 0 11px 11px;
}

.provider-item:hover {
  background: #fbfdff;
}

.provider-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.provider-mark {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #cfe0f5;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7fbff, #e9f2ff);
  color: #2867cb;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.provider-identity span,
.provider-capabilities,
.provider-health {
  min-width: 0;
}

.provider-identity b,
.provider-health b {
  display: block;
  overflow: hidden;
  color: #1b293d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-identity small,
.provider-health small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #7a8798;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-health b {
  display: flex;
  gap: 7px;
  align-items: center;
  font-weight: 700;
}

.provider-health b::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa8b9;
  content: '';
}

.provider-health.healthy b {
  color: #07865a;
}

.provider-health.healthy b::before {
  background: #13a471;
  box-shadow: 0 0 0 4px #13a47118;
}

.provider-health.unhealthy b {
  color: #c44343;
}

.provider-health.unhealthy b::before {
  background: #db4d4d;
  box-shadow: 0 0 0 4px #db4d4d16;
}

.provider-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.provider-capabilities i {
  border: 1px solid #d9e3ee;
  border-radius: 999px;
  padding: 4px 7px;
  background: #f8fafc;
  color: #627186;
  font-size: 9px;
  font-style: normal;
}

.provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.provider-actions button {
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  padding: 7px 9px;
  background: #fff;
  color: #42536a;
  font-size: 10px;
  font-weight: 700;
}

.provider-actions button:hover {
  border-color: #8db5ea;
  background: #f2f7ff;
  color: #235eb7;
}

.provider-actions button.route-action {
  border-color: #bcd7f5;
  background: #edf5ff;
  color: #2463c4;
}

.provider-state {
  display: inline-flex;
  margin-top: 6px;
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef1f5;
  color: #667488;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.provider-state.enabled {
  background: #e8f7f1;
  color: #087d56;
}

.provider-empty {
  padding: 52px 20px;
  color: #7a8797;
  text-align: center;
}

.provider-close {
  width: 31px;
  height: 31px;
  border: 1px solid #e0e6ee;
  border-radius: 8px;
  background: #fff;
  color: #637087;
  font-size: 19px;
}

.provider-form {
  display: grid;
  gap: 13px;
  padding: 18px;
}

.provider-form label {
  display: grid;
  gap: 7px;
  color: #536277;
  font-size: 11px;
  font-weight: 650;
}

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

.provider-form input,
.provider-form select,
.provider-form textarea {
  width: 100%;
  border: 1px solid #d8e0eb;
  border-radius: 8px;
  padding: 10px 11px;
  outline: none;
  background: #fbfcfe;
  color: #24334a;
}

.provider-form textarea {
  min-height: 70px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.provider-form input:focus,
.provider-form select:focus,
.provider-form textarea:focus {
  border-color: #76a7e9;
  box-shadow: 0 0 0 3px #2f6fed14;
}

.provider-form input[readonly] {
  background: #f0f4f8;
  color: #5f7086;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.provider-check {
  grid-template-columns: auto 1fr !important;
  align-items: center;
  border: 1px solid #dce6f1;
  border-radius: 9px;
  padding: 10px;
  background: #f8fbff;
}

.provider-check input {
  width: 16px;
}

.provider-check span {
  display: grid;
  gap: 2px;
}

.provider-check small,
.provider-security-note span {
  color: #7c899a;
  font-size: 9px;
  font-weight: 400;
}

.provider-security-note {
  display: grid;
  gap: 4px;
  border: 1px solid #cfe5de;
  border-radius: 9px;
  padding: 11px;
  background: #f1faf7;
  color: #157556;
  font-size: 10px;
}

.provider-submit {
  width: 100%;
}

.route-panel {
  margin-top: 15px;
}

.route-timeline {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 18px;
}

.route-node {
  position: relative;
  min-width: 210px;
  padding-right: 34px;
}

.route-node:not(:last-child)::after {
  position: absolute;
  top: 14px;
  right: 8px;
  width: 22px;
  height: 1px;
  background: #ccd7e4;
  content: '';
}

.route-node i {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef2f6;
  color: #6e7c8e;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.route-node.active i {
  background: #e6f7f0;
  color: #088059;
}

.route-node.pending i {
  background: #fff2d9;
  color: #9a6105;
}

.route-node b,
.route-node small {
  display: block;
}

.route-node b {
  margin-top: 9px;
  color: #243248;
  font-size: 12px;
}

.route-node small {
  margin-top: 4px;
  color: #8490a0;
  font-size: 9px;
}

.route-node button {
  display: block;
  margin-top: 9px;
  border: 1px solid #bdd5f2;
  border-radius: 7px;
  padding: 6px 9px;
  background: #f1f7ff;
  color: #2863bd;
  font-size: 9px;
  font-weight: 750;
}

.route-node button:disabled {
  border-color: #e0e5eb;
  background: #f5f6f8;
  color: #8b96a5;
}

body.dark-mode .provider-hero,
body.dark-mode .provider-metrics article,
body.dark-mode .provider-item,
body.dark-mode .provider-form input,
body.dark-mode .provider-form select {
  border-color: #31445e;
  background: #17253a;
}

@media (max-width: 1180px) {
  .provider-item {
    grid-template-columns: minmax(190px, 1fr) minmax(160px, 0.8fr) minmax(210px, 1fr);
  }
  .provider-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .provider-hero,
  .provider-layout {
    grid-template-columns: 1fr;
  }
  .provider-hero-icon {
    display: none;
  }
  .provider-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .provider-item {
    grid-template-columns: 1fr 1fr;
  }
}