* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  background-color: #0f1115;
  color: #eaeaea;
  min-height: 100vh;
}

/* Site background layer (main page background, or the login page's own
   background) - image or video, exactly as uploaded, fixed in place
   like a wallpaper so it never scrolls or shifts with the page. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #0f1115;
}
.site-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.navbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background: rgba(15,17,21,0.9);
  border-bottom: 1px solid #2a2d34;
}
.navbar a { color: #eaeaea; text-decoration: none; }
.navbar a:hover { color: #7dd3fc; }
.navbar .brand { font-weight: 700; font-size: 1.1rem; }
.navbar .spacer { flex: 1; }
.navbar .who { opacity: 0.7; font-size: 0.9rem; }

/* ---- Left sidebar navigation (hidden drawer, opened via the floating hamburger) ---- */
.menu-fab {
  position: fixed; top: 14px; left: 14px; z-index: 30;
  width: 40px; height: 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  align-items: center;
  background: rgba(24,26,32,0.92); border: 1px solid #2a2d34; border-radius: 10px;
  cursor: pointer;
}
.menu-fab span { width: 18px; height: 2px; background: #eaeaea; display: block; }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 15; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 230px;
  background: rgba(15,17,21,0.98);
  border-right: 1px solid #2a2d34;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  transition: transform 0.2s ease;
  z-index: 20;
  overflow-x: hidden;
  transform: translateX(-100%);
}
.sidebar.open { transform: translateX(0); }

.sidebar-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 6px 14px 44px;
}
.sidebar-brand { font-weight: 700; white-space: nowrap; }

