:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #17202a;
  --muted: #657080;
  --line: #d9dee7;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --error: #b42318;
  --success: #067647;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

.shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 28px auto;
}

.narrow {
  width: min(640px, calc(100vw - 32px));
  margin-top: 10vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

h1,
h2 {
  margin: 0 0 16px;
  line-height: 1.25;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}

.grid {
  display: grid;
  gap: 16px;
}

.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack {
  display: grid;
  gap: 10px;
}

.inline-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

label {
  color: var(--muted);
  font-weight: 600;
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.generator-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.generator-controls label {
  white-space: nowrap;
}

.generator-controls input {
  width: 92px;
  padding: 8px 10px;
}

.contact-link {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
  color: var(--muted);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-link a {
  font-weight: 700;
}

.aftersale-notice {
  border: 1px solid #f6c86f;
  border-radius: 6px;
  background: #fff8e7;
  color: #6b3f00;
  padding: 12px;
  margin-bottom: 18px;
}

.aftersale-notice strong {
  display: block;
  margin-bottom: 6px;
  color: #4a2d00;
  font-size: 15px;
}

.aftersale-notice p {
  margin: 0;
}

.aftersale-notice p + p {
  margin-top: 4px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

button {
  border: 0;
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
}

button:disabled,
button:disabled:hover {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.secondary-button {
  background: #334155;
  padding: 8px 12px;
}

.secondary-button:hover {
  background: #1f2937;
}

.danger-button {
  background: var(--error);
  padding: 8px 12px;
}

.danger-button:hover {
  background: #8f1c13;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.clear-cards-form {
  display: grid;
  grid-template-columns: auto minmax(160px, 220px) auto;
  align-items: center;
  gap: 8px;
}

.clear-cards-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.section-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sub2api-test-result {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.sub2api-test-result.is-success {
  color: var(--success);
}

.sub2api-test-result.is-error {
  color: var(--error);
}

.privacy-settings-form {
  display: grid;
  grid-template-columns: auto 92px auto auto;
  align-items: center;
  gap: 8px;
}

.privacy-settings-form label:not(.check-field) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.privacy-settings-form input[type="number"] {
  padding: 8px 10px;
}

.privacy-settings-form .check-field {
  white-space: nowrap;
}

.self-service-panel {
  display: grid;
  gap: 14px;
}

.self-service-panel[hidden] {
  display: none;
}

.self-service-control {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(110px, 0.35fr) minmax(170px, auto) minmax(200px, auto) auto;
  align-items: end;
  gap: 6px 10px;
}

.self-service-control label {
  grid-row: 1;
}

.self-service-control input,
.self-service-control button {
  grid-row: 2;
}

.self-service-control .check-field {
  grid-row: 2;
  align-self: center;
  white-space: nowrap;
}

.registrar-rotation-settings {
  grid-template-columns: auto minmax(110px, 0.35fr) minmax(110px, 0.35fr) minmax(170px, 1fr) auto;
}

.registrar-rotation-settings .registrar-rotation-distribution {
  grid-column: 1;
  grid-row: 2;
}

.registrar-rotation-settings label[for="registrar-rotation-interval"],
.registrar-rotation-settings #registrar-rotation-interval {
  grid-column: 2;
}

.registrar-rotation-settings label[for="registrar-thread-domain-divisor"],
.registrar-rotation-settings #registrar-thread-domain-divisor {
  grid-column: 3;
}

.registrar-rotation-settings .section-meta {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
  white-space: normal;
}

.registrar-rotation-settings button {
  grid-column: 5;
  grid-row: 2;
}

.self-service-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.self-service-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
  padding: 12px;
}

.self-service-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.self-service-summary strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 4px;
}

.self-service-submit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.self-service-names-submit {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 8px 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.self-service-names-submit label:not(.check-field) {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.self-service-names-submit textarea {
  min-height: 112px;
  resize: vertical;
}

.self-service-names-submit .check-field {
  white-space: nowrap;
}

.card-import-panel {
  display: grid;
  gap: 14px;
}

.card-import-panel[hidden] {
  display: none;
}

.timeout-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(190px, 0.8fr) auto;
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  padding: 12px 0;
  margin: -4px 0 14px;
}

.timeout-control {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto;
  align-items: end;
  gap: 6px 8px;
}

.timeout-control label {
  grid-column: 1 / -1;
}

.timeout-summary {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 64px;
}

.timeout-summary span {
  color: var(--muted);
  font-size: 12px;
}

.timeout-summary strong[data-timeout-count] {
  font-size: 24px;
  line-height: 1.1;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.config-actions {
  justify-content: flex-end;
}

.collapsible-config {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--muted);
}

.check-field input {
  width: auto;
  margin: 0;
}

.redeem-progress {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
  padding: 12px;
  margin-top: 14px;
}

.redeem-progress[hidden] {
  display: none;
}

.progress-head,
.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.progress-head strong {
  color: var(--text);
  font-size: 14px;
}

.progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 160ms ease;
}

.muted-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0 0;
}

.alert {
  border-radius: 6px;
  padding: 10px 12px;
  margin: 14px 0;
  border: 1px solid;
}

.error {
  color: var(--error);
  border-color: #f4b3ad;
  background: #fff4f2;
}

.success {
  color: var(--success);
  border-color: #9bd7bd;
  background: #f0fbf6;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stats > div,
.meta > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.stats span,
.meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stats strong,
.meta strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.stat-detail {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin: 8px 0 0;
}

.registrar-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.registrar-summary > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
  padding: 12px;
}

.registrar-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.registrar-summary strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 4px;
}

