.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  font-weight: 700;
  transition: 0.25s ease;
}
.btn-small {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.92rem;
}
.btn-primary {
  background: linear-gradient(180deg, #f5dd8b 0%, #d4a73a 100%);
  color: #1b1404;
  border-color: rgba(255, 215, 128, 0.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(227, 183, 74, 0.24); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 215, 128, 0.14);
}
.btn-ghost { color: var(--color-muted); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--color-text); }
.full-width { width: 100%; }
.gold-link { color: var(--color-gold-soft); }
.badge-pill,
.tag-chip,
.mini-feature-chip,
.feature-index-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 128, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-gold-soft);
  font-size: 0.85rem;
  font-weight: 700;
}
.badge-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-emerald);
  box-shadow: 0 0 18px rgba(143, 212, 107, 0.55);
}
.tag-chip,
.mini-feature-chip {
  color: var(--color-muted);
  border-color: var(--color-line-soft);
  background: rgba(255, 255, 255, 0.04);
}
.tag-chip-group,
.hero-mini-tags,
.mini-feature-list,
.summary-feature-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.feature-index-label {
  width: fit-content;
  color: var(--color-gold-soft);
}
.hover-lift-card,
.feature-card,
.plan-card,
.payment-showcase-card,
.developer-teaser-card,
.support-teaser-card,
.final-cta-card,
.metric-showcase-card,
.hero-panel-card,
.auth-side-card,
.auth-form-card,
.locked-panel-card,
.profile-card-box,
.quick-links-card,
.developer-panel-card,
.trial-shortcuts-card,
.developer-docs-card,
.developer-account-card,
.developer-webhook-card,
.checkout-methods-card,
.checkout-summary-card,
.service-monitor-card,
.table-shell-card,
.mini-info-card {
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.94), rgba(10, 12, 16, 0.98));
  border: 1px solid var(--color-line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.hover-lift-card:hover,
.plan-card:hover,
.payment-showcase-card:hover,
.metric-showcase-card:hover,
.service-monitor-card:hover {
  border-color: rgba(255, 215, 128, 0.24);
  box-shadow: 0 24px 54px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,215,128,0.08), 0 18px 40px rgba(227,183,74,0.08);
}
.hover-lift-card::before,
.plan-card::before,
.payment-showcase-card::before,
.service-monitor-card::before,
.checkout-summary-card::before,
.developer-docs-card::before {
  content: "";
  position: absolute;
  right: -26%;
  bottom: -36%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 183, 74, 0.18), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.metric-showcase-card,
