.partner-connection-cockpit {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px;
  margin: 22px 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--cyan, #45d7ff) 38%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--cyan, #45d7ff) 15%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(7, 28, 37, .98), rgba(5, 17, 31, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.partner-connection-cockpit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--mint, #36efc3), var(--cyan, #45d7ff));
}

.partner-connection-heading,
.partner-connection-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.partner-connection-heading span,
.partner-connection-form-head span,
.partner-connection-list-head span {
  color: var(--mint, #36efc3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.partner-connection-heading h3,
.partner-connection-form-head h4,
.partner-connection-list-head h4 {
  margin: 7px 0 8px;
  color: #f5fbff;
  line-height: 1.08;
}

.partner-connection-heading h3 { font-size: clamp(24px, 3vw, 38px); }
.partner-connection-heading p,
.partner-connection-form-head p { max-width: 900px; margin: 0; color: #9db3c2; line-height: 1.6; }

.partner-connection-heading > button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(69, 215, 255, .28);
  border-radius: 14px;
  background: rgba(69, 215, 255, .08);
  color: #dff9ff;
  font-size: 20px;
}

.partner-connection-safety {
  margin: 20px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(54, 239, 195, .22);
  border-radius: 16px;
  background: rgba(54, 239, 195, .055);
  color: #a9bdc9;
  line-height: 1.55;
}

.partner-connection-safety strong { color: #d8fff6; }

.partner-connection-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

.partner-connection-steps article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(151, 184, 202, .15);
  border-radius: 17px;
  background: rgba(2, 12, 22, .48);
}

.partner-connection-steps b {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--mint, #36efc3);
  color: #03231d;
}

.partner-connection-steps span { color: #edfaff; font-weight: 800; }
.partner-connection-steps small { display: block; margin: 7px 0 0 35px; color: #7f9aaa; }
.partner-connection-steps > i { color: rgba(69, 215, 255, .7); font-style: normal; }

.partner-connection-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.partner-connection-metrics article {
  padding: 14px 16px;
  border: 1px solid rgba(69, 215, 255, .2);
  border-radius: 17px;
  background: rgba(3, 18, 29, .64);
}

.partner-connection-metrics span { display: block; color: #68e9d2; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.partner-connection-metrics b { display: block; margin: 5px 0; color: #fff; font-size: 25px; }
.partner-connection-metrics small { color: #8199a8; }

.partner-connection-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 15px;
}

.partner-connection-form,
.partner-connection-list-wrap {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(151, 184, 202, .14);
  border-radius: 22px;
  background: rgba(1, 11, 20, .58);
}

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

.partner-connection-form-head { grid-column: 1 / -1; margin-bottom: 4px; }
.partner-connection-form label { display: grid; gap: 7px; min-width: 0; color: #9eb4c0; font-size: 12px; font-weight: 700; }
.partner-connection-form input,
.partner-connection-form select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(151, 184, 202, .22);
  border-radius: 12px;
  background: #071522;
  color: #f3fbff;
}

.partner-connection-form input:focus,
.partner-connection-form select:focus { outline: 2px solid rgba(69, 215, 255, .32); border-color: var(--cyan, #45d7ff); }
.partner-connection-form .wide { grid-column: 1 / -1; }
.partner-connection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.partner-connection-fields[hidden] { display: none; }
.partner-connection-market { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.partner-connection-form .connection-enabled,
.partner-connection-form .connection-confirm { display: flex; align-items: center; gap: 10px; }
.partner-connection-form .connection-enabled input,
.partner-connection-form .connection-confirm input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mint, #36efc3); }
.partner-connection-form button[type="submit"] { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border: 0; border-radius: 14px; background: linear-gradient(90deg, var(--mint, #36efc3), var(--cyan, #45d7ff)); color: #021b1c; font-weight: 900; }
.partner-connection-form button:disabled { opacity: .45; cursor: not-allowed; }
.partner-connection-form > small { color: #7893a3; line-height: 1.5; }
.partner-connection-form [aria-live] { min-height: 20px; margin: 0; color: #8ef4df; }

.partner-connection-list { display: grid; gap: 11px; margin-top: 14px; }
.partner-connection-card { padding: 16px; border: 1px solid rgba(151, 184, 202, .16); border-radius: 17px; background: rgba(7, 25, 38, .74); }
.partner-connection-card[data-state="attention"] { border-color: rgba(255, 159, 91, .48); }
.partner-connection-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.partner-connection-card header span { color: #66e5cf; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.partner-connection-card h5 { margin: 6px 0 3px; color: #f4fbff; font-size: 17px; }
.partner-connection-card header small { color: #7f9aaa; }
.partner-connection-card header em { padding: 7px 9px; border-radius: 999px; background: rgba(54, 239, 195, .1); color: #8effe6; font-size: 10px; font-style: normal; font-weight: 900; }
.partner-connection-card[data-state="attention"] header em { background: rgba(255, 159, 91, .12); color: #ffc39c; }
.partner-connection-card .connection-operation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 13px 0; }
.partner-connection-card .connection-operation span { padding: 9px; border-radius: 11px; background: rgba(151, 184, 202, .06); color: #8fa8b6; font-size: 10px; }
.partner-connection-card .connection-operation b { display: block; overflow: hidden; color: #e9f9ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.partner-connection-card footer { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-connection-card footer button { padding: 8px 10px; border: 1px solid rgba(69, 215, 255, .2); border-radius: 10px; background: rgba(69, 215, 255, .07); color: #dff9ff; font-weight: 800; }
.partner-connection-list-wrap > [aria-live] { min-height: 20px; color: #8ef4df; }

@media (max-width: 1020px) {
  .partner-connection-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partner-connection-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .partner-connection-cockpit { padding: 18px 14px 20px; border-radius: 21px; }
  .partner-connection-heading { display: grid; }
  .partner-connection-steps { grid-template-columns: 1fr; }
  .partner-connection-steps > i { display: none; }
  .partner-connection-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-connection-form { grid-template-columns: 1fr; padding: 15px; }
  .partner-connection-form > *,
  .partner-connection-form .wide { grid-column: 1; }
  .partner-connection-fields,
  .partner-connection-market { grid-template-columns: 1fr; }
  .partner-connection-card header { display: grid; }
  .partner-connection-card .connection-operation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}