:root{
  --bg:#edf4fb;--surface:rgba(255,255,255,.52);--surface2:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.62);--text:#1d1d1f;--muted:#52616e;
  --green:#27a66f;--blue:#087ff5;--amber:#d18a12;--red:#e6544b;--purple:#7b61ff;--track:rgba(44,71,96,.12)
}
html{background:#dbeafa}
body{
  color:var(--text);
  background:#dbeafa url("./icloud-sky.webp") center top/cover fixed no-repeat;
  min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(238,246,255,.16)
}
.top{
  position:sticky;top:0;z-index:20;margin:0 -20px;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.7);
  background:rgba(244,249,255,.48);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 1px 0 rgba(64,90,115,.08)
}
.mark{
  border:1px solid rgba(255,255,255,.74);border-radius:9px;
  background:rgba(255,255,255,.64);color:#087ff5;
  box-shadow:0 6px 18px rgba(63,104,146,.13),inset 0 1px 0 rgba(255,255,255,.9)
}
.brand strong{font-weight:650}.brand small,.eyebrow{color:#4f5f6c}.brand small{font-size:10.5px}.eyebrow{font-size:10.5px}.live{color:#277b5b}.dot{background:#31c77e;box-shadow:0 0 0 3px rgba(49,199,126,.14)}
.head-right{gap:8px}.icon-button{
  width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.58);color:#087ff5;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 5px 18px rgba(57,92,124,.14),inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:pointer
}
.icon-button svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.icon-button:hover{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.78)}
.icon-button:active{transform:scale(.92)}.icon-button:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.refresh.is-loading svg{animation:refresh-spin .7s linear infinite}.refresh:disabled{opacity:.65;cursor:wait}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
.sun-icon{display:none}
.route-strip,.gauge-card,.panel{
  border:1px solid rgba(255,255,255,.64);border-radius:12px;
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(170%) blur(24px);backdrop-filter:saturate(170%) blur(24px);
  box-shadow:0 18px 50px rgba(72,99,126,.14),inset 0 1px 0 rgba(255,255,255,.9)
}
.route-strip{gap:0;overflow:hidden}.route-main,.route-stat{background:transparent}.route-stat{border-left:1px solid rgba(255,255,255,.58)}
.route-value{color:#202b35}.route-value i{background:#31c77e}.route-value b{color:#84909b}.route-stat strong{color:#26313b}
.alert{border:1px solid rgba(230,84,75,.28);border-radius:10px;background:rgba(255,240,240,.76);color:#b83d36;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.gauge-card{background:rgba(255,255,255,.5)}
.gauge{background:conic-gradient(from 210deg,var(--c) calc(var(--p)*.75%),rgba(55,82,107,.12) 0 75%,transparent 0);filter:drop-shadow(0 8px 16px rgba(70,106,140,.12))}
.gauge:before{background:rgba(247,251,255,.72);border:1px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.gauge:after{background:rgba(246,250,254,.86)}.gauge-core strong{color:#1d2731}.gauge-core small,.gauge-info p{color:#4f5e6a}.gauge-core small{font-size:9.5px}.gauge-info p{font-size:11px}.gauge-info h2{font-weight:650}
.panel{overflow:hidden}.panel-head{border-bottom:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.16)}.panel-head small{color:#4d5c68;font-size:10.5px}
.bar-val,.bar-day{color:#465663;font-size:10px}.bar-track{border-bottom:1px solid rgba(55,81,104,.2);background:repeating-linear-gradient(to top,rgba(60,91,119,.08) 0 1px,transparent 1px 44px)}
.bar-fill{background:linear-gradient(to top,#0a78e8,#60b7ff);border-radius:4px 4px 0 0;box-shadow:0 4px 14px rgba(0,113,227,.2)}
.route-row{border-bottom:1px solid rgba(255,255,255,.56)}.rank{color:#5d6d79}.route-name strong{color:#24303a}.route-name span{color:#52626e;font-size:10px}.route-count{color:#087ff5}.mini-track{background:rgba(40,74,107,.1)}.mini-track i{background:#087ff5;border-radius:999px}
.table-wrap{overflow:auto;max-height:380px;background:rgba(255,255,255,.12)}th{background:rgba(239,247,255,.9);color:#465560;font-size:10px;border-bottom:1px solid rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}td{color:#2c3741;font-size:11px;border-bottom:1px solid rgba(255,255,255,.5)}tr:hover td{background:rgba(255,255,255,.28)}
.provider-cell .pdot{background:#31c77e}.lat-good{color:#17895b}.lat-warn{color:#b76f00}.lat-bad{color:#db4d44}footer{color:#637480}
html[data-theme="dark"]{background:#07111f;color-scheme:dark}
html[data-theme="dark"] body{color:#f5f8fb;background:#07111f url("./icloud-sky.webp") center top/cover fixed no-repeat;background-blend-mode:multiply}
html[data-theme="dark"] body:before{background:rgba(2,11,24,.56)}
html[data-theme="dark"] .top{background:rgba(8,20,37,.56);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(0,0,0,.2)}
html[data-theme="dark"] .mark,html[data-theme="dark"] .icon-button{background:rgba(20,39,61,.66);border-color:rgba(255,255,255,.18);color:#69b7ff;box-shadow:0 8px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14)}
html[data-theme="dark"] .sun-icon{display:block}html[data-theme="dark"] .moon-icon{display:none}
html[data-theme="dark"] .brand strong,html[data-theme="dark"] .route-value,html[data-theme="dark"] .route-stat strong,html[data-theme="dark"] .gauge-core strong,html[data-theme="dark"] .gauge-info h2,html[data-theme="dark"] .panel-head h2,html[data-theme="dark"] .route-name strong{color:#f4f8fc}
html[data-theme="dark"] .brand small,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .gauge-core small,html[data-theme="dark"] .gauge-info p,html[data-theme="dark"] .panel-head small,html[data-theme="dark"] .bar-val,html[data-theme="dark"] .bar-day,html[data-theme="dark"] .rank,html[data-theme="dark"] .route-name span,html[data-theme="dark"] footer{color:#adbac6}
html[data-theme="dark"] .route-strip,html[data-theme="dark"] .gauge-card,html[data-theme="dark"] .panel{background:rgba(9,25,43,.58);border-color:rgba(255,255,255,.14);box-shadow:0 20px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09)}
html[data-theme="dark"] .route-stat,html[data-theme="dark"] .panel-head,html[data-theme="dark"] .route-row,html[data-theme="dark"] td{border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .gauge:before{background:rgba(10,28,47,.82);border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .gauge:after{background:#10283f}
html[data-theme="dark"] .bar-track{border-color:rgba(255,255,255,.18);background:repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 1px,transparent 1px 44px)}
html[data-theme="dark"] .table-wrap{background:rgba(2,12,24,.12)}html[data-theme="dark"] th{background:rgba(9,24,41,.94);color:#bac5ce;border-color:rgba(255,255,255,.12)}html[data-theme="dark"] td{color:#e3e9ee}html[data-theme="dark"] tr:hover td{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .alert{background:rgba(72,22,25,.72);color:#ffc0ba}

@media(max-width:720px){
  body{padding-bottom:calc(24px + env(safe-area-inset-bottom));background-attachment:scroll}.top{margin:0 -10px;padding:0 10px}
  .brand small{font-size:9.5px}.live{display:none}.icon-button{width:36px;height:36px}.icon-button svg{width:18px;height:18px}
  .route-stat{border-left:0;border-top:1px solid rgba(255,255,255,.55)}
  .route-stat:nth-of-type(3){border-left:1px solid rgba(255,255,255,.55)}
  .gauge-card{background:rgba(255,255,255,.5)}
}
@media(prefers-reduced-transparency:reduce){.top,.route-strip,.gauge-card,.panel{background:rgba(246,250,255,.92);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Apple launch-style contrast field: broad color bands, no decorative blobs. */
html{background:#b9dcfb}
body{
  background:
    linear-gradient(132deg,rgba(247,252,255,.36) 0 13%,transparent 35% 68%,rgba(255,255,255,.24) 88%),
    linear-gradient(118deg,#79c7ff 0%,#b9eced 23%,#ffd0c9 46%,#cbbcff 69%,#70bfff 100%);
  background-size:140% 140%,160% 160%;
  animation:apple-field-drift 24s ease-in-out infinite alternate
}
body:before{
  background:linear-gradient(180deg,rgba(246,251,255,.08),rgba(235,245,255,.22) 55%,rgba(246,250,255,.34));
}
@keyframes apple-field-drift{
  0%{background-position:0% 20%,0% 45%}
  100%{background-position:100% 75%,100% 55%}
}

html[data-theme="dark"]{background:#050b16}
html[data-theme="dark"] body{
  background:
    linear-gradient(132deg,rgba(54,125,178,.2) 0 15%,transparent 36% 66%,rgba(121,50,92,.18) 88%),
    linear-gradient(118deg,#071426 0%,#124d64 24%,#602f49 47%,#31295f 70%,#062f4d 100%);
  background-size:140% 140%,160% 160%;
  background-blend-mode:normal;
}
html[data-theme="dark"] body:before{
  background:linear-gradient(180deg,rgba(1,7,16,.1),rgba(2,10,22,.32) 58%,rgba(1,7,16,.52));
}

.route-strip,.gauge-card,.panel,.icon-button{
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,border-color .34s ease,background-color .34s ease;
}
.gauge-card{position:relative;isolation:isolate;will-change:transform}
.gauge-card:after{
  content:attr(data-float);position:absolute;z-index:3;top:11px;right:11px;
  padding:5px 9px;border:1px solid rgba(255,255,255,.75);border-radius:999px;
  color:#145f9e;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);
  box-shadow:0 9px 24px rgba(44,79,112,.16);
  font:650 9px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  opacity:0;transform:translate3d(0,7px,0) scale(.94);pointer-events:none;
  transition:opacity .24s ease,transform .34s cubic-bezier(.22,1,.36,1)
}
.gauge-info em,.route-count,.bar-val{
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease;
}
.gauge-info em{border-radius:999px;padding:5px 9px;background:color-mix(in srgb,var(--c) 11%,transparent)}
.bar-fill{transition:filter .28s ease,transform .28s cubic-bezier(.22,1,.36,1);transform-origin:bottom}

html[data-theme="dark"] .gauge-card:after{
  color:#d9efff;background:rgba(13,35,57,.76);border-color:rgba(255,255,255,.17);box-shadow:0 12px 28px rgba(0,0,0,.3)
}

.fine-pointer .gauge-card:hover{transform:translate3d(0,-7px,0);border-color:rgba(255,255,255,.9);box-shadow:0 26px 64px rgba(47,79,110,.2),inset 0 1px 0 rgba(255,255,255,.94)}
.fine-pointer .gauge-card:hover:after{opacity:1;transform:translate3d(0,0,0) scale(1)}
.fine-pointer .gauge-card:hover .gauge-info em{transform:translateY(-3px);box-shadow:0 8px 18px color-mix(in srgb,var(--c) 20%,transparent)}
.fine-pointer .route-row:hover .route-count{transform:translateY(-2px);filter:brightness(1.1)}
.fine-pointer .bar:hover .bar-val{transform:translateY(-5px)}
.fine-pointer .bar:hover .bar-fill{transform:scaleX(1.08);filter:saturate(1.25) brightness(1.08)}
html[data-theme="dark"].fine-pointer .gauge-card:hover{border-color:rgba(255,255,255,.25);box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.13)}
html:not(.fine-pointer) .gauge-card:after{display:none}
html:not(.fine-pointer) .gauge-card:active{transform:translateY(-3px) scale(.99)}
@media(max-width:720px){body{background-attachment:scroll}.gauge-card:after{display:none!important}}
@media(prefers-reduced-motion:reduce){
  body{animation:none}.route-strip,.gauge-card,.panel,.icon-button,.gauge-card:after,.gauge-info em,.route-count,.bar-val,.bar-fill{transition:none!important}
}