/* The glass back button (same look as the Aqari app): a round Liquid Glass button in the app bar on every screen opened from "More", and the same glass
   on the screens' own "← Back" capsule. 44 pt, light and dark (follows --card), mirrored in Arabic. */
.glassback{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; flex:none; margin-inline-end:10px; vertical-align:middle;
  color:var(--ink); cursor:pointer; border:0; padding:0;
  background:color-mix(in srgb, var(--card, #fff) 62%, transparent); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 .5px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.16);
  transition:transform .14s cubic-bezier(.2,.8,.2,1), opacity .14s ease }
.glassback svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.glassback:active{ transform:scale(.94); opacity:.85 }
html[dir=rtl] .glassback svg{ transform:scaleX(-1) }
.appbar.has-back .mark{ display:none !important }
.appbar .big{ align-items:center }
#btnBack{ min-height:44px; border-radius:22px; padding:0 18px; border:0; color:var(--ink);
  background:color-mix(in srgb, var(--card, #fff) 62%, transparent); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 .5px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.14) }
@media(prefers-reduced-transparency:reduce){ .glassback, #btnBack{ background:var(--card, #fff); -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--line) } }
@media(prefers-reduced-motion:reduce){ .glassback{ transition:none } }