/* ============================================================
   南昌包车网 · 公交站牌 / 电子线路牌设计
   骨架：左侧竖排站牌导航 + 右侧候车亭电子屏内容区
   视觉：深夜候车亭墨蓝底 + 荧光琥珀橙 + 点阵电子屏
   ============================================================ */
:root{
  --night:#0c111c;          /* 候车亭底色 */
  --panel:#121a29;          /* 面板 */
  --panel-2:#0e1522;
  --ink:#e9e6dc;            /* 暖白主字 */
  --dim:#8b93a3;            /* 次级文字 */
  --faint:#5b6474;
  --amber:#ffb000;          /* 站牌主信号色（琥珀橙）*/
  --amber-deep:#e09a00;
  --green:#3ddc84;          /* 信息屏状态绿 */
  --red:#ff4d4d;            /* 警示 */
  --line:#273044;           /* 细线 */
  --led:#1a2334;            /* LED 点阵底 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--night);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
button,input,textarea,select{font-family:inherit;color:inherit}

/* ============ 顶部车头线路牌 ============ */
.topboard{
  position:sticky;top:0;z-index:60;
  background:var(--panel-2);border-bottom:2px solid var(--amber);
}
.topboard-inner{
  max-width:1280px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:16px;
}
.route-plate{
  flex:none;background:var(--amber);color:#10131a;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight:800;font-size:15px;letter-spacing:.06em;
  padding:6px 12px;border-radius:2px;
}
.topboard-brand{font-size:20px;font-weight:900;letter-spacing:.02em}
.topboard-brand small{display:block;font-size:11px;color:var(--dim);font-weight:500;letter-spacing:.16em;margin-top:2px}
.topboard-phone{margin-left:auto;text-align:right}
.topboard-phone .t-label{font-size:10px;color:var(--dim);letter-spacing:.18em;display:block}
.topboard-phone a{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:17px;font-weight:800;color:var(--amber);
  font-variant-numeric:tabular-nums;
}

/* ============ 左右骨架：竖排站牌 + 内容 ============ */
.layout{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:216px 1fr;gap:0;min-height:100vh}

/* 竖排站牌导航 */
.stop-pole{position:sticky;top:78px;align-self:start;padding:22px 14px 40px}
.stop-pole .pole-cap{text-align:left;font-size:11px;color:var(--dim);letter-spacing:.2em;margin-bottom:14px}
.stop-list{list-style:none;border-left:3px solid var(--amber)}
.stop-list li{position:relative;margin:0}
.stop-list a{
  display:block;padding:11px 16px;font-size:14px;color:var(--dim);
  letter-spacing:.06em;position:relative;
}
.stop-list a::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--night);
  border:3px solid var(--faint);
}
.stop-list li.on a{color:var(--ink);font-weight:800}
.stop-list li.on a::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,176,0,.18)}
.stop-list a:hover{color:var(--ink)}
.stop-list .stop-no{
  font-family:ui-monospace,monospace;font-size:10px;color:var(--faint);
  margin-right:8px;letter-spacing:0;
}

/* 内容区 */
.stage{padding:0 22px 60px}
@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .stop-pole{position:static;padding:12px 0 6px}
  .stop-list{display:flex;flex-wrap:wrap;gap:4px;border-left:0}
  .stop-list a{padding:6px 10px;border:1px solid var(--line);font-size:12px}
  .stop-list a::before{display:none}
  .stop-pole .pole-cap{display:none}
  .topboard-inner{flex-wrap:wrap}
}

/* ============ 电子线路牌 Hero ============ */
.led-hero{
  margin-top:20px;background:var(--led);
  border:1px solid var(--line);border-left:4px solid var(--amber);
  padding:34px 30px;position:relative;overflow:hidden;
}
.led-hero::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px);
  pointer-events:none;
}
.led-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;position:relative;z-index:1}
.led-line{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;color:var(--green);letter-spacing:.22em;margin-bottom:14px;
}
.led-line .blink{color:var(--amber)}
.led-hero h1{
  font-size:clamp(44px,6vw,76px);font-weight:900;line-height:1.02;
  letter-spacing:.01em;color:var(--amber);
  text-shadow:0 0 18px rgba(255,176,0,.35);
}
.led-sub{font-size:15px;color:var(--ink);margin-top:12px;max-width:520px}
.led-sub b{color:var(--green)}
.led-marquee{margin-top:18px;font-family:ui-monospace,monospace;font-size:13px;color:var(--dim);letter-spacing:.04em}
.led-marquee .dot{color:var(--amber)}

