/* Payzilla status page: final styles for the Worker (served as /status.css, style-src 'self'). Tokens are the site's. Dark is the default; the browser's light setting and the theme button switch it. */
:root,:root[data-theme="dark"]{--bg0:#07090D;--bg2:#121824;--bg3:#192131;--t1:#F4F5F7;--t2:#B7BFCC;--t3:#8E98AA;--acc:#8DB2FF;--on-acc:#07090D;--ok:#5FD9A5;--warn:#F2BB52;--warn-soft:rgba(242,187,82,.12);--ln1:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.13);--ln3:rgba(255,255,255,.44);--hdr:rgba(7,9,13,.82);--aura:radial-gradient(60% 50% at 50% 0%,rgba(141,178,255,.14),transparent 70%);--elev:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -22px rgba(0,0,0,.8);--r1:4px;--r2:8px;--r3:12px;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg0:#F8F8F5;--bg2:#FFFFFF;--bg3:#F3F2EE;--t1:#0B1220;--t2:#364154;--t3:#566176;--acc:#1B46C2;--on-acc:#FFFFFF;--ok:#0F6446;--warn:#7F4F00;--warn-soft:rgba(127,79,0,.10);--ln1:rgba(11,18,32,.08);--ln2:rgba(11,18,32,.15);--ln3:rgba(11,18,32,.52);--hdr:rgba(248,248,245,.92);--aura:radial-gradient(60% 50% at 50% 0%,rgba(27,70,194,.09),transparent 70%);--elev:0 1px 0 #fff inset,0 16px 36px -22px rgba(11,18,32,.28);color-scheme:light}}
:root[data-theme="light"]{--bg0:#F8F8F5;--bg2:#FFFFFF;--bg3:#F3F2EE;--t1:#0B1220;--t2:#364154;--t3:#566176;--acc:#1B46C2;--on-acc:#FFFFFF;--ok:#0F6446;--warn:#7F4F00;--warn-soft:rgba(127,79,0,.10);--ln1:rgba(11,18,32,.08);--ln2:rgba(11,18,32,.15);--ln3:rgba(11,18,32,.52);--hdr:rgba(248,248,245,.92);--aura:radial-gradient(60% 50% at 50% 0%,rgba(27,70,194,.09),transparent 70%);--elev:0 1px 0 #fff inset,0 16px 36px -22px rgba(11,18,32,.28);color-scheme:light}
:root{--sans:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;--gut:clamp(20px,4.5vw,48px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg0);background-image:var(--aura);background-repeat:no-repeat;color:var(--t2);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
h1,h2,p,ul{margin:0}h1,h2{color:var(--t1);font-weight:600;letter-spacing:-.02em;line-height:1.15}
a{color:var(--acc);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--acc);color:var(--on-acc);padding:10px 16px;border-radius:var(--r1);font-weight:600;text-decoration:none}.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(46rem + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--ln2);background:var(--hdr);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px}.bar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--t1);text-decoration:none;line-height:0}.brand-mark{width:34px;height:34px}.brand-wm{width:73px;height:21px;fill:currentColor}
.m-z{fill:var(--t1)}.m-ring{fill:none;stroke:var(--acc);stroke-width:2.6}.m-dot{fill:var(--acc)}
.ttl{color:var(--t2);font-weight:600}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r2);border:1px solid var(--ln3);background:transparent;color:var(--t1);cursor:pointer}.iconbtn:hover{border-color:var(--acc)}.iconbtn svg{width:18px;height:18px}
.theme .sun{display:none}.theme .moon{display:block}:root[data-theme="dark"] .theme .sun{display:block}:root[data-theme="dark"] .theme .moon{display:none}
main{flex:1 0 auto;padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.banner{display:flex;gap:12px;align-items:center;padding:18px 20px;border-radius:var(--r3);border:1px solid var(--ln2);background:var(--bg2);box-shadow:var(--elev);margin-bottom:20px}
.banner h1{font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem)}
.dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--t3)}
.banner.online{border-color:var(--ok)}.banner.online .dot{background:var(--ok)}
.banner.offline{border-color:var(--warn);background:var(--warn-soft)}.banner.offline .dot{background:var(--warn)}
.banner.unknown .dot{background:transparent;border:2px solid var(--t3)}
.sla{margin:0 0 20px}
.notices{margin:0 0 24px;display:grid;gap:10px}.none{color:var(--t3)}
.notice{padding:14px 16px;border:1px solid var(--ln2);border-left:3px solid var(--warn);border-radius:var(--r2);background:var(--bg2)}.notice p{margin:4px 0}.notice time{color:var(--t3);font-size:.875rem}
h2{font-size:1.375rem;margin-bottom:10px}
.svcs{list-style:none;padding:0;border:1px solid var(--ln2);border-radius:var(--r3);background:var(--bg2);overflow:hidden}
.svcs li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px 18px;border-top:1px solid var(--ln1)}.svcs li:first-child{border-top:0}
.nm{color:var(--t1);font-weight:600}.sub{grid-column:1;color:var(--t3);font-size:.9375rem}.when{grid-column:1/-1;color:var(--t3);font-size:.875rem}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.875rem;letter-spacing:.04em;padding:4px 10px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.online{color:var(--ok)}
.pill.offline{color:var(--warn);background:var(--warn-soft)}
.pill.notmeasured{color:var(--t3);border-style:dashed}
.pill.unknown{color:var(--t2);border-style:dotted}
.foot{border-top:1px solid var(--ln1);padding-block:28px;color:var(--t3);font-size:.875rem}.foot .wrap{display:grid;gap:8px}.foot p{max-width:70ch}.foot a{color:var(--t2)}
@media (max-width:519px){.svcs li{padding:14px}}
@media (forced-colors:active){.banner,.svcs,.notice,.pill,.iconbtn{border:1px solid CanvasText}}
