/* ============================================================
   /settings — sidebar layout + Network/Proxies pane (Wave 14)
   Uses tokens-v3 + components-v3. All colors via vars (light + dark parity).
   ============================================================ */

/* ---------- shell ---------- */
.st-body {
  min-height: 100vh;
  background: var(--bn-bg-page);
  color: var(--bn-ink);
  font-family: var(--bn-font-sans);
}
.st-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--bn-s-8) var(--bn-s-6) var(--bn-s-12);
}

/* ---------- layout: sidebar + content ---------- */
.st-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--bn-s-8);
  align-items: start;
}
@media (max-width: 880px) {
  .st-layout {
    grid-template-columns: 1fr;
    gap: var(--bn-s-6);
  }
}

/* ---------- sidebar ---------- */
.st-side {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--bn-s-4);
  padding: var(--bn-s-5);
  background: var(--bn-bg-surface-1);
  border: 1px solid var(--bn-border-soft);
  border-radius: var(--bn-r-xl);
}
@media (max-width: 880px) {
  .st-side { position: static; }
}
.st-side__eyebrow {
  font-size: var(--bn-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bn-ink-muted);
  font-weight: var(--bn-fw-medium);
}
.st-side__title {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-xl);
  font-weight: var(--bn-fw-semibold);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-ls-tight);
  margin: 0;
  color: var(--bn-ink);
}
.st-side__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--bn-s-2);
}
.st-side__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bn-r-md);
  font-size: var(--bn-text-sm);
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink-secondary);
  cursor: pointer;
  text-align: left;
  min-height: 40px;
  transition: background var(--bn-dur-fast) var(--bn-ease), color var(--bn-dur-fast) var(--bn-ease);
}
.st-side__link iconify-icon { font-size: 17px; flex-shrink: 0; }
.st-side__link:hover {
  background: var(--bn-bg-surface-2);
  color: var(--bn-ink);
}
.st-side__link.is-active {
  background: var(--bn-bg-surface-2);
  color: var(--bn-ink);
  border-color: var(--bn-border);
}
.st-side__pill {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  background: var(--bn-accent-soft);
  color: var(--bn-accent-strong);
  border-radius: var(--bn-r-pill);
  font-size: 11px;
  font-weight: var(--bn-fw-semibold);
}
.st-side__foot {
  display: flex;
  flex-direction: column;
  gap: var(--bn-s-2);
  padding-top: var(--bn-s-3);
  margin-top: var(--bn-s-4);
  border-top: 1px solid var(--bn-border-soft);
}
.st-side__email {
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-muted);
  font-family: var(--bn-font-mono);
  overflow-wrap: anywhere;
}

/* ---------- content panes ---------- */
.st-content { min-width: 0; }
.st-pane { display: none; }
.st-pane.is-active { display: block; }
.st-pane[hidden] { display: none !important; }

.st-pane__head {
  margin-bottom: var(--bn-s-5);
}
.st-pane__title {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-3xl);
  font-weight: var(--bn-fw-medium);
  letter-spacing: var(--bn-ls-tight);
  line-height: var(--bn-lh-tight);
  margin: 0 0 var(--bn-s-2);
  color: var(--bn-ink);
}
.st-pane__desc {
  font-size: var(--bn-text-md);
  line-height: var(--bn-lh-relaxed);
  color: var(--bn-ink-secondary);
  margin: 0;
  max-width: 60ch;
}
.st-pane__desc a { color: var(--bn-accent-strong); border-bottom: 1px solid currentColor; }
.st-pane__desc a:hover { color: var(--bn-accent); }

.st-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bn-s-4);
  margin-bottom: var(--bn-s-4);
}
.st-card-head > div { min-width: 0; }
.st-card-head .acc-card__title,
.st-card-head .acc-card__desc { margin-bottom: 0; }

.st-help {
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-muted);
  margin: var(--bn-s-2) 0 0;
}

