/* pages/settings.css */
/* ---------- Settings shell (Plan 5 C.1) ---------- */
.settings-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-24);
  min-height: 60vh;
}
.settings-subnav {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.settings-subnav__head {
  font-size: var(--fs-label);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-8) var(--space-8) var(--space-4);
  font-weight: var(--fw-bold);
}
.settings-subnav__link {
  appearance: none;
  min-height: var(--touch-target);
  background: transparent;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-6);
  color: var(--text-tertiary);
  cursor: pointer;
  font: inherit;
}
.settings-subnav__link:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.settings-subnav__link[aria-current="page"] {
  color: var(--text-primary);
  background: var(--accent-soft-bg);
}
.settings-subnav__link[hidden] { display: none; }
.settings-subnav__icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  color: var(--text-muted);
}
.settings-subnav__link[aria-current="page"] .settings-subnav__icon {
  color: var(--accent-soft-text);
}

.settings-content {
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  padding: var(--space-24);
}
.settings-placeholder h2 { margin: 0 0 var(--space-8); }
.settings-placeholder code { color: var(--accent-soft-text); }
.settings-placeholder p { color: var(--text-tertiary); margin: 0; }

/* ---------- Partner integrations ---------- */
.pi-security-note,
.pi-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.pi-security-note { color: var(--text-secondary); }
.pi-security-note > .icon { color: var(--ok); flex: 0 0 auto; margin-top: var(--space-4); }
.pi-security-note strong,
.pi-empty strong { color: var(--text-primary); }
.pi-security-note p,
.pi-empty p { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.45; }
.pi-section { margin-top: var(--space-24); }
.pi-section__heading { display: flex; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-12); }
.pi-section__heading h3 { margin: 0; font-size: var(--fs-section); }
.pi-section__heading p { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--fs-small); }
.pi-grid,
.pi-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.pi-card,
.pi-provider {
  min-width: 0;
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-surface);
}
.pi-card--connected { border-left: 3px solid var(--ok); }
.pi-card__top,
.pi-provider__head { display: flex; align-items: flex-start; gap: var(--space-10); }
.pi-card__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-6); background: var(--accent-soft-bg); color: var(--accent-soft-text); flex: 0 0 auto; }
.pi-card__title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.pi-card__title strong,
.pi-provider__head strong { overflow-wrap: anywhere; }
.pi-card__title span,
.pi-provider__head span { color: var(--text-tertiary); font-size: var(--fs-small); }
.pi-card__credential { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-16); color: var(--text-secondary); font-size: var(--fs-small); }
.pi-card__status { margin: var(--space-8) 0 0; color: var(--text-tertiary); font-size: var(--fs-small); }
.pi-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.pi-card__actions .btn--icon { margin-left: auto; }
.pi-provider { display: flex; flex-direction: column; }
.pi-provider__head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.pi-provider > p { color: var(--text-secondary); line-height: 1.45; margin: var(--space-12) 0; }
.pi-provider__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: auto; color: var(--text-tertiary); font-size: var(--fs-small); }
.pi-provider__footer .btn { flex: 0 0 auto; }
.overlay--partner-form .overlay__surface { width: min(640px, calc(100% - var(--space-32))); }
.pi-form { display: grid; gap: var(--space-12); width: 100%; min-width: 0; }
.pi-form-provider { display: flex; gap: var(--space-10); padding: var(--space-12); border-radius: var(--radius-6); background: var(--bg-elevated); }
.pi-form-provider > .icon { color: var(--accent-soft-text); flex: 0 0 auto; }
.pi-form-provider > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pi-form-provider span { color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.4; }
.pi-form-provider strong,
.pi-form-provider span { overflow-wrap: anywhere; }
.pi-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); min-width: 0; }
.pi-form-field { min-width: 0; display: grid; align-content: start; gap: var(--space-6); color: var(--text-secondary); font-weight: var(--fw-medium); }
.pi-form-field--wide { grid-column: 1 / -1; }
.pi-form-field .input { min-width: 0; }
.pi-form-field small { color: var(--text-muted); font-weight: var(--fw-normal); }
.pi-form-secret-note { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--text-tertiary); font-size: var(--fs-small); }
.pi-form-enabled { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12); border: 1px solid var(--border-subtle); border-radius: var(--radius-8); }
.pi-form-enabled > span { display: flex; flex-direction: column; gap: var(--space-4); }
.pi-form-enabled small { color: var(--text-tertiary); font-weight: var(--fw-normal); }
.pi-postback-intro,
.pi-postback-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.pi-postback-intro > .icon,
.pi-postback-warning > .icon { color: var(--accent-soft-text); flex: 0 0 auto; }
.pi-postback-intro p,
.pi-postback-warning p { margin: var(--space-4) 0 0; color: var(--text-tertiary); line-height: 1.45; }
.pi-postback-details { display: grid; gap: var(--space-16); width: 100%; min-width: 0; }
.pi-postback-warning { border-color: var(--warn); background: var(--warn-soft-bg); }
.pi-postback-warning > .icon { color: var(--warn); }
.pi-postback-field { display: grid; gap: var(--space-6); color: var(--text-secondary); font-weight: var(--fw-medium); }
.pi-postback-field__control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); min-width: 0; }
.pi-postback-field__control .input { width: 100%; min-width: 0; font-family: var(--font-mono); }
.pi-postback-help { margin: 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.5; }