.registrar-table {
  min-width: 1180px;
}

.registrar-table .cell-note {
  color: var(--muted);
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 6px;
  min-width: 240px;
}

.mini-metrics div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 7px 8px;
}

.mini-metrics span,
.domain-health span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.mini-metrics strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  margin-top: 2px;
}

.sms-details {
  max-width: 520px;
}

.sms-details summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.sms-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  max-width: 820px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
  padding: 10px;
}

.sms-error {
  border: 1px solid #f4b3ad;
  border-radius: 6px;
  background: #fff4f2;
  color: var(--error);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}

.sms-meta-row,
.sms-current-route,
.sms-provider-list {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sms-current-route {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.sms-current-route strong {
  color: var(--text);
  font-size: 12px;
}

.sms-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 6px;
}

.sms-metrics div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 7px 8px;
}

.sms-metrics span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.sms-metrics strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  margin-top: 2px;
}

.sms-table-wrap {
  max-width: 780px;
}

.sms-table {
  min-width: 1280px;
  background: #fff;
}

.sms-table th,
.sms-table td {
  padding: 7px 8px;
  font-size: 12px;
}

.domain-health {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.domain-health strong {
  font-size: 18px;
}

.domain-status-list > div {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.domain-status-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbfc;
  padding: 7px 8px;
}

.domain-status-item > span {
  color: var(--muted);
  font-size: 12px;
}

.registrar-cloudflare-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  padding: 12px 0;
  margin: 0 0 14px;
}

.registrar-cloudflare-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(190px, 0.8fr) minmax(150px, auto) minmax(130px, auto) auto auto;
  align-items: end;
  gap: 6px 10px;
}

.registrar-cloudflare-settings label {
  grid-row: 1;
  font-size: 12px;
  white-space: nowrap;
}

.registrar-cloudflare-settings input,
.registrar-cloudflare-settings button,
.registrar-cloudflare-settings .badge {
  grid-row: 2;
}

.registrar-cloudflare-settings .registrar-cloudflare-restore-disabled,
.registrar-cloudflare-settings .registrar-cloudflare-auto-sync {
  grid-row: 2;
  align-self: center;
}

.registrar-cloudflare-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.registrar-domain-filter,
.registrar-domain-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.registrar-domain-filter label {
  align-self: center;
}

.registrar-domain-filter select,
.registrar-domain-actions select {
  width: 180px;
}

.registrar-domain-actions {
  align-items: center;
}

.registrar-domain-table {
  min-width: 980px;
}

.registrar-domain-table th:first-child,
.registrar-domain-table td:first-child {
  width: 58px;
}

.domain-checkbox {
  width: auto;
}

.command-details {
  max-width: 260px;
}

.command-details form {
  margin-top: 8px;
}

.command-details textarea {
  min-height: 72px;
}

