:root {
  --bg: #07111f;
  --panel: #111f35;
  --panel-2: #162740;
  --panel-3: #0d1a2d;
  --line: #2d496c;
  --text: #f1f4ff;
  --muted: #9eb2d1;
  --muted-2: #7891b4;
  --yellow: #f9c44f;
  --green: #61e4b1;
  --red: #ff7979;
  --orange: #ffbd69;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 4%, rgba(37, 72, 118, 0.16), transparent 32%),
    linear-gradient(180deg, var(--bg) 0%, #050d19 100%);
}
button,
input,
select,
textarea {
  font: inherit;
}
.shell {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 60px;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.eyebrow {
  color: var(--yellow);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  color: #edf1ff;
  font-size: clamp(42px, 6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
h2 {
  margin: 0;
  font-size: 28px;
}
h3 {
  margin: 0;
  font-size: 21px;
}
.role-line,
.muted,
p {
  color: var(--muted);
}
.role-line {
  margin-top: 24px;
  color: #e8edff;
  font-size: 17px;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  padding: 10px;
  border: 1px solid rgba(95, 132, 180, 0.24);
  border-radius: 16px;
  background: rgba(7, 17, 31, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  overflow: auto;
}
.nav-btn {
  display: inline-block;
  border: 0;
  border-radius: 9px;
  padding: 11px 15px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.nav-btn.active {
  color: #171200;
  background: var(--yellow);
}
.page {
  display: none;
}
.page.active {
  display: block;
}
.settings-heading {
  margin-bottom: 18px;
}
.settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 7px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(9, 21, 37, 0.72);
}
.settings-tab {
  min-width: 160px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 16px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.settings-tab:hover {
  color: var(--text);
  background: rgba(117, 186, 255, 0.07);
}
.settings-tab.active {
  color: #171208;
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 8px 24px rgba(249, 196, 79, 0.12);
}
.settings-panel {
  display: none;
}
.settings-panel.active {
  display: block;
}
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 20px;
  align-items: stretch;
}
.settings-card {
  min-height: 575px;
  display: flex;
  flex-direction: column;
}
.agent-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 20px;
  align-items: stretch;
}
.agent-key-form,
.agent-key-result-card {
  min-height: 0;
}
.agent-key-fields {
  margin-top: 0;
}
.agent-scope-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.agent-scope-heading span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.agent-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.agent-scope-option {
  margin-top: 0;
  min-height: 88px;
}
.agent-scope-option.sensitive {
  border-color: rgba(247, 128, 128, 0.45);
}
.agent-scope-option em {
  display: inline-block;
  margin-left: 6px;
  color: #ffb0b0;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agent-empty-key {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}
.agent-generated-key {
  padding: 18px;
  border: 1px solid rgba(88, 226, 194, 0.45);
  border-radius: 12px;
  background: rgba(27, 115, 100, 0.12);
}
.agent-generated-key label,
.agent-generated-key p {
  display: block;
}
.agent-generated-key input {
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.agent-generated-key button {
  width: 100%;
  margin-top: 14px;
}
.agent-generated-key p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.agent-key-table td small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.agent-scope-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 460px;
}
.agent-scope-badges span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-3);
  font-size: 10px;
}
.prompt-textarea {
  flex: 1 1 auto;
  min-height: 330px;
  resize: vertical;
  line-height: 1.55;
}
.prompt-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  margin-top: 9px;
}
.unsaved-badge {
  display: none;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  color: #171208;
  background: var(--yellow);
  font-size: 12px;
  font-weight: 900;
}
.unsaved-badge.show {
  display: inline-flex;
}
.settings-layer-list {
  margin-top: 16px;
}
.settings-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.settings-layer:last-child {
  border-bottom: 0;
}
.settings-layer strong {
  display: block;
}
.settings-layer div > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
}
.settings-notice {
  margin-top: auto;
}
.settings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-matrix-shell {
  min-height: 560px;
}
.plan-matrix-mount {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 48px 28px 30px;
  border: 1px dashed #45617f;
  border-radius: 16px;
  background: rgba(8, 20, 36, 0.42);
  text-align: center;
}
.plan-matrix-placeholder-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--yellow);
  background: rgba(255, 196, 0, 0.1);
  border: 1px solid rgba(255, 196, 0, 0.32);
  border-radius: 15px;
  font-size: 28px;
}
.plan-matrix-placeholder-copy {
  max-width: 680px;
}
.plan-matrix-placeholder-copy h4 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}
.plan-matrix-placeholder-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.plan-matrix-contract {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}
.plan-matrix-contract > div {
  min-height: 90px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: rgba(15, 35, 52, 0.72);
}
.plan-matrix-contract strong {
  display: block;
  color: #fff;
  font-size: 13px;
}
.plan-matrix-contract span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .agent-access-grid,
  .agent-scope-list {
    grid-template-columns: 1fr;
  }
  .plan-matrix-contract {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .plan-matrix-mount {
    padding: 34px 18px 22px;
  }
  .plan-matrix-contract {
    grid-template-columns: 1fr;
  }
}
.feature-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.model-routing-card {
  margin-bottom: 18px;
}
.model-routing-fields {
  margin-top: 18px;
}
.model-routing-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: rgba(8, 20, 36, 0.5);
}
.model-routing-flow > div {
  min-width: 0;
}
.model-routing-flow span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.model-routing-flow strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-routing-flow > b {
  color: var(--yellow);
  font-size: 22px;
}
.provider-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.provider-title-row h3 {
  margin: 0;
}
.provider-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.model-role {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.model-role.primary {
  color: #171208;
  background: var(--yellow);
}
.model-role.active {
  color: #06291f;
  background: #69efbd;
  border: 1px solid rgba(105, 239, 189, 0.8);
}
.model-role.fallback {
  color: #bfe2ff;
  background: rgba(117, 186, 255, 0.14);
  border: 1px solid rgba(117, 186, 255, 0.35);
}
@media (max-width: 560px) {
  .model-routing-flow {
    grid-template-columns: 1fr;
  }
  .model-routing-flow > b {
    transform: rotate(90deg);
    justify-self: center;
  }
}
.feature-summary-card {
  background: rgba(8, 20, 36, 0.56);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  padding: 14px;
}
.feature-summary-card strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}
.plan-starter {
  color: #dce6fa;
  background: rgba(158, 178, 209, 0.1);
}
.plan-plus {
  color: #9ed0ff;
  background: rgba(117, 186, 255, 0.12);
  border-color: rgba(117, 186, 255, 0.38);
}
.plan-pro {
  color: #171208;
  background: var(--yellow);
  border-color: var(--yellow);
}
.feature-name {
  font-weight: 850;
  color: #fff;
}
.feature-description {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.plan-matrix-table th:not(:first-child),
.plan-matrix-table td:not(:first-child) {
  text-align: center;
}
.plan-toggle {
  appearance: none;
  width: 45px;
  height: 25px;
  border-radius: 999px;
  background: #233650;
  border: 1px solid #456183;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.plan-toggle::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #d9e5f8;
  transition: transform 0.18s ease;
}
.plan-toggle:checked {
  background: var(--yellow);
  border-color: var(--yellow);
}
.plan-toggle:checked::after {
  transform: translateX(20px);
  background: #171208;
}
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid #2d4e62;
  border-radius: 13px;
  color: #cad7e8;
  background: #0c2132;
  font-size: 13px;
}
.notice span {
  color: var(--green);
}
.grid {
  display: grid;
  gap: 18px;
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card,
.login-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 33, 56, 0.98), rgba(14, 27, 47, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.metric-card {
  position: relative;
  min-height: 126px;
  overflow: hidden;
}
.metric-card::after {
  position: absolute;
  top: -35px;
  right: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(117, 186, 255, 0.08);
  content: '';
}
.metric-label {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.metric-value {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 34px;
  font-weight: 950;
}
.metric-note {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 14px;
}
.section-header h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
}
.section-header p {
  margin: 7px 0 0;
  max-width: 760px;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar-group,
.subscription-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.subscription-header {
  align-items: flex-end;
}
.subscription-card {
  padding: 28px;
}
.subscription-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 20px;
}
.subscription-toolbar .toolbar-group {
  flex-wrap: nowrap;
}
.subscription-filter {
  width: auto;
}
.subscription-filter.plan-filter {
  width: 128px;
  min-width: 128px;
}
.subscription-filter.status-filter {
  width: 174px;
  min-width: 174px;
}
.subscription-table {
  min-width: 0;
  table-layout: fixed;
}
.subscription-table th:nth-child(1) {
  width: 23%;
}
.subscription-table th:nth-child(2) {
  width: 12%;
}
.subscription-table th:nth-child(3) {
  width: 17%;
}
.subscription-table th:nth-child(4) {
  width: 13%;
}
.subscription-table th:nth-child(5) {
  width: 21%;
}
.subscription-table th:nth-child(6) {
  width: 14%;
}
.subscription-table td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.table-sort {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table-sort span {
  margin-left: 3px;
  color: #fff;
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 11px;
  border: 1px solid #42668d;
  border-radius: 999px;
  color: #d8e7ff;
  background: #142a45;
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}
.plan-badge.pro {
  border-color: var(--yellow);
  color: #171208;
  background: var(--yellow);
}
.subscription-cycle,
.subscription-balance,
.subscription-usage {
  font-size: 17px;
  font-weight: 900;
}
.subscription-note {
  margin-top: 5px;
  color: #75baff;
  font-size: 12px;
}
.subscription-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: nowrap;
}
.incident-card {
  padding: 28px;
}
.incident-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  margin-bottom: 20px;
}
.incident-toolbar .input.search {
  width: min(440px, 100%);
  flex-basis: 440px;
}
.incident-filter {
  width: auto;
  min-width: 142px;
}
.incidents-table {
  min-width: 980px;
  table-layout: fixed;
}
.incidents-table th:nth-child(1) {
  width: 14%;
}
.incidents-table th:nth-child(2) {
  width: 16%;
}
.incidents-table th:nth-child(3) {
  width: 10%;
}
.incidents-table th:nth-child(4) {
  width: 12%;
}
.incidents-table th:nth-child(5) {
  width: 23%;
}
.incidents-table th:nth-child(6) {
  width: 25%;
}
.incidents-table td {
  padding-top: 18px;
  padding-bottom: 18px;
  overflow-wrap: anywhere;
}
.incident-seller-link {
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.incident-seller-link:hover {
  color: var(--yellow);
}
.incident-severity,
.incident-source {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  background: rgba(117, 186, 255, 0.07);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.incident-severity.critical {
  color: var(--red);
  border-color: #ff797944;
  background: #ff797914;
}
.incident-severity.warning {
  color: var(--orange);
  border-color: #ffbd6944;
  background: #ffbd6914;
}
.incident-severity.info {
  color: #8ec5ff;
  border-color: #75baff44;
  background: #75baff14;
}
.incident-term {
  display: block;
  line-height: 1.35;
}
.incident-next-action {
  color: var(--text);
  line-height: 1.4;
}
.incident-explanation-button {
  margin-top: 10px;
}
.incident-explanation-row td {
  padding: 0 18px 20px;
  background: rgba(5, 16, 31, 0.42);
}
.incident-explanation-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6, 20, 38, 0.7);
}
.incident-explanation-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.incident-explanation-grid strong,
.incident-explanation-grid p {
  display: block;
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}
.incident-explanation-grid strong + p {
  margin-top: 6px;
  color: var(--muted-2);
}
.incident-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.incident-pagination > div {
  display: flex;
  gap: 8px;
}
.modal-help {
  margin: -5px 0 0;
  font-size: 12px;
}
.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  color: var(--text);
  background: #081326;
  outline: none;
}
.input.search {
  width: min(360px, 100%);
  max-width: none;
  flex: 0 1 360px;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px #f6c45320;
}
.compact {
  width: auto;
  min-width: 175px;
}
.textarea {
  resize: vertical;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 12px 17px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  color: #191300;
  background: var(--yellow);
}
.btn-secondary {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel-2);
}
.btn-ghost {
  color: var(--muted-2);
  border: 1px solid var(--line);
  background: transparent;
}
.btn-danger {
  color: white;
  background: #a73542;
}
.btn-small {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.signout {
  margin-top: 32px;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: rgba(8, 19, 34, 0.24);
}
th {
  padding: 15px 14px;
  color: var(--muted);
  border-bottom: 1px solid rgba(95, 132, 180, 0.24);
  background: rgba(8, 19, 34, 0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
td {
  padding: 15px 14px;
  border-bottom: 1px solid rgba(95, 132, 180, 0.24);
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
.seller-name {
  font-weight: 900;
}
.seller-meta {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 12px;
}
.number {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.success {
  color: var(--green);
}
.warning {
  color: var(--orange);
}
.danger {
  color: var(--red);
}
.right {
  text-align: right;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.status:before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.status.healthy,
.status.running,
.status.resolved {
  color: var(--green);
  border-color: #61e4b133;
  background: #61e4b112;
}
.status.stopped,
.status.disabled,
.status.unknown,
.status.not-monitored,
.status.not-configured {
  color: var(--muted-2);
  border-color: #91a0b733;
  background: #91a0b710;
}
.status.degraded,
.status.recovered,
.status.retrying,
.status.recorded {
  color: var(--orange);
  border-color: #ffbd6933;
  background: #ffbd6910;
}
.status.down,
.status.offline,
.status.open {
  color: var(--red);
  border-color: #ff797933;
  background: #ff797910;
}
.fleet-table {
  min-width: 1040px;
  table-layout: fixed;
}
.fleet-table th {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.fleet-table td {
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
}
.fleet-table th:nth-child(1) {
  width: 14%;
}
.fleet-table th:nth-child(2) {
  width: 9%;
}
.fleet-table th:nth-child(3) {
  width: 8%;
}
.fleet-table th:nth-child(4) {
  width: 8%;
}
.fleet-table th:nth-child(5) {
  width: 9%;
}
.fleet-table th:nth-child(6) {
  width: 11%;
}
.fleet-table th:nth-child(7) {
  width: 10%;
}
.fleet-table th:nth-child(8) {
  width: 12%;
}
.fleet-table th:nth-child(9) {
  width: 10%;
}
.fleet-table th:nth-child(10) {
  width: 9%;
}
.fleet-table .seller-id {
  overflow-wrap: anywhere;
}
.fleet-table td:last-child {
  overflow-wrap: normal;
}
.table-summary-line {
  white-space: nowrap;
}
.provider-card {
  position: relative;
}
.provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.key-mask {
  margin-top: 18px;
  padding: 13px;
  border: 1px dashed #445879;
  border-radius: 10px;
  color: #ced7e5;
  background: #081326;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.provider-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}
.detail {
  padding: 12px;
  border-radius: 10px;
  background: var(--panel-3);
}
.detail small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}
.detail strong {
  display: block;
  margin-top: 5px;
  font-size: 13px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.seller-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-top: 0;
}
.seller-modal {
  width: min(930px, 100%);
  min-height: min(760px, calc(100vh - 40px));
  padding: 26px;
}
.tenant-modal-head h3 {
  font-size: clamp(26px, 3vw, 36px);
}
.tenant-modal-meta {
  margin-top: 7px;
  color: #86bcff;
  font-size: 16px;
}
.tenant-tabs {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  overflow-x: auto;
}
.tenant-tab {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #a9c5eb;
  background: transparent;
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.tenant-tab.active {
  color: #171208;
  border-color: var(--yellow);
  background: var(--yellow);
}
.tenant-loading {
  padding: 80px 20px;
  color: var(--muted);
  text-align: center;
}
.tenant-health-bar,
.tenant-health-bar > div,
.tenant-actions,
.tenant-panel-heading,
.credit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tenant-health-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc((100% - 14px) / 2);
  align-items: start;
  margin-top: 20px;
}
.tenant-health-bar > div:first-child {
  min-width: 0;
  justify-content: flex-start;
}
.tenant-health-bar > div:first-child span:not(.status) {
  color: #8ebeff;
  font-size: 16px;
}
.tenant-actions {
  align-self: start;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tenant-actions .btn {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 13px;
}
.tenant-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  grid-auto-rows: minmax(112px, auto);
}
.tenant-info-card {
  height: 100%;
  min-height: 100px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 19, 34, 0.22);
}
.tenant-info-card > span:first-child {
  display: block;
  margin-bottom: 9px;
  color: #8ebeff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tenant-info-card > .status {
  display: inline-flex;
  width: auto;
  margin: 0;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}
.tenant-info-card > strong {
  font-size: 18px;
}
.tenant-agent-summary {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tenant-agent-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tenant-agent-heading > strong {
  color: #dceaff;
  font-size: 14px;
}
.tenant-agent-heading .status {
  flex: 0 0 auto;
}
.tenant-agent-summary > small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}
.tenant-agent-summary .agent-scope-badges {
  margin-top: 10px;
  max-width: none;
}
.tenant-info-card .select {
  min-height: 48px;
  font-size: 17px;
  font-weight: 900;
}
.tenant-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 19, 34, 0.2);
}
.tenant-panel h4 {
  margin: 0 0 10px;
  font-size: 19px;
}
.tenant-panel-heading p,
.credit-summary p,
.tenant-footnote {
  color: #86bcff;
}
.tenant-payload code {
  display: block;
  overflow-wrap: anywhere;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #d9e8ff;
  background: #081326;
  line-height: 1.5;
}
.credit-summary {
  flex-wrap: wrap;
}
.credit-summary > div:first-child > span {
  display: block;
  color: #86bcff;
  font-size: 16px;
}
.credit-summary > div:first-child > strong {
  display: block;
  margin-top: 5px;
  font-size: 42px;
}
.credit-progress-label {
  display: flex;
  flex: 1 0 100%;
  justify-content: space-between;
}
.credit-progress {
  flex: 1 0 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #081326;
}
.credit-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
}
.tenant-table-wrap {
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.tenant-table-wrap table {
  min-width: 720px;
}
.software-grid {
  margin: 18px 0 20px;
}
.tenant-footnote {
  margin-bottom: 0;
}
.tenant-count-grid {
  margin-top: 20px;
}
.tenant-no-errors {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 20px;
  border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.05);
}
.tenant-no-errors span,
.activity-row span {
  color: #86bcff;
}
.activity-list {
  margin-top: 18px;
}
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.activity-row:last-child {
  border-bottom: 0;
}
.activity-row strong,
.activity-row span,
.activity-row time {
  display: block;
}
.activity-row span,
.activity-row time {
  margin-top: 5px;
}
.activity-row time {
  color: var(--muted-2);
  font-size: 12px;
}
.issue-explanation {
  align-items: flex-start;
}
.issue-explanation > div {
  min-width: 0;
  flex: 1;
}
.issue-explanation span {
  max-width: 780px;
  color: var(--text);
  line-height: 1.55;
}
.issue-explanation span b {
  color: #9ec8ff;
}
.technical-details {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 12px;
}
.technical-details summary {
  width: fit-content;
  cursor: pointer;
  color: #86bcff;
}
.technical-details code {
  display: block;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.incident-plain-text {
  display: block;
  min-width: 170px;
  max-width: 320px;
  color: var(--text);
  line-height: 1.5;
  white-space: normal;
}
.empty {
  padding: 30px;
  color: var(--muted);
  text-align: center;
}
.space-top {
  margin-top: 20px;
}
.login-card {
  max-width: 470px;
  margin: 70px auto;
}
.login-card h2 {
  margin-bottom: 7px;
}
.login-card form,
.modal form {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}
.login-card label,
.modal label {
  display: grid;
  gap: 7px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
}
.login-card .remember-row {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.remember-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.optional {
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
#notice {
  position: fixed;
  z-index: 50;
  top: 22px;
  left: 50%;
  max-width: min(520px, calc(100vw - 30px));
  padding: 13px 16px;
  border-radius: 11px;
  color: #132016;
  background: var(--green);
  box-shadow: 0 16px 40px #0006;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -15px);
  transition: 0.2s;
}
#notice.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#notice.error {
  color: white;
  background: #b83535;
}
.modal-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: #02070dcc;
}
.modal-backdrop.open {
  display: grid;
}
.modal {
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #39506f;
  border-radius: 18px;
  background: #101c31;
  box-shadow: 0 30px 90px #000b;
}
.modal.seller-modal {
  display: flex;
  width: min(1180px, calc(100vw - 32px));
  height: auto;
  min-height: 1100px;
  max-height: none;
  flex-direction: column;
  overflow: visible;
  padding: 26px;
}
.seller-modal #sellerModalBody {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: visible;
  padding-right: 2px;
}
#sellerModal.open {
  place-items: start center;
  overflow: auto;
}
#sellerModal.open .seller-modal {
  margin: 16px auto;
}
.seller-modal .tenant-tabs {
  flex: 0 0 auto;
}
.seller-modal .modal-head {
  flex: 0 0 auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: #263754;
  font-size: 22px;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.monitoring-grid {
  align-items: start;
}
.card-heading,
.monitor-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.card-heading p {
  margin: 6px 0 20px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 17px;
}
.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.toggle-label input,
.check-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--yellow);
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-3);
}
.check-row span,
.check-row small {
  display: block;
}
.check-row small,
.validation-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.tenant-enabled {
  align-self: end;
  min-height: 43px;
}
.monitor-health {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b1729;
}
.monitor-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 15px;
}
.monitor-health-grid small,
.monitor-health-grid strong {
  display: block;
}
.monitor-health-grid small {
  margin-bottom: 5px;
  color: var(--muted);
}
.watchdog-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
}
.watchdog-status > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-3);
}
.watchdog-status small,
.watchdog-status strong {
  display: block;
}
.watchdog-status small {
  margin-bottom: 7px;
  color: var(--muted);
}
.watchdog-status .watchdog-pending {
  grid-column: 1 / -1;
  color: var(--yellow);
}
.watchdog-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.watchdog-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#settings-watch .settings-card {
  min-height: auto;
}