.feature-card,
.plan-card,
.payment-showcase-card,
.hero-panel-card,
.final-cta-card,
.profile-card-box,
.quick-links-card,
.developer-panel-card,
.trial-shortcuts-card,
.developer-docs-card,
.developer-account-card,
.developer-webhook-card,
.checkout-methods-card,
.checkout-summary-card,
.service-monitor-card,
.table-shell-card,
.mini-info-card,
.auth-side-card,
.auth-form-card,
.locked-panel-card,
.support-teaser-card,
.developer-teaser-card {
  padding: 22px;
}
.progress-bar-shell {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 16px;
}
.progress-bar-shell span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-emerald));
  border-radius: inherit;
}
.card-copy-text,
.feature-card p,
.plan-description-text,
.payment-showcase-card p,
.support-mini-card p,
.mini-info-card p,
.notice-box,
.endpoint-line-card p {
  color: var(--color-muted);
  line-height: 1.75;
}
.metric-big-value {
  font-size: 2rem;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.metric-small-label {
  display: block;
  margin-top: 6px;
  color: var(--color-muted);
}
.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.form-field-group label { color: var(--color-muted); font-size: 0.94rem; }
.form-field-group input,
.form-field-group select,
.form-field-group textarea {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.035);
}
.form-field-group textarea {
  min-height: 140px;
  padding: 14px 16px;
}
.form-field-group input:focus,
.form-field-group select:focus,
.form-field-group textarea:focus {
  border-color: rgba(255, 215, 128, 0.24);
  box-shadow: 0 0 0 3px rgba(227, 183, 74, 0.12);
}
.tip-card-box,
.notice-box,
.code-preview-box,
.empty-state-card,
.key-line-item,
.log-row-card,
.support-mini-card,
.payment-option-card,
.endpoint-line-card,
.service-stat-chip,
.mini-stat-box {
  border-radius: 18px;
  border: 1px solid var(--color-line-soft);
  background: rgba(255, 255, 255, 0.03);
}
.tip-card-box,
.notice-box,
.code-preview-box,
.empty-state-card,
.support-mini-card,
.endpoint-line-card { padding: 16px; }
.notice-box.warning { border-color: rgba(255, 103, 103, 0.16); }
.empty-state-card {
  text-align: center;
  color: var(--color-muted);
  padding: 24px;
}
.log-list-container { display: flex; flex-direction: column; gap: 12px; }
.log-row-card {
  padding: 16px 18px;
}
.log-row-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.log-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold-soft);
  font-size: 0.86rem;
}
.log-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}
.keys-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.key-line-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
.key-line-item.compact { align-items: flex-start; }
.key-line-item code {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-line-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.key-line-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  font-size: 0.82rem;
  font-weight: 700;
}
.status-badge.online { background: rgba(143,212,107,0.12); color: #c6f2b1; }
.status-badge.trial { background: rgba(227,183,74,0.12); color: #ffe29d; }
.status-badge.pending { background: rgba(122,167,255,0.12); color: #c4d7ff; }
.status-badge.suspended { background: rgba(255,103,103,0.12); color: #ffb8b8; }
.table-scroll-wrap { overflow: auto; }
.data-table-grid {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
}
.data-table-grid th,
.data-table-grid td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--color-line-soft);
  text-align: start;
}
.data-table-grid th {
  color: var(--color-muted-2);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mini-stat-grid,
.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mini-stat-box,
.service-stat-chip {
  padding: 14px 16px;
}
.mini-stat-box span,
.service-stat-chip span {
  display: block;
  color: var(--color-muted-2);
  font-size: 0.78rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sensitive-value {
  filter: blur(8px);
  transition: filter 0.2s ease, color 0.2s ease;
  color: rgba(255, 245, 207, 0.88);
}
.sensitive-chip:hover .sensitive-value,
.service-monitor-card:hover .sensitive-value {
  filter: blur(0);
}

.payment-showcase-card::after,
.payment-option-card::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 132px;
  height: 132px;
  background-image: var(--payment-icon-url);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.07;
  filter: grayscale(0.2);
  pointer-events: none;
}

.payment-watermark-label {
  position: absolute;
  right: -8px;
  bottom: 6px;
  font-size: 2.35rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.accent-blue::before,
.payment-option-card.accent-blue::before { background: radial-gradient(circle, rgba(122,167,255,0.18), transparent 72%); }
.accent-emerald::before,
.payment-option-card.accent-emerald::before { background: radial-gradient(circle, rgba(143,212,107,0.18), transparent 72%); }
.accent-red::before,
.payment-option-card.accent-red::before { background: radial-gradient(circle, rgba(255,103,103,0.16), transparent 72%); }
.payment-option-card {
  position: relative;
  padding: 18px;
  text-align: start;
  overflow: hidden;
}
.payment-option-card.is-active {
  border-color: rgba(255,215,128,0.22);
  box-shadow: 0 0 0 1px rgba(255,215,128,0.08), 0 14px 32px rgba(227,183,74,0.08);
}
.payment-option-card::before {
  content: "";
  position: absolute;
  right: -24%;
  bottom: -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,183,74,0.18), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
.endpoint-line-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}
.endpoint-method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(122,167,255,0.14);
  color: #bfd3ff;
  font-size: 0.84rem;
  font-weight: 800;
}
.code-preview-box {
  margin-top: 16px;
  background: #080a0d;
}
.code-preview-box pre {
  margin-top: 10px;
  color: #d7e6ff;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.quick-links-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-links-card a {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--color-line-soft);
  background: rgba(255,255,255,0.03);
  color: var(--color-muted);
}
.quick-links-card a:hover { color: var(--color-text); }
.avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(122,167,255,0.22), rgba(122,167,255,0.08));
  border: 1px solid rgba(122,167,255,0.28);
  font-size: 1.2rem;
  font-weight: 800;
}
.tip-card-box strong,
.mini-info-card strong,
.support-mini-card strong,
.endpoint-line-card strong,
.service-card-name,
.plan-name-title,
.payment-showcase-card h3 { display: block; }
.payment-card-header,
.hero-panel-row,
.service-card-top-line,
.service-card-footer-line,
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.summary-line { padding: 10px 0; border-bottom: 1px solid var(--color-line-soft); }
.summary-line:last-of-type { border-bottom: none; }
.service-card-name { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; }
.service-card-footer-line { margin-top: 18px; align-items: center; }
.service-monitor-card .mini-feature-list { margin-top: 14px; }
.guest-locked-card { opacity: 0.65; }
.admin-service-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}