/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-md);
  font-size:0.9rem; font-weight:600; font-family:var(--font-body); cursor:pointer;
  transition:var(--transition); border:1px solid transparent; white-space:nowrap; min-height:44px; }
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn-primary { background:var(--accent-green); color:#020617; border-color:var(--accent-green); }
.btn-primary:hover { background:#16a34a; border-color:#16a34a; transform:translateY(-1px); box-shadow:0 4px 16px rgba(34,197,94,0.3); }
.btn-orange { background:var(--accent-orange); color:#fff; border-color:var(--accent-orange); }
.btn-orange:hover { background:#ea6c12; transform:translateY(-1px); box-shadow:0 4px 16px rgba(249,115,22,0.3); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#dc2626; transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-primary); border-color:var(--border-bright); }
.btn-ghost:hover { background:var(--bg-elevated); border-color:var(--accent-green); color:var(--accent-green); }
.btn-sm { padding:7px 14px; font-size:0.8rem; min-height:36px; }
.btn-lg { padding:14px 28px; font-size:1rem; min-height:52px; border-radius:var(--radius-lg); }
.btn-block { width:100%; justify-content:center; }
.btn:disabled, .btn-loading { opacity:0.7; cursor:not-allowed; pointer-events:none; transform:none !important; }
.btn-loading::after { content:''; width:14px; height:14px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%; animation:spin 0.6s linear infinite; }

/* ── CARDS ──────────────────────────────────────────────────────*/
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); }
.card-glass { background:rgba(15,23,42,0.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-lg); }
.card-hover { transition:var(--transition); cursor:pointer; }
.card-hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-bright); }
.card-title { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:16px; }

/* ── STAT CARDS ─────────────────────────────────────────────────*/
.stat-card { display:flex; flex-direction:column; gap:8px; }
.stat-card .stat-icon { width:44px; height:44px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; }
.stat-card .stat-icon svg { width:22px; height:22px; }
.stat-card .stat-value { font-family:var(--font-display); font-size:1.6rem; font-weight:600; line-height:1; letter-spacing:-0.02em; }
.stat-card .stat-label { font-size:0.85rem; color:var(--text-muted); }
.stat-card .stat-trend { font-size:0.8rem; display:flex; align-items:center; gap:4px; }
.stat-card .stat-trend.up { color:var(--accent-green); }
.stat-card .stat-trend.down { color:var(--danger); }

/* ── BADGES ─────────────────────────────────────────────────────*/
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:0.75rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; }
.badge-pending { background:var(--warning-dim); color:var(--warning); }
.badge-processing { background:var(--info-dim); color:var(--info); }
.badge-in_progress { background:var(--info-dim); color:var(--info); }
.badge-completed { background:var(--accent-green-dim); color:var(--accent-green); }
.badge-partial { background:var(--accent-orange-dim); color:var(--accent-orange); }
.badge-cancelled { background:var(--danger-dim); color:var(--danger); }
.badge-refunded { background:var(--purple-dim); color:var(--purple); }
.badge-failed { background:var(--danger-dim); color:var(--danger); }
.badge-open { background:var(--info-dim); color:var(--info); }
.badge-answered { background:var(--accent-green-dim); color:var(--accent-green); }
.badge-closed { background:var(--bg-elevated); color:var(--text-muted); }
.badge-deposit { background:var(--accent-green-dim); color:var(--accent-green); }
.badge-order { background:var(--danger-dim); color:var(--danger); }
.badge-refund { background:var(--purple-dim); color:var(--purple); }
.badge-bonus { background:var(--warning-dim); color:var(--warning); }
.badge-admin { background:var(--accent-orange-dim); color:var(--accent-orange); }
.badge-user { background:var(--bg-elevated); color:var(--text-muted); }
.badge-active { background:var(--accent-green-dim); color:var(--accent-green); }
.badge-banned { background:var(--danger-dim); color:var(--danger); }
.badge-inactive { background:var(--bg-elevated); color:var(--text-muted); }

/* ── FORMS ──────────────────────────────────────────────────────*/
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:0.875rem; font-weight:500; color:var(--text-muted); }
.form-label span { color:var(--danger); margin-left:2px; }
.input { width:100%; padding:11px 14px; background:var(--bg-elevated); border:1px solid var(--border-bright);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:0.9rem; font-family:var(--font-body);
  transition:var(--transition); min-height:44px; }
.input:focus { outline:none; border-color:var(--accent-green); box-shadow:0 0 0 3px var(--accent-green-dim); }
.input::placeholder { color:var(--text-muted); }
.input:disabled { opacity:0.5; cursor:not-allowed; }
select.input { cursor:pointer; }
textarea.input { resize:vertical; min-height:100px; line-height:1.5; }
.input-error { border-color:var(--danger) !important; }
.form-error { font-size:0.8rem; color:var(--danger); display:none; }
.form-error.visible { display:block; }
.form-hint { font-size:0.8rem; color:var(--text-muted); }
.input-prefix { position:relative; }
.input-prefix .prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-secondary); font-size:0.9rem; pointer-events:none; font-weight:500; }
.input-prefix .input { padding-left:52px; }

