:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#152029;background:#eef3f4}
*{box-sizing:border-box}body{margin:0;font-size:16px}header{height:54px;background:#163c4a;color:#fff;display:flex;align-items:center;gap:12px;padding:0 18px}header strong{font-size:20px}header span{font-size:14px;opacity:.85}
main{height:calc(100vh - 54px);display:grid;grid-template-rows:minmax(360px,1fr) auto;padding:12px;gap:10px}#map{border-radius:14px;overflow:hidden;box-shadow:0 2px 12px #0002}
.pollution-overlay{position:absolute;pointer-events:none;image-rendering:auto;filter:blur(4px);transition:opacity .12s linear}
.panel{background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 2px 12px #0001}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px;color:#53636c}.toolbar label{font-weight:600}.toolbar select{border:1px solid #cbd6da;border-radius:7px;background:#fff;color:#152029;padding:5px 28px 5px 8px;font:inherit;cursor:pointer}.status{display:flex;justify-content:space-between;gap:10px;align-items:baseline;white-space:nowrap;overflow:hidden;min-height:1.3em;font-size:14px}.status strong,.status span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status span{color:#53636c;flex:1;text-align:right}
.timeline{display:grid;grid-template-columns:42px 42px 1fr 42px;align-items:center;gap:8px;margin:10px 0}.timeline button{height:38px;border:0;border-radius:9px;background:#163c4a;color:white;font-size:14px;display:grid;place-items:center}.timeline input{width:100%}.transport-icon{position:relative;display:inline-block;width:22px;height:18px;color:currentColor}.transport-icon--next::before,.transport-icon--next::after,.transport-icon--prev::before,.transport-icon--prev::after{content:"";position:absolute;top:0;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent}.transport-icon--next::before,.transport-icon--next::after{border-left:11px solid currentColor}.transport-icon--next::before{left:0}.transport-icon--next::after{left:11px}.transport-icon--prev::before,.transport-icon--prev::after{border-right:11px solid currentColor}.transport-icon--prev::before{left:0}.transport-icon--prev::after{left:11px}.transport-icon--play::before{content:"";position:absolute;top:0;left:4px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid currentColor}.transport-icon--pause::before,.transport-icon--pause::after{content:"";position:absolute;top:0;width:5px;height:18px;border-radius:1px;background:currentColor}.transport-icon--pause::before{left:5px}.transport-icon--pause::after{left:13px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:14px;height:14px;border-radius:50%}.panel p{font-size:12px;color:#64747d;margin:9px 0 0;line-height:1.45}
@media(max-width:600px){header{height:48px;padding:0 12px}header strong{font-size:18px}header span{font-size:13px}main{height:calc(100vh - 48px);padding:7px;grid-template-rows:minmax(330px,1fr) auto}.panel{padding:10px}.toolbar{font-size:12px}.toolbar select{padding:4px 24px 4px 7px}.status{font-size:13px}.legend{gap:8px;font-size:11px}.panel p{font-size:11px}}