:root{--bg:#f5f6f8;--card:#fff;--text:#1a1a1a;--muted:#6b7280;--accent:#e2231a;}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}
a{color:inherit;text-decoration:none;}

.topbar{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--accent);color:#fff;border-radius:8px;font-weight:800;}
.nav a{margin-left:22px;color:var(--muted);font-size:15px;}
.nav a:hover{color:var(--accent);}

.hero{background:linear-gradient(135deg,#2b2f36,#3a4049);color:#fff;padding:46px 0 60px;}
.hero h1{margin:0 0 8px;font-size:34px;}
.hero p{margin:0 0 26px;color:#c7ccd4;}

.route-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;background:#fff;padding:18px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);}
.route-form .field{flex:1;min-width:200px;}
.route-form label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
.route-form select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:9px;font-size:15px;background:#fafafa;color:#1a1a1a;}
.route-form .swap{color:var(--muted);font-size:22px;padding-bottom:10px;}
.route-form button{padding:13px 26px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;}
.route-form button:hover{background:#c11d15;}

.result-section{padding:30px 0;}
.alert{background:#fff4f4;border:1px solid #f3c2c0;color:#b3271f;padding:16px;border-radius:12px;}
.result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.result-head h2{margin:0;font-size:22px;}
.stats{display:flex;gap:16px;color:var(--muted);font-size:14px;flex-wrap:wrap;}
.route-steps{list-style:none;margin:0;padding:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.step{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid #f0f0f0;}
.step:last-child{border-bottom:none;}
.step .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px #fff, 0 0 0 4px currentColor;}
.st-name{font-weight:600;}
.tag{font-size:12px;color:var(--muted);margin-left:auto;}
.transfer-tag{background:#fff3cd;color:#8a6d00;padding:3px 8px;border-radius:6px;}
.step-transfer{background:#fffdf5;}

.scheme{padding:40px 0;}
.scheme h2,.stations-list h2{font-size:26px;margin:0 0 22px;}
.lines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.line-card{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.line-title{display:flex;align-items:center;gap:10px;font-weight:700;padding-bottom:10px;margin-bottom:10px;border-bottom:3px solid;}
.line-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:14px;font-weight:800;}
.line-stations{list-style:none;margin:0;padding:0;}
.line-stations li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;}
.tick{width:10px;height:10px;border-radius:50%;flex:none;}

.stations-list{padding:20px 0 50px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{background:#fff;border:1px solid #e5e7eb;padding:7px 13px;border-radius:20px;font-size:14px;}

.footer{background:#2b2f36;color:#aeb4bd;padding:24px 0;font-size:14px;}
@media(max-width:600px){.hero h1{font-size:26px;}.route-form .swap{display:none;}}