/* offline.css - full-page notice shown when the API cannot be reached */
.px-offline{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(246,247,249,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:pxFade .3s ease both}
.px-offline-card{width:100%;max-width:400px;text-align:center;background:var(--bg);
  border:1px solid var(--line);border-radius:24px;padding:40px 32px;box-shadow:var(--shadow)}
.px-offline-art{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.px-offline-art svg{animation:pxFloat 3s ease-in-out infinite}
.px-offline-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d)}
.px-offline h2{margin:8px 0 10px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.px-offline-card p#pxOfflineText{margin:0 0 24px;font-size:15px;line-height:1.5;color:var(--mute)}
.px-offline-status{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;font-size:13px;color:var(--mute)}
.px-offline-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pxPulse 1.4s ease-in-out infinite}
body.px-offline-open{overflow:hidden}
@keyframes pxFade{from{opacity:0}to{opacity:1}}
@keyframes pxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pxPulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .px-offline,.px-offline-art svg,.px-offline-dot{animation:none}
}