.updates-tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 18px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(95, 132, 180, 0.24);
  border-radius: 14px;
  background: rgba(9, 21, 37, 0.72);
}
.updates-tab {
  min-width: 150px;
  border: 0;
  border-radius: 9px;
  padding: 11px 15px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}
.updates-tab.active {
  color: #171200;
  background: var(--yellow);
}
.updates-panel {
  display: none;
}
.updates-panel.active {
  display: block;
}
.updates-rollout-card {
  padding: 26px;
}
.updates-rollout-top,
.updates-title-line,
.updates-progress-label,
.updates-release-top,
.updates-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.updates-title-line {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.updates-rollout-top p {
  margin: 6px 0 0;
  font-size: 13px;
}
.updates-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: rgba(117, 186, 255, 0.07);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.updates-badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.updates-badge.running,
.updates-badge.completed {
  color: var(--green);
  border-color: rgba(97, 228, 177, 0.3);
  background: rgba(97, 228, 177, 0.08);
}
.updates-badge.queued {
  color: #9ed0ff;
}
.updates-badge.paused {
  color: var(--orange);
  border-color: rgba(255, 189, 105, 0.32);
  background: rgba(255, 189, 105, 0.08);
}
.updates-badge.failed {
  color: var(--red);
  border-color: rgba(255, 121, 121, 0.32);
  background: rgba(255, 121, 121, 0.08);
}
.updates-rollout-meta,
.updates-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 18px;
}
.updates-rollout-meta > div,
.updates-detail-grid > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(95, 132, 180, 0.24);
  border-radius: 12px;
  background: rgba(7, 17, 31, 0.4);
}
.updates-rollout-meta span,
.updates-detail-grid span,
.updates-checksum span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.updates-rollout-meta strong,
.updates-detail-grid strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.updates-progress-label {
  color: var(--muted);
  font-size: 12px;
}
.updates-progress-label strong {
  color: var(--text);
  font-size: 14px;
}
.updates-progress {
  height: 12px;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #294465;
  border-radius: 999px;
  background: #081426;
}
.updates-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #45cf9a, var(--green));
}
.updates-batches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 17px;
}
.updates-batch {
  padding: 9px;
  border: 1px solid rgba(95, 132, 180, 0.24);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(7, 17, 31, 0.36);
  font-size: 11px;
  text-align: center;
}
.updates-batch.done {
  color: #092819;
  border-color: var(--green);
  background: var(--green);
}
.updates-batch.current {
  color: #171200;
  border-color: var(--yellow);
  background: var(--yellow);
}
.updates-toolbar {
  margin: 22px 0 14px;
}
.updates-table {
  min-width: 1080px;
}
.updates-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.updates-table .empty-cell {
  padding: 32px;
  color: var(--muted);
  text-align: center;
}
.updates-pagination {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.updates-release-heading {
  margin-top: 0;
}
.updates-release-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.updates-release-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
}
.updates-release-card p,
.updates-release-card li {
  overflow-wrap: anywhere;
}
.updates-release-card ul {
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.updates-release-card .actions {
  margin-top: auto;
}
.updates-version {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 950;
}
.updates-empty {
  text-align: center;
}
.updates-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.updates-modal .modal-head p {
  margin: 6px 0 0;
  font-size: 12px;
}
.updates-tenant-picker {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.updates-tenant-picker legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
#updateTenantChoices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: 240px;
  overflow-y: auto;
}
.updates-tenant-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(95, 132, 180, 0.24);
  border-radius: 10px;
  background: rgba(7, 17, 31, 0.38);
}
.updates-tenant-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--yellow);
}
.updates-tenant-choice strong,
.updates-tenant-choice small {
  display: block;
}
.updates-tenant-choice small {
  margin-top: 3px;
  color: var(--muted);
}
.updates-preview {
  display: none;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid rgba(97, 228, 177, 0.28);
  border-radius: 12px;
  background: rgba(97, 228, 177, 0.06);
}
.updates-preview.open {
  display: block;
}
.updates-preview strong {
  color: var(--green);
}
.updates-preview p {
  margin-bottom: 0;
}
.updates-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.updates-checksum {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-3);
}
.updates-checksum code {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--text);
}
.updates-drawer-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.updates-drawer {
  width: min(560px, 100%);
  height: 100%;
  padding: 28px;
  overflow-y: auto;
  border-left: 1px solid #45668f;
  background: #0e1d32;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.4);
}
.updates-drawer-actions {
  margin-top: 20px;
}
.updates-timeline {
  margin: 25px 0 0 8px;
  padding-left: 25px;
  border-left: 2px solid #294664;
}
.updates-timeline-item {
  position: relative;
  padding: 0 0 24px;
}
.updates-timeline-item::before {
  position: absolute;
  top: 2px;
  left: -32px;
  width: 12px;
  height: 12px;
  border: 3px solid #0e1d32;
  border-radius: 50%;
  background: #426183;
  content: '';
}
.updates-timeline-item.done::before {
  background: var(--green);
}
.updates-timeline-item.current::before {
  background: var(--yellow);
}
.updates-timeline-item strong,
.updates-timeline-item span {
  display: block;
}
.updates-timeline-item span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 1050px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fleet-table th,
  .fleet-table td {
    padding-right: 9px;
    padding-left: 9px;
  }
  .fleet-table .status {
    gap: 5px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .fleet-table .btn-small {
    padding: 8px 9px;
    font-size: 12px;
  }
  .fleet-table .seller-meta {
    font-size: 11px;
  }
  .subscription-card {
    padding: 20px;
  }
  .subscription-table th,
  .subscription-table td {
    padding-right: 9px;
    padding-left: 9px;
  }
  .subscription-table .btn-small {
    padding: 8px 9px;
    font-size: 12px;
  }
  .incident-card {
    padding: 20px;
  }
  .incident-toolbar {
    grid-template-columns: 1fr;
  }
  .updates-rollout-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .updates-release-grid {
    grid-template-columns: 1fr;
  }
  .watchdog-status,
  .watchdog-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .shell {
    padding: 22px 14px 55px;
  }
  .topbar {
    align-items: flex-start;
  }
  .grid-4,
  .grid-2,
  .settings-grid,
  .feature-summary {
    grid-template-columns: 1fr;
  }
  .settings-card {
    min-height: auto;
  }
  .settings-tab {
    min-width: 135px;
  }
  .watchdog-status,
  .watchdog-fields,
  .watchdog-options {
    grid-template-columns: 1fr;
  }
  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .subscription-actions,
  .subscription-toolbar .toolbar-group {
    width: 100%;
  }
  .subscription-actions .btn,
  .subscription-filter,
  #exportSubscriptionsBtn {
    width: 100%;
  }
  .subscription-toolbar .subscription-filter {
    width: 100%;
  }
  .incident-toolbar .toolbar-group {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .incident-filter {
    width: 100%;
  }
  .incident-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .incident-pagination > div,
  .incident-pagination .btn {
    width: 100%;
  }
  .incident-explanation-grid {
    grid-template-columns: 1fr;
  }
  .compact,
  .input.search {
    width: 100%;
    max-width: none;
  }
  .provider-meta {
    grid-template-columns: 1fr;
  }
  .tenant-health-grid {
    grid-template-columns: 1fr;
  }
  .modal.seller-modal {
    width: calc(100vw - 28px);
    height: auto;
    min-height: calc(100vh - 28px);
    padding: 18px;
  }
  .tenant-health-bar,
  .tenant-health-bar > div,
  .tenant-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .tenant-health-bar {
    grid-template-columns: 1fr;
  }
  .tenant-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .tenant-actions .btn {
    width: 100%;
  }
  .form-grid,
  .monitor-health-grid {
    grid-template-columns: 1fr;
  }
  .modal-actions {
    flex-direction: column-reverse;
  }
  .modal-actions .btn {
    width: 100%;
  }
  .updates-rollout-top,
  .updates-progress-label,
  .updates-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .updates-rollout-meta,
  .updates-detail-grid,
  #updateTenantChoices {
    grid-template-columns: 1fr;
  }
  .updates-pagination .actions,
  .updates-drawer-actions {
    width: 100%;
  }
  .updates-drawer-actions .btn {
    flex: 1;
  }
}