/* ══════════════════════════════════════════
   常见端口速查表 - 自定义样式
   ══════════════════════════════════════════ */
:root {
  --bg: #FAFAF9; --bg-alt: #F5F5F4; --surface: #FFFFFF; --border: #E7E5E4; --border-strong: #D6D3D1;
  --text: #1E293B; --text-secondary: #52525B; --text-muted: #71717A;
  --primary: #4F46E5; --primary-hover: #4338CA; --primary-light: rgba(79,70,229,0.08);
  --secondary: #F97316; --accent: #EC4899; --success: #059669;
  --radius: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter','Noto Sans SC',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; }
.toast { position:fixed; top:24px; right:24px; background:var(--text); color:var(--bg); padding:10px 18px; border-radius:100px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; z-index:1000; transform:translateX(calc(100% + 40px)); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.toast.show { transform:translateX(0); }
.toast-dot { width:8px; height:8px; background:var(--success); border-radius:50%; }
.page { max-width:960px; margin:0 auto; padding:0 32px; }
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#A5B4FC;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4F46E5}
::selection { background:rgba(79,70,229,0.2); color:#1E293B; }

.search-bar { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; margin:16px 0; box-shadow:var(--shadow-sm); transition:border-color 0.2s; }
.search-bar:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.search-icon { width:20px; height:20px; color:var(--text-muted); flex-shrink:0; }
.search-input { flex:1; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--text); background:transparent; }
.search-input::placeholder { color:#9CA3AF; }

.tab-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tab-btn { padding:7px 16px; background:transparent; border:1px solid var(--border); border-radius:100px; font-family:inherit; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; transition:all 0.15s ease; }
.tab-btn:hover { border-color:rgba(79,70,229,0.25); color:var(--primary); }
.tab-btn.active { background:var(--primary); border-color:var(--primary); color:white; }

.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:8px; box-shadow:var(--shadow-sm); }
.port-table { width:100%; border-collapse:collapse; font-size:14px; }
.port-table thead { background:var(--bg-alt); border-bottom:1px solid var(--border); }
.port-table th { padding:12px 16px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); text-align:left; }
.port-table td { padding:10px 16px; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.port-table tbody tr { cursor:pointer; transition:background 0.15s ease; }
.port-table tbody tr:hover { background:rgba(79,70,229,0.04); }
.port-table tbody td:nth-child(1) { font-family:'SF Mono','Cascadia Code','Fira Code',monospace; font-size:15px; color:var(--text); font-weight:700; }
.port-table tbody td:nth-child(2) { font-family:'SF Mono','Cascadia Code','Fira Code',monospace; font-size:12px; font-weight:500; }
.port-table tbody td:nth-child(5) { font-size:11px; }
.port-table .cat-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:10px; font-weight:600; letter-spacing:0.05em; }
.cat-web { background:rgba(59,130,246,0.12); color:#2563EB; }
.cat-db { background:rgba(16,185,129,0.12); color:#059669; }
.cat-mail { background:rgba(245,158,11,0.12); color:#D97706; }
.cat-file { background:rgba(139,92,246,0.12); color:#7C3AED; }
.cat-remote { background:rgba(239,68,68,0.12); color:#DC2626; }
.cat-game { background:rgba(236,72,153,0.12); color:#DB2777; }
.cat-infra { background:rgba(107,114,128,0.12); color:#4B5563; }
.cat-dns { background:rgba(20,184,166,0.12); color:#0D9488; }
.cat-other { background:rgba(180,83,9,0.12); color:#B45309; }
.port-table tbody tr.no-match { display:none; }
.count-info { font-size:12px; color:var(--text-muted); margin-bottom:32px; text-align:right; }

.guide-section { margin-top:16px; margin-bottom:64px; background:#ffffff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.guide-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 20px; background:none; border:none; cursor:pointer; transition:background 0.15s ease; }
.guide-toggle:hover { background:var(--bg-alt); }
.guide-toggle-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#1E293B; }
.guide-toggle.open .toggle-arrow { transform:rotate(180deg); }
.toggle-arrow { transition:transform 0.2s ease; color:var(--text-muted); }
.guide-list { padding:0 20px 20px; }
.guide-list.hidden { display:none; }
.guide-item { padding:16px 0; border-top:1px solid var(--border); }
.guide-item:first-child { border-top:1px solid var(--border); }
.guide-item-title { font-size:14px; font-weight:600; color:#1E293B; margin-bottom:6px; }
.guide-item-body { font-size:13px; color:var(--text-secondary); line-height:1.8; }
.guide-item-body kbd { padding:1px 6px; background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:4px; font-family:'SF Mono','Cascadia Code',monospace; font-size:12px; color:var(--text-secondary); }

@media (max-width:768px) {
  .page { padding:0 16px; }
  .port-table th,.port-table td { padding:8px 10px; font-size:12px; }
  .port-table .col-cat,.port-table thead th:nth-child(5),.port-table tbody td:nth-child(5) { display:none; }
  .tab-bar { gap:4px; }
  .tab-btn { padding:5px 12px; font-size:12px; }
}