/* 服务信息（首末班车式） */
.svc-board{border:1px solid var(--line);background:var(--panel-2)}
.svc-board .svc-title{font-size:10px;color:var(--dim);letter-spacing:.24em;padding:8px 14px;border-bottom:1px solid var(--line)}
.svc-row{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.svc-row:last-child{border-bottom:0}
.svc-row .k{color:var(--dim)}
.svc-row .v{font-family:ui-monospace,monospace;font-weight:700;color:var(--ink)}
.svc-row .v.hot{color:var(--amber)}
@media(max-width:880px){.led-grid{grid-template-columns:1fr}}

/* ============ 区块通用 ============ */
.block{padding:44px 0 8px}
.block-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;border-bottom:2px solid var(--line);padding-bottom:10px}
.block-no{font-family:ui-monospace,monospace;font-size:12px;color:var(--amber);letter-spacing:.14em;font-weight:700}
.block-title{font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:.01em}
.block-sub{font-size:12px;color:var(--dim);margin-left:auto;text-align:right}
.block-note{font-size:13px;color:var(--dim);margin:6px 0 18px}

/* ============ 车型电子屏 ============ */
.fleet-screen{background:var(--panel);border:1px solid var(--line);padding:20px}
.fleet-screen .screen-bar{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.screen-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.screen-bar .dot.live{background:var(--green);box-shadow:0 0 8px var(--green)}
.screen-bar .screen-label{font-family:ui-monospace,monospace;font-size:12px;color:var(--dim);letter-spacing:.18em;margin-left:auto}
.fleet-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fleet-line{border:1px solid var(--line);background:var(--panel-2);padding:18px}
.fleet-line .fl-no{font-family:ui-monospace,monospace;font-size:13px;color:var(--amber);font-weight:700;letter-spacing:.1em}
.fleet-line h3{font-size:20px;font-weight:900;margin:8px 0 4px}
.fleet-line .fl-fit{font-size:12px;color:var(--dim);margin-bottom:12px}
.fleet-line .fl-stat{display:flex;gap:14px;font-size:12px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px;margin-bottom:12px}
.fl-stat b{font-family:ui-monospace,monospace;color:var(--amber)}
.fleet-line .fl-use{font-size:12px;color:var(--dim)}
.fleet-line .fl-link{display:inline-block;margin-top:12px;font-size:12px;color:var(--green);font-weight:700}
@media(max-width:880px){.fleet-lines{grid-template-columns:1fr}}

/* ============ 公交线路图（竖排站点） ============ */
.bus-route{border:1px solid var(--line);background:var(--panel);margin-bottom:18px;padding:0}
.bus-route .br-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.br-no{background:var(--amber);color:#10131a;font-family:ui-monospace,monospace;font-weight:800;font-size:13px;padding:4px 10px;border-radius:2px;flex:none}
.br-title{font-size:17px;font-weight:900}
.br-head .br-meta{margin-left:auto;font-size:12px;color:var(--dim);text-align:right}
.br-body{display:grid;grid-template-columns:200px 1fr;gap:0}
.br-body img{width:100%;height:100%;object-fit:cover;min-height:170px}
.br-stops{padding:16px 20px}
.br-stops .stops{list-style:none;counter-reset:st;border-left:2px solid var(--line);padding-left:16px;margin:8px 0 12px}
.br-stops .stops li{position:relative;padding:3px 0;font-size:13px;color:var(--ink)}
.br-stops .stops li::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:-30px;top:5px;font-family:ui-monospace,monospace;
  font-size:10px;color:var(--amber);width:26px;text-align:right;
}
.br-stops .stops li::after{
  content:"";position:absolute;left:-23px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--night);border:2px solid var(--amber);
}
.br-facts{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--dim);margin-top:8px}
.br-facts b{color:var(--ink)}
.br-price{margin-top:8px;font-size:13px;color:var(--green)}
@media(max-width:880px){.br-body{grid-template-columns:1fr}.br-body img{min-height:180px}}

/* ============ 驾驶员公示牌 ============ */
.driver-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.d-board{border:1px solid var(--line);background:var(--panel);overflow:hidden}
.d-board img{width:100%;height:230px;object-fit:cover;filter:grayscale(.15) contrast(1.03)}
.d-board .d-inner{padding:16px}
.d-board .d-id{font-family:ui-monospace,monospace;font-size:11px;color:var(--green);letter-spacing:.14em}
.d-board h4{font-size:18px;font-weight:900;margin:6px 0 2px}
.d-board .d-line{font-size:12px;color:var(--amber);margin-bottom:10px}
.d-board .d-note{font-size:12px;color:var(--dim);margin-bottom:12px;min-height:54px}
.d-board .d-tel{display:block;font-family:ui-monospace,monospace;font-size:15px;font-weight:800;color:var(--ink);border-top:1px dashed var(--line);padding-top:10px}
.d-board .d-tel:hover{color:var(--amber)}
@media(max-width:880px){.driver-board{grid-template-columns:1fr}}

