.accounts-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.3fr) minmax(350px, 0.8fr);
  gap: 14px;
  align-items: start;
  overflow: visible;
}

.accounts-table-card {
  position: relative;
  z-index: 4;
  overflow: visible;
}

.account-editor-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.accounts-table-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: min(80vh, 940px);
}

.accounts-bulk-actions {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 37, 63, 0.82);
}

.macro-action-select {
  min-width: 210px;
  height: 34px;
}

.account-table-head,
.account-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1fr) 126px 192px 192px 94px;
  gap: 6px;
  align-items: center;
}

.account-table-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.account-table {
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  overflow: auto;
}

.account-row {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(122, 159, 213, 0.16);
}

.account-row:hover {
  background: rgba(57, 92, 147, 0.2);
}

.account-row.active {
  background: rgba(79, 132, 217, 0.24);
}

.account-row .name {
  font-weight: 700;
}

.account-row .sub {
  color: var(--text-2);
  font-size: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 10px;
  font-weight: 700;
  font-size: 12px;
}

.status-pill.running {
  border-color: rgba(61, 213, 138, 0.62);
  background: rgba(20, 95, 62, 0.55);
  color: #b8f5d9;
}

.status-pill.starting {
  border-color: rgba(243, 190, 89, 0.62);
  background: rgba(91, 67, 24, 0.62);
  color: #ffe2a5;
}

.status-pill.stopping {
  border-color: rgba(245, 158, 11, 0.62);
  background: rgba(120, 53, 15, 0.62);
  color: #fde68a;
}

.status-pill.error {
  border-color: rgba(247, 120, 120, 0.6);
  background: rgba(95, 37, 37, 0.65);
  color: #ffd4d4;
}

.status-pill.stopped {
  border-color: rgba(147, 171, 207, 0.44);
  background: rgba(40, 57, 84, 0.72);
  color: #cad7ec;
}

.add-account-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  background: rgba(10, 20, 36, 0.95);
}

.menu-wrap {
  position: relative;
  z-index: 1100;
}

.menu {
  position: absolute;
  right: 0;
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  min-width: 290px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(10, 20, 35, 0.98);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: 1200;
}

.menu button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(123, 158, 212, 0.16);
  background: transparent;
  color: #d8e7ff;
  text-align: left;
  padding: 10px 12px;
}

.menu button:last-child {
  border-bottom: 0;
}

.menu button:hover {
  background: rgba(73, 120, 199, 0.24);
}

.menu button:disabled {
  color: rgba(152, 170, 197, 0.65);
  background: rgba(32, 46, 68, 0.5);
}

.account-editor-card {
  padding-bottom: 12px;
}

.form-grid {
  padding: 12px 14px;
  display: grid;
  gap: 9px 10px;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}

.form-grid .full {
  grid-column: 1 / -1;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.account-editor-card .row-actions {
  padding: 0 14px;
  margin-top: 8px;
}