@media (max-width: 900px) {
  .pi-grid,
  .pi-catalog { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pi-provider__footer { align-items: stretch; flex-direction: column; }
  .pi-provider__footer .btn { width: 100%; }
  .pi-form,
  .pi-postback-details { min-width: 0; }
  .pi-form-fields { grid-template-columns: 1fr; }
  .pi-form-field--wide { grid-column: auto; }
  .pi-postback-field__control { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-subnav { flex-direction: row; flex-wrap: wrap; }
  .settings-subnav__head { display: none; }
}

/* ---------- Settings sub-pages (Plan 5 C.2-C.4) ---------- */
.settings-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.settings-actionbar h2 { margin: 0; }
.settings-page-head { align-items: flex-start; }
.settings-page-head__copy { min-width: 0; }
.settings-page-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-8);
  flex: 0 0 auto;
}
.settings-page-intro {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.settings-state,
.settings-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.settings-notice { margin-bottom: var(--space-16); }
.settings-state__icon,
.settings-notice__icon { flex: 0 0 auto; color: var(--accent-soft-text); }
.settings-state strong,
.settings-notice strong { color: var(--text-primary); }
.settings-state p,
.settings-notice p {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.settings-state__icon--spin { animation: settings-spin 900ms linear infinite; }
.settings-notice--safe { border-color: color-mix(in srgb, var(--ok) 35%, var(--border-subtle)); }
.settings-notice--safe .settings-notice__icon { color: var(--ok); }
.settings-notice--warning { border-color: color-mix(in srgb, var(--warn) 45%, var(--border-subtle)); }
.settings-notice--warning .settings-notice__icon { color: var(--warn); }
.settings-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.settings-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.settings-stat {
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.settings-stat span { color: var(--text-muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }
.settings-stat strong { display: block; margin-top: var(--space-6); color: var(--text-primary); font-size: var(--fs-title); }
.settings-stat--warn strong { color: var(--warn); }
.settings-stat--danger strong { color: var(--danger); }
.settings-table-meta { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); }
.settings-inline-error { display: block; max-width: 220px; margin-top: var(--space-4); }
.settings-danger-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-12);
  cursor: pointer;
}
.settings-danger-check input { margin-top: var(--space-4); }
@keyframes settings-spin { to { transform: rotate(360deg); } }
.settings-actionbar__state {
  flex: 1 1 auto;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  text-align: right;
}
.settings-actionbar__state--dirty {
  color: var(--warn);
  font-weight: var(--fw-medium);
}
.settings-row-actions { display: flex; gap: var(--space-6); justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.settings-row-actions .btn { flex: 0 0 auto; }

/* ---------- Billing self-service ---------- */
.billing-head { align-items: flex-start; }
.billing-balance {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.billing-balance span,
.billing-balance small { color: var(--text-tertiary); font-size: var(--fs-small); }
.billing-balance strong { color: var(--text-primary); font-size: var(--fs-title); }
.billing-period {
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-20) 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.billing-period button {
  min-height: var(--touch-target);
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-6);
  color: var(--text-tertiary);
  background: transparent;
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.billing-period button.active {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.billing-period button span {
  margin-left: var(--space-4);
  color: var(--ok);
  font-size: var(--fs-label);
}
.billing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}
.billing-plan {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-surface);
}
.billing-plan--primary { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.billing-plan--requested {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--accent-soft-bg);
}
.billing-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.billing-plan__head h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-section); }
.billing-plan__head div > span { display: block; margin-top: var(--space-4); color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.4; }
.billing-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-6); margin: 0; }
.billing-plan__price strong { color: var(--text-primary); font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.billing-plan__price span { color: var(--text-tertiary); font-size: var(--fs-small); }
.billing-plan__saving { min-height: 1.35em; margin: calc(var(--space-12) * -1) 0 0; color: var(--ok); font-size: var(--fs-small); }
.billing-plan__features { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.billing-plan__features li { display: flex; align-items: flex-start; gap: var(--space-6); color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.4; }
.billing-plan__features .icon { flex: 0 0 auto; margin-top: var(--space-4); color: var(--ok); }
.billing-plan .btn { width: 100%; margin-top: auto; }
.billing-plan .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.billing-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-top: var(--space-20);
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.billing-note > .icon { flex: 0 0 auto; color: var(--ok); }
.billing-note strong { color: var(--text-primary); }
.billing-note p { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.45; }
.billing-note--verification { align-items: center; border-color: var(--border-strong); }
.billing-note--verification > div { flex: 1 1 auto; min-width: 0; }
.billing-note--verification > .btn { flex: 0 0 auto; }
@media (max-width: 1040px) { .billing-plans { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .billing-head { flex-direction: column; align-items: stretch; }
  .billing-balance { justify-items: start; }
  .billing-period { width: 100%; }
  .billing-note--verification { align-items: stretch; flex-direction: column; }
  .billing-note--verification > .btn { width: 100%; }
}
/* compact square icon-only button (used in cramped table action cells) */
.btn--icon { padding: var(--space-6); line-height: 0; color: var(--text-tertiary); }
.btn--icon:hover { color: var(--text-primary); }
.btn--icon .icon { flex: 0 0 auto; }
.btn--icon[data-act="del"]:hover { color: var(--danger); }
.settings-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-secondary);
}
.managers-grid {
  display: grid;
  gap: var(--space-12);
}
.manager-card {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
}
.manager-card--warn { border-left: 3px solid var(--warn); }
.manager-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: var(--fw-heavy);
}
.manager-card__info { display: flex; flex-direction: column; gap: var(--space-4); }
.manager-card__slug { color: var(--text-muted); font-size: var(--fs-small); }
.manager-card__actions { display: flex; gap: var(--space-4); }
.runtime-form { display: grid; gap: var(--space-12); }
.settings-managed-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.settings-managed-note > span { flex: 0 0 auto; color: var(--accent-soft-text); }
.settings-managed-note strong { color: var(--text-primary); }
.settings-managed-note p {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .settings-actionbar { flex-direction: column; align-items: stretch; }
  .settings-page-head__actions { justify-content: stretch; }
  .settings-page-head__actions > .btn,
  .settings-page-head__actions > .select { flex: 1 1 auto; }
  .settings-actionbar--runtime {
    position: sticky;
    top: calc(var(--health-strip-height) + var(--space-8));
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--space-12);
    margin: calc(var(--space-12) * -1) calc(var(--space-12) * -1) var(--space-16);
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-8);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
  }
  .settings-actionbar--runtime .settings-page-head__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
  }
  .settings-actionbar--runtime .settings-actionbar__state {
    text-align: left;
  }
  .settings-actionbar--runtime .btn { grid-column: 2; grid-row: 1; }
  .manager-card { grid-template-columns: 48px 1fr; }
  .manager-card .pill, .manager-card__actions { grid-column: 1 / -1; }
}

