/* ================================================
   地铁/轻轨查询网 - 样式表
   ================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", sans-serif;
    font-size: 15px;
    color: #333;
    background: #f5f6f8;
    line-height: 1.6;
}

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── 头部 ── */
.header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff;
    padding: 20px 0;
}
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.header .logo { font-size: 22px; font-weight: bold; }
.header .logo a { color: #fff; text-decoration: none; }
.header .nav a {
    color: rgba(255,255,255,0.85);
    margin-left: 18px;
    font-size: 14px;
}
.header .nav a:hover { color: #fff; text-decoration: none; }

/* ── 搜索框 ── */
.search-box {
    background: #fff;
    padding: 32px 0 24px;
    border-bottom: 1px solid #e5e7eb;
}
.search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    gap: 8px;
}
.search-form input[type="text"] {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.search-form input[type="text"]:focus { border-color: #2563eb; }
.search-form button {
    padding: 10px 28px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.search-form button:hover { background: #1d4ed8; }

/* ── 面包屑 ── */
.breadcrumb {
    font-size: 13px;
    color: #6b7280;
    padding: 12px 0;
}
.breadcrumb a { color: #6b7280; }
.breadcrumb a:hover { color: #2563eb; }
.breadcrumb span { margin: 0 6px; }

/* ── 首页城市卡片 ── */
.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 24px 0;
}
.city-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow .2s, transform .2s;
}
.city-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.city-card h3 { font-size: 17px; margin-bottom: 4px; }
.city-card h3 a { color: #1f2937; }
.city-card .meta {
    font-size: 12px;
    color: #9ca3af;
}

/* ── 线路列表 ── */
.line-list {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.line-item {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .2s;
}
.line-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    padding: 0 10px;
    flex-shrink: 0;
}
.line-item .info { flex: 1; }
.line-item .info h4 { font-size: 16px; margin-bottom: 2px; }
.line-item .info h4 a { color: #1f2937; }
.line-item .info .sub { font-size: 12px; color: #9ca3af; }
.line-item .arrow { color: #d1d5db; font-size: 18px; }

/* ── 线路颜色 ── */
.c-1  { background: #e74c3c; } /* 红色 1号线 */
.c-2  { background: #3498db; } /* 蓝色 2号线 */
.c-3  { background: #f39c12; } /* 橙色 3号线 */
.c-4  { background: #2ecc71; } /* 绿色 4号线 */
.c-5  { background: #9b59b6; } /* 紫色 5号线 */
.c-6  { background: #1abc9c; } /* 青色 6号线 */
.c-7  { background: #e67e22; } /* 深橙 7号线 */
.c-8  { background: #27ae60; } /* 深绿 8号线 */
.c-9  { background: #2980b9; } /* 深蓝 9号线 */
.c-10 { background: #c0392b; } /* 深红 10号线 */
.c-default { background: #6366f1; }

/* ── 线路详情 ── */
.line-detail { padding: 24px 0; }
.line-header {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.line-header .info h2 { font-size: 22px; color: #1f2937; }
.line-header .info .meta { font-size: 13px; color: #9ca3af; margin-top: 4px; }

.station-list {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.station-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}
.station-row:last-child { border-bottom: none; }
.station-row:hover { background: #f9fafb; }
.station-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}
.station-row .name { flex: 1; font-size: 15px; }
.station-row .name a { color: #1f2937; }
.station-row .tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    flex-shrink: 0;
}

/* ── 站点详情 ── */
.station-detail { padding: 24px 0; }
.station-info {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.station-info h2 { font-size: 22px; color: #1f2937; }
.station-info .meta { font-size: 13px; color: #9ca3af; margin-top: 4px; }

.station-lines {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.station-lines .section-title {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: bold;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}
.station-line-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.station-line-row:last-child { border-bottom: none; }
.station-line-row .name { flex: 1; }
.station-line-row .name a { color: #1f2937; }

/* ── 换乘结果 ── */
.xfer-result { padding: 24px 0; }
.xfer-summary {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #065f46;
}
.xfer-path {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.xfer-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.xfer-step:last-child { border-bottom: none; }
.xfer-step .badge {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.xfer-step .badge.start { background: #10b981; }
.xfer-step .badge.end { background: #ef4444; }
.xfer-step .content { flex: 1; }
.xfer-step .station-name { font-size: 15px; font-weight: 600; color: #1f2937; }
.xfer-step .line-name { font-size: 12px; color: #6366f1; margin-top: 2px; }
.xfer-transfer {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 8px 20px;
    font-size: 13px;
    color: #92400e;
}

.xfer-form {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 24px;
    margin: 24px 0;
}
.xfer-form .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.xfer-form .form-row label {
    min-width: 60px;
    font-weight: 600;
    font-size: 14px;
}
.xfer-form input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    min-width: 200px;
}
.xfer-form button {
    padding: 10px 32px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    margin-top: 8px;
}

/* ── 搜索 ── */
.search-results { padding: 24px 0; }
.result-section { margin-bottom: 20px; }
.result-section h3 {
    font-size: 16px;
    color: #374151;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2563eb;
}
.result-item {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 12px 18px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.result-item .name { flex: 1; font-size: 15px; }
.result-item .name a { color: #1f2937; }
.result-item .sub { font-size: 12px; color: #9ca3af; }

/* ── 底部 ── */
.footer {
    text-align: center;
    padding: 24px 0;
    font-size: 12px;
    color: #9ca3af;
    border-top: 1px solid #e5e7eb;
    margin-top: 40px;
}

/* ── 404 ── */
.not-found {
    text-align: center;
    padding: 80px 0;
}
.not-found h2 { font-size: 48px; color: #d1d5db; margin-bottom: 12px; }
.not-found p { font-size: 16px; color: #6b7280; }

/* ── 响应式 ── */
@media (max-width: 640px) {
    .city-grid { grid-template-columns: repeat(2, 1fr); }
    .header .logo { font-size: 18px; }
    .header .nav a { margin-left: 10px; font-size: 13px; }
}

/* ── 换乘页多方案卡片 ── */
.xfer-brief {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0 20px;
    color: #0c4a6e;
    font-size: 14px;
    line-height: 1.7;
}
.xfer-brief strong { color: #0369a1; }

.xfer-routes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 20px 0 30px;
}
.xfer-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow .2s;
}
.xfer-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.xfer-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg, #eff6ff 0%, #f9fafb 100%);
    border-bottom: 1px solid #e5e7eb;
}
.xfer-card-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.xfer-card-tag.tag-recom { background: #ef4444; }   /* 推荐 红 */
.xfer-card-tag.tag-alt   { background: #6366f1; }   /* 备选 紫蓝 */
.xfer-card-lines {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}
.xfer-card-map {
    color: #2563eb;
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
}
.xfer-card-map:hover { text-decoration: underline; }

.xfer-card-body { padding: 8px 0 0; }
.xfer-card-summary {
    padding: 12px 18px;
    background: #fefce8;
    border-top: 1px dashed #fde68a;
    font-size: 14px;
    color: #854d0e;
    font-weight: 500;
}

/* ── 换乘时间线 ── */
.xfer-timeline {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.xfer-step {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px 18px;
    position: relative;
}
.xfer-step + .xfer-step::before {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 2px;
    height: 8px;
    background: #e5e7eb;
}
.xfer-step-marker {
    flex-shrink: 0;
    width: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    position: relative;
}
.xfer-step-marker::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 36px;
    bottom: -14px;
    width: 2px;
    background: #e5e7eb;
}
.xfer-step:last-child .xfer-step-marker::after { display: none; }
.xfer-step-start .marker-start,
.xfer-step-end   .marker-end,
.xfer-step-transfer .marker-transfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    z-index: 1;
}
.marker-start    { background: #10b981; box-shadow: 0 0 0 4px #d1fae5; }
.marker-end      { background: #ef4444; box-shadow: 0 0 0 4px #fee2e2; }
.marker-transfer { background: #f59e0b; box-shadow: 0 0 0 4px #fef3c7; }

.xfer-step-text { flex: 1; }
.xfer-step-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}
.xfer-step-title em {
    font-style: normal;
    font-size: 12px;
    color: #fff;
    background: #6b7280;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}
.xfer-step-start .xfer-step-title em { background: #10b981; }
.xfer-step-end   .xfer-step-title em { background: #ef4444; }
.xfer-step-transfer .xfer-step-title em { background: #f59e0b; }
.xfer-step-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
}

/* ── 换乘页 FAQ 与相关链接 ── */
.xfer-faq,
.xfer-related {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 18px;
}
.xfer-faq h2,
.xfer-related h3 {
    font-size: 16px;
    color: #1f2937;
    margin-bottom: 12px;
    border-left: 4px solid #2563eb;
    padding-left: 10px;
}
.xfer-faq ul { list-style: none; padding: 0; }
.xfer-faq li {
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
}
.xfer-faq li:last-child { border-bottom: none; }
.xfer-faq strong { color: #1f2937; }
.xfer-faq li a { color: #2563eb; text-decoration: none; }
.xfer-faq li a:hover { text-decoration: underline; }

.xfer-related-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xfer-related-list a {
    display: inline-block;
    padding: 5px 12px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.xfer-related-list a:hover { background: #fde68a; }

.xfer-empty {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: 20px 24px;
    color: #9a3412;
    font-size: 14px;
    line-height: 1.8;
}
.xfer-empty a { color: #ea580c; }

.update-date {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 14px;
}