/* border.css — HK border crossing status (we1co.me style) */
:root{
  --primary:#0EA5E9;--brand:#1e3a8a;--bg-page:#F8FAFC;--bg-card:#fff;
  --text-1:#1E293B;--text-2:#64748B;--border:#E2E8F0;
  --ok:#16a34a;--warn:#d97706;--busy:#dc2626;--off:#6b7280;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg-page);color:#333;line-height:1.6}
.container{max-width:720px;margin:0 auto;padding:0 16px 24px}
.top-bar{position:fixed;top:0;left:0;right:0;height:24px;background:var(--brand);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:.68rem;z-index:1002}
.top-bar span{white-space:nowrap}
.nav-bar{position:fixed;top:24px;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:1001;padding:8px 16px}
.nav-inner{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav-title{font-weight:700;color:var(--brand);font-size:.95rem;white-space:nowrap}
.lang-btn{padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:500;text-decoration:none;color:var(--text-2);background:#f1f5f9;border:1px solid var(--border);cursor:pointer;font-family:inherit}
.lang-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
body{padding-top:96px}

/* Segmented controls (zidoodi-style) */
.filters{margin:12px 0 4px}
.seg-row{display:flex;gap:8px;margin:6px 0}
.seg{flex:1;padding:8px 6px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text-2);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.seg.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Border cards */
.border-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.b-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden}
.b-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #f1f5f9}
.b-name{font-weight:700;font-size:1rem;color:var(--text-1)}
.b-type{font-size:.68rem;color:var(--text-2);background:#f1f5f9;border-radius:999px;padding:1px 8px;margin-top:2px;display:inline-block}
.b-level{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;padding:4px 12px;border-radius:999px}
.b-level .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;animation:pulseLive 1.6s ease-in-out infinite}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
.lv-0{background:#dcfce7;color:var(--ok)}.lv-1{background:#fef3c7;color:var(--warn)}.lv-2{background:#fee2e2;color:var(--busy)}.lv-off{background:#f1f5f9;color:var(--off)}
.b-body{padding:10px 16px}
.b-metrics{display:flex;gap:10px;margin-bottom:8px}
.metric{flex:1;background:#f8fafc;border-radius:10px;padding:8px 10px;text-align:center}
.metric .k{font-size:.68rem;color:var(--text-2)}
.metric .v{font-size:1.15rem;font-weight:800;color:var(--text-1);margin-top:2px}
.metric .s{font-size:.66rem;color:var(--text-2)}
.b-hours{font-size:.74rem;color:var(--text-2);text-align:center}
.b-breakdown{margin-top:6px}
.bd-row{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text-2);margin:3px 0}
.bd-bar{flex:1;height:6px;border-radius:3px;background:#f1f5f9;overflow:hidden}
.bd-fill{height:100%;border-radius:3px}
.bd-hk{background:#0EA5E9}.bd-mn{background:#F97316}.bd-ot{background:#94a3b8}
.updated{text-align:center;color:#94a3b8;font-size:.7rem;margin:14px 0 0}

@media(min-width:640px){.border-grid{grid-template-columns:1fr 1fr}}