/* iOS Toggle */
.toggle-wrapper { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle { position:relative; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { display:block; width:44px; height:24px; background:var(--bg-elevated);
  border-radius:999px; border:1px solid var(--border-bright); transition:var(--transition); cursor:pointer; }
.toggle input:checked ~ .toggle-track { background:var(--accent-green); border-color:var(--accent-green); }
.toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:var(--transition); box-shadow:var(--shadow-sm); }
.toggle input:checked ~ .toggle-track::after { transform:translateX(20px); }

/* ── TABLES ─────────────────────────────────────────────────────*/
.table-wrapper { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
.table { width:100%; border-collapse:collapse; }
.table th { padding:12px 16px; text-align:left; font-size:0.75rem; font-weight:600;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em;
  background:var(--bg-elevated); border-bottom:1px solid var(--border); white-space:nowrap; }
.table td { padding:14px 16px; font-size:0.875rem; border-bottom:1px solid var(--border);
  vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition:var(--transition); }
.table tbody tr:hover { background:rgba(255,255,255,0.02); }
.table .truncate { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-actions { display:flex; gap:6px; align-items:center; }

/* ── MODAL ──────────────────────────────────────────────────────*/
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity 200ms ease; padding:16px; }
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg-surface); border:1px solid var(--border-bright); border-radius:var(--radius-xl);
  padding:28px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  transform:translateY(20px) scale(0.97); transition:transform 200ms ease; box-shadow:var(--shadow-lg); }
.modal-backdrop.open .modal { transform:translateY(0) scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-title { font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
.modal-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.modal-close:hover { background:var(--bg-elevated); color:var(--text-primary); }
.modal-body { margin-bottom:20px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; }

/* ── PAGINATION ─────────────────────────────────────────────────*/
.pagination { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.page-btn { min-width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:0.85rem; cursor:pointer; transition:var(--transition);
  background:var(--bg-elevated); color:var(--text-muted); border:1px solid var(--border); }
.page-btn:hover { border-color:var(--accent-green); color:var(--accent-green); }
.page-btn.active { background:var(--accent-green); color:#020617; border-color:var(--accent-green); font-weight:700; }
.page-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ── TABS ───────────────────────────────────────────────────────*/
.tabs { display:flex; gap:4px; background:var(--bg-elevated); border-radius:var(--radius-md);
  padding:4px; width:fit-content; flex-wrap:wrap; }
.tab-btn { padding:8px 16px; border-radius:var(--radius-sm); font-size:0.875rem; font-weight:500;
  cursor:pointer; transition:var(--transition); color:var(--text-muted); min-height:38px; }
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-sm); font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── QUICK AMOUNT PILLS ─────────────────────────────────────────*/
.amount-pills { display:flex; gap:8px; flex-wrap:wrap; }
.amount-pill { padding:8px 16px; background:var(--bg-elevated); border:1px solid var(--border-bright);
  border-radius:var(--radius-md); font-size:0.875rem; cursor:pointer; transition:var(--transition); min-height:38px; }
.amount-pill:hover,.amount-pill.active { background:var(--accent-green-dim); border-color:var(--accent-green);
  color:var(--accent-green); }

/* ── EMPTY STATE ────────────────────────────────────────────────*/
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 24px; gap:12px; color:var(--text-muted); text-align:center; }
.empty-state svg { width:48px; height:48px; opacity:0.3; }
.empty-state p { font-size:0.9rem; }

/* ── ANNOUNCEMENTS ──────────────────────────────────────────────*/
.announcement { padding:14px 18px; border-radius:var(--radius-md); display:flex; gap:12px;
  align-items:flex-start; border:1px solid; margin-bottom:10px; }
.announcement.info { background:var(--info-dim); border-color:rgba(59,130,246,0.3); }
.announcement.warning { background:var(--warning-dim); border-color:rgba(245,158,11,0.3); }
.announcement.success { background:var(--accent-green-dim); border-color:rgba(34,197,94,0.3); }
.announcement svg { width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.announcement .ann-title { font-weight:600; font-size:0.9rem; margin-bottom:4px; }
.announcement .ann-body { font-size:0.85rem; color:var(--text-muted); }

/* ── ALERT BANNER ───────────────────────────────────────────────*/
.alert { padding:12px 16px; border-radius:var(--radius-md); font-size:0.875rem;
  display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.alert-success { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid rgba(34,197,94,0.3); }
.alert-error { background:var(--danger-dim); color:var(--danger); border:1px solid rgba(239,68,68,0.3); }
.alert-info { background:var(--info-dim); color:var(--info); border:1px solid rgba(59,130,246,0.3); }

/* ── CODE BLOCK ─────────────────────────────────────────────────*/
pre.code-block { background:var(--bg-elevated); border:1px solid var(--border-bright);
  border-radius:var(--radius-md); padding:16px; overflow-x:auto; font-size:0.85rem;
  font-family:'Courier New', monospace; color:#a5f3fc; line-height:1.6; }
.copy-btn { position:relative; }

/* ── Responsive two-column grid utility ─────────────────────── */
.two-col-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:768px) {
  .two-col-grid { grid-template-columns:1fr; gap:12px; }
}

/* ── Responsive add-funds / order layout ────────────────────── */
.side-panel-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
}
@media (max-width:768px) {
  .side-panel-layout {
    grid-template-columns:1fr;
  }
  .side-panel-layout .panel-sticky {
    position:static !important;
  }
}

/* ── Table mobile ───────────────────────────────────────────── */
@media (max-width:768px) {
  .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); }
  /* Hide less-important columns on mobile */
  .table .hide-mobile { display:none; }
}