/* ---------- Settings sub-pages (Plan 5 C.5-C.9) ---------- */
.oe-preview {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: var(--space-16);
}
.raw-json__block {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
}
.raw-json__pre {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  padding: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
}
.about-card h3 { margin: 0 0 var(--space-8); font-size: var(--fs-section); }
.about-card p { margin: var(--space-4) 0; color: var(--text-tertiary); }
.about-card a { color: var(--accent-soft-text); }

/* ---------- Workspace team and roles ---------- */
.team-head { align-items: flex-start; }
.team-head .btn { flex: 0 0 auto; }
.team-security-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin-bottom: var(--space-20);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--ok);
  border-radius: var(--radius-8);
  background: var(--ok-soft-bg);
  color: var(--text-secondary);
}
.team-security-note > .icon { flex: 0 0 auto; color: var(--ok); }
.team-security-note strong { color: var(--text-primary); }
.team-security-note p { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.45; }
.team-table-wrap { max-width: 100%; overflow-x: auto; }
.data-table--team { min-width: 760px; }
.team-member { display: flex; align-items: center; gap: var(--space-10); min-width: 220px; }
.team-member__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-grad);
  font-weight: var(--fw-bold);
}
.team-member > span:last-child { display: grid; gap: var(--space-2); min-width: 0; }
.team-member strong { color: var(--text-primary); }
.team-member small { color: var(--text-muted); overflow-wrap: anywhere; }
.team-you { display: inline-block; margin-left: var(--space-4); padding: 1px var(--space-4); border-radius: var(--radius-pill); background: var(--accent-soft-bg); color: var(--accent-soft-text) !important; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.team-status { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; }
.team-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.team-status--active { color: var(--ok); }
.team-status--paused { color: var(--warn); }
.team-roles { margin-top: var(--space-28); padding-top: var(--space-20); border-top: 1px solid var(--border-subtle); }
.team-section-head h3 { margin: 0; font-size: var(--fs-section); }
.team-section-head p { margin: var(--space-4) 0 var(--space-14); color: var(--text-tertiary); font-size: var(--fs-small); }
.team-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.team-role-card { min-width: 0; padding: var(--space-16); border: 1px solid var(--border-subtle); border-radius: var(--radius-8); background: var(--bg-elevated); }
.team-role-card--owner { border-top: 3px solid var(--accent); }
.team-role-card--admin { border-top: 3px solid var(--info); }
.team-role-card--operator { border-top: 3px solid var(--border-default); }
.team-role-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.team-role-card__head > span:last-child { color: var(--text-muted); font-size: var(--fs-micro); }
.team-role-card > p { min-height: 4.2em; margin: var(--space-12) 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.45; }
.team-role-card ul { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.team-role-card li { display: flex; align-items: flex-start; gap: var(--space-6); color: var(--text-tertiary); font-size: var(--fs-small); }
.team-role-card li .icon { flex: 0 0 auto; margin-top: var(--space-4); color: var(--ok); }
.team-form { display: grid; gap: var(--space-14); width: 100%; }
.team-form label { display: grid; gap: var(--space-6); }
.team-form__hint { margin: 0; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.45; }
.team-access-toggle { grid-template-columns: auto 1fr !important; align-items: flex-start; padding: var(--space-12); border: 1px solid var(--border-subtle); border-radius: var(--radius-8); }
.team-access-toggle > span { display: grid; gap: var(--space-4); }
.team-access-toggle small { color: var(--text-tertiary); }

@media (max-width: 1040px) { .team-role-grid { grid-template-columns: 1fr; } .team-role-card > p { min-height: 0; } }
@media (max-width: 640px) { .team-head { align-items: stretch; } .team-head .btn { width: 100%; } }

/* Legacy operator table helpers retained for platform-admin compatibility. */
.settings-op-ws {
  margin-left: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.settings-op-aggregate,
.settings-op-last-login {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-family: var(--font-mono);
}
/* Operators table: mobile card layout (was .settings-op-table) */
@media (max-width: 768px) {
  .data-table--ops thead { display: none; }
  .data-table--ops,
  .data-table--ops tbody,
  .data-table--ops tr,
  .data-table--ops td { display: block; width: 100%; }
  .data-table--ops tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-8);
    margin-bottom: var(--space-8);
    padding: var(--space-8);
  }
  .data-table--ops td { padding: var(--space-4) 0; border: none; }
}

/* ---------- Runtime structured form ---------- */
.settings-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-12);
  padding: var(--space-16) var(--space-16);
  margin-bottom: var(--space-16);
  background: var(--bg-surface);
}
.settings-group legend {
  padding: 0 var(--space-8);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-size: var(--fs-secondary);
}
.settings-group-grid {
  display: grid;
  /* Ufix.9: smaller minmax so 3-4 fields fit on a wide row; align-items
     stretch so neighbouring fields with 1-line and 2-line labels share
     the same overall height. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-12);
  align-items: stretch;
}
.setting-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 76px;
}
.setting-field label {
  font-size: var(--fs-label);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  /* Reserve room for one or two lines of label text so inputs always
     start at the same Y across the row. */
  min-height: 32px;
  line-height: 1.2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}
