/* ==========================================================================
   Quiet Data v198: "Liquid Glass (Apple style)" design. Loaded after liquid.css and ONLY switched on when
   Admin > Site control > Site design is set to "Liquid Glass (Apple style)" (html[data-ui="ios"]).
   Every rule starts with html[data-ui="ios"], so with any other design chosen this file does nothing at all.
   It only changes looks (glass clarity, light edges, corner size, tap feel). It never changes layout, text, prices,
   scripts or what a button does. It reuses the colour variables of liquid.css, so it cannot hide any content.
   Tap animation is pure CSS (transform only), skipped for "reduce motion", and blur is dropped on Android as before.
   ========================================================================== */

/* ---------- tokens: clearer glass, thin bright edge, soft specular light ---------- */
html[data-ui="ios"] body.guest-mode{
  --lq-blur:blur(24px) saturate(1.9);
  --lq-fill:rgba(255,255,255,.46);--lq-fill2:rgba(255,255,255,.2);
  --lq-edge:rgba(255,255,255,.78);
  --lq-rim:rgba(255,255,255,.35);
  --lq-sh:0 10px 30px rgba(var(--st-sh,60,40,140),.12),0 1px 3px rgba(var(--st-sh,60,40,140),.06);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 26px rgba(255,255,255,.18);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%)}
html[data-ui="ios"] body:not(.guest-mode){
  --lq-blur:blur(22px) saturate(1.9);
  --lq-fill:rgba(255,255,255,.12);--lq-fill2:rgba(255,255,255,.035);
  --lq-edge:rgba(255,255,255,.3);
  --lq-sh:0 12px 34px rgba(2,6,18,.42),0 1px 3px rgba(2,6,18,.3);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.5),inset 1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 24px rgba(255,255,255,.05);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%)}

/* ---------- bigger, softer corners on the main cards ---------- */
html[data-ui="ios"] body .gx-acc,html[data-ui="ios"] body .gx-feat,html[data-ui="ios"] body .surface,
html[data-ui="ios"] body .card-form,html[data-ui="ios"] body .verification-card,html[data-ui="ios"] body .track-card,
html[data-ui="ios"] body .p-card,html[data-ui="ios"] body .net-card{border-radius:30px}
html[data-ui="ios"] body .co-modal{border-radius:32px}

/* ---------- bottom bar of the signed-in app: clear floating glass, active tab is a lit glass capsule ---------- */
html[data-ui="ios"] body:not(.guest-mode) .taskbar{
  border-radius:34px;
  background:var(--lq-gloss),linear-gradient(150deg,rgba(70,84,140,.5),rgba(28,38,78,.42));
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}
html[data-ui="ios"] body:not(.guest-mode) .tab.active{
  background:var(--lq-gloss),linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.32);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(0,0,0,.22)}

/* ---------- tap animation: a quick springy press (transform only, so it never slows scrolling) ---------- */
html[data-ui="ios"] .btn,html[data-ui="ios"] .co-btn,html[data-ui="ios"] .auth-submit,html[data-ui="ios"] .tab,
html[data-ui="ios"] .buy,html[data-ui="ios"] .bundle,html[data-ui="ios"] .gx-bundle{
  transition:transform .42s cubic-bezier(.2,1.6,.4,1),box-shadow .25s ease!important;
  -webkit-tap-highlight-color:transparent}
html[data-ui="ios"] .btn:active,html[data-ui="ios"] .co-btn:active,html[data-ui="ios"] .auth-submit:active,
html[data-ui="ios"] .tab:active,html[data-ui="ios"] .buy:active,html[data-ui="ios"] .bundle:active,html[data-ui="ios"] .gx-bundle:active{
  transform:scale(.95)!important;transition-duration:.1s!important}

