:root { color-scheme:dark; --background:#050607; --surface:#0b0d10; --surface-soft:#111419; --border:#262c33; --text:#f7f7f5; --muted:#9ba2aa; --orange:#ff4b0b; --orange-soft:rgba(255,75,11,.12); --green:#39c975; --blue:#3b82f6; --red:#ef4444; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; background:radial-gradient(circle at 75% 8%,rgba(255,75,11,.1),transparent 28rem),var(--background); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.page-shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { width:min(1440px,calc(100% - 3rem)); min-height:104px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:inline-flex; align-items:center; gap:.9rem; }
.brand-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15%; background:var(--orange); color:#170803; font-size:1.35rem; font-weight:900; box-shadow:0 0 28px rgba(255,75,11,.23); }
.brand > span:last-child { display:grid; gap:.25rem; }
.brand strong { font-size:.95rem; letter-spacing:.28rem; }
.brand small { color:var(--muted); font-size:.56rem; letter-spacing:.16rem; }
.topnav { display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); }
.topnav a { color:#c6cbd0; font-size:.75rem; font-weight:700; letter-spacing:.11rem; text-transform:uppercase; }
.topnav a:hover,.topnav a.active { color:var(--orange); }
.topnav .account-link { max-width:180px; padding:.8rem 1rem; overflow:hidden; border:1px solid var(--border); border-radius:999px; color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
main { flex:1; }

.hero { width:min(1240px,calc(100% - 3rem)); margin:0 auto; padding:clamp(4rem,9vw,8rem) 0 clamp(2rem,5vw,4rem); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.65fr); align-items:end; gap:clamp(2rem,7vw,7rem); }
.eyebrow { color:var(--orange); font-size:.7rem; font-weight:900; letter-spacing:.22rem; }
.hero h1 { max-width:780px; margin-top:1rem; font-size:clamp(3rem,7vw,6.8rem); font-weight:300; line-height:.92; letter-spacing:-.05em; }
.hero h1 span { color:var(--orange); font-weight:800; }
.hero-copy > p:last-child { max-width:650px; margin-top:1.4rem; color:var(--muted); line-height:1.7; }
.system-card { min-height:140px; padding:1.2rem; display:grid; grid-template-columns:52px minmax(0,1fr); gap:1rem; position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px; }
.system-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--orange-soft); color:var(--orange); font-size:1.5rem; }
.system-card strong { display:block; }
.system-card p { margin-top:.4rem; color:var(--muted); font-size:.82rem; line-height:1.5; }
.system-card b { position:absolute; right:1rem; bottom:1rem; padding:.35rem .55rem; border-radius:999px; background:rgba(255,183,77,.1); color:#f4bd60; font-size:.64rem; letter-spacing:.08rem; }
.notice { width:min(1240px,calc(100% - 3rem)); margin:0 auto 1rem; padding:1rem 1.2rem; display:grid; grid-template-columns:42px minmax(0,1fr); gap:1rem; align-items:center; background:rgba(255,183,77,.07); border:1px solid rgba(255,183,77,.2); border-radius:16px; }
.notice > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,183,77,.12); color:#f4bd60; font-weight:900; }
.notice strong { color:#f4bd60; }
.notice p { margin-top:.3rem; color:#c0b7a9; font-size:.82rem; line-height:1.5; }

.tracker-layout { width:min(1240px,calc(100% - 3rem)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.55fr); gap:1rem; }
.map-panel,.data-panel { background:linear-gradient(145deg,var(--surface-soft),var(--surface)); border:1px solid var(--border); border-radius:22px; }
.map-panel { overflow:hidden; }
.map-panel > header { padding:1.3rem; display:flex; align-items:end; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border); }
.map-panel h2,.data-panel h2 { margin-top:.55rem; font-size:1.4rem; }
.map-panel header > span { color:var(--muted); font-size:.72rem; }
.schematic { min-height:410px; position:relative; overflow:hidden; background:linear-gradient(145deg,#0c1316,#07090b); }
.grid-lines { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:38px 38px; }
.district { position:absolute; z-index:4; color:#c5cbd0; font-size:.7rem; font-weight:800; letter-spacing:.08rem; }
.district::before { content:""; width:9px; height:9px; margin-right:.35rem; display:inline-block; border:2px solid white; border-radius:50%; background:#111; }
.district.north { left:70%; top:12%; }.district.east { right:8%; top:38%; }.district.center { left:52%; top:48%; }.district.west { left:8%; top:37%; }.district.south { left:45%; bottom:8%; }.district.matina { left:61%; bottom:25%; }
.route-line { height:4px; position:absolute; z-index:2; border-radius:999px; transform-origin:left center; box-shadow:0 0 14px currentColor; }
.route-line i { width:11px; height:11px; position:absolute; top:50%; translate:-50% -50%; border:2px solid currentColor; border-radius:50%; background:#090b0d; }
.route-line i:nth-child(1){left:0}.route-line i:nth-child(2){left:33%}.route-line i:nth-child(3){left:67%}.route-line i:nth-child(4){left:100%}
.line-orange { width:62%; left:13%; top:45%; rotate:-18deg; background:var(--orange); color:var(--orange); }.line-green { width:48%; left:49%; top:52%; rotate:-34deg; background:var(--green); color:var(--green); }.line-blue { width:54%; left:8%; top:40%; rotate:22deg; background:var(--blue); color:var(--blue); }.line-red { width:43%; left:49%; top:50%; rotate:68deg; background:var(--red); color:var(--red); }
.map-water { position:absolute; right:8%; bottom:13%; color:rgba(70,160,210,.5); font-size:1.1rem; font-style:italic; }
.map-legend { position:absolute; left:1rem; bottom:1rem; z-index:5; padding:.75rem; display:flex; flex-wrap:wrap; gap:.7rem; background:rgba(0,0,0,.72); border:1px solid var(--border); border-radius:11px; }
.map-legend span { color:var(--muted); font-size:.68rem; }.map-legend i { width:8px; height:8px; margin-right:.3rem; display:inline-block; border-radius:50%; }.map-legend .orange{background:var(--orange)}.map-legend .green{background:var(--green)}.map-legend .blue{background:var(--blue)}.map-legend .red{background:var(--red)}
.data-panel { padding:1.4rem; }
.data-status { padding:1rem 0; display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid rgba(255,255,255,.07); }
.data-status span { color:#d5d8db; font-size:.83rem; }.data-status b { color:#f4bd60; font-size:.7rem; text-transform:uppercase; letter-spacing:.05rem; }
.data-note { margin-top:1rem; color:var(--muted); font-size:.8rem; line-height:1.55; }

.routes-section { width:min(1240px,calc(100% - 3rem)); margin:0 auto; padding:clamp(4rem,8vw,7rem) 0 4rem; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.section-head h2 { margin-top:.65rem; font-size:clamp(2rem,4vw,3.1rem); font-weight:500; }
.section-head > p { color:var(--muted); }.section-head > p strong { color:var(--text); font-size:1.5rem; }
.route-search { margin-top:2rem; padding:.65rem; display:grid; grid-template-columns:1.3fr .7fr auto; gap:.55rem; background:var(--surface); border:1px solid var(--border); border-radius:19px; }
.route-search label { min-width:0; padding:.55rem .75rem; }.route-search label span { display:block; margin-bottom:.35rem; color:#d5d8dc; font-size:.66rem; font-weight:800; letter-spacing:.07rem; text-transform:uppercase; }
.route-search input,.route-search select { width:100%; min-height:38px; border:0; outline:0; background:transparent; color:var(--text); }.route-search option{background:#111419}.route-search button { padding:0 1.3rem; border:0; border-radius:13px; background:var(--orange); color:white; font-weight:800; cursor:pointer; }
.route-grid { margin-top:1.5rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.route-card { min-height:280px; padding:1.3rem; display:grid; grid-template-columns:62px minmax(0,1fr); gap:1.2rem; background:linear-gradient(145deg,var(--surface-soft),var(--surface)); border:1px solid var(--border); border-radius:21px; }
.route-code { width:62px; height:62px; display:grid; place-items:center; border-radius:16px; color:white; font-size:1.6rem; font-weight:900; }.route-code.orange{background:var(--orange)}.route-code.green{background:#25995a}.route-code.blue{background:#2563eb}.route-code.red{background:#dc2626}
.card-topline { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.06rem; }.card-topline span:first-child{color:#f4bd60}
.route-card h3 { margin-top:.85rem; font-size:1.35rem; }.route-card .route-copy > p { margin-top:.35rem; color:var(--muted); font-size:.82rem; }
.route-card ol { margin-top:1.1rem; display:grid; grid-template-columns:repeat(4,1fr); list-style:none; }.route-card li { min-width:0; position:relative; text-align:center; }.route-card li::before { content:""; height:2px; position:absolute; left:0; right:0; top:6px; background:rgba(255,75,11,.28); }.route-card li:first-child::before{left:50%}.route-card li:last-child::before{right:50%}.route-card li i { width:12px; height:12px; position:relative; z-index:1; display:block; margin:0 auto .45rem; border:2px solid var(--orange); border-radius:50%; background:#0b0d10; }.route-card li span { display:block; overflow:hidden; color:#cdd1d5; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.route-footer { margin-top:1.2rem; padding-top:1rem; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:.7rem; }
.empty-state { min-height:300px; margin-top:1.5rem; padding:2rem; display:grid; place-items:center; align-content:center; gap:.75rem; text-align:center; background:var(--surface); border:1px dashed var(--border); border-radius:24px; }.empty-state > span{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--orange-soft);color:var(--orange);font-size:1.5rem}.empty-state p{color:var(--muted)}.empty-state a{color:var(--orange);font-weight:800}

.roadmap { width:min(1240px,calc(100% - 3rem)); margin:0 auto 5rem; padding:clamp(2rem,5vw,4rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.9fr); gap:clamp(2rem,6vw,5rem); background:linear-gradient(125deg,rgba(255,75,11,.1),rgba(11,13,16,.95)); border:1px solid rgba(255,75,11,.25); border-radius:26px; }
.roadmap h2 { margin-top:.7rem; font-size:clamp(2rem,4vw,3rem); }.roadmap > div > p:last-child { margin-top:1rem; color:var(--muted); line-height:1.65; }.roadmap ol{display:grid;gap:.75rem;list-style:none}.roadmap li{padding:.9rem;display:grid;grid-template-columns:40px minmax(0,1fr);gap:.8rem;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);border-radius:13px}.roadmap li>span{color:var(--orange);font-weight:900}.roadmap li p{margin-top:.25rem;color:var(--muted);font-size:.8rem;line-height:1.45}
.footer { width:min(1240px,calc(100% - 3rem)); margin:auto auto 0; padding:2rem 0 3rem; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); border-top:1px solid var(--border); font-size:.75rem; letter-spacing:.08rem; }.footer strong{color:var(--text);letter-spacing:.18rem}

@media(max-width:950px){.topbar{min-height:88px}.topnav>a:not(.active):not(.account-link){display:none}.hero{grid-template-columns:1fr}.tracker-layout{grid-template-columns:1fr}.route-grid{grid-template-columns:1fr}.roadmap{grid-template-columns:1fr}}
@media(max-width:650px){.topbar,.hero,.notice,.tracker-layout,.routes-section,.roadmap,.footer{width:min(100% - 2rem,1240px)}.brand small{display:none}.brand strong{font-size:.78rem;letter-spacing:.16rem}.topnav .active{display:none}.topnav .account-link{max-width:120px}.hero{padding-top:3rem}.schematic{min-height:330px}.district{font-size:.58rem}.map-legend{right:1rem}.route-search{grid-template-columns:1fr}.route-search button{min-height:52px}.section-head{align-items:start;flex-direction:column;gap:.8rem}.route-card{grid-template-columns:48px minmax(0,1fr)}.route-code{width:48px;height:48px;border-radius:13px;font-size:1.2rem}.card-topline span:last-child{display:none}.route-card ol{grid-template-columns:repeat(2,1fr);gap:1rem 0}.route-card li:nth-child(2)::before{right:50%}.route-card li:nth-child(3)::before{left:50%}.route-footer{align-items:start;flex-direction:column}.footer{flex-direction:column}}