.setting-field__help-wrap {
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.setting-field__help-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  margin: calc((var(--touch-target) - 16px) / -2);
  color: var(--text-tertiary);
  cursor: help;
  border-radius: var(--radius-pill);
}
.setting-field__help-trigger:hover,
.setting-field__help-trigger:focus-visible {
  color: var(--accent-soft-text);
}
.setting-field__help-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -8px;
}
.setting-field__help {
  position: absolute;
  z-index: var(--z-popover);
  inset-inline: 0;
  bottom: calc(100% + var(--space-6));
  width: auto;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-6);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-4));
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.setting-field__help-wrap:hover .setting-field__help,
.setting-field__help-wrap:focus-within .setting-field__help {
  opacity: 1;
  transform: translateY(0);
}
.setting-field--checkbox {
  /* checkboxes live in .settings-toggle-row, so they don't need the
     76px slot meant for input fields */
  min-height: 0;
}
.setting-field--checkbox label {
  flex-direction: row;
  display: flex;
  gap: var(--space-8);
  align-items: center;
  font-size: var(--fs-secondary);
  color: var(--text-primary);
  font-weight: var(--fw-normal);
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
}

/* Ufix.9 — checkbox-toggle row above the input grid */
.settings-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  padding: var(--space-8) 0 var(--space-12);
  border-bottom: 1px dashed var(--border-subtle);
  margin-bottom: var(--space-12);
}
.settings-toggle-row:empty { display: none; }
.settings-toggle-row .setting-field--checkbox {
  flex: 0 0 auto;
}
.setting-field input.input,
.setting-field select.select {
  width: 100%;
}
.settings-group--advanced summary {
  cursor: pointer;
  padding: var(--space-4) 0;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.settings-group--advanced summary span:first-child { margin-right: var(--space-4); }
.settings-group--advanced[open] .settings-group-grid { margin-top: var(--space-12); }
@media (max-width: 768px) {
  .settings-group-grid { grid-template-columns: 1fr; }
  .settings-toggle-row .setting-field--checkbox {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .setting-field--checkbox label,
  .setting-field--checkbox label span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Ufix.8 — Runtime settings groups: SVG icon + intro text + archive style */
.settings-group__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: var(--fw-medium);
}
.settings-group__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
}
.settings-group__icon svg { display: block; }
.settings-group__intro {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  margin: var(--space-4) 0 var(--space-12);
  line-height: 1.45;
}
/* U2.4 — prod-locked field indicator */
.prod-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-4);
  background: var(--danger-solid);
  color: var(--on-danger);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: var(--space-4);
}
.setting-field__secure-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.setting-field__secure-hint svg { flex: 0 0 auto; }
.setting-field input:disabled[data-rt-key="hh_resume_open_hard_limit_enabled"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Telegram settings ---------- */
.telegram-actionbar { max-width: 860px; }
.telegram-settings {
  display: grid;
  gap: var(--space-12);
  max-width: 860px;
}
.telegram-card,
.telegram-preview {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-surface);
  padding: var(--space-16);
}
.telegram-card--notice { display: flex; align-items: flex-start; gap: var(--space-12); }
.telegram-card--notice h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-secondary); }
.telegram-card--notice p { margin: var(--space-4) 0 0; color: var(--text-tertiary); line-height: 1.5; }
.telegram-card.is-disabled { opacity: 0.68; }
.telegram-connect-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-8);
  background: var(--accent-soft-bg);
}
.telegram-connect-hero__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-8); color: var(--accent-soft-text); background: var(--bg-surface);
}
.telegram-connect-hero__copy h3,
.telegram-link-offer h3 { margin: var(--space-2) 0 var(--space-4); color: var(--text-primary); font-size: var(--fs-secondary); }
.telegram-connect-hero__copy p,
.telegram-link-offer p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.5; }
.telegram-eyebrow { color: var(--accent-soft-text); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.telegram-link-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12);
  align-items: center; padding: var(--space-16); border: 1px solid var(--ok);
  border-radius: var(--radius-8); background: var(--ok-soft-bg);
}
.telegram-link-offer__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); }
.telegram-link-offer code { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--text-secondary); }
.telegram-overview {
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.telegram-overview > h3 { margin: 0 0 var(--space-12); color: var(--text-primary); font-size: var(--fs-small); }
.telegram-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-20); }
.telegram-capability {
  display: flex; align-items: flex-start; gap: var(--space-8); min-width: 0;
}
.telegram-capability > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-6); color: var(--accent-soft-text); background: var(--accent-soft-bg); }
.telegram-capability h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-small); }
.telegram-capability p { margin: var(--space-2) 0 0; color: var(--text-tertiary); font-size: var(--fs-micro); line-height: 1.4; }
.telegram-card__heading--between { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-12); }
.telegram-card__title { display: flex; align-items: flex-start; gap: var(--space-10); min-width: 0; }
.telegram-card__head-actions { display: flex; align-items: center; gap: var(--space-8); flex: 0 0 auto; }
.telegram-connections { display: grid; gap: var(--space-6); margin-top: var(--space-12); }
.telegram-connection {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-12); padding: var(--space-10) var(--space-12); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6); background: var(--bg-elevated);
}
.telegram-connection__main { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.telegram-connection__index { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; color: var(--accent-soft-text); background: var(--accent-soft-bg); font-size: var(--fs-micro); font-weight: 700; }
.telegram-connection__copy { display: grid; gap: var(--space-2); min-width: 0; }
.telegram-connection__copy strong { color: var(--text-primary); font-size: var(--fs-small); }
.telegram-connection__copy span { color: var(--text-muted); font-size: var(--fs-micro); }
.telegram-connection__actions { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }
.telegram-alert-button[aria-pressed="false"] { color: var(--text-muted); }
.telegram-digest-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-12); }
.telegram-card__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}
.telegram-card__title h3,
.telegram-card__heading h3,
.telegram-preview__head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-secondary);
}
.telegram-card__title p,
.telegram-card__heading p,
.telegram-preview__head p {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.telegram-card__icon,
.telegram-preview__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-6);
  color: var(--accent-soft-text);
  background: var(--accent-soft-bg);
}
.telegram-enabled {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.telegram-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-16);
}
.telegram-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.telegram-field--compact {
  width: min(220px, 100%);
  margin: 0;
}
.telegram-field small {
  color: var(--text-muted);
  font-weight: var(--fw-normal);
}
.telegram-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-12) 0 0;
}
.telegram-preview__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}
.telegram-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.telegram-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--bg-surface);
}
.telegram-metric span { color: var(--text-tertiary); font-size: var(--fs-small); }
.telegram-metric strong { color: var(--text-primary); font-size: var(--fs-section); }