/* ---------- phones and fallbacks (same safeguards as liquid.css: lighter blur on iPhone, none on Android) ---------- */
@media (max-width:380px){
  html[data-ui="ios"] body .gx-acc,html[data-ui="ios"] body .surface,html[data-ui="ios"] body .card-form,
  html[data-ui="ios"] body .track-card,html[data-ui="ios"] body .gx-feat,html[data-ui="ios"] body .p-card{border-radius:24px}
}
@supports (-webkit-touch-callout:none){
  html[data-ui="ios"] body.guest-mode{--lq-blur:blur(16px) saturate(1.6)}
  html[data-ui="ios"] body:not(.guest-mode){--lq-blur:blur(14px) saturate(1.6)}
}
html.is-android[data-ui="ios"] body.guest-mode{--lq-blur:none;--lq-fill:rgba(255,255,255,.84);--lq-fill2:rgba(255,255,255,.68)}
html.is-android[data-ui="ios"] body:not(.guest-mode){--lq-blur:none;--lq-fill:rgba(255,255,255,.12);--lq-fill2:rgba(255,255,255,.05)}
html.is-android[data-ui="ios"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-ui="ios"] body.guest-mode{--lq-fill:rgba(255,255,255,.84);--lq-fill2:rgba(255,255,255,.68)}
  html[data-ui="ios"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
}
@media (prefers-reduced-transparency:reduce){
  html[data-ui="ios"] body.guest-mode{--lq-blur:none;--lq-fill:rgba(255,255,255,.88);--lq-fill2:rgba(255,255,255,.74)}
  html[data-ui="ios"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
}
@media (prefers-reduced-motion:reduce){
  html[data-ui="ios"] .btn,html[data-ui="ios"] .co-btn,html[data-ui="ios"] .auth-submit,html[data-ui="ios"] .tab,
  html[data-ui="ios"] .buy,html[data-ui="ios"] .bundle,html[data-ui="ios"] .gx-bundle{transition:none!important}
  html[data-ui="ios"] .btn:active,html[data-ui="ios"] .co-btn:active,html[data-ui="ios"] .auth-submit:active,
  html[data-ui="ios"] .tab:active,html[data-ui="ios"] .buy:active,html[data-ui="ios"] .bundle:active,html[data-ui="ios"] .gx-bundle:active{transform:none!important}
}

/* ==========================================================================
   v199: "Vivid Liquid Glass" (html[data-ui="vivid"]). Same shapes, bottom bar and tap animation as above (the copy below),
   but the glass no longer lays a white veil over the colours: much thinner white fill, a faint highlight instead of a bright one,
   stronger colour saturation behind the glass and a stronger coloured page backdrop. Text colours are untouched.
   ========================================================================== */
/* ---------- tokens: clearer glass, thin bright edge, soft specular light ---------- */
html[data-ui="vivid"] body.guest-mode{
  --lq-blur:blur(24px) saturate(1.9);
  --lq-fill:rgba(255,255,255,.46);--lq-fill2:rgba(255,255,255,.2);
  --lq-edge:rgba(255,255,255,.78);
  --lq-rim:rgba(255,255,255,.35);
  --lq-sh:0 10px 30px rgba(var(--st-sh,60,40,140),.12),0 1px 3px rgba(var(--st-sh,60,40,140),.06);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 26px rgba(255,255,255,.18);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%)}
html[data-ui="vivid"] body:not(.guest-mode){
  --lq-blur:blur(22px) saturate(1.9);
  --lq-fill:rgba(255,255,255,.12);--lq-fill2:rgba(255,255,255,.035);
  --lq-edge:rgba(255,255,255,.3);
  --lq-sh:0 12px 34px rgba(2,6,18,.42),0 1px 3px rgba(2,6,18,.3);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.5),inset 1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 24px rgba(255,255,255,.05);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%)}

/* ---------- bigger, softer corners on the main cards ---------- */
html[data-ui="vivid"] body .gx-acc,html[data-ui="vivid"] body .gx-feat,html[data-ui="vivid"] body .surface,
html[data-ui="vivid"] body .card-form,html[data-ui="vivid"] body .verification-card,html[data-ui="vivid"] body .track-card,
html[data-ui="vivid"] body .p-card,html[data-ui="vivid"] body .net-card{border-radius:30px}
html[data-ui="vivid"] body .co-modal{border-radius:32px}

/* ---------- bottom bar of the signed-in app: clear floating glass, active tab is a lit glass capsule ---------- */
html[data-ui="vivid"] body:not(.guest-mode) .taskbar{
  border-radius:34px;
  background:var(--lq-gloss),linear-gradient(150deg,rgba(70,84,140,.5),rgba(28,38,78,.42));
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}
html[data-ui="vivid"] body:not(.guest-mode) .tab.active{
  background:var(--lq-gloss),linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.32);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(0,0,0,.22)}