.live-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 8px; background: rgba(6,59,30,0.35);
}
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; flex: 0 0 auto;
  box-shadow: 0 0 0 rgba(74, 222, 128, 0.7);
  animation: live-blink 1.4s infinite;
}
@keyframes live-blink {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.live-label { color: #4ade80; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-bottom { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #2a2d34; padding-top: 8px; }

.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 8px;
  color: #eaeaea; text-decoration: none;
  white-space: nowrap;
}
.sidebar-link:hover { background: #1c1f26; }
.sidebar-link.active { background: #1c2733; color: #7dd3fc; }
.sidebar-icon { font-size: 1.1rem; flex: 0 0 auto; width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
.sidebar-section-label {
  margin: 14px 0 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.sidebar-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-who { font-size: 0.9rem; }
.sidebar-role { font-size: 0.75rem; opacity: 0.65; text-transform: capitalize; }

.sidebar-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.sidebar-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #2a2d34; font-weight: 700; font-size: 0.85rem;
}

.container { max-width: 960px; margin: 32px auto; padding: 0 16px; padding-top: 56px; }

/* ---- Home page stat cards ---- */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin: 16px 0;
}
.stat-box {
  border: 1px solid #2a2d34; border-radius: 12px; padding: 16px 10px;
  text-align: center; background: rgba(0,0,0,0.1);
}
.stat-num { font-size: 1.8rem; font-weight: 700; }
.stat-label { font-size: 0.85rem; opacity: 0.75; margin-top: 4px; }
.stat-success { border-color: #16532b; }
.stat-success .stat-num { color: #4ade80; }
.stat-pending { border-color: #6b5a12; }
.stat-pending .stat-num { color: #facc15; }
.stat-expired, .stat-failed { border-color: #5c1f1f; }
.stat-expired .stat-num, .stat-failed .stat-num { color: #f87171; }
.muted { opacity: 0.7; }

.card {
  background: transparent;
  border: 1px solid rgba(234,179,8,0.4);
  border-radius: 12px;
  padding: 24px;
}
.card.narrow { max-width: 420px; margin: 0 auto; }
.card.center { text-align: center; }

form label { display: block; margin: 14px 0 4px; font-size: 0.9rem; opacity: 0.85; }
form input, form select, form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #3a3d45;
  background: rgba(0,0,0,0.1);
  color: #eaeaea;
}
form button {
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: #7dd3fc;
  color: #0f1115;
  font-weight: 600;
  cursor: pointer;
}
.inline-form { display: flex; gap: 10px; align-items: center; margin: 10px 0 24px; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; }

.btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: #7dd3fc;
  color: #0f1115;
  text-decoration: none;
  font-weight: 600;
}

.row-between { display: flex; justify-content: space-between; align-items: center; }

.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { text-align: left; padding: 10px; border-bottom: 1px solid #2a2d34; }

.badge { padding: 3px 8px; border-radius: 6px; font-size: 0.8rem; }
.badge-created, .badge-pending { background: #4a2f00; color: #fb923c; }
.badge-approved, .badge-success { background: #063b1e; color: #4ade80; }
.badge-rejected, .badge-expired { background: #3b0a0a; color: #f87171; }

.qr { width: 220px; height: 220px; margin: 16px auto; display: block; background: #fff; border-radius: 8px; padding: 8px; }

.link-copy { display: flex; gap: 8px; margin: 10px 0; }
.link-copy input { flex: 1; }

.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 10px auto; display: block; }
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #2a2d34; font-size: 2rem; font-weight: 700;
}
.bg-preview { max-width: 240px; border-radius: 8px; margin-bottom: 10px; }

.flashes { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; }
.flash-error { background: #3b0a0a; color: #f87171; }
.flash-success { background: #063b1e; color: #4ade80; }
.flash-info { background: #0a2a3b; color: #7dd3fc; }

/* ---- Welcome / share box (shown after creating or reactivating a user) ---- */
.welcome-box {
  background: rgba(6,59,30,0.25);
  border: 1px solid #1f6d3c;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.welcome-box-title { font-weight: 600; margin-bottom: 8px; color: #4ade80; }
.welcome-box-text {
  width: 100%; resize: vertical;
  background: #0f1115; color: #eaeaea;
  border: 1px solid #2a2d34; border-radius: 8px; padding: 10px;
  font-family: inherit; font-size: 0.9rem;
}
.welcome-box-actions { display: flex; gap: 10px; margin-top: 10px; }

.btn-copy, .btn-share {
  padding: 8px 14px; border-radius: 8px; border: none;
  background: #2a2d34; color: #eaeaea; font-weight: 600; cursor: pointer;
}
.btn-copy:hover, .btn-share:hover { background: #3a3d45; }
.btn-danger { background: #f87171; color: #3b0a0a; }
.btn-danger:hover { background: #fca5a5; }

.inline-form-tight { display: flex; gap: 6px; align-items: center; }
.inline-form-tight input { width: 140px; padding: 6px 8px; }

.hint { font-size: 0.85rem; opacity: 0.65; margin-top: -14px; margin-bottom: 20px; }

/* ---- Per-user payment stats (profile page) ---- */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 16px 0 8px;
}
.stat-box {
  border-radius: 10px; padding: 14px; text-align: center;
  border: 1px solid #2a2d34; background: rgba(0,0,0,0.1);
}
.stat-count { font-size: 1.6rem; font-weight: 700; }
.stat-label { font-size: 0.85rem; opacity: 0.75; margin: 2px 0 6px; }
.stat-amount { font-size: 0.95rem; font-weight: 600; }
.stat-success { border-color: #1f6d3c; } .stat-success .stat-count, .stat-success .stat-amount { color: #4ade80; }
.stat-pending { border-color: #6d5f1f; } .stat-pending .stat-count, .stat-pending .stat-amount { color: #f5e642; }
.stat-expired, .stat-failed { border-color: #6d1f1f; }
.stat-expired .stat-count, .stat-expired .stat-amount,
.stat-failed .stat-count, .stat-failed .stat-amount { color: #f87171; }

/* ---- PIN lock overlay (shown after leaving/returning to the site) ---- */
.pin-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,7,9,0.55);
  display: none; align-items: center; justify-content: center;
  overflow: hidden;
}
.pin-overlay.visible { display: flex; }
.pin-overlay-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background-color: #0f1115;
}
.pin-box {
  position: relative; z-index: 1;
  background: rgba(24,26,32,0.95); border: 1px solid #2a2d34; border-radius: 14px;
  padding: 28px 24px; width: 100%; max-width: 320px; text-align: center;
}
.pin-box h2 { margin: 0 0 6px; }
.pin-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#pinInput {
  font-size: 1.8rem; letter-spacing: 0.6em; text-align: center;
  padding: 10px; border-radius: 10px; border: 1px solid #2a2d34;
  background: #0f1115; color: #eaeaea; width: 100%;
}

/* ---- Payment-success popup (like an SMS notification banner) ---- */
.success-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 10, 7, 0.88);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.success-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.success-overlay-card {
  background: #0d1b12;
  border: 1px solid #1f6d3c;
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  max-width: 90vw;
  transform: scale(0.92);
  transition: transform 0.3s ease;
}
.success-overlay.visible .success-overlay-card {
  transform: scale(1);
}
.success-overlay-icon {
  width: 110px;
  height: 110px;
  margin-bottom: 20px;
}
.success-overlay-title {
  color: #4ade80;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.success-overlay-sub {
  color: #b7c4bb;
  font-size: 0.95rem;
}

.radio-option-blocked {
  color: #f87171;
  opacity: 0.75;
  cursor: not-allowed;
}
.radio-option-blocked input[type="radio"] {
  cursor: not-allowed;
}
.gate-blocked-tag {
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #5c1f1f;
  background: #3b0a0a;
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
}

.dropdown { position: relative; }
.btn-icon {
  background: #2a2d34; color: #eaeaea; border: none; border-radius: 8px;
  width: 36px; height: 36px; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.btn-icon:hover { background: #3a3d45; }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: 42px; z-index: 20;
  background: #1c1f26; border: 1px solid #2a2d34; border-radius: 10px;
  min-width: 140px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dropdown-menu.open { display: block; }
.dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: #eaeaea; text-decoration: none; font-size: 0.95rem;
}
.dropdown-menu a:hover { background: #2a2d34; }
.dropdown-menu a.active { color: #7dd3fc; font-weight: 600; }

.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 16px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid #2a2d34;
}
.pagination a { color: #7dd3fc; text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination-current { color: #a8adb8; font-size: 0.9rem; }

.text-dim { font-size: 0.85rem; opacity: 0.65; }

.activity-row {
  border: 1px solid #2a2d34; border-radius: 12px; padding: 16px;
  margin-bottom: 14px;
}
.activity-name { display: flex; align-items: center; gap: 4px; font-size: 1.05rem; }
.online-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 2px;
}
.online-dot-on { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.online-dot-off { background: #4a4d55; }

.activity-totals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 14px 0;
  text-align: center;
}
.activity-totals > div {
  border: 1px solid #2a2d34; border-radius: 8px; padding: 8px 4px;
}

.activity-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px; padding-top: 8px; border-top: 1px solid #2a2d34;
}
.activity-bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.activity-bar {
  width: 100%; max-width: 24px; min-height: 2px;
  background: #7dd3fc; border-radius: 3px 3px 0 0;
}
.activity-bar-label { font-size: 0.7rem; opacity: 0.6; margin-top: 4px; }

.big-payment-link {
  display: block;
  margin: 28px auto;
  padding: 22px 20px;
  max-width: 100%;
  text-align: center;
  background: #7dd3fc;
  color: #0f1115;
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 14px;
  text-decoration: none;
  word-break: break-word;
}
.big-payment-link:hover { background: #a5e0ff; }

/* ---- New feature: Create Server wizard (Server name + Discord Bot language) ---- */
.wizard-card { position: relative; overflow: hidden; padding-top: 30px; }
.wizard-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(125,211,252,0.15);
}
.wizard-progress-fill {
  display: block; height: 100%; width: 50%;
  background: #7dd3fc;
  transition: width 0.25s ease;
}
.wizard-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #818cf8);
}
.wizard-label { text-align: center; font-weight: 600; color: #a5b4fc; }
.wizard-hint.hint { text-align: center; margin-top: -2px; margin-bottom: 14px; }
.wizard-card .req { color: #f87171; margin-left: 2px; }
.wizard-btn {
  width: 100%; margin-top: 22px; padding: 12px 18px;
  border-radius: 8px; border: none;
  background: #7dd3fc; color: #0f1115;
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.wizard-btn:hover { background: #a5e4fd; }
.wizard-btn-secondary { background: #2a2d34; color: #eaeaea; }
.wizard-btn-secondary:hover { background: #3a3d45; }
.wizard-step2-actions { display: flex; gap: 10px; }
.wizard-step2-actions .wizard-btn { margin-top: 22px; }

/* ---- New feature: "Manage Your Server(s)" card grid ---- */
.servers-hero-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.2;
  color: #6d6cf5;
  margin: 4px 0 26px;
  letter-spacing: 0.5px;
}
.servers-section-title {
  text-align: center;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 800;
  color: #eaeaea;
  margin: 0 0 18px;
}
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 6px;
}
.server-card {
  background: #1b1f2a;
  border: 1px solid #2a2d34;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}
.server-card-top { height: 5px; background: #2f8fe6; }
.server-card-body { padding: 26px 20px; }
.server-card-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #eaeaea;
  margin-bottom: 20px;
  word-break: break-word;
}
.server-card-btn {
  display: inline-block;
  width: 100%;
  padding: 12px 18px;
  border-radius: 8px;
  background: #f2913f;
  color: #1b1f2a;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.server-card-btn:hover { background: #f5a866; }
.server-card-detail { max-width: 420px; margin: 0 auto; }
.server-card-detail .table td { color: #eaeaea; padding: 8px 6px; }
.server-card-detail .table td:first-child { opacity: 0.7; }

/* ---- New feature: Manage single server - action buttons ---- */
.server-detail-info { text-align: center; margin: 18px 0 26px; }
.server-detail-info p { margin: 10px 0; font-size: 1.05rem; color: #eaeaea; }
.server-detail-info .server-detail-name { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }

.server-action-stack { display: flex; flex-direction: column; gap: 12px; }
.server-action-btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
}
.server-action-btn-panel { background: #22c55e; }
.server-action-btn-panel:hover { background: #3fdc74; }
.server-action-btn-delete { background: #ef4444; }
.server-action-btn-delete:hover { background: #f56767; }
.server-action-btn-language { background: #c026d3; }
.server-action-btn-language:hover { background: #d84eea; }
.server-action-btn-back { background: #f2913f; color: #1b1f2a; }
.server-action-btn-back:hover { background: #f5a866; }

/* ---- New feature: Server Console (Start/Restart/Stop + live log) ---- */
.console-card { max-width: 480px; margin: 0 auto; }

/* On phones, let this specific card (Console/Files/Startup/Settings/
   Activity) use the FULL screen width instead of sitting inside the
   normal page padding - so the Files list (and everything else in this
   card) has real room to work with, without touching any other page's
   layout or this card's own look on a wider screen. */
@media (max-width: 600px) {
  .console-card {
    max-width: 100%;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    padding: 16px 10px;
  }
}
.console-tabs { display: flex; gap: 18px; border-bottom: 1px solid #2a2d34; margin-bottom: 0; }
.console-tab { padding: 10px 2px; font-weight: 600; color: #9aa0ac; font-size: 0.95rem; }
.console-tab-active { color: #eaeaea; border-bottom: 2px solid #3b82f6; padding-bottom: 9px; margin-bottom: -1px; }
.console-tabs-bar { height: 3px; background: linear-gradient(90deg, #3b82f6 30%, #2a2d34 30%); border-radius: 3px; margin-bottom: 18px; }

.console-topinfo { text-align: center; margin-bottom: 14px; }
.console-server-name { font-size: 1.3rem; font-weight: 800; color: #eaeaea; margin: 0 0 6px; word-break: break-word; }
.console-status-line { margin: 0; color: #9aa0ac; font-size: 0.95rem; }
.console-status-badge { font-weight: 700; }
.console-status-badge.is-running { color: #22c55e; }
.console-status-badge.is-stopped { color: #9aa0ac; }
.console-status-badge.is-crashed { color: #ef4444; }

.console-btn-row { display: flex; gap: 10px; margin: 16px 0; }
.console-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  cursor: pointer;
}
.console-btn-start { background: #3b82f6; }
.console-btn-start:hover:not(:disabled) { background: #5b9bfa; }
.console-btn-restart { background: #6b7280; }
.console-btn-restart:hover:not(:disabled) { background: #7f8590; }
.console-btn-stop { background: #ef4444; }
.console-btn-stop:hover:not(:disabled) { background: #f56767; }
.console-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.console-log-box {
  background: #0d0f14;
  border: 1px solid #2a2d34;
  border-radius: 8px;
  padding: 12px 14px;
  height: 260px;
  overflow-y: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #d7f5da;
}
.console-line { white-space: pre-wrap; word-break: break-word; }
.console-line-muted { color: #8fa3ff; }
.console-line-error { color: #ff8080; }
.console-line-cmd { color: #ffd479; }
.console-line-flag { color: #ffb347; font-weight: bold; }

.console-cmd-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #14171f;
  border: 1px solid #2a2d34;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.console-cmd-caret { color: #6d6cf5; font-weight: 700; }
.console-cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #eaeaea;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
}

.console-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.console-info-box { background: #1b1f2a; border: 1px solid #2a2d34; border-radius: 8px; padding: 12px 14px; }
.console-info-box.full { grid-column: 1 / -1; }
.console-info-label { color: #9aa0ac; font-size: 0.8rem; margin-bottom: 4px; }
.console-info-value { color: #eaeaea; font-weight: 700; font-size: 1rem; word-break: break-word; }

.console-charts { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 6px; }
.console-chart-card { background: #1b1f2a; border: 1px solid #2a2d34; border-radius: 10px; padding: 14px 16px 8px; }
.console-chart-title {
  color: #eaeaea;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chart-legend-dot { font-size: 0.78rem; font-weight: 600; }
.chart-legend-dot.dot-in { color: #f6a623; }
.chart-legend-dot.dot-out { color: #22d3ee; }
.console-chart-canvas { width: 100%; height: 150px; display: block; }

/* --- Server Console: Files tab (new, additive only) --- */
.console-tab { cursor: pointer; user-select: none; background: none; border: none; font-family: inherit; }
.console-tab-btn { cursor: pointer; }

.files-panel { display: none; }
.files-panel.is-active { display: block; }
.console-panel-body.is-hidden { display: none; }

.files-toolbar-row1 { margin-bottom: 10px; }
.files-btn-createdir {
  width: 100%; padding: 12px; border: none; border-radius: 8px;
  background: #6b7280; color: #eaeaea; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.files-btn-createdir:hover { background: #7f8590; }

.files-toolbar-row2 { display: flex; gap: 10px; margin-bottom: 14px; }
.files-btn-upload, .files-btn-newfile {
  flex: 1; padding: 12px; border: none; border-radius: 8px;
  background: #3b82f6; color: #fff; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.files-btn-upload:hover, .files-btn-newfile:hover { background: #5b9bfa; }

.files-breadcrumb-row {
  display: flex; align-items: center; gap: 10px; color: #9aa0ac;
  font-size: 0.95rem; margin-bottom: 12px;
}
.files-breadcrumb-row input[type="checkbox"] { width: 16px; height: 16px; }
.files-breadcrumb-row .files-crumb-current { color: #eaeaea; font-weight: 700; }

.files-list { border: 1px solid #2a2d34; border-radius: 8px; overflow: visible; }
.files-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px;
  background: #232732; border-bottom: 1px solid #2a2d34; position: relative;
}
.files-row:first-child { border-radius: 8px 8px 0 0; }
.files-row:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
.files-row:nth-child(even) { background: #1e222c; }
.files-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.files-row-icon { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }
.files-row-name { color: #eaeaea; font-size: 0.98rem; flex: 1; word-break: break-all; cursor: pointer; }
.files-row-name:hover { text-decoration: underline; }
.files-row-menu-btn {
  background: none; border: none; color: #9aa0ac; font-size: 1.2rem;
  cursor: pointer; padding: 4px 8px; line-height: 1; letter-spacing: 1px;
}
.files-row-menu-btn:hover { color: #eaeaea; }

.files-dropdown {
  position: absolute; top: 100%; right: 10px; z-index: 20;
  background: #fff; color: #2a2d34; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); min-width: 170px; padding: 6px 0;
  display: none;
}
.files-dropdown.is-open { display: block; }
.files-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  font-size: 0.92rem; cursor: pointer; white-space: nowrap;
}
.files-dropdown-item:hover { background: #f2f2f4; }
.files-dropdown-item.is-danger { color: #ef4444; }
.files-dropdown-icon { width: 18px; text-align: center; }

.files-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 100; align-items: center; justify-content: center; padding: 0;
}
.files-modal-overlay.is-open { display: flex; }
.files-modal {
  background: #1b1f2a; border: 1px solid #2a2d34; border-radius: 10px;
  width: 100%; max-width: 480px; padding: 18px; max-height: 90vh;
  overflow-y: auto;
}
.files-modal-fullscreen {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  border-radius: 0; display: flex; flex-direction: column;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.files-modal h3 { color: #eaeaea; margin: 0 0 14px; font-size: 1.05rem; flex: 0 0 auto; }
.files-modal label { display: block; color: #9aa0ac; font-size: 0.85rem; margin: 10px 0 6px; flex: 0 0 auto; }
.files-modal input[type="text"] {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #2a2d34;
  background: #12151c; color: #eaeaea; font-size: 0.95rem; box-sizing: border-box;
  flex: 0 0 auto;
}
.files-modal textarea {
  width: 100%; min-height: 220px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #2a2d34; background: #12151c; color: #eaeaea;
  font-family: "Courier New", monospace; font-size: 0.88rem; box-sizing: border-box;
  resize: vertical;
}

/* Full-screen code editor: line-number gutter + syntax-colored overlay
   behind a transparent, fully editable textarea on top. Both the
   textarea and the highlight <pre> share identical font/line-height/
   padding so every line lines up exactly, and their scroll positions
   are kept in sync in JS. */
.code-editor-wrap {
  flex: 1 1 auto; display: flex; min-height: 200px;
  border: 1px solid #2a2d34; border-radius: 8px; overflow: hidden;
  background: #12151c;
}
.code-editor-gutter {
  flex: 0 0 auto; padding: 10px 8px; text-align: right;
  color: #545a68; background: #0e1016; user-select: none;
  font-family: "Courier New", monospace; font-size: 0.88rem; line-height: 1.5;
  white-space: pre; overflow: hidden; min-width: 40px;
}
.code-editor-body { display: none; }
.code-editor-highlight { display: none; }
.code-editor-textarea {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 10px 12px;
  font-family: "Courier New", monospace; font-size: 0.88rem; line-height: 1.5;
  white-space: pre; overflow: auto; box-sizing: border-box;
  border: none; border-radius: 0; resize: none; outline: none;
  background: #12151c; color: #eaeaea; caret-color: #eaeaea;
}

.files-modal-actions { display: flex; gap: 10px; margin-top: 16px; flex: 0 0 auto; }
.files-modal-btn {
  flex: 1; padding: 11px; border: none; border-radius: 8px; font-weight: 600;
  font-size: 0.95rem; cursor: pointer;
}
.files-modal-btn-cancel { background: #2a2d34; color: #eaeaea; }
.files-modal-btn-cancel:hover { background: #383c46; }
.files-modal-btn-save { background: #22c55e; color: #0b1210; }
.files-modal-btn-save:hover { background: #3fdc78; }

/* --- Server Console: Startup tab (new, additive only) --- */
.startup-panel { display: none; }
.startup-panel.is-active { display: block; }

.startup-variables-title { color: #eaeaea; font-size: 1.15rem; font-weight: 800; margin: 22px 0 12px; }

.startup-section { margin-bottom: 16px; }
.startup-section-header {
  background: #1b1f2a; border: 1px solid #2a2d34; border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 10px 14px;
  color: #9aa0ac; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
}
.startup-section-body {
  background: #12151c; border: 1px solid #2a2d34; border-top: none;
  border-radius: 0 0 8px 8px; padding: 14px;
}

.startup-command-box {
  width: 100%; min-height: 190px; box-sizing: border-box;
  background: #0d0f14; color: #d7dae0; border: 1px solid #2a2d34; border-radius: 8px;
  padding: 12px; font-family: "Courier New", monospace; font-size: 0.85rem;
  line-height: 1.5; resize: vertical;
}

.startup-select, .startup-input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  background: #232732; color: #eaeaea; border: 1px solid #2a2d34; border-radius: 8px;
  font-size: 0.95rem;
}
.startup-select:focus, .startup-input:focus { outline: none; border-color: #3b82f6; }

.startup-hint { color: #7c8595; font-size: 0.8rem; margin: 8px 0 0; line-height: 1.4; }

.startup-switch {
  width: 46px; height: 26px; border-radius: 999px; background: #3a3f4b;
  position: relative; cursor: pointer; transition: background 0.15s ease;
}
.startup-switch .startup-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left 0.15s ease;
}
.startup-switch[data-on="true"] { background: #3b82f6; }
.startup-switch[data-on="true"] .startup-switch-thumb { left: 23px; }

.startup-save-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.startup-save-btn {
  padding: 12px 22px; border: none; border-radius: 8px; background: #22c55e;
  color: #0b1210; font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.startup-save-btn:hover { background: #3fdc78; }
.startup-save-msg {
  color: #22c55e; font-weight: 600; font-size: 0.9rem; opacity: 0; transition: opacity 0.2s ease;
}
.startup-save-msg.is-visible { opacity: 1; }

/* --- Server Console: Settings tab (new, additive only) --- */
.settings-field-label { display: block; color: #9aa0ac; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 6px; }
.startup-input[readonly] { color: #c3c8d1; cursor: default; }

.settings-sftp-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.settings-sftp-note { border-left: 3px solid #22d3ee; padding-left: 12px; margin: 0; max-width: 300px; }
.settings-launch-sftp {
  display: inline-block; color: #eaeaea; font-weight: 700; font-size: 1rem;
  text-decoration: none; white-space: nowrap; padding-top: 2px;
}
.settings-launch-sftp:hover { color: #22d3ee; }

.settings-debug-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #2a2d34;
}
.settings-debug-row:last-child { border-bottom: none; }
.settings-debug-label { color: #eaeaea; font-weight: 600; font-size: 0.95rem; flex-shrink: 0; }
.settings-node-badge {
  background: #0d0f14; color: #eaeaea; font-family: "Courier New", monospace;
  padding: 6px 12px; border-radius: 6px; font-size: 0.9rem;
}
.settings-serverid-box {
  background: #0d0f14; color: #eaeaea; font-family: "Courier New", monospace;
  padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; word-break: break-all; text-align: right;
}

/* --- Server Console: Activity tab (new, additive only) --- */
.activity-body { padding-top: 12px; }
.activity-list { display: flex; flex-direction: column; }
.activity-row { padding: 12px 0; border-bottom: 1px solid #2a2d34; }
.activity-row:last-child { border-bottom: none; }
.activity-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.activity-row-action { color: #eaeaea; font-size: 0.95rem; font-weight: 600; }
.activity-row-time { color: #9aa0ac; font-size: 0.82rem; flex-shrink: 0; white-space: nowrap; }
.activity-row-id { color: #5b6270; font-family: "Courier New", monospace; font-size: 0.75rem; margin-top: 4px; word-break: break-all; }

/* --- Files tab: bulk action bar (new, additive only) --- */
.files-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #1a1d24; border: 1px solid #f6a62355;
  border-radius: 7px; padding: 9px 14px; margin: 10px 0 6px;
  gap: 12px; flex-wrap: wrap;
}
#filesBulkCount {
  color: #f6a623; font-weight: 700; font-size: 0.95rem;
}
.files-btn-bulk-delete {
  background: #c0392b; color: #fff; border: none; border-radius: 6px;
  padding: 7px 18px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.files-btn-bulk-delete:hover { background: #e74c3c; }

.pwa-install-btn {
  position: sticky; top: 0; z-index: 50;
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 12px; border: none;
  background: #7dd3fc; color: #0f1115;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.pwa-install-btn:hover { background: #a5e0ff; }

.txn-id-short { font-family: monospace; letter-spacing: 0.3px; }
.txn-copy-btn {
  background: #232732; border: 1px solid #2a2d34; cursor: pointer; font-size: 0.85rem;
  padding: 3px 9px; margin-left: 6px; border-radius: 6px; vertical-align: middle;
  color: #eaeaea; white-space: nowrap;
}
.txn-copy-btn:hover { background: #2a2d34; }
.txn-details { line-height: 1.5; font-size: 0.9rem; }
.txn-details > div { white-space: nowrap; }


/* --- Code editor colors (additive: only the file editor popup) ----------
   Palette:  background #1f1f1e | gutter #1a1a19 | line numbers #6b6b66
             text #e8e6e1 | keyword #c792ea | function #f2a065 | string #a5e075
             decorator #56c8e8 | comment #6b7280 | parameter #f0e0a0 | number #7fdbca */
.code-editor-wrap { background: #1f1f1e; }
.code-editor-gutter { background: #1a1a19; color: #6b6b66; }
.code-editor-body { display: block; position: relative; flex: 1 1 auto; min-width: 0; }
.code-editor-body .code-editor-textarea {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #1f1f1e; color: #e8e6e1; caret-color: #e8e6e1;
  tab-size: 4; font-variant-ligatures: none;
}
.code-editor-body .code-editor-textarea::placeholder { color: #6b6b66; }
.code-editor-highlight {
  display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 10px 12px 40px; box-sizing: border-box;
  font-family: "Courier New", monospace; font-size: 0.88rem; line-height: 1.5;
  white-space: pre; overflow: hidden; pointer-events: none;
  color: #e8e6e1; background: transparent; tab-size: 4; font-variant-ligatures: none;
}
.code-editor-highlight code { font: inherit; color: inherit; background: none; padding: 0; }
.code-editor-wrap.is-highlighted .code-editor-highlight { display: block; }
.code-editor-wrap.is-highlighted .code-editor-textarea {
  background: transparent; color: transparent; -webkit-text-fill-color: transparent;
  caret-color: #f5f4ef;
}
.code-editor-wrap.is-highlighted .code-editor-textarea::selection { background: rgba(120, 160, 255, 0.35); }
.code-editor-highlight .tk-kw    { color: #c792ea; }
.code-editor-highlight .tk-fn    { color: #f2a065; }
.code-editor-highlight .tk-str   { color: #a5e075; }
.code-editor-highlight .tk-deco  { color: #56c8e8; }
.code-editor-highlight .tk-cm    { color: #6b7280; }
.code-editor-highlight .tk-param { color: #f0e0a0; }
.code-editor-highlight .tk-num   { color: #7fdbca; }


/* --- File browser: open folders + image/binary viewer (additive) --- */
.files-crumb-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.files-row-up { cursor: pointer; }
.files-row-up .files-row-name { font-weight: 700; }
.file-preview-box {
  flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 12px;
  border: 1px solid #2a2d34; border-radius: 8px; background: #1f1f1e;
}
.file-preview-box img { max-width: 100%; height: auto; border-radius: 6px; background: #2a2a28; }
.file-preview-note { color: #b8b5ae; font-size: 0.9rem; text-align: center; line-height: 1.5; }
.file-preview-download {
  display: inline-block; flex: 0 0 auto; padding: 11px 22px; text-decoration: none;
  background: #3b82f6; color: #fff; text-align: center;
}


/* ======================================================================
   New feature: Transaction History - boxed "grid" table (every cell in
   its own box, centered header, pill-style status). Additive only: it
   only applies to tables that have the extra class "table-grid".
   ====================================================================== */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; }
.table-scroll .table-grid { margin-top: 0; }
.table-grid {
  width: 100%;
  border-collapse: collapse;
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(203, 213, 225, 0.55);
}
.table-grid th,
.table-grid td {
  border: 1px solid rgba(203, 213, 225, 0.55);
  padding: 14px 16px;
  vertical-align: middle;
  text-align: left;
}
.table-grid th {
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
}
.table-grid td.cell-center { text-align: center; }
.table-grid tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.table-grid .badge {
  display: inline-block;
  min-width: 96px;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.table-grid .badge-success, .table-grid .badge-approved { background: #008000; color: #fff; }
.table-grid .badge-pending, .table-grid .badge-created { background: #d97706; color: #fff; }
.table-grid .badge-expired, .table-grid .badge-rejected { background: #b91c1c; color: #fff; }


/* ======================================================================
   New feature: Create API (api_settings.html, api_type.html,
   api_create.html, api_detail.html). Additive only.
   ====================================================================== */
.api-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.api-top h1 { margin: 0; }
.api-btn-create {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8); color: #0f1115;
  font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}
.api-btn-create:hover { filter: brightness(1.08); }
.api-sub { opacity: 0.7; margin: 6px 0 0; font-size: 0.92rem; }
.api-back { display: inline-block; margin-bottom: 14px; color: #7dd3fc; text-decoration: none; font-size: 0.9rem; }
.api-back:hover { text-decoration: underline; }

.api-empty {
  text-align: center; padding: 40px 16px; margin-top: 18px;
  border: 1px dashed rgba(125, 211, 252, 0.4); border-radius: 14px;
}
.api-empty .api-empty-icon { font-size: 2.6rem; }

.api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.api-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid rgba(203, 213, 225, 0.3); border-radius: 14px; padding: 16px;
  background: rgba(20, 28, 40, 0.5);
  transition: transform .15s, border-color .15s;
}
.api-card:hover { transform: translateY(-2px); border-color: #7dd3fc; }
.api-card-head { display: flex; align-items: center; gap: 12px; }
.api-card-icon {
  width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(125, 211, 252, 0.12); border: 1px solid rgba(125, 211, 252, 0.3); flex-shrink: 0;
}
.api-card-title { font-weight: 700; font-size: 1.05rem; word-break: break-word; }
.api-card-type { font-size: 0.82rem; opacity: 0.65; }
.api-card-link {
  margin-top: 12px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-card-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.82rem; opacity: 0.8; gap: 8px; flex-wrap: wrap; }

.api-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-left: auto; white-space: nowrap;
}
.api-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.api-pending { background: #4a2f00; color: #fb923c; }
.api-live { background: #063b1e; color: #4ade80; }
.api-live::before { animation: apiPulse 1.4s infinite; }
.api-expired { background: #3b0a0a; color: #f87171; }
@keyframes apiPulse { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }

/* type chooser */
.api-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 20px; }
.api-type-card {
  display: block; text-decoration: none; color: inherit; text-align: center;
  padding: 26px 16px; border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, 0.35); background: rgba(20, 28, 40, 0.5);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.api-type-card:hover { transform: translateY(-3px); border-color: #7dd3fc; box-shadow: 0 8px 22px rgba(56, 189, 248, 0.15); }
.api-type-icon { font-size: 2.6rem; }
.api-type-name { font-weight: 700; font-size: 1.15rem; margin-top: 10px; }
.api-type-desc { font-size: 0.85rem; opacity: 0.7; margin-top: 6px; }

/* create form */
.api-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.api-chip {
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
  border: 1px solid rgba(203, 213, 225, 0.4); background: rgba(0, 0, 0, 0.15); color: #eaeaea;
  margin: 0 !important;
}
.api-chip.active { background: #7dd3fc; color: #0f1115; border-color: #7dd3fc; }
.api-custom { display: none; gap: 10px; margin-top: 10px; }
.api-custom.show { display: flex; }
.api-custom input { width: 120px; }
.api-custom select { flex: 1; }
.api-submit { width: 100%; margin-top: 22px !important; padding: 12px 18px !important; font-size: 1rem; }

/* detail page */
.api-linkbox {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 16px;
  border-radius: 12px; border: 1px solid #1f6d3c; background: rgba(6, 59, 30, 0.25);
}
.api-linkbox-icon { font-size: 1.2rem; }
.api-linkbox code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; color: #86efac;
}
.api-copy {
  padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer; flex-shrink: 0;
  background: #2a2d34; color: #eaeaea; font-weight: 600; margin: 0 !important;
}
.api-copy:hover { background: #3a3d45; }
.api-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.api-actions form { margin: 0; }
.api-actions form button { margin-top: 0; }
.api-section-title { margin: 30px 0 4px; font-size: 1.25rem; }
.api-section-sub { opacity: 0.65; font-size: 0.88rem; margin: 0 0 10px; }
.api-note-box {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 0.9rem;
  background: rgba(10, 42, 59, 0.6); border: 1px solid #1d5a7a; color: #bae6fd;
}
.api-warn-box { background: rgba(74, 47, 0, 0.5); border-color: #92560a; color: #fdba74; }
.api-need-value {
  display: flex; align-items: center; gap: 8px;
}
.api-need-value code { word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
.api-method {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.api-method-GET { background: #063b1e; color: #4ade80; }
.api-method-POST { background: #4a2f00; color: #fb923c; }
.api-endpoint-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; word-break: break-all; }

.code-block {
  margin-top: 12px; border-radius: 12px; overflow: hidden;
  border: 1px solid #2f3a4a; background: #0b0f16;
}
.code-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: #151c27; border-bottom: 1px solid #2f3a4a;
}
.code-block-title { font-weight: 600; font-size: 0.9rem; }
.code-block-lang {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 6px; margin-left: 8px;
  background: rgba(125, 211, 252, 0.15); color: #7dd3fc; font-weight: 600;
}
.code-block pre {
  margin: 0; padding: 14px; overflow-x: auto; max-height: 420px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.55; color: #d6e2f0;
  white-space: pre; tab-size: 4;
}
.code-block-note { padding: 8px 12px; font-size: 0.82rem; opacity: 0.75; background: #101620; border-top: 1px solid #1d2633; }

.api-legacy { margin-top: 28px; border: 1px solid rgba(203, 213, 225, 0.25); border-radius: 12px; padding: 4px 14px; }
.api-legacy > summary { cursor: pointer; padding: 12px 0; font-weight: 600; opacity: 0.85; }

/* --- API page: "Download Details" box at the bottom (additive) --- */
.api-download {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding: 16px 18px; border-radius: 12px;
  border: 1px dashed rgba(125, 211, 252, 0.5); background: rgba(56, 189, 248, 0.06);
}
.api-download-text { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; }
.api-download-text span { font-size: 0.88rem; opacity: 0.7; }

/* --- Transaction History: delete failed payments (additive) --- */
.failed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.07);
}
.failed-bar-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.failed-bar-text b { color: #f87171; }
.failed-bar-text span { font-size: 0.86rem; opacity: 0.7; }
.failed-bar form { margin: 0; }
.failed-bar form .failed-bar-btn {
  margin: 0; padding: 9px 16px; border-radius: 9px; border: none; cursor: pointer;
  background: #f87171; color: #3b0a0a; font-weight: 700;
}
.failed-bar form .failed-bar-btn:hover { background: #fca5a5; }
.txn-del-form { margin: 8px 0 0; }
.txn-del-form .txn-del-btn {
  margin: 0; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
  background: transparent; color: #f87171; border: 1px solid rgba(248, 113, 113, 0.6);
}
.txn-del-form .txn-del-btn:hover { background: rgba(248, 113, 113, 0.15); }