* { box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
body { margin: 0; background: #f3f4f6; color: #1f2937; }
.container { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 22px; margin-bottom: 16px; }
.card { background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card h2 { margin-top: 0; font-size: 16px; }
#qr-image { max-width: 220px; display: block; margin-top: 8px; }
#status-text { font-weight: 600; padding: 6px 10px; border-radius: 6px; display: inline-block; }
.status-connected { background: #dcfce7; color: #166534; }
.status-qr { background: #fef9c3; color: #854d0e; }
.status-disconnected { background: #fee2e2; color: #991b1b; }
form input, form textarea { width: 100%; margin-bottom: 8px; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
button { background: #16a34a; color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
button:hover { background: #15803d; }
.contact-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
.contact-item:last-child { border-bottom: none; }
.contact-meta { font-size: 13px; color: #6b7280; }
.contact-actions button { margin-left: 6px; font-size: 12px; padding: 5px 10px; }
.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; padding: 20px; border-radius: 10px; width: 90%; max-width: 400px; }
.modal-content textarea { width: 100%; min-height: 100px; margin: 10px 0; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
details { margin-top: 12px; }
details input { width: 100%; margin: 8px 0; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.report-box { text-align: center; padding: 14px 6px; border-radius: 8px; }
.report-number { font-size: 24px; font-weight: 700; }
.report-label { font-size: 12px; margin-top: 4px; }
.report-sent { background: #dcfce7; color: #166534; }
.report-failed { background: #fee2e2; color: #991b1b; }
.report-pending { background: #fef9c3; color: #854d0e; }
.report-total { background: #e5e7eb; color: #374151; }
@media (max-width: 480px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pagination kontak: tetap ringan walau data sudah ratusan ribu. */
.pagination-btn { padding: 7px 11px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; }
.pagination-btn:disabled { opacity: .45; cursor: not-allowed; }
.pagination-current { font-size: 13px; color: #374151; }

/* Dashboard ringkas */
.dashboard-card { padding: 18px; }
.dashboard-head, .section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.dashboard-head h2, .section-head h2 { margin-bottom:4px; }
.dashboard-subtitle { margin:0; color:#6b7280; font-size:13px; }
.dashboard-updated { color:#6b7280; font-size:11px; white-space:nowrap; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dashboard-stat { min-height:92px; border-radius:10px; padding:14px; display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb; }
.dashboard-stat > div { min-width:0; }
.dashboard-stat strong { display:block; font-size:25px; line-height:1.1; }
.dashboard-stat small { display:block; margin-top:5px; font-size:11px; color:#4b5563; }
.dashboard-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; font-size:12px; font-weight:800; flex:0 0 auto; }
.stat-sent { background:#ecfdf5; }
.stat-wa { background:#eff6ff; }
.stat-process { background:#f5f3ff; }
.stat-pending { background:#fffbeb; }
.report-date-wrap input { padding:7px 9px; border:1px solid #d1d5db; border-radius:6px; }
.report-table-wrap { overflow-x:auto; }
.report-table { width:100%; border-collapse:collapse; min-width:600px; font-size:13px; }
.report-table th, .report-table td { padding:10px 9px; border-bottom:1px solid #e5e7eb; text-align:left; }
.report-table th:not(:first-child), .report-table td.number { text-align:right; }
.report-table tbody td:first-child small { display:block; color:#9ca3af; font-size:11px; margin-top:2px; }
.report-table tfoot th { border-top:2px solid #d1d5db; border-bottom:none; }
.sent-text { color:#166534; font-weight:700; }
.failed-text { color:#991b1b; font-weight:700; }
.pending-text { color:#854d0e; font-weight:700; }
@media (max-width: 700px) {
  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-head, .section-head { flex-direction:column; }
}


.restriction-alert{margin-top:10px;padding:12px 14px;border-radius:8px;background:#fff4d6;border:1px solid #f2c94c;color:#7a4d00;font-size:14px;line-height:1.45;}
.status-restricted{display:inline-block;padding:8px 12px;border-radius:7px;background:#ffe4e6;color:#9f1239;font-weight:700;}
.wa-disabled{opacity:.55;pointer-events:none;}

.proxy-grid{display:grid;grid-template-columns:120px 1.5fr 120px 1fr 1fr;gap:8px;margin-top:10px}.proxy-grid input,.proxy-grid select{box-sizing:border-box;width:100%;padding:9px;border:1px solid #d1d5db;border-radius:6px}.proxy-format{margin-top:8px;padding:10px;background:#f8fafc;border-radius:6px;line-height:1.9;overflow:auto}@media(max-width:760px){.proxy-grid{grid-template-columns:1fr 1fr}.proxy-grid select{grid-column:1/-1}}

.wa-status { font-size: 12px; margin-left: 6px; font-weight: 600; }
.wa-status.checking { color: #6b7280; }
.wa-status.valid { color: #16a34a; }
.wa-status.invalid { color: #dc2626; }
.btn-validate { background: #2563eb; color: white; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; }

.wa-status { font-size: 12px; margin-left: 6px; font-weight: 600; }
.wa-status.checking { color: #6b7280; }
.wa-status.valid { color: #16a34a; }
.wa-status.invalid { color: #dc2626; }
.btn-validate { background: #2563eb; color: white; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; }