:root {
  color-scheme: dark;
  --rt-bg: #080b0f;
  --rt-canvas: #0c1117;
  --rt-surface: #111820;
  --rt-surface-raised: #161f29;
  --rt-line: #293441;
  --rt-line-strong: #3a4858;
  --rt-text: #f3f5f7;
  --rt-muted: #96a2af;
  --rt-faint: #697684;
  --rt-brand: #e83f52;
  --rt-brand-strong: #a52535;
  --rt-success: #55d69c;
  --rt-success-bg: #0e2b20;
  --rt-warning: #f0b65f;
  --rt-warning-bg: #31230f;
  --rt-danger: #ff7383;
  --rt-danger-bg: #34171e;
  --rt-info: #8fadd0;
  --rt-info-bg: #172534;
  --rt-radius-sm: 7px;
  --rt-radius: 11px;
  --rt-radius-lg: 16px;
  --rt-shadow: 0 22px 55px rgba(0, 0, 0, .26);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { background: var(--rt-bg); }
body { margin: 0; min-height: 100vh; background: var(--rt-bg); color: var(--rt-text); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rt-brand) 72%, white);
  outline-offset: 2px;
}

.rt-wordmark {
  align-items: center;
  color: var(--rt-text);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 820;
  gap: 11px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.rt-logo { border: 1px solid #76303a; border-radius: 8px; display: block; height: 38px; object-fit: cover; width: 38px; }
.rt-mark {
  align-items: center;
  background: #2a1419;
  border: 1px solid #76303a;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
  color: #ff7d8d;
  display: inline-flex;
  font-size: .72rem;
  height: 38px;
  justify-content: center;
  letter-spacing: .06em;
  width: 38px;
}
.rt-product { color: var(--rt-muted); font-size: .72rem; font-weight: 720; margin-left: 2px; }
.rt-eyebrow {
  color: var(--rt-muted);
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .14em;
  margin: 0 0 7px;
  text-transform: uppercase;
}
.rt-title { font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.045em; margin: 0; }
.rt-subtitle { color: var(--rt-muted); line-height: 1.6; margin: 9px 0 0; max-width: 760px; }

.rt-button {
  align-items: center;
  background: var(--rt-surface-raised);
  border: 1px solid var(--rt-line-strong);
  border-radius: var(--rt-radius-sm);
  color: var(--rt-text);
  cursor: pointer;
  display: inline-flex;
  font-weight: 740;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  text-decoration: none;
}
.rt-button:hover { background: #1c2732; border-color: #526171; }
.rt-button.primary { background: var(--rt-brand); border-color: var(--rt-brand); color: white; }
.rt-button.primary:hover { background: #f0495d; }
.rt-button.danger { background: var(--rt-danger-bg); border-color: #74313c; color: var(--rt-danger); }
.rt-button.quiet { background: transparent; border-color: transparent; color: var(--rt-muted); }
.rt-button.small { font-size: .8rem; min-height: 34px; padding: 6px 10px; }
.rt-button:disabled { cursor: not-allowed; opacity: .48; }

.rt-field { display: grid; gap: 7px; }
.rt-field > span { color: #cbd2da; font-size: .79rem; font-weight: 720; }
.rt-input, .rt-select, .rt-textarea {
  background: #090e14;
  border: 1px solid var(--rt-line-strong);
  border-radius: var(--rt-radius-sm);
  color: var(--rt-text);
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}
.rt-input::placeholder, .rt-textarea::placeholder { color: var(--rt-faint); }
.rt-textarea { min-height: 110px; resize: vertical; }
.rt-form-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.rt-card {
  background: linear-gradient(145deg, var(--rt-surface), #0d1319);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
}
.rt-card-body { padding: 20px; }
.rt-card-head { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; padding: 18px 20px; }
.rt-card-head + .rt-card-body { border-top: 1px solid var(--rt-line); }
.rt-card h2, .rt-card h3 { letter-spacing: -.025em; margin: 0; }
.rt-card h2 { font-size: 1.22rem; }
.rt-card h3 { font-size: 1rem; }
.rt-muted { color: var(--rt-muted); }
.rt-mono { font-family: "SFMono-Regular", Consolas, monospace; }

.rt-badge {
  align-items: center;
  background: var(--rt-info-bg);
  border: 1px solid #354a61;
  border-radius: 999px;
  color: var(--rt-info);
  display: inline-flex;
  font-size: .7rem;
  font-weight: 820;
  gap: 6px;
  padding: 5px 9px;
  text-transform: capitalize;
  white-space: nowrap;
}
.rt-badge::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.rt-badge.success, .rt-badge.active, .rt-badge.sent, .rt-badge.processed { background: var(--rt-success-bg); border-color: #285c46; color: var(--rt-success); }
.rt-badge.warning, .rt-badge.past_due, .rt-badge.pending, .rt-badge.grace { background: var(--rt-warning-bg); border-color: #675024; color: var(--rt-warning); }
.rt-badge.danger, .rt-badge.failed, .rt-badge.suspended, .rt-badge.revoked, .rt-badge.expired { background: var(--rt-danger-bg); border-color: #70313b; color: var(--rt-danger); }

.rt-metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rt-metric { background: var(--rt-surface); border: 1px solid var(--rt-line); border-radius: var(--rt-radius); padding: 17px; }
.rt-metric span { color: var(--rt-muted); display: block; font-size: .76rem; font-weight: 680; }
.rt-metric strong { display: block; font-size: 1.55rem; letter-spacing: -.03em; margin-top: 8px; }

.rt-table-wrap { overflow-x: auto; }
.rt-table { border-collapse: collapse; min-width: 720px; width: 100%; }
.rt-table th { color: var(--rt-muted); font-size: .69rem; font-weight: 820; letter-spacing: .08em; padding: 11px 14px; text-align: left; text-transform: uppercase; }
.rt-table td { border-top: 1px solid var(--rt-line); padding: 14px; vertical-align: middle; }
.rt-table tbody tr:hover { background: rgba(255, 255, 255, .018); }
.rt-table .primary-cell { font-weight: 740; }
.rt-table .secondary-cell { color: var(--rt-muted); font-size: .78rem; margin-top: 4px; }
.rt-table a.primary-cell { text-decoration: none; }
.rt-table a.primary-cell:hover { color: #ff8190; }

.rt-list { display: grid; }
.rt-list-row { align-items: center; border-top: 1px solid var(--rt-line); display: flex; gap: 16px; justify-content: space-between; padding: 13px 0; }
.rt-list-row:first-child { border-top: 0; }
.rt-list-row strong, .rt-list-row p { margin: 0; }
.rt-list-row p { color: var(--rt-muted); font-size: .78rem; margin-top: 4px; }
.rt-empty, .rt-loading, .rt-error { color: var(--rt-muted); padding: 40px 22px; text-align: center; }
.rt-error { color: var(--rt-danger); }
.rt-pagination { align-items: center; display: flex; gap: 10px; justify-content: flex-end; padding-top: 16px; }
.rt-pagination span { color: var(--rt-muted); font-size: .78rem; }

.rt-progress { appearance: none; background: #293440; border: 0; border-radius: 999px; height: 7px; overflow: hidden; width: 100%; }
.rt-progress::-webkit-progress-bar { background: #293440; }
.rt-progress::-webkit-progress-value { background: var(--rt-success); }
.rt-progress::-moz-progress-bar { background: var(--rt-success); }

.rt-tabs { border-bottom: 1px solid var(--rt-line); display: flex; gap: 5px; overflow-x: auto; }
.rt-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--rt-muted); cursor: pointer; font-weight: 720; padding: 12px 14px; white-space: nowrap; }
.rt-tab.active { border-bottom-color: var(--rt-brand); color: var(--rt-text); }

.rt-dialog { background: var(--rt-surface); border: 1px solid var(--rt-line-strong); border-radius: var(--rt-radius-lg); color: var(--rt-text); max-height: calc(100vh - 32px); overflow: auto; padding: 0; width: min(580px, calc(100vw - 28px)); }
.rt-dialog::backdrop { backdrop-filter: blur(4px); background: rgba(2, 4, 7, .84); }
.rt-dialog-head { align-items: flex-start; border-bottom: 1px solid var(--rt-line); display: flex; justify-content: space-between; padding: 22px; }
.rt-dialog-head h2 { letter-spacing: -.03em; margin: 0; }
.rt-dialog-body { display: grid; gap: 15px; padding: 22px; }
.rt-dialog-foot { border-top: 1px solid var(--rt-line); display: flex; gap: 9px; justify-content: flex-end; padding: 16px 22px; }

.rt-toast { background: #17212a; border: 1px solid var(--rt-line-strong); border-radius: var(--rt-radius-sm); bottom: 20px; box-shadow: var(--rt-shadow); opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; right: 20px; transform: translateY(8px); transition: .18s; z-index: 20; }
.rt-toast.show { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .rt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rt-form-row { grid-template-columns: 1fr; }
  .rt-card-head, .rt-list-row { align-items: flex-start; flex-direction: column; }
  .rt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-dialog-foot { flex-direction: column-reverse; }
  .rt-dialog-foot .rt-button { width: 100%; }
}