/* ---------- tap animation: a quick springy press (transform only, so it never slows scrolling) ---------- */
html[data-ui="vivid"] .btn,html[data-ui="vivid"] .co-btn,html[data-ui="vivid"] .auth-submit,html[data-ui="vivid"] .tab,
html[data-ui="vivid"] .buy,html[data-ui="vivid"] .bundle,html[data-ui="vivid"] .gx-bundle{
  transition:transform .42s cubic-bezier(.2,1.6,.4,1),box-shadow .25s ease!important;
  -webkit-tap-highlight-color:transparent}
html[data-ui="vivid"] .btn:active,html[data-ui="vivid"] .co-btn:active,html[data-ui="vivid"] .auth-submit:active,
html[data-ui="vivid"] .tab:active,html[data-ui="vivid"] .buy:active,html[data-ui="vivid"] .bundle:active,html[data-ui="vivid"] .gx-bundle:active{
  transform:scale(.95)!important;transition-duration:.1s!important}

/* ---------- phones and fallbacks (same safeguards as liquid.css: lighter blur on iPhone, none on Android) ---------- */
@media (max-width:380px){
  html[data-ui="vivid"] body .gx-acc,html[data-ui="vivid"] body .surface,html[data-ui="vivid"] body .card-form,
  html[data-ui="vivid"] body .track-card,html[data-ui="vivid"] body .gx-feat,html[data-ui="vivid"] body .p-card{border-radius:24px}
}
@supports (-webkit-touch-callout:none){
  html[data-ui="vivid"] body.guest-mode{--lq-blur:blur(16px) saturate(1.6)}
  html[data-ui="vivid"] body:not(.guest-mode){--lq-blur:blur(14px) saturate(1.6)}
}
html.is-android[data-ui="vivid"] body.guest-mode{--lq-blur:none;--lq-fill:rgba(255,255,255,.84);--lq-fill2:rgba(255,255,255,.68)}
html.is-android[data-ui="vivid"] body:not(.guest-mode){--lq-blur:none;--lq-fill:rgba(255,255,255,.12);--lq-fill2:rgba(255,255,255,.05)}
html.is-android[data-ui="vivid"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-ui="vivid"] body.guest-mode{--lq-fill:rgba(255,255,255,.84);--lq-fill2:rgba(255,255,255,.68)}
  html[data-ui="vivid"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
}
@media (prefers-reduced-transparency:reduce){
  html[data-ui="vivid"] body.guest-mode{--lq-blur:none;--lq-fill:rgba(255,255,255,.88);--lq-fill2:rgba(255,255,255,.74)}
  html[data-ui="vivid"] body:not(.guest-mode) .taskbar{background:linear-gradient(150deg,rgba(38,50,92,.96),rgba(22,30,62,.96))}
}
@media (prefers-reduced-motion:reduce){
  html[data-ui="vivid"] .btn,html[data-ui="vivid"] .co-btn,html[data-ui="vivid"] .auth-submit,html[data-ui="vivid"] .tab,
  html[data-ui="vivid"] .buy,html[data-ui="vivid"] .bundle,html[data-ui="vivid"] .gx-bundle{transition:none!important}
  html[data-ui="vivid"] .btn:active,html[data-ui="vivid"] .co-btn:active,html[data-ui="vivid"] .auth-submit:active,
  html[data-ui="vivid"] .tab:active,html[data-ui="vivid"] .buy:active,html[data-ui="vivid"] .bundle:active,html[data-ui="vivid"] .gx-bundle:active{transform:none!important}
}

