.app {max-width:1400px;margin:40px auto;padding:0 24px;}
.header {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px;}
.title {font-size:26px;font-weight:800;letter-spacing:0.04em;}
.tabs {display:flex;gap:12px;flex-wrap:wrap;}
.tab {padding:10px 18px;border-radius:999px;background:var(--panel-glass);border:1px solid var(--border);cursor:pointer;font-weight:700;transition:0.25s;}
.tab.active {background:var(--blue);box-shadow:var(--blue-glow);}
.tab:hover {background:rgba(61,161,240,0.18);}
.controls {display:grid;grid-template-columns:160px 1fr 180px;gap:16px;margin-bottom:20px;}
.select,.search {position:relative;}
.select button {width:100%;padding:12px 16px;border-radius:12px;background:var(--panel-glass);border:1px solid var(--border);color:var(--text);font-weight:700;cursor:pointer;}
.select ul {position:absolute;top:110%;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;list-style:none;padding:6px;display:none;z-index:10;}
.select.open ul {display:block;}
.select li {padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:700;}
.select li:hover {background:rgba(61,161,240,0.15);}
.search input {width:100%;padding:12px 16px;border-radius:12px;background:var(--panel-glass);border:1px solid var(--border);color:var(--text);font-weight:700;}

.leaderboard-controls {display:flex;gap:12px;margin-bottom:16px;}
.leaderboard-controls button {padding:10px 18px;border-radius:12px;background:var(--panel-glass);border:1px solid var(--border);color:var(--text);font-weight:700;cursor:pointer;transition:0.25s;}
.leaderboard-controls button.active {background:var(--blue);box-shadow:var(--blue-glow);}
.leaderboard-controls button:hover {background:rgba(61,161,240,0.18);}

.podium-wrapper {margin-bottom:24px; padding: 24px 12px;}
.podium {display:flex;justify-content:center;flex-wrap:wrap;gap:16px;}
.podium-card {background:var(--panel-glass);border-radius:var(--radius);padding:30px 20px;text-align:center;font-weight:800;display:flex;flex-direction:column;align-items:center;transition:0.3s;cursor:pointer;min-width:200px;min-height:180px;}
.podium-card:hover {transform:translateY(-6px);box-shadow:0 8px 25px rgba(61,161,240,0.35);}
.podium-rank {font-size:36px;margin-bottom:12px;font-weight:900;}
.podium-name {font-size:24px;margin-bottom:8px;}
.podium-points {font-size:18px;color:var(--muted);font-weight:700;}

.rank-1, .rank-2,.rank-3,.rank-4,.rank-5 {transform:scale(1);}

.table-wrap {background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent),var(--panel-glass);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;backdrop-filter:blur(12px);margin-bottom:24px;}
table {width:100%;border-collapse:collapse;}
thead {background:rgba(0,0,0,0.35);cursor:pointer;}
th,td {padding:14px 16px;text-align:left;font-weight:800;white-space:nowrap;}
th {font-size:12px;letter-spacing:0.12em;color:var(--muted);}
tbody tr {border-top:1px solid var(--border);transition:0.2s;}
tbody tr:hover {background:rgba(61,161,240,0.08);}

.badge {padding:6px 12px;border-radius:999px;background:rgba(61,161,240,0.18);border:1px solid rgba(61,161,240,0.45);font-size:12px;font-weight:900;}
.details-btn {padding:8px 14px;background:var(--blue);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:0.2s;}
.details-btn:hover {transform:scale(1.05);box-shadow:0 0 10px rgba(61,161,240,0.7);}

.pagination {display:flex;gap:8px;justify-content:center;padding:18px;}
.page {padding:8px 14px;border-radius:10px;background:var(--panel-glass);border:1px solid var(--border);font-weight:800;cursor:pointer;}
.page.active {background:var(--blue);box-shadow:var(--blue-glow);}

.modal-bg {position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:100;}
.modal {background:var(--panel);border-radius:var(--radius);padding:24px;max-width:500px;width:90%;}
.modal h3 {margin-bottom:16px;}
.modal .row {display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.modal .row:last-child {border-bottom:none;}
.modal .label {font-weight:700;color:var(--muted);}
.modal .close {margin-top:20px;padding:8px 16px;background:var(--blue);border:none;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;}

@media(max-width:900px){.controls{grid-template-columns:1fr;}.header{gap:12px;}.podium{flex-direction:column;align-items:center;}}

.appz {
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 24px;
  font-family: 'Inter', sans-serif;
  color: #fff;
}

/* Header */
.headerz {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.titlez {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Construction Section */
.construction {
  text-align: center;
  padding: 20px;
}
.construction-icon {
  font-size: 50px;
  margin-bottom: 12px;
}
.construction h1 {
  font-size: 28px;
  margin: 12px 0;
}
.construction p {
  font-size: 16px;
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.construction-note {
  margin-top: 24px;
  font-weight: 700;
  color: #bbb;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* Responsive adjustments */
@media(max-width: 1200px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 768px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

.vpn-card, .status-card {
  background: rgba(61,161,240,0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
  font-weight: 700;
}
.vpn-card:hover, .status-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(61,161,240,0.35);
}

/* Flags and Status */
.flag {
  font-size: 24px;
  margin-bottom: 8px;
}
.status {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
}
.status.online { background: #1abc9c; color: #fff; }
.status.offline { background: #e74c3c; color: #fff; }
.status.maintenance { background: #f1c40f; color: #fff; }
.status.info { background: #3498db; color: #fff; }

/* Responsive */
@media(max-width: 900px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .title { font-size: 24px; }
}