@media (max-width: 760px) {
  .telegram-connect-hero { grid-template-columns: auto minmax(0, 1fr); }
  .telegram-connect-hero > .btn { grid-column: 1 / -1; width: 100%; }
  .telegram-card__heading--between,
  .telegram-connection { align-items: stretch; flex-direction: column; }
  .telegram-card__head-actions,
  .telegram-connection__actions { justify-content: space-between; width: 100%; }
  .telegram-capabilities { grid-template-columns: 1fr; }
  .telegram-link-offer { grid-template-columns: 1fr; }
  .telegram-link-offer__actions { justify-content: stretch; }
  .telegram-link-offer__actions .btn { width: 100%; }
  .telegram-digest-row { align-items: stretch; flex-direction: column; }
  .telegram-enabled { justify-content: space-between; }
}

/* ---------- Journal ---------- */
.journal-filters,
.journal-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.journal-filters .input { width: 180px; }
.journal-presets { margin-bottom: var(--space-12); }

/* ---------- Test profiles (H.1) ---------- */
.tp-shell { padding: 0; max-width: 100%; }
.tp-head {
  display: flex; gap: var(--space-12); align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
}
.tp-head h2 { margin: 0; font-size: var(--fs-title); color: var(--text-primary); }
.tp-hint { color: var(--text-muted); font-size: var(--fs-small); margin: 0 0 var(--space-16); }
/* .tp-shell scopes this to the test-profiles page only — the shared
   .data-table is also used by cycle/incidents.js, which renders a bare
   .pill as a cell's ENTIRE content (no preceding label needing a gap), so
   this can't fold into a blanket `.data-table td .pill` rule (mirrors the
   same scoped pattern as .sd-versions__v .pill in pages/store.css). */
