.proxy-section { max-width: 960px; margin: 0 auto; padding: 0 1.5rem 1rem; text-align: left; }
.proxy-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.proxy-section-header h2 { font-size: 1.1rem; font-weight: 700; color: #222; margin: 0; transition: color 0.3s; }
.proxy-count { font-size: 0.82rem; color: #777; background: #f0f4f8; padding: 4px 10px; border-radius: 999px; transition: background 0.3s, color 0.3s; }
.proxy-table-wrap { overflow-x: auto; border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; transition: border-color 0.3s, background 0.3s; }
.proxy-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 640px; }
.proxy-table th, .proxy-table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid #eee; vertical-align: middle; transition: border-color 0.3s; }
.proxy-table th { font-weight: 600; color: #555; background: #fafafa; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.proxy-table tr:last-child td { border-bottom: none; }
.proxy-table tbody tr:hover { background: #f8fbff; }
.proxy-server { font-weight: 600; color: #333; word-break: break-all; max-width: 220px; transition: color 0.3s; }
.proxy-port { font-variant-numeric: tabular-nums; color: #555; white-space: nowrap; }
.proxy-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; color: #666; word-break: break-all; max-width: 180px; transition: color 0.3s; }
.proxy-ping { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.proxy-ping.fast { color: #16a34a; }
.proxy-ping.mid { color: #ca8a04; }
.proxy-ping.slow { color: #dc2626; }
.btn-connect-sm { display: inline-block; background: #2AABEE; color: #fff; font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 0.15s; border: none; cursor: pointer; }
.btn-connect-sm:hover { background: #229ED9; color: #fff; text-decoration: none; }
.proxy-rank { color: #999; font-size: 0.78rem; width: 2rem; }
.proxy-loading { text-align: center; padding: 1.5rem 0; color: #999; font-size: 0.88rem; }
.proxy-error { background: #fff0f0; border: 1px solid #fecaca; border-radius: 8px; padding: 0.75rem 1rem; color: #dc2626; font-size: 0.88rem; text-align: center; }

body.dark .proxy-section-header h2 { color: #e0e0e0; }
body.dark .proxy-count { background: #2a2a2a; color: #aaa; }
body.dark .proxy-table-wrap { border-color: #333; background: #1a1a1a; }
body.dark .proxy-table th { background: #222; color: #aaa; }
body.dark .proxy-table th, body.dark .proxy-table td { border-color: #2a2a2a; }
body.dark .proxy-table tbody tr:hover { background: #222; }
body.dark .proxy-server { color: #e0e0e0; }
body.dark .proxy-port { color: #aaa; }
body.dark .proxy-secret { color: #888; }
body.dark .btn-connect-sm { background: #e4e4e4; color: #121212; }
body.dark .btn-connect-sm:hover { background: #f2f2f2; color: #121212; }

@media (max-width: 600px) {
  .proxy-section { padding: 0 1rem 1rem; }
  .proxy-table { font-size: 0.78rem; min-width: 560px; }
}