/* ---------- segmented control ---------- */
.st-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--bn-bg-surface-2);
  border: 1px solid var(--bn-border-soft);
  border-radius: var(--bn-r-md);
  gap: 2px;
}
.st-segmented__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: var(--bn-text-sm);
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink-secondary);
  cursor: pointer;
  min-height: 30px;
  transition: background var(--bn-dur-fast) var(--bn-ease), color var(--bn-dur-fast) var(--bn-ease);
}
.st-segmented__btn iconify-icon { font-size: 15px; }
.st-segmented__btn:hover { color: var(--bn-ink); }
.st-segmented__btn[aria-checked="true"],
.st-segmented__btn.is-active {
  background: var(--bn-bg-page);
  color: var(--bn-ink);
  box-shadow: var(--bn-shadow-xs);
}

/* ---------- proxy list ---------- */
.st-proxy-list {
  display: flex;
  flex-direction: column;
  gap: var(--bn-s-2);
}
.st-proxy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--bn-s-4);
  padding: var(--bn-s-3) var(--bn-s-4);
  background: var(--bn-bg-page);
  border: 1px solid var(--bn-border-soft);
  border-radius: var(--bn-r-md);
  transition: border-color var(--bn-dur-fast) var(--bn-ease);
}
.st-proxy:hover { border-color: var(--bn-border); }
.st-proxy__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--bn-text-sm);
}
.st-proxy__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bn-ink-faint);
  flex-shrink: 0;
}
.st-proxy[data-status="ok"]      .st-proxy__dot { background: var(--bn-success); box-shadow: 0 0 0 3px rgba(58, 96, 72, 0.15); }
.st-proxy[data-status="failed"]  .st-proxy__dot { background: var(--bn-danger); box-shadow: 0 0 0 3px rgba(176, 41, 27, 0.15); }
.st-proxy[data-status="testing"] .st-proxy__dot {
  background: var(--bn-info);
  animation: st-proxy-pulse 1s ease-in-out infinite;
}
@keyframes st-proxy-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 91, 142, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(58, 91, 142, 0); }
}
.st-proxy__flag {
  font-size: 20px;
  line-height: 1;
}
.st-proxy__main { min-width: 0; }
.st-proxy__label {
  font-size: var(--bn-text-md);
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-proxy__meta {
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-muted);
  font-family: var(--bn-font-mono);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.st-proxy__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.st-proxy__assigned {
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-muted);
  margin-top: 4px;
}
.st-proxy__assigned strong { color: var(--bn-ink-secondary); font-weight: var(--bn-fw-medium); }
.st-proxy__actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.st-proxy__action {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bn-r-sm);
  color: var(--bn-ink-muted);
  cursor: pointer;
  transition: background var(--bn-dur-fast) var(--bn-ease), color var(--bn-dur-fast) var(--bn-ease);
}
.st-proxy__action:hover { background: var(--bn-bg-surface-2); color: var(--bn-ink); }
.st-proxy__action--danger:hover { color: var(--bn-danger); }
.st-proxy__action iconify-icon { font-size: 16px; }
.st-proxy__action[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.6;
}
.st-proxy__action[aria-busy="true"] iconify-icon {
  animation: st-spin 0.9s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ---------- empty state ---------- */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--bn-s-6) var(--bn-s-4);
  color: var(--bn-ink-muted);
  font-size: var(--bn-text-sm);
  text-align: center;
}
.st-empty iconify-icon { font-size: 28px; }
.st-empty p { margin: 0; }
.st-empty__hint {
  max-width: 480px;
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-faint);
  line-height: 1.55;
  margin-top: 4px;
}
.st-empty__hint a { color: var(--bn-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- per-agent map ---------- */
.st-agent-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bn-s-2);
}
.st-agent-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: var(--bn-s-3);
  padding: var(--bn-s-3) var(--bn-s-4);
  background: var(--bn-bg-page);
  border: 1px solid var(--bn-border-soft);
  border-radius: var(--bn-r-md);
}
.st-agent-row__label {
  font-size: var(--bn-text-sm);
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink);
}
.st-agent-row__select {
  width: 100%;
  padding: 7px 10px;
  background: var(--bn-bg-surface-2);
  border: 1px solid var(--bn-border-soft);
  border-radius: var(--bn-r-sm);
  font-size: var(--bn-text-sm);
  color: var(--bn-ink);
  font-family: inherit;
  min-height: 36px;
}
.st-agent-row__select:focus {
  outline: none;
  border-color: var(--bn-accent);
  box-shadow: 0 0 0 3px var(--bn-accent-soft);
}
.st-agent-row__flag {
  font-size: 20px;
  line-height: 1;
}

