* { margin: 0; padding: 0; box-sizing: border-box; }
        * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        body, input, button, select, textarea { text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
        img, svg { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
        
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #94a3b8;
            --bg: #0f172a;
            --card: #1e293b;
            --card-hover: #334155;
            --text: #f8fafc;
            --border: #334155;
            --shadow: 0 4px 12px rgba(0,0,0,0.4);
            --flight: #60a5fa;
            --train: #34d399;
            --accent: #fbbf24;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container { max-width: 1100px; margin: 0 auto; }
        
        header { text-align: center; margin-bottom: 24px; padding: 16px 0; }
        h1 {
            font-size: 24px; font-weight: 700;
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .subtitle { color: var(--secondary); font-size: 12px; margin-top: 4px; }
        
        .search-box {
            background: var(--card); border-radius: 12px; padding: 16px;
            box-shadow: var(--shadow); border: 1px solid var(--border);
        }
        .search-row {
            display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
        }
        .field { flex: 1; min-width: 180px; }
        label {
            display: block; color: var(--secondary); font-size: 11px;
            font-weight: 500; margin-bottom: 4px;
        }
        
        /* Searchable dropdown */
        .dropdown { position: relative; }
        .dropdown input {
            width: 100%; padding: 8px 28px 8px 10px;
            border: 1px solid var(--border); border-radius: 6px;
            font-size: 13px; background: rgba(0,0,0,0.3); color: var(--text);
            outline: none; transition: border-color 0.2s;
        }
        .dropdown input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
        .dropdown input::placeholder { color: var(--secondary); opacity: 0.7; }
        .dropdown .arrow {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            color: var(--secondary); font-size: 10px; pointer-events: none;
        }
        .dropdown .list {
            position: absolute; top: calc(100% + 4px); left: 0; right: 0;
            max-height: 240px; overflow-y: auto; background: var(--card);
            border: 1px solid var(--border); border-radius: 6px;
            box-shadow: var(--shadow); z-index: 1000; display: none;
        }
        .dropdown .list.open { display: block; }
        .dropdown .item {
            padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center; font-size: 13px;
        }
        .dropdown .item:hover { background: var(--card-hover); }
        .dropdown .item:last-child { border-bottom: none; }
        .dropdown .item .name { font-weight: 500; }
        .dropdown .item .badge {
            font-size: 10px; color: var(--primary); background: rgba(37,99,235,0.1);
            padding: 0 5px; border-radius: 6px;
        }
        .dropdown .empty { padding: 10px; text-align: center; color: var(--secondary); font-size: 11px; }
        
        /* Buttons */
        .btn-swap {
            width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
            background: transparent; color: var(--secondary); font-size: 14px;
            cursor: pointer; transition: all 0.2s; flex-shrink: 0;
        }
        .btn-swap:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: rotate(180deg); }
        .btn-search {
            padding: 8px 24px; background: var(--primary); color: #fff; border: none;
            border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
            transition: all 0.15s; flex-shrink: 0;
        }
        .btn-search:hover { background: var(--primary-dark); transform: translateY(-1px); }
        
        /* Filter bar */
        .filter-bar {
            display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
            margin: 16px 0 8px; padding: 10px 12px; background: var(--card);
            border-radius: 6px; border: 1px solid var(--border);
        }
        .filter-group { display: flex; gap: 6px; align-items: center; }
        .filter-label { font-size: 12px; color: var(--secondary); white-space: nowrap; }
        .filter-btn {
            padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border);
            background: transparent; color: var(--secondary); font-size: 11px;
            cursor: pointer; transition: all 0.15s;
        }
        .filter-btn:hover { border-color: var(--primary); color: var(--primary); }
        .filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
        .filter-btn.active[data-value="flight"] { background: var(--flight); border-color: var(--flight); }
        .filter-btn.active[data-value="train"] { background: var(--train); border-color: var(--train); }
        
        /* Results */
        .results-header {
            display: flex; justify-content: space-between; align-items: center;
            margin: 16px 0 8px; padding: 8px 12px; background: var(--card);
            border-radius: 6px; border: 1px solid var(--border);
        }
        .count { color: var(--secondary); font-size: 12px; }
        
        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        
        /* Search History */
        .history-section {
            margin-top: 16px; padding: 12px; background: var(--card);
            border-radius: 8px; border: 1px solid var(--border);
        }
        .history-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
        }
        .history-header span { font-size: 12px; color: var(--secondary); }
        .history-clear {
            font-size: 11px; color: var(--secondary); background: none; border: none;
            cursor: pointer; padding: 2px 6px; border-radius: 4px;
        }
        .history-clear:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
        .history-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .history-item {
            padding: 5px 10px; border-radius: 16px; border: 1px solid var(--border);
            background: transparent; color: var(--text); font-size: 12px;
            cursor: pointer; transition: all 0.15s; white-space: nowrap;
        }
        .history-item:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.05); }
        .history-empty { font-size: 11px; color: var(--secondary); text-align: center; padding: 6px; }
        
        .empty-state {
            text-align: center; padding: 36px 20px; background: var(--card);
            border-radius: 12px; border: 1px solid var(--border);
        }
        .empty-state .icon { font-size: 36px; opacity: 0.5; margin-bottom: 10px; }
        .empty-state .title { font-size: 15px; margin-bottom: 4px; }
        .empty-state .desc { color: var(--secondary); font-size: 12px; }
        
        .loading { text-align: center; padding: 24px; }
        .spinner {
            width: 24px; height: 24px; border: 3px solid var(--border);
            border-top-color: var(--primary); border-radius: 50%;
            animation: spin 0.8s linear infinite; margin: 0 auto 10px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        /* Score card styles */
        .score-card {
            background: var(--card); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 16px;
            transition: all 0.15s; cursor: default;
        }
        .score-card:hover { background: var(--card-hover); }
        .score-card-top {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 4px; min-height: 28px;
        }
        .score-card-top .rank-num {
            font-size: 13px; color: var(--secondary);
            background: rgba(255,255,255,0.06); border-radius: 50%;
            width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
            font-weight: 700; flex-shrink: 0;
        }
        .score-card.rank-1 .rank-num { background: #fbbf24; color: #000; }
        .score-card.rank-2 .rank-num { background: #94a3b8; color: #000; }
        .score-card.rank-3 .rank-num { background: #d97706; color: #000; }
        .score-card-top .score-display {
            display: flex; align-items: baseline; gap: 2px; flex-shrink: 0;
        }
        .score-card-top .score-num {
            font-size: 22px; font-weight: 800;
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .score-card-top .score-label {
            font-size: 11px; color: var(--secondary);
        }
        .score-card-route {
            display: flex; align-items: center; justify-content: center;
            gap: 6px; padding: 6px 0 4px; flex-wrap: nowrap;
        }
        .score-card-route .city {
            font-weight: 700; white-space: nowrap;
            padding: 0 2px; line-height: 1.3;
        }
        .score-card-route .city.from,
        .score-card-route .city.to {
            font-size: 18px; color: var(--secondary);
        }
        .score-card-route .city.transit {
            font-size: 22px; color: var(--text);
        }
        .score-card-route .mode-connector {
            display: flex; align-items: center; gap: 2px;
            font-size: 16px; color: var(--secondary);
            flex-shrink: 0; padding: 0 2px;
        }
        .score-card-route .mode-connector .arrow {
            font-size: 12px; color: var(--border); opacity: 0.4;
        }
        .score-card-stations {
            display: flex; align-items: center; justify-content: center;
            gap: 6px; font-size: 11px; color: var(--secondary);
            padding: 0 0 2px;
        }
        .score-card-stations .station-group {
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            padding: 0 2px;
        }
        .score-card-stations .station-group .sep {
            color: var(--border); opacity: 0.4;
        }

        /* Station chips */
        .station-chip {
            padding: 3px 10px; border-radius: 14px; border: 1px solid var(--border);
            background: transparent; color: var(--secondary); font-size: 11px;
            cursor: pointer; transition: all 0.15s; white-space: nowrap;
        }
        .station-chip:hover { border-color: var(--primary); color: var(--primary); }
        .station-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
        .station-chip-group {
            display: flex; gap: 4px; align-items: center;
            overflow-x: auto; flex-wrap: nowrap;
            padding-bottom: 2px; /* scrollbar 空间 */
        }
        .station-chip-group::-webkit-scrollbar { height: 2px; }
        .station-chip-group::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        @media (max-width: 768px) {
            .search-row { flex-direction: column; align-items: stretch; }
            .btn-swap, .btn-search { width: 100%; margin-top: 4px; }
            .btn-swap { align-self: center; }
            .results-grid { grid-template-columns: 1fr; }
        }