/* ═══════════════════════════════════════════
   Dashboard — 9Captcha v2
   ═══════════════════════════════════════════ */

/* ── Header ── */
.dashboard-header {
  margin-bottom:32px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.dashboard-header h1 { font-size:1.75rem; }

/* ── Stats Grid ── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}

.stat-card {
  padding:24px 28px;
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity var(--t-smooth);
}
.stat-card:hover::before { opacity:1; }

.stat-card .stat-label {
  font-size:.75rem; font-weight:600;
  color:var(--zinc-500);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px;
}
.stat-card .stat-value {
  font-size:1.75rem; font-weight:800;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.stat-card .stat-sub {
  font-size:.75rem;
  color:var(--zinc-600);
  margin-top:6px;
}

/* ── API Key ── */
.api-key-section {
  padding:24px 28px;
  margin-bottom:20px;
}
.api-key-section h3 {
  font-size:.6875rem; font-weight:600;
  color:var(--zinc-500);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.api-key-container {
  margin-top:14px;
  display:flex; align-items:center; gap:10px;
}
.api-key-box {
  flex:1;
  background:rgba(0,0,0,.3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:11px 16px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--accent);
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Table ── */
.table-section { padding:24px 28px; }
.section-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px;
}
.section-title { font-size:1rem; font-weight:600; }

.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  text-align:left;
  padding:10px 16px;
  font-size:.6875rem; font-weight:600;
  color:var(--zinc-600);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--border-subtle);
}
.data-table td {
  padding:14px 16px;
  font-size:.8125rem;
  color:var(--zinc-300);
  border-bottom:1px solid rgba(255,255,255,.03);
}
.data-table tr { transition:background var(--t-fast); }
.data-table tbody tr:hover td {
  background:rgba(255,255,255,.02);
}
.data-table .mono { font-family:var(--font-mono); font-size:.75rem; color:var(--zinc-500); }

/* ── Pagination ── */
.pagination {
  display:flex; align-items:center; gap:12px;
  margin-top:20px;
}

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-content {
  width:100%; max-width:460px;
  padding:36px;
  background:var(--bg-secondary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
}
.modal-content h2 { font-size:1.25rem; }

/* ── Crypto Payment ── */
.crypto-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-top:20px;
}
.crypto-option {
  background:rgba(255,255,255,.02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:18px 12px;
  text-align:center; cursor:pointer;
  transition:all .2s ease;
}
.crypto-option:hover {
  background:rgba(139,92,246,.05);
  border-color:rgba(139,92,246,.3);
  transform:translateY(-2px);
}
.crypto-icon { font-size:1.5rem; margin-bottom:8px; display:block; }
.crypto-name { font-size:.75rem; font-weight:600; color:var(--zinc-300); }

.payment-details { text-align:center; padding:20px 0; }
.qr-placeholder {
  width:150px; height:150px;
  background:#fff; margin:0 auto 20px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.address-container {
  background:rgba(0,0,0,.4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.address-text {
  flex:1; font-family:var(--font-mono);
  font-size:.6875rem; color:var(--zinc-400);
  word-break:break-all; text-align:left;
}
.wait-indicator {
  display:flex; align-items:center; justify-content:center;
  gap:10px; font-size:.8125rem; color:var(--zinc-500);
}
.spinner {
  width:14px; height:14px;
  border:2px solid rgba(139,92,246,.15);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* ── Toasts ── */
.toast-container {
  position:fixed; bottom:20px; right:20px;
  z-index:2000;
  display:flex; flex-direction:column; gap:10px;
}
.toast {
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-size:.8125rem; font-weight:500;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:slideIn .3s var(--ease-spring);
}
.toast-success { background:var(--bg-secondary); border:1px solid var(--success); }
.toast-error { background:var(--bg-secondary); border:1px solid var(--error); }

@keyframes slideIn {
  from { opacity:0; transform:translateX(20px); }
  to { opacity:1; transform:translateX(0); }
}

/* ── Change Password ── */
.account-section { padding:24px 28px; margin-bottom:20px; }
.pw-form { margin-top:16px; }
.pw-fields {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:20px;
}
.pw-strength-bar {
  height:3px; margin-top:8px;
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.pw-strength-fill {
  height:100%; width:0;
  border-radius:var(--radius-full);
  transition:width .3s ease, background .3s ease;
}
.pw-strength-label {
  display:block; margin-top:4px;
  font-weight:500;
}
.pw-actions {
  display:flex; justify-content:flex-end;
}

/* ── Responsive ── */
@media (max-width:768px) {
  .dashboard-layout { padding: 0 8px; }
  .dashboard-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .dashboard-header h1 { font-size:1.35rem; }
  .stats-grid { grid-template-columns:1fr; gap:10px; }
  .crypto-grid { grid-template-columns:1fr; }
  .pw-fields { grid-template-columns:1fr; }
  .table-section { padding:16px 12px; }
  .account-section { padding:16px 12px; }
  .api-key-section { padding:16px 12px; }
  .stat-card { padding:16px 18px; }
  .stat-card .stat-value { font-size:1.4rem; }

  /* Tables: horizontal scroll on mobile */
  .table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .data-table { min-width:520px; }
  .data-table th, .data-table td { padding:10px 10px; font-size:.72rem; white-space:nowrap; }

  /* Nav bar */
  .navbar .container { flex-wrap:wrap; gap:8px; }
  .nav-actions { gap:6px; flex-wrap:wrap; }
  .nav-actions .btn-secondary, .nav-actions .btn-sm { font-size:.7rem; padding:5px 8px; }
  .nav-actions .text-sm { font-size:.72rem; }

  /* API key */
  .api-key-container { flex-direction:column; }
  .api-key-box { font-size:.7rem; word-break:break-all; white-space:normal; }
  .flex.items-center.justify-between { flex-wrap:wrap; gap:8px; }

  /* Modal */
  .modal-content { padding:20px; max-width:95vw; }

  /* Section headers */
  .section-header { flex-wrap:wrap; gap:8px; }

  /* Pagination */
  .pagination { flex-wrap:wrap; gap:8px; }
}