/* ---------- vivid colour overrides (after the shared copy so they win) ---------- */
html[data-ui="vivid"] body.guest-mode{
  --lq-blur:blur(22px) saturate(2.6);
  --lq-fill:rgba(255,255,255,.26);--lq-fill2:rgba(255,255,255,.09);
  --lq-edge:rgba(255,255,255,.7);
  --lq-rim:rgba(var(--st-rgb,109,76,240),.38);
  --lq-sh:0 14px 34px rgba(var(--st-rgb,109,76,240),.28),0 2px 6px rgba(var(--st-sh,60,40,140),.1);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -14px 26px rgba(var(--st-rgb,109,76,240),.16),inset 0 0 0 1px rgba(255,255,255,.2);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%);
  background-image:
    radial-gradient(380px 360px at 96% 3%,rgba(52,195,180,.62),transparent 70%),
    radial-gradient(440px 400px at 2% 9%,rgba(var(--st-rgb,109,76,240),.56),transparent 70%),
    radial-gradient(400px 380px at 104% 30%,color-mix(in srgb,var(--st-g2,#6366f1) 55%,transparent),transparent 70%),
    radial-gradient(440px 400px at -6% 47%,rgba(255,130,185,.58),transparent 70%),
    radial-gradient(420px 380px at 104% 64%,rgba(52,195,180,.55),transparent 70%),
    radial-gradient(440px 400px at -4% 82%,rgba(var(--st-rgb,109,76,240),.5),transparent 70%),
    radial-gradient(420px 380px at 100% 98%,rgba(255,160,110,.55),transparent 70%),
    linear-gradient(180deg,#f1ecf6,#e6e0ee 60%,#ebe5ef)}
html[data-ui="vivid"] body:not(.guest-mode){
  --lq-blur:blur(22px) saturate(2.4);
  --lq-fill:rgba(120,140,255,.18);--lq-fill2:rgba(120,140,255,.05);
  --lq-edge:rgba(160,180,255,.4);
  --lq-sh:0 14px 36px rgba(2,6,18,.5),0 2px 8px rgba(40,60,200,.18);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -14px 28px rgba(120,100,255,.14),inset 0 0 0 1px rgba(255,255,255,.05);
  --lq-gloss:linear-gradient(160deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%)}
html[data-ui="vivid"] body:not(.guest-mode) .tab.active{
  background:var(--lq-gloss),linear-gradient(135deg,#7a62f0,#5a7cf5 55%,#34c3b4);
  border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(90,100,245,.5)}
html.is-android[data-ui="vivid"] body.guest-mode{--lq-fill:rgba(255,255,255,.72);--lq-fill2:rgba(255,255,255,.52)}
html.is-android[data-ui="vivid"] body:not(.guest-mode){--lq-fill:rgba(120,140,255,.2);--lq-fill2:rgba(120,140,255,.07)}

/* ==========================================================================
   v200: Vivid Liquid Glass, signed-in pages (dashboard, offers, orders, profile, agent): true colours, soft and fast.
   Cause of the faded look: the shared glass tokens laid a blue-white veil and a bright gloss layer over every card, and the bottom bar
   was see-through, so the original card colours looked washed out. Here the cards keep their own colours (nothing is laid over them),
   edges and shadows are thin and soft, and the bottom bar is a deep solid navy so its icons and labels stay sharp.
   Speed: fewer and lighter shadows (no big blurred shadow or inner glow on every row), no live blur on the signed-in pages, and on Android
   the springy tap animation is replaced by an instant press. Looks only: no layout, text, price, script or button behaviour changes.
   Only html[data-ui="vivid"] and only body:not(.guest-mode), so the guest page, store links and the other four designs are untouched.
   ========================================================================== */
html[data-ui="vivid"] body:not(.guest-mode){
  --lq-blur:none;
  --lq-fill:rgba(255,255,255,.03);--lq-fill2:rgba(255,255,255,0);
  --lq-edge:rgba(255,255,255,.13);
  --lq-sh:0 8px 22px rgba(2,6,18,.34);
  --lq-in:inset 0 1px 0 rgba(255,255,255,.1);
  --lq-gloss:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 40%)}
html[data-ui="vivid"] body:not(.guest-mode) .order,
html[data-ui="vivid"] body:not(.guest-mode) .bundle{box-shadow:0 3px 10px rgba(2,6,18,.28),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-ui="vivid"] body:not(.guest-mode) .taskbar{
  background:linear-gradient(150deg,rgba(30,42,86,.97),rgba(16,24,52,.97));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(2,6,18,.5),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ui="vivid"] body:not(.guest-mode) .tab.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(90,100,245,.42)}
/* Android: same colours, instant press instead of the spring, cheaper still */
html.is-android[data-ui="vivid"] body:not(.guest-mode){--lq-fill:rgba(255,255,255,.03);--lq-fill2:rgba(255,255,255,0);--lq-sh:0 4px 12px rgba(2,6,18,.3)}
html.is-android[data-ui="vivid"] body:not(.guest-mode) .btn,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .co-btn,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .auth-submit,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .tab,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .buy,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .bundle{transition:background-color .12s ease,opacity .12s ease!important}
html.is-android[data-ui="vivid"] body:not(.guest-mode) .btn:active,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .co-btn:active,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .auth-submit:active,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .tab:active,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .buy:active,
html.is-android[data-ui="vivid"] body:not(.guest-mode) .bundle:active{transform:none!important;opacity:.88}