/* ============ 区域联络调度表 ============ */
.dispatch{width:100%;border-collapse:collapse;font-size:13px}
.dispatch th{font-family:ui-monospace,monospace;font-size:11px;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:2px solid var(--amber);letter-spacing:.1em}
.dispatch td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.dispatch tr:hover td{background:var(--panel)}
.dispatch td .z-name{font-weight:700}
.dispatch td a{font-family:ui-monospace,monospace;color:var(--amber);font-weight:700}
@media(max-width:880px){.dispatch{display:block;overflow-x:auto}}

/* ============ 报价票价表 ============ */
.fare-board{border:1px solid var(--line);background:var(--panel)}
.fare-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.fare-row:last-child{border-bottom:0}
.fare-row.head{background:var(--panel-2)}
.fare-row.head .fc{font-family:ui-monospace,monospace;font-size:11px;color:var(--dim);letter-spacing:.1em}
.fc{padding:12px 14px;font-size:13px;border-right:1px solid var(--line)}
.fc:last-child{border-right:0}
.fc b{color:var(--amber)}
@media(max-width:880px){.fare-row{grid-template-columns:1fr 1fr}.fc{border-right:0;border-bottom:1px solid var(--line)}}

/* ============ 服务流程 ============ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:fl}
.flow-step{border:1px solid var(--line);background:var(--panel);padding:18px;position:relative}
.flow-step::before{counter-increment:fl;content:"0" counter(fl);font-family:ui-monospace,monospace;font-size:13px;color:var(--amber);font-weight:700}
.flow-step h4{font-size:15px;font-weight:900;margin:8px 0 4px}
.flow-step p{font-size:12px;color:var(--dim)}
@media(max-width:880px){.flow{grid-template-columns:1fr 1fr}}

/* ============ FAQ ============ */
.faq{border:1px solid var(--line);background:var(--panel)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:15px 18px;font-size:14px;font-weight:700;list-style:none;position:relative;padding-right:40px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--amber);font-family:ui-monospace,monospace;font-size:18px}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 18px 16px;font-size:13px;color:var(--dim)}

/* ============ CTA ============ */
.cta{background:var(--amber);color:#10131a;margin-top:40px;border-radius:2px}
.cta-inner{padding:32px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-inner .cta-t{font-size:24px;font-weight:900}
.cta-inner .cta-s{font-size:13px;opacity:.78;margin-top:4px}
.cta-phone a{font-family:ui-monospace,monospace;font-size:30px;font-weight:900;color:#10131a;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cta-phone a:hover{text-decoration:underline}

/* ============ 页脚（站牌底部） ============ */
.site-foot{border-top:2px solid var(--amber);margin-top:40px;background:var(--panel-2)}
.foot-inner{max-width:1280px;margin:0 auto;padding:30px 22px;font-size:12px;color:var(--dim)}
.foot-inner .f-brand{font-size:16px;font-weight:900;color:var(--ink);margin-bottom:8px}
.foot-inner p{max-width:760px}
.foot-inner a{color:var(--dim)}
.foot-inner a:hover{color:var(--amber)}

/* ============ 表单 ============ */
input,textarea,select{width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:14px;border-radius:2px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--amber)}
button{padding:13px 22px;border:0;background:var(--amber);color:#10131a;font-weight:800;font-size:14px;cursor:pointer;border-radius:2px}
button:hover{background:var(--amber-deep)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.form-group{margin-bottom:16px}
label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px;letter-spacing:.04em}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}}

/* ============ 通用文字页 ============ */
.prose{max-width:820px}
.prose h2{font-size:20px;font-weight:900;margin:28px 0 10px;padding-left:12px;border-left:4px solid var(--amber)}
.prose h3{font-size:16px;font-weight:800;margin:20px 0 8px;color:var(--amber)}
.prose p{font-size:14px;color:var(--dim);margin:10px 0}
.prose p b{color:var(--ink)}
.prose ul,.prose ol{margin:10px 0 10px 22px;color:var(--dim);font-size:14px}
.prose li{margin:6px 0}
.prose .check{list-style:none;margin-left:0}
.prose .check li{padding-left:26px;position:relative}
.prose .check li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}

/* ============ 404 ============ */
.p404{padding:80px 24px;text-align:left}
.p404 .led-404{font-family:ui-monospace,monospace;font-size:90px;font-weight:900;color:var(--amber);text-shadow:0 0 24px rgba(255,176,0,.4);line-height:1}
.p404 p{color:var(--dim);margin:16px 0 24px;max-width:480px}
