:root { color-scheme: light; --blue:#245b9e; --link:#075fc4; --line:#d6dee8; --soft:#f4f7fa; --text:#1f2d3d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:#fff; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:16px; line-height:1.65; letter-spacing:0; }
a { color:var(--link); text-decoration:none; }
.site-header { border-bottom:1px solid var(--line); padding:20px max(24px,calc((100% - 1120px)/2)); }
.site-title { font-size:25px; font-weight:700; margin-bottom:8px; }
.site-title a { color:#172331; }
.site-header nav { display:grid; grid-template-columns:repeat(5,1fr); background:#3765a3; }
.site-header nav a { color:#fff; text-align:center; padding:10px 4px; border-right:1px solid #7291bc; }
.site-header nav a:last-child { border-right:0; }
main { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:18px 0 36px; }
h1,h2 { margin:0; line-height:1.35; }
h1 { font-size:28px; }
h2 { font-size:21px; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px; }
section { margin:0 0 24px; }
.search-panel h1 { color:#0873e7; margin-bottom:10px; }
.search-form { display:grid; grid-template-columns:1fr 92px; }
.search-form input,.search-form button { height:44px; font:inherit; }
.search-form input { border:1px solid #b9c9dc; padding:0 14px; min-width:0; }
.search-form button { border:0; background:#1266c3; color:#fff; font-weight:700; cursor:pointer; }
.search-help,.section-note,.object-meta { color:#627386; font-size:14px; }
.directory-heading { background:#e7edf6; padding:10px 14px; margin-bottom:0; }
.directory-heading h2 { border:0; padding:0; margin:0; }
.directory-heading p { color:#627386; margin:1px 0 0; font-size:14px; }
.directory-heading.with-more { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.page-heading { margin-bottom:22px; }
.page-heading>p { margin:0 0 3px; color:#65788d; }
.page-heading small { font-size:15px; font-weight:400; color:#65788d; }
.object-meta { margin-top:8px; }
.traffic-list { display:grid; gap:10px; }
.traffic-card { border:1px solid var(--line); border-left:4px solid #8b9bac; padding:12px 16px; background:#fff; }
.traffic-card.category-recovery { border-left-color:#28975b; }
.traffic-card.category-accident { border-left-color:#d34d43; }
.traffic-card.category-construction { border-left-color:#c58b14; }
.traffic-card.category-traffic_delay { border-left-color:#d16d17; }
.traffic-meta { display:flex; gap:12px; align-items:center; margin-bottom:7px; color:#607185; font-size:14px; }
.category { border-radius:3px; padding:2px 7px; background:#e8eef5; color:#274e78; font-weight:700; }
.traffic-text { font-size:17px; color:#17283a; white-space:normal; overflow-wrap:anywhere; }
.text-toggle { border:0; background:transparent; color:var(--link); font:inherit; font-size:15px; padding:0 4px; cursor:pointer; }
.broadcast { border:1px solid var(--line); background:#f5f9fd; padding:10px 14px; overflow:hidden; }
.broadcast-title { color:#1f5b9d; font-size:17px; font-weight:700; border-bottom:1px dashed #d5e0ec; padding-bottom:6px; }
.broadcast-list { height:44px; overflow:hidden; }
.broadcast-track { will-change:transform; }
.broadcast-item { height:44px; display:grid; grid-template-columns:145px minmax(0,1fr); gap:12px; align-items:center; white-space:nowrap; overflow:hidden; }
.broadcast-item time { color:#0873e7; font-weight:700; }
.broadcast-item span { overflow:hidden; text-overflow:ellipsis; }
.broadcast-count-2 .broadcast-track { animation:broadcast-two 10s steps(1,end) infinite; }
.broadcast-count-3 .broadcast-track { animation:broadcast-three 15s steps(1,end) infinite; }
.broadcast:hover .broadcast-track { animation-play-state:paused; }
@keyframes broadcast-two { 0%,45%{transform:translateY(0)} 50%,95%{transform:translateY(-44px)} 100%{transform:translateY(-88px)} }
@keyframes broadcast-three { 0%,29%{transform:translateY(0)} 33%,62%{transform:translateY(-44px)} 66%,95%{transform:translateY(-88px)} 100%{transform:translateY(-132px)} }
mark.keyword { background:#fff0a5; color:inherit; padding:0 2px; box-shadow:0 1px 0 #e0bd46; }
.compact-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin:10px 0; }
.object-link { display:inline-block; padding:4px 0; border-bottom:1px solid #c9d7e7; }
.link-grid { display:grid; border-top:1px solid var(--line); }
.link-grid a { padding:9px 12px; border-bottom:1px solid var(--line); }
.link-grid a em,.summary-point em { color:var(--link); font-style:normal; }
.summary-point-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.summary-point { padding:10px 12px; border-bottom:1px solid var(--line); }
.summary-point small { display:block; color:#75869a; }
.province-grid { grid-template-columns:repeat(4,1fr); }
.road-grid { grid-template-columns:repeat(4,1fr); }
.point-grid { grid-template-columns:repeat(3,1fr); }
.point-grid small { display:block; color:#75869a; }
.empty { padding:18px; background:var(--soft); border:1px solid var(--line); margin:0; }
.empty-page { text-align:center; padding:80px 0; }
footer { border-top:1px solid var(--line); padding:22px 16px; text-align:center; color:#65788d; }
footer span { margin:0 8px; }
.footer-menu { width:min(1120px,100%); margin:0 auto 14px; display:grid; grid-template-columns:repeat(5,1fr); background:#3765a3; }
.footer-menu a { color:#fff; padding:8px 2px; border-right:1px solid #7291bc; }
.footer-meta { margin-bottom:6px; }
.footer-meta i { font-style:normal; }
.footer-meta em { font-style:normal; margin-left:10px; font-size:13px; color:#8997a6; }
@media (max-width:700px) {
  body { font-size:15px; }
  .site-header { padding:14px 8px; }
  .site-title { font-size:21px; padding-left:4px; }
  .site-header nav a { font-size:12px; padding:9px 1px; white-space:nowrap; }
  main { width:calc(100% - 20px); padding-top:12px; }
  h1 { font-size:23px; }
  h2 { font-size:19px; }
  .search-form { grid-template-columns:1fr 70px; }
  .province-grid,.road-grid,.point-grid { grid-template-columns:repeat(2,1fr); }
  .summary-point-grid { grid-template-columns:repeat(2,1fr); }
  .directory-heading.with-more { align-items:start; }
  .broadcast-item { grid-template-columns:112px minmax(0,1fr); gap:7px; font-size:14px; }
  .traffic-card { padding:11px 10px; }
  .traffic-text { font-size:17px; }
  .footer-menu a { font-size:12px; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) { .broadcast-track { animation:none!important; } }
