/* ZenProxy Style - Proxy Pool v2.0 */

* { margin:0; padding:0; box-sizing:border-box; }

:root { 
  --bg:#0f1117; 
  --card:#1a1d27; 
  --border:#2a2d3a; 
  --primary:#6c63ff; 
  --primary-hover:#5a52e0; 
  --success:#22c55e; 
  --danger:#ef4444; 
  --warn:#f59e0b; 
  --text:#e2e8f0; 
  --text-dim:#94a3b8; 
  --text-bright:#f8fafc; 
  --sidebar-width:260px;
}

body { 
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif; 
  background:var(--bg); 
  color:var(--text); 
  min-height:100vh; 
}

/* Header */
.header { 
  background:var(--card); 
  border-bottom:1px solid var(--border); 
  padding:16px 24px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
}

.header h1 { 
  font-size:20px; 
  color:var(--text-bright); 
}

.header .nav a { 
  color:var(--text-dim); 
  text-decoration:none; 
  margin-left:16px; 
  padding:6px 12px; 
  border-radius:6px; 
  transition:all .2s; 
}

.header .nav a:hover, 
.header .nav a.active { 
  color:var(--primary); 
  background:rgba(108,99,255,.1); 
}

/* Container */
.container { 
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
}

/* Section */
.section { 
  margin-bottom:32px; 
}

.section-title { 
  font-size:16px; 
  font-weight:600; 
  color:var(--text-bright); 
  margin-bottom:16px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
}

/* Card */
.card { 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:20px; 
  overflow-x:auto; 
  margin-bottom:20px;
  width: 100%;
  box-sizing: border-box;
}

.card h3 {
  font-size:16px;
  color:var(--text-bright);
  margin-bottom:12px;
}

.card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.card-header h3 {
  margin-bottom:0;
}

.card-body {
  width: 100%;
  min-height: 200px;
}

/* Buttons */
.btn { 
  padding:10px 20px; 
  border:none; 
  border-radius:8px; 
  font-size:14px; 
  font-weight:500; 
  cursor:pointer; 
  transition:all .2s; 
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  text-decoration:none;
}

.btn-primary { 
  background:var(--primary); 
  color:#fff; 
}

.btn-primary:hover { 
  background:var(--primary-hover); 
}

.btn-success { 
  background:var(--success); 
  color:#fff; 
}

.btn-success:hover { 
  opacity:.85; 
}

.btn-danger { 
  background:var(--danger); 
  color:#fff; 
}

.btn-danger:hover { 
  opacity:.85; 
}

.btn-secondary { 
  background:rgba(148,163,184,.15); 
  color:var(--text); 
}

.btn-secondary:hover { 
  background:rgba(148,163,184,.25); 
}

.btn-sm { 
  padding:6px 12px; 
  font-size:12px; 
}

.btn-icon { 
  padding:8px; 
  background:transparent; 
}

.btn-icon:hover { 
  background:rgba(108,99,255,.1); 
}

.btn-group { 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
}

/* Table */
table { 
  width:100%; 
  border-collapse:collapse; 
}

th, td { 
  text-align:left; 
  padding:10px 12px; 
  border-bottom:1px solid var(--border); 
  font-size:13px; 
  white-space:nowrap; 
}

th { 
  color:var(--text-dim); 
  font-weight:500; 
  font-size:12px; 
  text-transform:uppercase; 
  letter-spacing:.5px; 
  cursor:pointer; 
  user-select:none; 
}

th:hover { 
  color:var(--text); 
}

th.sorted-asc::after { 
  content:' ↑'; 
}

th.sorted-desc::after { 
  content:' ↓'; 
}

tr:hover td { 
  background:rgba(108,99,255,.03); 
}

/* Badge */
.badge { 
  display:inline-block; 
  padding:3px 8px; 
  border-radius:999px; 
  font-size:11px; 
  font-weight:600; 
}

.badge-valid { 
  background:rgba(34,197,94,.15); 
  color:var(--success); 
}

