/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   mibl_phone_ui.css — the new phone design's shared look (28 Oct 2026, mibl_phone_ui.php). Approved by the owner from the live
   prototype in https://claude.ai/artifact/LBimXQqr8SxxML9fzuYn9q. First page to wear it: the station's «Today» home.

   RULES this file keeps (the plan's «six rules» and «five motions»):
   · everything lives under .pui — the pages it joins keep their own styles; the station's colour arrives as --pui-tint (from the logo)
   · one job per block, the main button in the thumb's half, touch targets ≥ 44 px, text ≥ 12 px
   · motion = breathe / rise / count / land / burst only; transform + opacity only; nothing blurs (backdrop-filter traps pop-ups)
   · html.mibl-rm (the calm switch), prefers-reduced-motion and .pui-calm all stop it; off-screen and background tabs stop it too (JS)
   · logical properties only (inline-start/end), so the 19 languages read right in both directions
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pui{--pui-tint:#22d3ee;--pui-tint2:#a78bfa;--pui-rgb:34,211,238;--pui-s1:rgba(255,255,255,.045);--pui-s2:rgba(255,255,255,.075);
  --pui-line:rgba(255,255,255,.10);--pui-line2:rgba(255,255,255,.18);--pui-tx:#eef1ff;--pui-mut:#a3acd1;--pui-faint:#7c86b3;
  --pui-gold:#fbbf24;--pui-live:#ff5d73;--pui-good:#34d399;--pui-ease:cubic-bezier(.2,.85,.25,1);--pui-spring:cubic-bezier(.3,1.5,.4,1);
  display:flex;flex-direction:column;gap:16px;color:var(--pui-tx);font-size:15px;line-height:1.6;position:relative;isolation:isolate;max-width:640px;margin-inline:auto}
.pui-back{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;margin:0 0 12px;border-radius:999px;border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.08);color:#7dd3fc;font-weight:800;font-size:13.5px;text-decoration:none}
.pui *{box-sizing:border-box}
.pui h2,.pui h3,.pui p{margin:0}
.pui button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pui svg{display:block}
.pui :focus-visible{outline:2px solid var(--pui-tint);outline-offset:2px}
.pui .pui-num{font-variant-numeric:tabular-nums}
.pui [hidden]{display:none!important}

/* the first paint: blocks rise one after another (a resting, visible state — only the entry moves) */
.pui.pui-in>*{animation:puiRise .6s var(--pui-ease) both;animation-delay:calc(var(--n,0) * 60ms)}
@keyframes puiRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pui .pui-tap{transition:transform .14s var(--pui-spring),filter .14s}
.pui .pui-tap:active{transform:scale(.96);filter:brightness(1.12)}

/* greeting */
.pui .pui-greet{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:2px}
.pui .pui-greet small{display:block;color:var(--pui-mut);font-size:13px}
.pui .pui-greet h2{font-size:24px;font-weight:900;line-height:1.3;color:#fff}

/* the heart: live ring + frequency + what is on air */
.pui .pui-hero{position:relative;border-radius:28px;padding:14px 16px;overflow:hidden;border:1px solid var(--pui-line2);
  background:radial-gradient(120% 80% at 50% -10%,rgba(var(--pui-rgb),.30),transparent 60%),linear-gradient(180deg,#131839,#0b0e23)}
.pui .pui-hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pui .pui-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.pui .pui-chip i{width:8px;height:8px;border-radius:50%;flex:none}
.pui .pui-chip.air{background:rgba(255,93,115,.14);border:1px solid rgba(255,93,115,.42);color:#ff9aab}
.pui .pui-chip.air i{background:var(--pui-live);animation:puiLamp 1.8s infinite}
.pui .pui-chip.live{background:rgba(255,93,115,.32);border:1px solid var(--pui-live);color:#fff}
.pui .pui-chip.live i{background:#fff;animation:puiLamp 1.2s infinite}
.pui .pui-chip.rest{background:var(--pui-s1);border:1px solid var(--pui-line2);color:var(--pui-mut)}
.pui .pui-chip.rest i{background:var(--pui-faint)}
@keyframes puiLamp{0%{box-shadow:0 0 0 0 rgba(255,93,115,.55)}70%{box-shadow:0 0 0 8px rgba(255,93,115,0)}100%{box-shadow:0 0 0 0 rgba(255,93,115,0)}}
.pui .pui-freq{font-family:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;font-size:24px;line-height:1;color:var(--pui-tint);text-shadow:0 0 18px rgba(var(--pui-rgb),.55);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.pui .pui-freq small{font-size:12px;color:var(--pui-mut);margin-inline-start:5px;text-shadow:none}
.pui .pui-ringwrap{position:relative;width:min(236px,72vw);aspect-ratio:1;margin:8px auto 4px;display:grid;place-items:center;border:0;background:none;padding:0}
.pui .pui-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--pui-rgb),.34),transparent);animation:puiBreathe 4.2s ease-in-out infinite}
@keyframes puiBreathe{50%{transform:scale(1.14);opacity:.78}}
.pui .pui-ringwrap.pulse .pui-glow{animation:puiPulse .8s ease-out}
@keyframes puiPulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.7);opacity:0}}
.pui .pui-ring{position:absolute;inset:0;width:100%;height:100%}
.pui .pui-ring line{stroke:rgba(255,255,255,.14);stroke-width:2.4;stroke-linecap:round;transition:stroke .35s}
.pui .pui-ring line.on{stroke:var(--pui-tint)}
.pui .pui-ring line.on.b{stroke:var(--pui-tint2)}
.pui .pui-orbit{position:absolute;inset:0;pointer-events:none}
.pui .pui-orbit>div{position:absolute;inset:0;animation:puiSpin var(--d,30s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes puiSpin{to{transform:rotate(360deg)}}
.pui .pui-orbit i{position:absolute;top:50%;left:calc(50% + var(--r));width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.pui .pui-orbit>div.new i{animation:puiLand .9s var(--pui-spring)}
@keyframes puiLand{from{transform:scale(0)}60%{transform:scale(2.4)}}
.pui .pui-rc{position:relative;display:grid;justify-items:center;text-align:center;gap:2px}
.pui .pui-big{font-size:clamp(56px,17vw,74px);font-weight:900;line-height:1;color:#fff;text-shadow:0 0 30px rgba(var(--pui-rgb),.5)}
.pui .pui-rc span{font-size:13px;color:var(--pui-mut);max-width:130px;line-height:1.4}
.pui .pui-np{display:flex;align-items:center;gap:12px;margin-top:6px;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid var(--pui-line)}
.pui .pui-cov{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;color:#06121f;background:linear-gradient(135deg,var(--pui-tint),var(--pui-tint2));background-size:cover;background-position:center}
.pui .pui-cov svg{width:24px;height:24px}
.pui .pui-npt{flex:1;min-width:0}
.pui .pui-npt small{display:block;font-size:11.5px;font-weight:800;color:var(--pui-tint);letter-spacing:.03em}
.pui .pui-npt b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.pui .pui-npt span{display:block;font-size:12.5px;color:var(--pui-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.pui .pui-eq{display:flex;gap:3px;align-items:flex-end;height:22px;flex:none}
.pui .pui-eq i{width:4px;height:6px;border-radius:2px;background:var(--pui-tint);animation:puiEq 1s ease-in-out infinite}
.pui .pui-eq i:nth-child(2){animation-delay:.22s}.pui .pui-eq i:nth-child(3){animation-delay:.47s}.pui .pui-eq i:nth-child(4){animation-delay:.1s}
@keyframes puiEq{0%,100%{height:6px}50%{height:22px}}
.pui .pui-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;color:#06121f;background:linear-gradient(135deg,var(--pui-tint),var(--pui-tint2));box-shadow:0 6px 18px rgba(var(--pui-rgb),.35)}
.pui .pui-play svg{width:20px;height:20px;margin-inline-start:2px}
.pui .pui-hero.is-live{box-shadow:0 0 0 2px rgba(255,93,115,.55),0 0 46px rgba(255,93,115,.22)}
.pui .pui-rest{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:10px 12px;border-radius:18px;background:var(--pui-s1);border:1px dashed var(--pui-line2);color:var(--pui-mut);font-size:13.5px;line-height:1.6}

/* three numbers + a 7-day line */
.pui .pui-sh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.pui .pui-sh b{font-size:16px;font-weight:800;color:#fff}
.pui .pui-sh small{color:var(--pui-mut);font-size:12.5px;text-align:end}
.pui .pui-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pui .pui-st{display:grid;justify-items:center;align-content:start;gap:3px;padding:14px 6px 12px;border-radius:20px;background:var(--pui-s1);border:1px solid var(--pui-line);text-align:center;min-width:0}
.pui .pui-st b{font-size:clamp(22px,7vw,28px);font-weight:900;line-height:1.15;color:#fff}
.pui .pui-st span{font-size:12px;color:var(--pui-mut);line-height:1.4}
.pui .pui-dl{display:inline-flex;align-items:center;gap:3px;margin-top:3px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.pui .pui-dl.up{color:var(--pui-good);background:rgba(52,211,153,.13)}
.pui .pui-dl.down{color:#fda4af;background:rgba(251,113,133,.12)}
.pui .pui-dl.same{color:var(--pui-mut);background:var(--pui-s1)}
.pui .pui-card{padding:16px;border-radius:24px;background:var(--pui-s1);border:1px solid var(--pui-line)}
.pui .pui-spark svg{width:100%;height:92px;overflow:visible}
.pui .pui-spark .pui-days{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--pui-faint)}
.pui .pui-spark .pui-days span.t{color:var(--pui-tint);font-weight:800}

/* one next step */
.pui .pui-next{display:flex;align-items:center;gap:16px;padding:16px;border-radius:24px;border:1px solid rgba(var(--pui-rgb),.45);background:linear-gradient(135deg,rgba(var(--pui-rgb),.16),rgba(255,255,255,.03))}
.pui .pui-rg{position:relative;width:64px;height:64px;flex:none}
.pui .pui-rg svg{width:100%;height:100%;transform:rotate(-90deg)}
.pui .pui-rg circle{fill:none;stroke-width:6;stroke-linecap:round}
.pui .pui-rg .bg{stroke:rgba(255,255,255,.13)}
.pui .pui-rg .fg{stroke:var(--pui-tint);transition:stroke-dashoffset .95s cubic-bezier(.3,.9,.3,1)}
.pui .pui-rg b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:900;color:#fff}
.pui .pui-nx{flex:1;min-width:0}
.pui .pui-nx small{display:block;color:var(--pui-tint);font-weight:800;font-size:12.5px}
.pui .pui-nx h3{margin:1px 0 10px;font-size:17px;font-weight:800;line-height:1.45;color:#fff}
.pui .pui-nx h3 em{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--pui-mut)}
.pui .pui-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:16px;
  font-size:15px;font-weight:800;color:#06121f;text-decoration:none;white-space:nowrap;background:linear-gradient(135deg,var(--pui-tint),var(--pui-tint2))}
.pui .pui-btn.ghost{color:var(--pui-tx);background:var(--pui-s2);border:1px solid var(--pui-line2)}
.pui .pui-rpl{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:puiRpl .6s ease-out forwards;pointer-events:none}
@keyframes puiRpl{to{transform:scale(1);opacity:0}}
.pui .pui-ready{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:20px;background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.35);color:#bbf7d0;font-weight:700;font-size:14.5px}

/* four things people do most */
.pui .pui-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pui .pui-qa{display:grid;align-content:space-between;justify-items:start;gap:12px;min-height:104px;padding:14px;border-radius:22px;border:1px solid var(--pui-line);
  background:var(--pui-s1);text-align:start;font-size:15px;font-weight:800;color:#fff;text-decoration:none}
.pui .pui-qa .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--c),.17);color:rgb(var(--c))}
.pui .pui-qa svg{width:24px;height:24px}

/* what listeners said */
.pui .pui-feed h3{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:17px;font-weight:800;color:#fff}
.pui .pui-livetag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--pui-live)}
.pui .pui-livetag i{width:7px;height:7px;border-radius:50%;background:var(--pui-live);animation:puiLamp 1.8s infinite}
.pui .pui-rx{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pui .pui-rx>span{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border-radius:999px;background:var(--pui-s1);border:1px solid var(--pui-line);font-size:14px;font-weight:700}
.pui .pui-rx>span.bump{animation:puiBump .6s var(--pui-spring)}
@keyframes puiBump{35%{transform:scale(1.25)}}
.pui .pui-ev{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--pui-line)}
.pui .pui-ev.new{animation:puiSlide .55s var(--pui-ease) both}
@keyframes puiSlide{from{opacity:0;transform:translateY(-12px)}}
.pui .pui-ev .e{flex:none;width:32px;text-align:center;font-size:22px;line-height:1}
.pui .pui-ev div{flex:1;min-width:0;font-size:14px;line-height:1.5}
.pui .pui-ev b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.pui .pui-ev small{display:block;color:var(--pui-mut);font-size:12px}
.pui .pui-empty{color:var(--pui-mut);font-size:14px;line-height:1.8;padding:4px 0}

/* where they listened */
.pui .pui-geo{display:grid;gap:10px}
.pui .pui-gr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;row-gap:5px;align-items:center;font-size:14px}
.pui .pui-gr .fl{font-size:22px;text-align:center;line-height:1}
.pui .pui-gr b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pui .pui-gr em{font-style:normal;color:var(--pui-mut);font-weight:700}
.pui .pui-gr .tr{grid-column:2/4;height:7px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden}
.pui .pui-gr .tr i{display:block;height:100%;width:var(--w);border-radius:7px;background:linear-gradient(90deg,var(--pui-tint),var(--pui-tint2));animation:puiFill 1s var(--pui-ease) both}
@keyframes puiFill{from{width:0}}

/* plan, wallet, the way back */
.pui .pui-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:20px;background:var(--pui-s1);border:1px solid var(--pui-line);font-size:13.5px;color:var(--pui-mut)}
.pui .pui-foot a{color:var(--pui-gold);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(251,191,36,.42);background:rgba(251,191,36,.08)}
.pui .pui-classic{align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--pui-faint);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* the daily loop: streak chip, its line, the celebration card, the next goal, the idea of the day */
.pui .pui-streak{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border-radius:999px;border:1px solid rgba(251,146,60,.42);background:rgba(251,146,60,.12);color:#fdba74;font-size:12.5px;font-weight:700;flex:none;white-space:nowrap}
.pui .pui-streak svg{width:20px;height:20px;color:#fb923c;transform-origin:50% 90%;animation:puiFlick 1.6s ease-in-out infinite}
.pui .pui-streak b{font-size:16px;font-weight:900;color:#ffd7ae}
.pui .pui-streak.bump{animation:puiBump .7s var(--pui-spring)}
@keyframes puiFlick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.14) rotate(3deg)}}
.pui .pui-streak-tip{margin:-8px 0 0;color:#fdba74;font-size:13px;text-align:end}
.pui .pui-cel{display:grid;justify-items:center;gap:8px;padding:18px 16px 16px;border-radius:26px;text-align:center;border:1px solid rgba(251,191,36,.45);
  background:radial-gradient(120% 90% at 50% 0%,rgba(251,191,36,.22),transparent 70%),linear-gradient(180deg,#1d1b3a,#121433)}
.pui .pui-cel-big{font-size:46px;line-height:1;animation:puiLand .9s var(--pui-spring)}
.pui .pui-cel h3{font-size:20px;font-weight:900;color:#fff;line-height:1.45}
.pui .pui-cel-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pui .pui-goal{margin-top:10px;padding:12px 14px;border-radius:18px;background:var(--pui-s1);border:1px solid var(--pui-line)}
.pui .pui-goal-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pui .pui-goal-h small{color:var(--pui-tint);font-weight:800;font-size:12.5px}
.pui .pui-goal-h b{flex:1;min-width:0;font-size:14.5px;color:#fff}
.pui .pui-goal-h span{color:var(--pui-mut);font-size:12.5px;font-weight:700}
.pui .pui-goal-bar{height:7px;margin-top:8px;border-radius:7px;background:rgba(255,255,255,.09);overflow:hidden}
.pui .pui-goal-bar i{display:block;height:100%;width:2%;border-radius:7px;background:linear-gradient(90deg,var(--pui-tint),var(--pui-tint2));transition:width 1.1s var(--pui-ease)}
.pui .pui-idea{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:26px;border:1px solid var(--pui-line2);background:linear-gradient(135deg,#2b2058,#1b2b60 60%,#103c5c)}
.pui .pui-idea::after{content:"";position:absolute;inset-inline-end:-36px;top:-36px;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--pui-rgb),.42),transparent);pointer-events:none}
.pui .pui-idea small{position:relative;color:var(--pui-tint);font-weight:800;font-size:12.5px}
.pui .pui-idea h3{position:relative;margin:3px 0 4px;font-size:20px;font-weight:900;line-height:1.35;color:#fff}
.pui .pui-idea p{position:relative;margin:0 0 14px;color:#c8cff0;font-size:14px;line-height:1.7}
.pui .pui-idea .pui-btn{position:relative}
.pui .pui-idea-ok{position:relative;display:flex;align-items:center;gap:10px;font-weight:800;color:#8ff0cf}
.pui .pui-idea-ok span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(52,211,153,.2)}
.pui .pui-idea.done{background:linear-gradient(135deg,#0f3b34,#12304a)}

/* «Me» (members/partials/account_me.php) — the member's own home on a phone; the account card above it steps aside */
.pui.pui-me{margin-bottom:16px}
.pui .pui-mehero{display:flex;align-items:center;gap:14px;padding:16px;border-radius:26px;border:1px solid var(--pui-line2);background:linear-gradient(135deg,rgba(var(--pui-rgb),.26),rgba(167,139,250,.14) 70%,transparent),var(--pui-s1)}
.pui .pui-meava{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 3px rgba(var(--pui-rgb),.5)}
.pui .pui-meava>*{width:100%!important;height:100%!important}
.pui .pui-meava>span:not(.ava-gen){display:grid!important;place-items:center;font-size:34px!important;line-height:1!important;background:radial-gradient(circle at 50% 40%,rgba(var(--pui-rgb),.28),rgba(255,255,255,.04) 70%)}   /* 29 Oct 2026: an emoji avatar, centred */
.pui .pui-meid{flex:1;min-width:0}
.pui .pui-meid h2{font-size:21px;font-weight:900;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pui .pui-meid small{color:var(--pui-mut);font-size:13px}
.pui .pui-meid .pui-vip{display:inline-flex;margin-top:6px}
.pui .pui-vip{flex:none;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--pui-gold);border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.1);text-decoration:none;white-space:nowrap}
.pui .pui-lvl{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:var(--pui-s1);border:1px solid var(--pui-line);text-decoration:none;color:inherit}
.pui .pui-lvl .pui-rg,.pui .pui-lvl .pui-nx,.pui .pui-lvl .pui-goal-bar{display:block}
.pui .pui-lvl .pui-nx b{display:block;font-size:15px;color:#fff}
.pui .pui-lvl .pui-nx small{display:block;color:var(--pui-mut);font-size:12.5px;margin-top:2px}
.pui .pui-lvl .pui-goal-bar i{width:auto}
.pui .pui-mestreak{flex:none;display:inline-flex;align-items:center;gap:4px;color:#fdba74;font-weight:900}
.pui .pui-mestreak svg{width:20px;height:20px;color:#fb923c}
.pui .pui-mewal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:24px;border:1px solid rgba(251,191,36,.35);background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(255,255,255,.03))}
.pui .pui-mewal small{display:block;color:#e7cf93;font-size:12.5px;font-weight:700}
.pui .pui-mewal b{font-size:24px;font-weight:900;color:var(--pui-gold)}
.pui .pui-mewal .pui-btn{background:linear-gradient(135deg,#fbbf24,#fb923c);color:#241a02}
.pui .pui-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pui .pui-tile{position:relative;display:grid;justify-items:center;align-content:center;gap:8px;min-height:92px;padding:12px 6px;border-radius:20px;border:1px solid var(--pui-line);background:var(--pui-s1);text-decoration:none;color:#fff;text-align:center;font-size:13px;font-weight:700;line-height:1.35}
.pui .pui-tile .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--pui-rgb),.14);color:var(--pui-tint)}
.pui .pui-tile .ic img{width:26px;height:26px;border-radius:50%}
.pui .pui-tile .ic svg{width:24px;height:24px}
.pui .pui-tile em{position:absolute;top:8px;inset-inline-end:8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:rgba(255,255,255,.1);font-style:normal;font-size:11.5px;line-height:20px;color:var(--pui-mut)}
.pui-flash{animation:puiFlash 1.4s ease-out}
@keyframes puiFlash{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}30%{box-shadow:0 0 0 4px rgba(251,191,36,.7),0 0 34px rgba(251,191,36,.4)}}
@media (max-width:640px){
  html.pui-me header.hero,html.pui-me .content[data-tab="overview"] .card:has(> .qa),html.pui-me .content[data-tab="overview"] .wallet-explainer{display:none!important}
}
@media (min-width:641px){.pui.pui-me{display:none}}

.pui .pui-wk{border-color:rgba(var(--pui-rgb),.4);background:linear-gradient(135deg,rgba(var(--pui-rgb),.14),rgba(167,139,250,.08)),var(--pui-s1)}
.pui .pui-x{min-width:40px;min-height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:var(--pui-mut);font-size:20px;line-height:1}

/* Tools: «Recently used» (MIBL_Mobile/tools.php) */
.pui-recent{margin:4px 0 14px}
.pui-recent small{display:block;margin-bottom:8px;color:#7dd3fc;font-weight:800;font-size:12.5px}
.pui-recent-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pui-recent-row::-webkit-scrollbar{display:none}
.pui-recent-a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);color:#e6f6ff;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.pui-recent-a span{font-size:18px}

/* ── public pages (html.pui-pub + html.pui-pg-<page>, set by mibl_m_foot when mibl_pui_public_on()) ── */
html.pui-pub .pui-foldcol > .pui-fold.closed{border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;background:rgba(255,255,255,.04)!important;padding:14px 16px!important}
/* Explore: a two-column cover grid, twenty at a time */
html.pui-pg-explore .pui-algrid{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:start}
html.pui-pg-explore .pui-algrid > :not(.al):not(.pui-more){grid-column:1/-1}
html.pui-pg-explore .pui-algrid > .al{margin:0 0 10px;min-width:0}
html.pui-pg-explore .pui-algrid > .al[open]{grid-column:1/-1}
html.pui-pg-explore .pui-algrid > .al:not([open])>summary{position:relative;display:block;padding:8px}
html.pui-pg-explore .pui-algrid > .al:not([open]) .cv{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;display:block;margin-bottom:8px}
html.pui-pg-explore .pui-algrid > .al:not([open]) :is(.og,.gm,.mst,.ct,.ar2){display:none}
html.pui-pg-explore .pui-algrid > .al:not([open]) .alp{position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px}
html.pui-pg-explore .pui-algrid > .al:not([open]) .ti{padding:0 4px 2px}
html.pui-pg-explore .al.pui-hide{display:none!important}
.pui-more{grid-column:1/-1;min-height:48px;margin:4px 0 14px;border-radius:16px;border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.08);color:#a5f3fc;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
/* VIP: the plans side by side, one swipe each */
html.pui-pg-vip .vp-tiers.pui-swipe{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;scrollbar-width:none;grid-template-columns:none!important}
html.pui-pg-vip .vp-tiers.pui-swipe::-webkit-scrollbar{display:none}
html.pui-pg-vip .vp-tiers.pui-swipe > *{flex:0 0 86%;scroll-snap-align:center;min-width:0;margin:0!important}
/* a station's own page (r.php): its colour, one big «Listen» */
html.pui-pg-r{--pui-rgb:34,211,238}
html.pui-pg-r body{background-image:radial-gradient(90% 40% at 50% 0%,rgba(var(--pui-rgb),.30),transparent 72%);background-repeat:no-repeat;background-attachment:fixed}
.pui-listen{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:14px 0 6px;border:0;border-radius:18px;font:inherit;font-size:18px;font-weight:900;color:#06121f;
  background:linear-gradient(135deg,var(--pui-tint,#22d3ee),var(--pui-tint2,#a78bfa));box-shadow:0 12px 30px rgba(var(--pui-rgb),.35);cursor:pointer;transition:transform .14s}
.pui-listen:active{transform:scale(.97)}
.pui-listen.on{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
/* sign in: bigger fields and boxes */
html.pui-pg-login .auth-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:52px!important;font-size:16px!important}
html.pui-pg-login .auth-container label{font-size:14px!important}
html.pui-pg-login .auth-container input[type=checkbox]{width:22px!important;height:22px!important;vertical-align:middle}
html.pui-pg-login .auth-container button[type=submit]{min-height:54px!important;font-size:17px!important}
/* legal pages: contents first, bigger text */
.pui-toc{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin:10px 0 18px;padding-bottom:2px}
.pui-toc::-webkit-scrollbar{display:none}
.pui-toc a{flex:none;white-space:nowrap}
.pui-toc a{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#dbe4ff;font-size:13.5px;font-weight:700;text-decoration:none}
html:is(.pui-pg-privacy,.pui-pg-terms) main{font-size:16px;line-height:1.85}
html:is(.pui-pg-privacy,.pui-pg-terms) main h2{scroll-margin-top:80px}

/* fold (MiblPUI.fold): a column of cards as rows. Every rule is «column > card», so a card moved elsewhere (the Powers workbench) is whole. */
.pui-chev{display:none}
.pui-foldcol > .pui-fold .pui-fold-handle{position:relative;cursor:pointer;padding-inline-end:34px;-webkit-tap-highlight-color:transparent}
.pui-foldcol > .pui-fold .pui-fold-handle > .pui-chev{display:block;position:absolute;inset-inline-end:2px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:rgba(255,255,255,.07);transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.pui-foldcol > .pui-fold .pui-fold-handle > .pui-chev::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-5px 0 0 -4px;border:solid #b8c1e6;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pui-foldcol > .pui-fold:not(.closed) .pui-fold-handle > .pui-chev{transform:rotate(180deg)}
.pui-foldcol > .pui-fold.closed > :not(.pui-fold-keep){display:none!important}
.pui-foldcol > .pui-fold.closed{padding-top:12px!important;padding-bottom:12px!important;margin-bottom:10px!important;min-height:0!important}
.pui-foldcol > .pui-fold.closed .pui-fold-handle{margin-top:0!important;margin-bottom:0!important}
.pui-foldcol > .pui-fold.closed > .pui-fold-keep{margin:0!important}
.pui-foldcol > .pui-fold.closed > .pui-fold-keep:not(.pui-fold-handle) > :not(:has(.pui-fold-handle)):not(.pui-fold-handle){display:none!important}
.pui-foldcol > .pui-fold .pui-fold-handle:focus-visible{outline:2px solid #22d3ee;outline-offset:3px;border-radius:8px}
html.mibl-rm .pui-foldcol .pui-chev{transition:none}

/* confetti (milestones only) */
.pui-conf{position:fixed;inset:0;width:100%;height:100%;z-index:2147483000;pointer-events:none}

/* calm: the member's switch (html.mibl-rm), the system's (reduced motion) or ours */
html.mibl-rm .pui *,html.mibl-rm .pui *::before,html.mibl-rm .pui *::after,.pui.pui-calm *,.pui.pui-calm *::before,.pui.pui-calm *::after{animation:none!important;transition-duration:.001ms!important}
@media (prefers-reduced-motion:reduce){.pui *,.pui *::before,.pui *::after{animation:none!important;transition-duration:.001ms!important}}
.pui.pui-off *{animation-play-state:paused!important}

/* ── the station dashboard on a phone, once «Today» is there (html.pui-st, set by station_today.php) ───────────────────────────
   Before: a whole first screen of account card, tab header and two link cards before anything about the station.
   Now: the section bar stays (it is how one reaches the other account pages), the rest makes room for «Today». */
@media (max-width:640px){
  html.pui-st header.hero,
  html.pui-st .stx > .mtabhd,
  html.pui-st .stx .quicknav{display:none!important}
  html.pui-st .stx .cmdtabs{position:sticky;top:var(--pui-top,0px);z-index:5;display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:4px 4px 0;
    background:rgba(9,10,26,.97);border-bottom:1px solid rgba(255,255,255,.08);border-radius:14px 14px 0 0}
  html.pui-st .stx .cmdtabs::-webkit-scrollbar{display:none}
  html.pui-st .stx .cmdtab{flex:none;min-height:46px;padding:0 13px;border-radius:12px 12px 0 0;font-size:14px;font-weight:700;background:none!important}
  html.pui-st .stx .cmdtab .ct-ic{font-size:15px}
  /* Powers: two tiles a row instead of one, and a tile off screen is not painted (it had 188 animations running at once) */
  html.pui-st .stx .pw-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  html.pui-st .stx .pw-tile{content-visibility:auto;contain-intrinsic-size:auto 230px}
}