.meta .range-value {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.table-wrap {
  overflow-x: auto;
}

.unredeemed-privacy-table {
  min-width: 1040px;
  table-layout: fixed;
}

.unredeemed-privacy-table .privacy-col-id {
  width: 5%;
}

.unredeemed-privacy-table .privacy-col-name {
  width: 30%;
}

.unredeemed-privacy-table .privacy-col-created,
.unredeemed-privacy-table .privacy-col-checked {
  width: 9%;
}

.unredeemed-privacy-table .privacy-col-quota {
  width: 15%;
}

.unredeemed-privacy-table .privacy-col-card {
  width: 8%;
}

.unredeemed-privacy-table .privacy-col-sub2api {
  width: 7%;
}

.unredeemed-privacy-table .privacy-col-result {
  width: 12%;
}

.unredeemed-privacy-table .privacy-col-error {
  width: 120px;
}

.unredeemed-privacy-table .privacy-col-action {
  width: 6%;
}

.unredeemed-privacy-table th,
.unredeemed-privacy-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.unredeemed-privacy-table .account-name-cell {
  line-height: 1.4;
}

.quota-usage-list {
  display: grid;
  gap: 4px;
  min-width: 150px;
  margin-top: 8px;
}

.quota-usage-row {
  display: grid;
  grid-template-columns: 34px minmax(56px, 1fr) 46px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #334155;
}

.quota-usage-name,
.quota-usage-percent {
  white-space: nowrap;
}

.quota-usage-percent {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quota-usage-progress {
  width: 100%;
  height: 6px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.quota-usage-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e2e8f0;
}

.quota-usage-progress::-webkit-progress-value {
  border-radius: 999px;
  background: #2563eb;
}

.quota-usage-progress::-moz-progress-bar {
  border-radius: 999px;
  background: #2563eb;
}

.quota-usage-missing {
  color: var(--muted);
}

.unredeemed-privacy-table .privacy-error-cell {
  width: 120px;
  max-width: 120px;
}

.unredeemed-privacy-table .privacy-error-note {
  display: block;
  max-width: 112px;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.unredeemed-privacy-table .cell-note:not(.privacy-error-note) {
  max-width: none;
}

.unredeemed-privacy-log-table {
  min-width: 1280px;
  table-layout: fixed;
}

.unredeemed-privacy-log-table .privacy-log-col-time {
  width: 12%;
}

.unredeemed-privacy-log-table .privacy-log-col-source {
  width: 9%;
}

.unredeemed-privacy-log-table .privacy-log-col-status {
  width: 7%;
}

.unredeemed-privacy-log-table .privacy-log-col-check,
.unredeemed-privacy-log-table .privacy-log-col-delete,
.unredeemed-privacy-log-table .privacy-log-col-ldxp,
.unredeemed-privacy-log-table .privacy-log-col-domain {
  width: 12%;
}

.unredeemed-privacy-log-table .privacy-log-col-detail {
  width: 11%;
}

.unredeemed-privacy-log-table .privacy-log-col-error {
  width: 140px;
}

.unredeemed-privacy-log-table th,
.unredeemed-privacy-log-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.unredeemed-privacy-log-table .privacy-error-cell {
  width: 140px;
  max-width: 140px;
}

.unredeemed-privacy-log-table .privacy-error-note {
  display: block;
  max-width: 132px;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.privacy-log-restore-form {
  margin-top: 8px;
}

.compact-table {
  margin: 14px 0;
}

.compact-table table {
  min-width: 520px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-actions a,
.page-actions span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  background: #fff;
}

.page-actions a {
  color: var(--accent-dark);
  font-weight: 700;
}

.page-actions .current {
  color: var(--text);
  font-weight: 700;
}

.page-actions .disabled {
  color: #a0a8b3;
  background: #f8fafc;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: #fafbfc;
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.privacy-account-detail-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.privacy-account-detail-table {
  min-width: 1280px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.privacy-account-detail-table th,
.privacy-account-detail-table td {
  border-bottom: 1px solid #e5e9f0;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.privacy-account-detail-table th {
  color: var(--muted);
  font-size: 12px;
}

.detail-modal-button {
  white-space: nowrap;
}

.detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}

.detail-modal {
  width: min(1480px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.detail-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.detail-modal-head h3 {
  margin: 0;
  font-size: 16px;
}

.detail-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

body.modal-open {
  overflow: hidden;
}

.privacy-account-detail-table th:nth-child(1),
.privacy-account-detail-table td:nth-child(1) {
  width: 190px;
}

.privacy-account-detail-table th:nth-child(2),
.privacy-account-detail-table td:nth-child(2),
.privacy-account-detail-table th:nth-child(3),
.privacy-account-detail-table td:nth-child(3) {
  width: 128px;
}

.privacy-account-detail-table th:nth-child(4),
.privacy-account-detail-table td:nth-child(4),
.privacy-account-detail-table th:nth-child(5),
.privacy-account-detail-table td:nth-child(5) {
  width: 82px;
}

.privacy-account-detail-table th:nth-child(6),
.privacy-account-detail-table td:nth-child(6),
.privacy-account-detail-table th:nth-child(7),
.privacy-account-detail-table td:nth-child(7) {
  width: 220px;
}

.privacy-check-text-cell {
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: normal;
}

.privacy-check-exchange {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
}

.privacy-check-exchange + .privacy-check-exchange {
  border-top: 1px solid #e5e9f0;
  padding-top: 8px;
}

.quota-30 {
  color: #065f46;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.quota-other {
  color: var(--muted);
  background: #f8fafc;
}

.card-added {
  color: #065f46;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.card-not-added {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.card-pending {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.cell-note {
  max-width: 220px;
  margin-top: 5px;
  color: var(--error);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.code-cell {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 420px;
}

.code-list-details {
  max-width: 420px;
}

.code-list-details summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.code-list-details[open] summary {
  margin-bottom: 6px;
}

.code-list-details[open] .code-list {
  max-height: 168px;
  overflow: auto;
  padding-right: 4px;
}

pre,
.json-output {
  width: 100%;
  min-height: 320px;
  overflow: auto;
  white-space: pre;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.export-block {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.usage-guide {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.usage-guide h2 {
  margin-bottom: 10px;
}

.usage-guide h3 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.3;
}

.usage-guide p {
  margin: 0 0 10px;
  color: var(--muted);
}

.usage-guide p:last-child {
  margin: 12px 0 0;
}

.script-block {
  margin-top: 14px;
}

.usage-guide pre {
  min-height: 0;
  margin: 8px 0 0;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 10px 12px;
  background: #0f172a;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.usage-guide code {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.usage-guide p code {
  border: 1px solid #d8dee8;
  border-radius: 4px;
  padding: 1px 4px;
  background: #f1f5f9;
  color: var(--text);
}

details {
  margin-top: 14px;
}

summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

@media (max-width: 820px) {
  .two,
  .stats,
  .meta,
  .registrar-summary,
  .self-service-summary {
    grid-template-columns: 1fr;
  }

  .narrow {
    margin-top: 24px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .clear-cards-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .actions {
    justify-content: flex-start;
  }

  .timeout-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .self-service-control,
  .self-service-names-submit,
  .timeout-control,
  .registrar-cloudflare-settings,
  .privacy-settings-form {
    grid-template-columns: 1fr;
  }

  .self-service-control label,
  .self-service-control .check-field,
  .self-service-control input,
  .self-service-control button {
    grid-row: auto;
  }

  .registrar-rotation-settings .registrar-rotation-distribution,
  .registrar-rotation-settings label[for="registrar-rotation-interval"],
  .registrar-rotation-settings #registrar-rotation-interval,
  .registrar-rotation-settings label[for="registrar-thread-domain-divisor"],
  .registrar-rotation-settings #registrar-thread-domain-divisor,
  .registrar-rotation-settings .section-meta,
  .registrar-rotation-settings button {
    grid-column: auto;
    grid-row: auto;
  }

  .registrar-cloudflare-settings label,
  .registrar-cloudflare-settings input,
  .registrar-cloudflare-settings button,
  .registrar-cloudflare-settings .badge,
  .registrar-cloudflare-settings .registrar-cloudflare-restore-disabled,
  .registrar-cloudflare-settings .registrar-cloudflare-auto-sync {
    grid-row: auto;
  }

  .sms-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}