.badge-invalid { 
  background:rgba(239,68,68,.15); 
  color:var(--danger); 
}

.badge-untested { 
  background:rgba(245,158,11,.15); 
  color:var(--warn); 
}

.badge-fast {
  background:rgba(34,197,94,.15);
  color:var(--success);
}

.badge-medium {
  background:rgba(245,158,11,.15);
  color:var(--warn);
}

.badge-slow {
  background:rgba(239,68,68,.15);
  color:var(--danger);
}

.badge-disconnected {
  background:rgba(239,68,68,.15);
  color:var(--danger);
}

.badge-type { 
  background:rgba(108,99,255,.15); 
  color:var(--primary); 
}

.badge-risk-low { 
  background:rgba(34,197,94,.15); 
  color:var(--success); 
}

.badge-risk-med { 
  background:rgba(245,158,11,.15); 
  color:var(--warn); 
}

.badge-risk-high { 
  background:rgba(239,68,68,.15); 
  color:var(--danger); 
}

.badge-residential { 
  background:rgba(34,197,94,.15); 
  color:var(--success); 
}

.badge-datacenter { 
  background:rgba(148,163,184,.15); 
  color:var(--text-dim); 
}

/* Stat Grid */
.stat-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); 
  gap:12px; 
  margin-bottom:24px; 
}

.stat-card { 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:10px; 
  padding:16px; 
  text-align:center; 
}

.stat-value { 
  font-size:28px; 
  font-weight:700; 
  color:var(--text-bright); 
}

.stat-label { 
  font-size:12px; 
  color:var(--text-dim); 
  margin-top:4px; 
}

/* Chart Grid */
.chart-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:16px;
  margin-bottom:24px;
}

.chart-grid .card {
  padding:20px;
}

.chart-grid canvas {
  max-height:300px;
}

/* Toast */
.toast { 
  position:fixed; 
  bottom:24px; 
  right:24px; 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:10px; 
  padding:12px 20px; 
  font-size:14px; 
  z-index:999; 
  animation:slideIn .3s ease; 
  display:none;
}

.toast.show {
  display:block;
}

.toast.success {
  border-left:4px solid var(--success);
}

.toast.error {
  border-left:4px solid var(--danger);
}

.toast.info {
  border-left:4px solid var(--primary);
}

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

/* Filter Bar */
.filter-bar { 
  display:flex; 
  gap:12px; 
  margin-bottom:16px; 
  flex-wrap:wrap; 
  align-items:center; 
}

.filter-bar input, 
.filter-bar select { 
  padding:8px 12px; 
  background:#0f1117; 
  border:1px solid var(--border); 
  border-radius:8px; 
  color:var(--text); 
  font-size:13px; 
  outline:none; 
}

.filter-bar input:focus, 
.filter-bar select:focus { 
  border-color:var(--primary); 
}

/* Empty State */
.empty { 
  text-align:center; 
  color:var(--text-dim); 
  padding:40px; 
}

.empty-state {
  text-align:center;
  padding:80px 20px;
  color:var(--text-dim);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size:48px;
  margin-bottom:16px;
}

.empty-text {
  font-size:16px;
  margin-bottom:20px;
}

/* Pagination */
.pagination { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:4px; 
  padding:16px 0 0; 
  flex-wrap:wrap; 
}

.pagination button { 
  background:transparent; 
  border:1px solid var(--border); 
  color:var(--text-dim); 
  border-radius:6px; 
  padding:6px 12px; 
  font-size:13px; 
  cursor:pointer; 
  transition:all .2s; 
}

.pagination button:hover { 
  border-color:var(--primary); 
  color:var(--primary); 
}

.pagination button.active { 
  background:var(--primary); 
  border-color:var(--primary); 
  color:#fff; 
}

.pagination button:disabled { 
  opacity:.4; 
  cursor:default; 
}

.pagination .page-info { 
  font-size:13px; 
  color:var(--text-dim); 
  margin:0 8px; 
}