/* ---------- modal inputs (Add/Edit proxy) ---------- */
.st-modal-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--bn-s-3);
  margin-bottom: var(--bn-s-3);
}
.st-modal-grid--full { grid-template-columns: 1fr; }
.st-test-result {
  margin-top: var(--bn-s-3);
  padding: var(--bn-s-3) var(--bn-s-4);
  border-radius: var(--bn-r-md);
  font-size: var(--bn-text-sm);
  line-height: var(--bn-lh-relaxed);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.st-test-result iconify-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.st-test-result--ok {
  background: rgba(58, 96, 72, 0.10);
  color: var(--bn-success);
  border: 1px solid rgba(58, 96, 72, 0.20);
}
.st-test-result--fail {
  background: rgba(176, 41, 27, 0.08);
  color: var(--bn-danger);
  border: 1px solid rgba(176, 41, 27, 0.18);
}
.st-test-result--pending {
  background: var(--bn-bg-surface-2);
  color: var(--bn-ink-secondary);
  border: 1px solid var(--bn-border-soft);
}
.st-test-result strong { color: var(--bn-ink); font-weight: var(--bn-fw-semibold); }
.st-test-result code {
  font-family: var(--bn-font-mono);
  font-size: var(--bn-text-xs);
  background: var(--bn-bg-page);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------- dark theme parity ---------- */
[data-theme="dark"] .st-test-result--ok {
  background: rgba(58, 96, 72, 0.18);
  color: #6FBE85;
}
[data-theme="dark"] .st-test-result--fail {
  background: rgba(176, 41, 27, 0.18);
  color: #F0807A;
}

/* ---------- context menu (agent.html right-click) ---------- */
.st-ctx-menu {
  position: fixed;
  z-index: var(--bn-z-toast);
  background: var(--bn-bg-page);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-r-md);
  box-shadow: var(--bn-shadow-lg);
  padding: var(--bn-s-1) 0;
  min-width: 240px;
  max-width: 320px;
  font-size: var(--bn-text-sm);
  animation: bn-fade-in var(--bn-dur-fast) var(--bn-ease);
}
.st-ctx-menu__label {
  display: block;
  padding: var(--bn-s-2) var(--bn-s-4) 4px;
  font-size: var(--bn-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bn-ink-muted);
  font-weight: var(--bn-fw-medium);
}
.st-ctx-menu__sep {
  height: 1px;
  background: var(--bn-border-soft);
  margin: var(--bn-s-1) 0;
}
.st-ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px var(--bn-s-4);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: inherit;
  color: var(--bn-ink);
  cursor: pointer;
  min-height: 34px;
}
.st-ctx-menu__item:hover { background: var(--bn-bg-surface-2); }
.st-ctx-menu__item iconify-icon { font-size: 16px; flex-shrink: 0; color: var(--bn-ink-muted); }
.st-ctx-menu__item--check iconify-icon { color: var(--bn-success); }
.st-ctx-menu__item-flag { font-size: 16px; line-height: 1; }
.st-ctx-menu__item--manage { color: var(--bn-accent-strong); }
.st-ctx-menu__item--manage iconify-icon { color: var(--bn-accent-strong); }