:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f7fb;
  color: #18202f;
}

* { box-sizing: border-box; }
[v-cloak] { display: none; }
body { margin: 0; min-height: 100vh; background: #f5f7fb; }
button, input, textarea, select { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  background: #2056d8;
  color: white;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
}
button.secondary { background: #e8edf7; color: #18202f; }
button.danger { background: #d92d20; }
button:disabled { opacity: .48; cursor: not-allowed; }

.login-panel {
  max-width: 460px;
  margin: 12vh auto;
  padding: 34px;
  background: white;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(24, 32, 47, .08);
}
.login-panel h1, .topbar h1, .panel h2 { margin: 0; }
.login-panel p { color: #667085; line-height: 1.5; }
.hint { font-size: 13px; }
.eyebrow {
  margin: 0 0 6px;
  color: #2056d8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.error { color: #d92d20 !important; }
.inline-error {
  margin-top: 8px !important;
  font-weight: 750;
}

.shell { max-width: 1440px; margin: 0 auto; padding: 22px; }
.topbar, .panel-head, .card header, .card footer, .detail > header, .editor header, .editor footer, .section-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.actions.stretch > * { flex: 1; }
.actions.wrap { flex-wrap: wrap; }
.topbar {
  padding: 16px 0 10px;
  border-bottom: 1px solid #dce3ef;
}
.topbar p, .panel-head p, .card p, .detail p {
  margin: 4px 0 0;
  color: #667085;
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  overflow-x: auto;
}
.tab {
  background: transparent;
  color: #344054;
  border: 1px solid #dce3ef;
}
.tab.active {
  background: #18202f;
  border-color: #18202f;
  color: white;
}

.panel {
  background: white;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(24, 32, 47, .05);
}
.toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .7fr) minmax(150px, .8fr) minmax(110px, .5fr);
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.toolbar .grow { min-width: 240px; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr);
  gap: 16px;
  align-items: start;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.metric {
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafd;
}
.metric span {
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}
.metric strong {
  display: block;
  margin-top: 4px;
  color: #18202f;
  font-size: 20px;
}
.metric small {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}
.table-wrap {
  border: 1px solid #dce3ef;
  border-radius: 8px;
  overflow: auto;
  max-height: 72vh;
}
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf1f7;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafd;
  color: #475467;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.selected { background: #f2f6ff; }

.detail {
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 14px;
  background: #fbfcff;
  max-height: 72vh;
  overflow: auto;
}
.detail h3 { margin: 0; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.chip {
  border: 1px solid #f3c2a3;
  background: #fff4ed;
  color: #9a3412;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 750;
}
.section-editor {
  border-top: 1px solid #e6ebf4;
  padding-top: 12px;
  margin-top: 12px;
}
.section-editor h4 { margin: 0; }
pre, .api-output {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #111827;
  color: #eef4ff;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
  max-height: 260px;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.stack { display: grid; gap: 14px; margin-top: 18px; }
.card {
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.card.compact { padding: 12px; }
.card h3 { margin: 0; font-size: 16px; }
.card footer { margin-top: 14px; }
.provider-card { border-left: 4px solid #2056d8; }
.panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.promo-create {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.promo-create .field { margin: 0; }
.created-codes {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
  border: 1px solid #b8e8c8;
  border-radius: 8px;
  padding: 14px;
  background: #f1fdf5;
  margin: 14px 0;
}
.created-codes p { margin: 4px 0 0; color: #475467; }
.created-codes code { grid-column: 1 / -1; white-space: pre-wrap; word-break: break-all; color: #067647; font-weight: 800; letter-spacing: .04em; }
.promo-table { margin-top: 14px; }
.promo-table code { font-weight: 800; letter-spacing: .04em; }
.promo-table small { color: #667085; }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .6fr);
  gap: 12px;
}
.field { display: grid; gap: 6px; margin-top: 12px; }
.field span {
  color: #475467;
  font-size: 13px;
  font-weight: 750;
}
input, textarea, select {
  width: 100%;
  border: 1px solid #cfd7e6;
  border-radius: 8px;
  padding: 10px 11px;
  background: white;
  color: #18202f;
  min-height: 42px;
}
textarea {
  min-height: 132px;
  resize: vertical;
}
.editor textarea {
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}
.badge.ok, .badge.complete { background: #dcfae6; color: #067647; }
.badge.degraded, .badge.warning, .badge.incomplete { background: #fef0c7; color: #b54708; }
.badge.down, .badge.critical { background: #fee4e2; color: #b42318; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-weight: 750;
}
.switch input {
  width: 18px;
  height: 18px;
  accent-color: #2056d8;
}

dialog {
  width: min(820px, calc(100vw - 24px));
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 0;
}
.editor { padding: 20px; }
.editor h2 { margin: 0; }

#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #18202f;
  color: white;
  border-radius: 8px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: .2s ease;
  max-width: min(480px, calc(100vw - 32px));
}
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .detail, .table-wrap { max-height: none; }
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { padding: 14px; }
  .topbar, .panel-head, .card header, .card footer, .detail > header {
    align-items: stretch;
    flex-direction: column;
  }
  .actions { align-items: stretch; flex-direction: column; }
  .toolbar, .form-grid { grid-template-columns: 1fr; }
  .promo-create { grid-template-columns: 1fr; }
  .created-codes { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
  button { width: 100%; }
}