/* Loading */
.loading { 
  display:inline-block; 
  width:14px; 
  height:14px; 
  border:2px solid var(--border); 
  border-top-color:var(--primary); 
  border-radius:50%; 
  animation:spin .6s linear infinite; 
}

@keyframes spin { 
  to { transform:rotate(360deg); } 
}

/* ==================== Admin Layout ==================== */

/* Sidebar */
.sidebar { 
  width:var(--sidebar-width); 
  background:var(--card); 
  border-right:1px solid var(--border); 
  display:flex; 
  flex-direction:column; 
  position:fixed; 
  height:100vh; 
  overflow-y:auto; 
}

.logo { 
  padding:24px 20px; 
  border-bottom:1px solid var(--border); 
}

.logo h2 { 
  font-size:20px; 
  color:var(--text-bright); 
  margin-bottom:4px; 
}

.logo .version { 
  font-size:12px; 
  color:var(--text-dim); 
}

.nav-menu { 
  flex:1; 
  padding:16px 0; 
}

.nav-item { 
  display:flex; 
  align-items:center; 
  padding:12px 20px; 
  color:var(--text-dim); 
  text-decoration:none; 
  transition:all .2s; 
  cursor:pointer; 
}

.nav-item:hover { 
  background:rgba(108,99,255,.08); 
  color:var(--text); 
}

.nav-item.active { 
  background:rgba(108,99,255,.15); 
  color:var(--primary); 
  border-left:3px solid var(--primary); 
}

.nav-item .icon { 
  font-size:18px; 
  margin-right:12px; 
}

.nav-item .badge { 
  margin-left:auto; 
  background:rgba(108,99,255,.2); 
  color:var(--primary); 
  padding:2px 8px; 
  border-radius:12px; 
  font-size:11px; 
  font-weight:600; 
}

.sidebar-footer { 
  padding:16px 20px; 
  border-top:1px solid var(--border); 
}

.status-indicator { 
  display:flex; 
  align-items:center; 
  gap:8px; 
  font-size:13px; 
  color:var(--text-dim); 
}

.status-dot { 
  width:8px; 
  height:8px; 
  border-radius:50%; 
  background:var(--success); 
  animation:pulse 2s infinite; 
}

@keyframes pulse { 
  0%, 100% { opacity:1; } 
  50% { opacity:.5; } 
}

/* Main Content */
.main-content { 
  margin-left:var(--sidebar-width); 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  min-height:100vh; 
}

.topbar { 
  background:var(--card); 
  border-bottom:1px solid var(--border); 
  padding:16px 24px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  position:sticky; 
  top:0; 
  z-index:100; 
}

.topbar h1 { 
  font-size:20px; 
  color:var(--text-bright); 
}

.topbar-right { 
  display:flex; 
  align-items:center; 
  gap:16px; 
}

/* Switch */
.switch { 
  position:relative; 
  display:inline-block; 
  width:44px; 
  height:24px; 
}

.switch input { 
  opacity:0; 
  width:0; 
  height:0; 
}

.slider { 
  position:absolute; 
  cursor:pointer; 
  inset:0; 
  background:#2a2d3a; 
  transition:.3s; 
  border-radius:24px; 
}

.slider:before { 
  position:absolute; 
  content:""; 
  height:18px; 
  width:18px; 
  left:3px; 
  bottom:3px; 
  background:white; 
  transition:.3s; 
  border-radius:50%; 
}

input:checked + .slider { 
  background:var(--primary); 
}

input:checked + .slider:before { 
  transform:translateX(20px); 
}

/* Page */
.page { 
  display:none;
  width: 100%;
  min-height: calc(100vh - 80px);
}

.page.active { 
  display:block; 
}

/* Stats Grid (Admin) */
.stats-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
  gap:16px; 
  margin-bottom:24px;
  width: 100%;
  box-sizing: border-box;
}

.stats-grid .stat-card { 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:20px; 
  display:flex; 
  align-items:center; 
  gap:16px; 
}

.stat-icon { 
  font-size:32px; 
}

.stat-content { 
  flex:1; 
}

