/* ================================================================
 *  公交查询网 - 全站样式 v2026.08.05
 *  与 template/*.tpl 类名严格匹配
 * ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    line-height: 1.6;
    font-size: 14px;
    min-height: 100vh;
}
a { color: #2563eb; text-decoration: none; transition: color .15s; }
a:hover { color: #1e40af; text-decoration: underline; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ================================================================
 *  容器
 * ================================================================ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ================================================================
 *  头部 topbar
 * ================================================================ */
.topbar {
    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.topbar .logo {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar .logo:hover { text-decoration: none; opacity: .9; }
.topbar .logo .icon {
    background: #f59e0b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}
.topbar nav { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.topbar nav a {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}
.topbar nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
    text-decoration: none;
}

/* ================================================================
 *  搜索 hero
 * ================================================================ */
.search-hero {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    padding: 36px 16px 40px;
    text-align: center;
}
.search-h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 22px;
    letter-spacing: 1px;
}
.search-h1 span { color: #fbbf24; }

.search-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 18px;
    background: rgba(0,0,0,.18);
    padding: 4px;
    border-radius: 8px;
}
.search-tabs .stab {
    padding: 7px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255,255,255,.85);
    user-select: none;
    transition: all .2s;
}
.search-tabs .stab:hover { color: #fff; }
.search-tabs .stab.active {
    background: #fff;
    color: #1e40af;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.search-panel { display: none; }
.search-panel.active { display: block; }

.search-row {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.search-row input {
    flex: 1;
    min-width: 220px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    background: #fff;
    color: #2c3e50;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.search-row button {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    transition: background .2s;
}
.search-row button:hover { background: #d97706; }

.xfer-row {
    display: flex;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.xfer-row input {
    flex: 1;
    min-width: 140px;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #2c3e50;
}
.xfer-row .swap-icon {
    background: rgba(255,255,255,.18);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background .2s;
}
.xfer-row .swap-icon:hover { background: rgba(255,255,255,.3); }
.xfer-row button {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.xfer-row button:hover { background: #d97706; }

/* ================================================================
 *  面包屑
 * ================================================================ */
.breadcrumb {
    padding: 14px 0 10px;
    color: #6b7280;
    font-size: 13px;
}
.breadcrumb a { color: #2563eb; }
.breadcrumb span { color: #4b5563; }

/* ================================================================
 *  卡片
 * ================================================================ */
.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

/* ================================================================
 *  字母导航
 * ================================================================ */
.letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.letter-nav a {
    padding: 4px 11px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 13px;
    color: #4b5563;
    font-weight: 600;
    transition: all .15s;
}
.letter-nav a:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

/* ================================================================
 *  首页：城市分组
 * ================================================================ */
.city-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.city-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}
.letter-badge {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 4px;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.city-grid a {
    padding: 9px 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
    color: #1f2937;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .15s;
}
.city-grid a:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    text-decoration: none;
}
.city-grid a .rc {
    background: rgba(0,0,0,.06);
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}
.city-grid a:hover .rc {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* 热门城市入口 */
.hot-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.hot-entry a {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #2563eb;
    color: #2563eb;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
}
.hot-entry a:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

/* ================================================================
 *  城市页：路线分组
 * ================================================================ */
.route-group {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 14px;
}
.route-group h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    border-left: 4px solid #2563eb;
    padding-left: 10px;
}
.route-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.route-list a {
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 4px;
    color: #1f2937;
    font-size: 13px;
    text-align: center;
    border: 1px solid #f3f4f6;
}
.route-list a:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

/* ================================================================
 *  线路详情页
 * ================================================================ */
.route-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    margin: 14px 0;
}
.route-info-bar .info-item { font-size: 13px; }
.route-info-bar .info-item .label {
    color: #95a5a6;
    font-size: 12px;
    margin-bottom: 2px;
}
.route-info-bar .info-item .value {
    color: #2c3e50;
    font-weight: 600;
}

.dir-tabs {
    display: flex;
    gap: 4px;
    margin: 14px 0 10px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.dir-tab {
    padding: 10px 18px;
    cursor: pointer;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    transition: all .15s;
    font-size: 14px;
}
.dir-tab:hover { color: #2563eb; }
.dir-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 700;
}
.dir-name { display: inline-block; margin-right: 8px; }
.dir-meta {
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.dir-panel { display: none; }
.dir-panel.active { display: block; }

.stop-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.stop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #d1d5db;
}
.stop-item.first { border-left-color: #10b981; background: #f0fdf4; }
.stop-item.last  { border-left-color: #ef4444; background: #fef2f2; }
.stop-num {
    background: #2563eb;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.stop-item.first .stop-num { background: #10b981; }
.stop-item.last  .stop-num { background: #ef4444; }
.stop-name { flex: 1; color: #1f2937; font-size: 14px; }
.stop-name a { color: #1f2937; }
.stop-name a:hover { color: #2563eb; text-decoration: none; }

/* ================================================================
 *  站点页 + 换乘页 通用：xfer-list
 * ================================================================ */
.xfer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xfer-list a {
    padding: 8px 14px;
    background: #f3f4f6;
    border-radius: 6px;
    color: #1f2937;
    font-size: 13px;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xfer-list a:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}
.xfer-list a .x-count {
    background: rgba(0,0,0,.06);
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}
.xfer-list a:hover .x-count {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* 站点列表（站点页用）*/
.xfer-stop-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xfer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background .15s;
}
.xfer-item:hover { background: #f9fafb; }
.xfer-item.highlight {
    background: linear-gradient(90deg, #ecfdf5 0%, transparent 100%);
    font-weight: 600;
}
.xfer-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}
.xfer-item.highlight .xfer-dot { background: #2563eb; width: 14px; height: 14px; }
.xfer-name { flex: 1; color: #1f2937; font-size: 14px; }
.xfer-name a { color: #2563eb; }
.xfer-name a:hover { color: #1e40af; }

/* 途经线路块（站点页用）*/
.route-block {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f5;
}
.route-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.route-block h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* 路线徽章 */
.plan-badge,
.route-tag {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}
.plan-badge:hover,
.route-tag:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    text-decoration: none;
    color: #fff !important;
}

/* 换乘方案 */
.transfer-plan {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    background: #fafbfc;
}
.transfer-plan h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.transfer-plan .plan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.transfer-plan .plan-tags span::before {
    content: '·';
    margin-right: 4px;
    color: #cbd5e1;
}
.transfer-plan .plan-tags span:first-child::before { content: none; }

/* 经过起终点的线路 */
.passby-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.passby-routes a {
    padding: 6px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #2563eb;
    font-size: 13px;
}
.passby-routes a:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    text-decoration: none;
}

/* ================================================================
 *  搜索结果页
 * ================================================================ */
.result-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    border-left: 4px solid #2563eb;
    padding-left: 10px;
}
.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.result-item {
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
    color: #1f2937;
    transition: all .15s;
}
.result-item:hover {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1f2937;
    text-decoration: none;
}
.result-item .r-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.result-item .r-meta {
    color: #6b7280;
    font-size: 12px;
}

/* ================================================================
 *  空状态
 * ================================================================ */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #9ca3af;
}
.empty-state .es-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: .6;
}
.empty-state p {
    color: #6b7280;
    font-size: 14px;
    margin: 4px 0;
}

/* ================================================================
 *  line.tpl 备用样式（detail-card）
 * ================================================================ */
.detail-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 14px;
}
.detail-header { padding: 18px 20px; }
.line-num {
    font-size: 22px;
    font-weight: 800;
    color: #1a3a5c;
    margin-bottom: 6px;
}
.line-direction {
    color: #5a6c7d;
    font-size: 14px;
    margin-bottom: 6px;
}
.line-direction .arrow { color: #2563eb; font-weight: 700; padding: 0 6px; }
.line-meta { color: #95a5a6; font-size: 13px; }
.line-meta span { margin-right: 14px; }

.stop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.stop-items .stop-item {
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    border-left-width: 3px;
}
.stop-items .stop-item.first { background: #f0fdf4; border-left-color: #10b981; }
.stop-items .stop-item.end   { background: #fef2f2; border-left-color: #ef4444; }

.hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hot-card {
    padding: 8px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #2563eb;
}
.hot-card:hover { background: #2563eb; color: #fff; text-decoration: none; }
.route-badge {
    background: #2563eb;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}

/* ================================================================
 *  footer
 * ================================================================ */
.footer {
    margin-top: 30px;
    padding: 24px 16px;
    background: #1f2937;
    color: #9ca3af;
    text-align: center;
    font-size: 13px;
    border-top: 1px solid #e5e7eb;
}
.footer > div { margin-bottom: 6px; }
.footer > div:last-child { margin-bottom: 0; }
.footer a { color: #cbd5e1; margin: 0 8px; }
.footer a:hover { color: #fff; }
.footer .ft-stats {
    color: #6b7280;
    font-size: 12px;
    padding-top: 10px;
    border-top: 1px solid #374151;
    margin-top: 12px;
}

/* ================================================================
 *  响应式
 * ================================================================ */
@media (max-width: 768px) {
    body { font-size: 13px; }
    .topbar { padding: 10px 12px; gap: 12px; }
    .topbar .logo { font-size: 16px; }
    .search-hero { padding: 24px 12px 28px; }
    .search-h1 { font-size: 22px; margin-bottom: 14px; }
    .search-tabs { margin-bottom: 12px; }
    .search-tabs .stab { padding: 6px 14px; font-size: 13px; }
    .search-row input, .xfer-row input { font-size: 14px; padding: 10px 12px; }
    .city-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
    .city-grid a { padding: 7px 10px; font-size: 13px; }
    .route-list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .result-grid { grid-template-columns: 1fr; }
    .route-info-bar { gap: 8px; }
    .dir-tab { padding: 8px 12px; font-size: 13px; }
    .stop-item { padding: 8px 10px; }
    .letter-nav { padding: 10px; }
    .card { padding: 14px; }
    .container { padding: 0 12px; }
}
@media (max-width: 480px) {
    .search-h1 { font-size: 18px; }
    .search-tabs .stab { padding: 5px 10px; font-size: 12px; }
    .city-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .xfer-row .swap-icon { width: 30px; height: 30px; font-size: 16px; }
}