/* =====================================================================
   FRUTIGER AERO STREAM PACK — glossy aqua design system
   Matches our Frutiger Aero Stream Desktop (same palette + Nunito).
   aqua blobs · glass panels · rising bubbles · glossy orbs
   ===================================================================== */
:root{
  --ink:#12303a;
  --baseA:#6fd2ea; --baseB:#54c6a8;
  --blob1:rgba(95,225,180,.6); --blob2:rgba(80,180,255,.55); --blob3:rgba(160,245,225,.42);
  --glass:rgba(255,255,255,.30); --edge:rgba(255,255,255,.65);
  --accent:#3f9fe0;
  --viewer:#c05ec8; --sub:#e08a2e; --mod:#2f7fd0; --vip:#3fa05a;
  --msg:'Nunito','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:transparent;font-family:var(--msg);color:var(--ink)}
.aqua{position:absolute;inset:0;background:
  radial-gradient(48% 40% at 80% 10%,rgba(255,255,255,.55), transparent 70%),
  radial-gradient(62% 52% at 14% 84%,var(--blob1), transparent 70%),
  radial-gradient(58% 48% at 88% 92%,var(--blob2), transparent 70%),
  radial-gradient(70% 58% at 46% 44%,var(--blob3), transparent 72%),
  linear-gradient(158deg,var(--baseA),var(--baseB))}

/* ---------- glass panel ---------- */
.glass{position:absolute;background:var(--glass);border:1.5px solid var(--edge);
  border-radius:20px;backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(18,64,84,.25), inset 0 1px 0 rgba(255,255,255,.8)}
.glass::before{content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(165deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 32%,transparent 58%);
  pointer-events:none}
.glass .cap{position:absolute;top:10px;left:0;right:0;text-align:center;z-index:5;
  font-weight:800;font-size:20px;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7)}

/* glossy pill button / tag */
.pill{display:inline-block;font-weight:800;font-size:18px;color:#fff;padding:5px 16px;
  border-radius:999px;background:linear-gradient(180deg,#8fd0f2,var(--accent));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 4px 10px rgba(18,64,84,.3), inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(18,64,84,.4)}
.pill.viewer{background:linear-gradient(180deg,#e9a7ee,var(--viewer))}
.pill.sub{background:linear-gradient(180deg,#f2c48a,var(--sub))}
.pill.vip{background:linear-gradient(180deg,#8fd6a4,var(--vip))}

/* rising bubbles */
.bub{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.15) 46%,rgba(255,255,255,.05) 70%);
  border:1px solid rgba(255,255,255,.5);
  animation:bubup var(--bu,10s) linear infinite}
@keyframes bubup{0%{transform:translateY(60px);opacity:0}10%{opacity:.9}
  90%{opacity:.9}100%{transform:translateY(-620px);opacity:0}}

/* glossy orb accent */
.orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#f0feff,#7fdcf0 55%,#2f8fc4);
  box-shadow:0 8px 20px rgba(18,64,84,.35), inset 0 2px 6px rgba(255,255,255,.8);
  animation:orbbob var(--ob,4s) ease-in-out infinite}
@keyframes orbbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* text */
.big{font-weight:900;letter-spacing:.01em;color:#fff;
  text-shadow:0 2px 0 rgba(47,143,196,.7), 0 6px 18px rgba(18,64,84,.35)}
.cur{display:inline-block;width:.5em;height:.9em;background:var(--accent);
  vertical-align:-2px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
/* aqua progress */
.aline{position:relative;height:16px;border-radius:999px;background:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.7);overflow:hidden}
.aline i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(180deg,#9fe8ff,var(--accent));animation:afill 8s linear infinite}
@keyframes afill{0%{width:3%}96%{width:99%}100%{width:99%}}