.stat-change { 
  font-size:12px; 
  color:var(--success); 
  margin-top:4px; 
}

/* Toolbar */
.toolbar { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:16px; 
  gap:16px; 
  flex-wrap:wrap; 
}

.toolbar-left, 
.toolbar-right { 
  display:flex; 
  align-items:center; 
  gap:12px; 
}

.search-input, 
.filter-select { 
  padding:10px 14px; 
  background:#0f1117; 
  border:1px solid var(--border); 
  border-radius:8px; 
  color:var(--text); 
  font-size:14px; 
  outline:none; 
}

.search-input:focus, 
.filter-select:focus { 
  border-color:var(--primary); 
}

.search-input { 
  min-width:250px; 
}

/* Action Grid */
.action-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
  gap:12px;
  width: 100%;
  box-sizing: border-box;
}

.action-btn { 
  background:rgba(108,99,255,.08); 
  border:1px solid var(--border); 
  border-radius:10px; 
  padding:20px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:12px; 
  cursor:pointer; 
  transition:all .2s; 
  text-align:center; 
}

.action-btn:hover { 
  background:rgba(108,99,255,.15); 
  border-color:var(--primary); 
  transform:translateY(-2px); 
}

.action-icon { 
  font-size:32px; 
}

.action-text { 
  font-size:14px; 
  color:var(--text); 
  font-weight:500; 
}

/* Sources Grid */
#sources-grid {
  width: 100%;
}

/* Protocol Stats */
#protocol-stats {
  width: 100%;
}

/* Node Stats Content */
#node-stats-content {
  width: 100%;
  min-height: 300px;
}

/* Modal */
.modal { 
  display:none; 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,.7); 
  z-index:1000; 
  align-items:center; 
  justify-content:center; 
}

.modal.show { 
  display:flex; 
}

.modal-content { 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:16px; 
  width:90%; 
  max-width:600px; 
  max-height:90vh; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
}

.modal-header { 
  padding:20px 24px; 
  border-bottom:1px solid var(--border); 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
}

.modal-header h3 { 
  font-size:18px; 
  color:var(--text-bright); 
}

.modal-close { 
  background:transparent; 
  border:none; 
  color:var(--text-dim); 
  font-size:28px; 
  cursor:pointer; 
  padding:0; 
  width:32px; 
  height:32px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  border-radius:6px; 
}

.modal-close:hover { 
  background:rgba(239,68,68,.15); 
  color:var(--danger); 
}

.modal-body { 
  padding:24px; 
  overflow-y:auto; 
  flex:1; 
}

.modal-footer { 
  padding:16px 24px; 
  border-top:1px solid var(--border); 
  display:flex; 
  gap:12px; 
  justify-content:flex-end; 
}

/* Form */
.form-group { 
  margin-bottom:16px; 
}

.form-label { 
  display:block; 
  font-size:13px; 
  color:var(--text-dim); 
  margin-bottom:8px; 
  font-weight:500; 
}

.form-input, 
.form-select, 
.form-textarea { 
  width:100%; 
  padding:10px 14px; 
  background:#0f1117; 
  border:1px solid var(--border); 
  border-radius:8px; 
  color:var(--text); 
  font-size:14px; 
  outline:none; 
  font-family:inherit; 
}

.form-input:focus, 
.form-select:focus, 
.form-textarea:focus { 
  border-color:var(--primary); 
}

.form-textarea { 
  resize:vertical; 
  min-height:100px; 
}

/* Settings Tab Content */
.settings-tab-content {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media(max-width:768px) {
  .sidebar { 
    width:100%; 
    height:auto; 
    position:relative; 
  }
  
  .main-content { 
    margin-left:0; 
  }
  
  .stats-grid, 
  .stat-grid { 
    grid-template-columns:1fr; 
  }
  
  .chart-grid {
    grid-template-columns:1fr;
  }
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 18px;
  color: var(--text-bright);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.form-textarea {
  resize: vertical;
  font-family: 'Consolas', 'Monaco', monospace;
}