@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@500;600;700;800&display=swap');

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}
body{display:flex;align-items:flex-end;justify-content:flex-start;padding:10px;font-family:Inter,Arial,sans-serif;color:#edf7fb}
.trip-widget{width:250px;padding:13px 15px 11px;border:1px solid #00dfff;border-radius:14px;background:linear-gradient(145deg,rgba(6,24,39,.96),rgba(7,34,51,.94));box-shadow:inset 0 0 0 1px rgba(0,223,255,.12),0 8px 24px rgba(0,0,0,.34);opacity:0;visibility:hidden;transform:translateX(-18px) scale(.98);transition:opacity .24s ease,transform .24s ease,visibility .24s}
.trip-widget.is-visible{opacity:1;visibility:visible;transform:translateX(0) scale(1)}
.trip-widget__heading{display:flex;align-items:center;gap:7px;margin:0 0 5px;color:#7ed8e8;font-size:9px;font-weight:800;letter-spacing:1.15px}
.trip-widget__dot{width:6px;height:6px;border-radius:50%;background:#00e9a0;box-shadow:0 0 8px rgba(0,233,160,.45)}
.trip-widget__metric{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid rgba(0,223,255,.2)}
.trip-widget__metric span{color:#9bc4d6;font-size:8px;font-weight:800;letter-spacing:.8px;white-space:nowrap}
.trip-widget__metric strong{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:21px;font-weight:700;line-height:1;color:#00dfff;white-space:nowrap}
.trip-widget__metric:nth-of-type(3) strong{color:#00e9a0}
.trip-widget__metric:nth-of-type(4) strong{color:#ffbf35}
.trip-widget__metric:nth-of-type(5) strong{color:#ff8a4c}
.trip-widget__status{margin-top:3px;color:#6e8d9e;font-size:8px;text-align:right}
@media(max-width:280px){.trip-widget{width:calc(100vw - 20px)}}