.tp-shell .data-table td .pill { margin-left: var(--space-6); }
.tp-preview {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.tp-actions { white-space: nowrap; text-align: right; }
.tp-actions .btn { margin-left: var(--space-4); }
.tp-form { gap: var(--space-16); }
.tp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}
.tp-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.tp-default-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

@media (max-width: 640px) {
  .telegram-card--status { align-items: flex-start; flex-direction: column; }
  .telegram-fields,
  .telegram-preview__grid,
  .tp-form-grid { grid-template-columns: 1fr; }
  .telegram-field--compact,
  .telegram-actions { margin-left: 0; }
  .telegram-actions .btn { flex: 1 1 100%; }
  .telegram-connect-hero { grid-template-columns: 1fr; }
  .telegram-connect-hero__icon { width: 44px; height: 44px; }
  .telegram-connect-hero .btn { width: 100%; justify-content: center; }
  .telegram-link-offer { grid-template-columns: 1fr; }
  .telegram-link-offer__actions { justify-content: stretch; }
  .telegram-link-offer__actions .btn { flex: 1 1 100%; justify-content: center; }
  .telegram-capabilities { grid-template-columns: 1fr; }
  .telegram-card__heading--between { align-items: stretch; flex-direction: column; }
  .telegram-card__heading--between > .btn { width: 100%; justify-content: center; }
  .telegram-connection { grid-template-columns: auto minmax(0, 1fr) auto; }
  .telegram-connection .pill { grid-column: 2 / -1; justify-self: start; }
  .telegram-connection [data-tg-mute] { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .telegram-digest-row { align-items: stretch; flex-direction: column; }
  .journal-filters { align-items: stretch; }
  .journal-filters .input,
  .journal-filters .select { width: 100%; }
  .tp-shell .data-table { min-width: 680px; }
  .tp-shell { overflow-x: auto; }
}

/* --- Motion: cycle subtab active underline --- */
.cycle-subtab {
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.cycle-subtab::after {
  content: "";
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.cycle-subtab.active::after {
  transform: scaleX(1);
}