/* FITGET public pages — "Liquid Glass" layer (same system as /admin/admin.css, trimmed for public pages).
   Linked LAST in <head> on every public page, so it restyles the page's own rules without touching markup or ids.
   Glass = translucent fill + backdrop blur/saturate + 1px inner highlight + specular sheen + layered shadow.
   Logical properties only (RTL/LTR). Fallbacks: reduced motion, reduced transparency, no backdrop-filter, more contrast. */
:root {
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Tajawal, "Segoe UI", system-ui, sans-serif;
  --g-ease: cubic-bezier(.2, .7, .2, 1);
  --g-spring: cubic-bezier(.34, 1.4, .64, 1);
  --g-blur: 24px; --g-sat: 1.8;
  --g-r-sm: 14px; --g-r-md: 22px; --g-r-lg: 30px; --g-r-xl: 38px;
  /* light */
  --g-bg: #e8edf7; --g-a: #bcd3ff; --g-b: #e0cdff; --g-c: #bdeedd; --g-d: #ffe0c2;
  --g-glass: rgb(255 255 255 / .60); --g-glass-2: rgb(255 255 255 / .42); --g-glass-3: rgb(255 255 255 / .82);
  --g-edge: rgb(255 255 255 / .85); --g-hi: rgb(255 255 255 / .95); --g-low: rgb(30 45 90 / .10);
  --g-text: #121722; --g-text-2: #2b3445; --g-muted: #4a566a;
  --g-line: rgb(30 45 90 / .14);
  --g-acc: #1a5fd8; --g-acc-2: #6a3fd6; --g-on-acc: #ffffff; --g-acc-soft: rgb(26 95 216 / .14);
  --g-ok: #0a6a42; --g-bad: #b3261f;
  --g-shadow: 0 1px 2px rgb(20 30 70 / .06), 0 8px 24px -8px rgb(20 30 70 / .16);
  --g-shadow-2: 0 2px 6px rgb(20 30 70 / .08), 0 28px 60px -14px rgb(20 30 70 / .32);
  /* map the pages' own hsl tokens onto the glass palette (inline <style> blocks still use them) */
  --foreground: 222 28% 11%; --muted-foreground: 218 18% 34%; --primary: 217 78% 47%; --primary-foreground: 0 0% 100%;
  --accent: 262 62% 52%; --success: 152 85% 23%; --danger: 3 70% 40%; --border: 222 30% 30% / .16;
  color-scheme: light;
}
:root.dark {
  --g-bg: #090c14; --g-a: #1c3f8f; --g-b: #4a2a8f; --g-c: #0f6b57; --g-d: #7a3a1c;
  --g-glass: rgb(24 29 44 / .56); --g-glass-2: rgb(34 40 60 / .45); --g-glass-3: rgb(30 36 54 / .84);
  --g-edge: rgb(255 255 255 / .17); --g-hi: rgb(255 255 255 / .24); --g-low: rgb(0 0 0 / .38);
  --g-text: #eef1f7; --g-text-2: #cdd4e2; --g-muted: #a9b3c6;
  --g-line: rgb(255 255 255 / .13);
  --g-acc: #7db2ff; --g-acc-2: #b79bff; --g-on-acc: #07101f; --g-acc-soft: rgb(125 178 255 / .16);
  --g-ok: #55d6a0; --g-bad: #ff8d88;
  --g-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -8px rgb(0 0 0 / .55);
  --g-shadow-2: 0 2px 8px rgb(0 0 0 / .4), 0 30px 70px -14px rgb(0 0 0 / .75);
  --foreground: 222 30% 95%; --muted-foreground: 218 20% 72%; --primary: 213 100% 74%; --primary-foreground: 222 60% 8%;
  --accent: 262 100% 80%; --success: 154 62% 62%; --danger: 3 100% 77%; --border: 0 0% 100% / .14;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  /* pages with no stored theme and no toggle (invite page) */
  :root:not(.dark):not(.light):not([data-glass-js]) {
    --g-bg: #090c14; --g-a: #1c3f8f; --g-b: #4a2a8f; --g-c: #0f6b57; --g-d: #7a3a1c;
    --g-glass: rgb(24 29 44 / .56); --g-glass-2: rgb(34 40 60 / .45); --g-glass-3: rgb(30 36 54 / .84);
    --g-edge: rgb(255 255 255 / .17); --g-hi: rgb(255 255 255 / .24); --g-low: rgb(0 0 0 / .38);
    --g-text: #eef1f7; --g-text-2: #cdd4e2; --g-muted: #a9b3c6; --g-line: rgb(255 255 255 / .13);
    --g-acc: #7db2ff; --g-acc-2: #b79bff; --g-on-acc: #07101f; --g-acc-soft: rgb(125 178 255 / .16);
    --g-ok: #55d6a0; --g-bad: #ff8d88; color-scheme: dark;
  }
}

/* ---------- base + ambient mesh ---------- */
html { background: var(--g-bg); -webkit-text-size-adjust: 100%; }
body { background: transparent !important; color: var(--g-text) !important; font-family: var(--g-font); line-height: 1.6;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; overflow-x: clip; }
html[dir="rtl"] body, [lang="ar"] body { font-family: Tajawal, -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
body::before { inset-block-start: -26vmax; inset-inline-start: -16vmax; background: radial-gradient(circle, var(--g-a), transparent 65%); opacity: .75; animation: g-drift1 46s ease-in-out infinite alternate; }
body::after { inset-block-end: -32vmax; inset-inline-end: -14vmax; background: radial-gradient(circle, var(--g-b), transparent 65%), radial-gradient(circle at 20% 80%, var(--g-c), transparent 55%); opacity: .7; animation: g-drift2 58s ease-in-out infinite alternate; }
@keyframes g-drift1 { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.08); } }
@keyframes g-drift2 { to { transform: translate3d(-9vmax, -7vmax, 0) scale(1.1); } }
a { color: var(--g-acc); }
::selection { background: var(--g-acc-soft); }
:focus-visible { outline: 2px solid var(--g-acc) !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px var(--g-acc-soft); }
.skip-link { position: absolute; inset-inline-start: 8px; top: -64px; z-index: 100; background: var(--g-acc); color: var(--g-on-acc); padding: 8px 12px; border-radius: 10px; }
.skip-link:focus { top: 8px; }

/* ---------- glass material ---------- */
header.top, body > header, .card, .stat, .feat, .choice, .door, .plan, .g-card, .g-pill, .devices li, .sticky, .qr,
.codebox span, footer.bottom, .store-btn:not(.primary), .btn:not(.primary), .lang, .gtheme, .quick a, .step {
  background: linear-gradient(145deg, rgb(255 255 255 / .16), transparent 45%), var(--g-glass);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 -1px 0 var(--g-low), var(--g-shadow);
  color: var(--g-text);
}
.card, .stat, .feat, .choice, .door, .g-card { border-radius: var(--g-r-md); position: relative; isolation: isolate; }
/* specular sheen following the pointer (--mx/--my set by glass.js) */
.card::after, .feat::after, .choice::after, .g-card::after, .door::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -30%), rgb(255 255 255 / .24), transparent 62%); opacity: 0; transition: opacity .35s var(--g-ease); }
.card:hover::after, .feat:hover::after, .choice:hover::after, .g-card:hover::after, .door:hover::before { opacity: 1; }
.card > *, .feat > *, .g-card > * { position: relative; z-index: 1; }
.card.featured { border-color: color-mix(in srgb, var(--g-acc) 60%, transparent); box-shadow: inset 0 1px 0 var(--g-hi), 0 0 0 1px color-mix(in srgb, var(--g-acc) 40%, transparent), var(--g-shadow-2); }

/* ---------- header: floating glass bar ---------- */
header.top, body > header { position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 50; max-width: 1180px; width: calc(100% - 24px);
  margin: 10px auto 0; padding: 8px 10px 8px 16px; padding-inline: 16px 10px; border-radius: var(--g-r-lg); border-bottom: 1px solid var(--g-edge); }
header.top .brand, body > header a.brand { color: var(--g-text); gap: 10px; }
header.top .brand img, body > header img { border-radius: 10px; border: 1px solid var(--g-edge); }
header.top .brand b { color: var(--g-acc); }
header.top nav, body > header nav { gap: 6px !important; }
header.top nav a, body > header nav a { color: var(--g-text-2) !important; padding: 8px 12px; border-radius: 999px; transition: background .2s var(--g-ease), color .2s; }
header.top nav a:hover, header.top nav a[aria-current], body > header nav a:hover { background: var(--g-glass-2); color: var(--g-text) !important; }
header.top nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--g-edge); }
.lang, .gtheme, header .lang { height: 38px; min-width: 38px; padding: 0 14px; border-radius: 999px; width: auto; display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--g-font); color: var(--g-text); cursor: pointer; transition: transform .18s var(--g-spring), background .2s; }
.gtheme { padding: 0; width: 38px; }
.gtheme svg { width: 18px; height: 18px; }
.lang:hover, .gtheme:hover { background: var(--g-glass-3); transform: translateY(-1px); }
.lang:active, .gtheme:active { transform: scale(.94); }
header .gtheme { width: 38px !important; height: 38px !important; padding: 0 !important; }

/* ---------- typography ---------- */
h1, h2, h3 { color: var(--g-text); letter-spacing: -.02em; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; }
.eyebrow { color: var(--g-acc); }
.lead, .sub, .note, .muted, .stat span, .feat p, .plan small, .soon-note { color: var(--g-muted) !important; }
.note a, .lead a, main p a { color: var(--g-acc); }
h1 span[data-en]:first-child { }

/* ---------- controls ---------- */
.btn, .store-btn, .quick a, main button:not(.link):not(.lang):not(.gtheme) { transition: transform .2s var(--g-spring), box-shadow .2s var(--g-ease), background .2s var(--g-ease); }
.btn, .store-btn { border-radius: 999px; font-weight: 650; }
.btn:hover, .store-btn:hover, .quick a:hover { transform: translateY(-2px); background: var(--g-glass-3); }
.btn:active, .store-btn:active, .quick a:active, main button:active { transform: scale(.97); transition-duration: .08s; }
.btn.primary, .store-btn.primary, main button.primary, .door .go.p {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-acc) 86%, #fff), var(--g-acc)) !important; color: var(--g-on-acc) !important; border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 10px 26px -8px color-mix(in srgb, var(--g-acc) 70%, transparent) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn.primary:hover, .store-btn.primary:hover, main button.primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.store-btn:not(.primary) { color: var(--g-text); }
.store-btn { height: 58px; }
.btn[aria-disabled="true"], .store-btn[aria-disabled="true"] { opacity: .6; }
main button:not(.link):not(.lang):not(.gtheme):not(.primary) { background: var(--g-glass-2); border: 1px solid var(--g-edge); color: var(--g-text); border-radius: 999px; box-shadow: inset 0 1px 0 var(--g-hi); }
main button:not(.link):not(.lang):not(.gtheme):not(.primary):hover { background: var(--g-glass-3); }
button.link, .link { color: var(--g-acc) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
input, select, textarea { background: var(--g-glass-2) !important; color: var(--g-text) !important; border: 1px solid var(--g-line) !important; border-radius: var(--g-r-sm) !important;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--g-acc) !important; box-shadow: 0 0 0 4px var(--g-acc-soft); }
label { color: var(--g-muted); }
.or { color: var(--g-muted); } .or::before, .or::after { background: var(--g-line); }
.msg.err { background: color-mix(in srgb, var(--g-bad) 14%, transparent); color: var(--g-bad); border: 1px solid color-mix(in srgb, var(--g-bad) 30%, transparent); }
.msg.ok { background: color-mix(in srgb, var(--g-ok) 14%, transparent); color: var(--g-ok); border: 1px solid color-mix(in srgb, var(--g-ok) 30%, transparent); }
.badge { background: var(--g-acc-soft); color: var(--g-acc); border: 1px solid color-mix(in srgb, var(--g-acc) 25%, transparent); }
.badge.soon, .soon { color: var(--g-muted); }
.pill { background: color-mix(in srgb, var(--g-ok) 16%, transparent); color: var(--g-ok); }
.pill.free { background: var(--g-glass-2); color: var(--g-muted); }
ul.features li::before { color: var(--g-ok); }
.stat b, .feat svg { color: var(--g-acc); }
.avatar { background: var(--g-acc-soft); color: var(--g-acc); }
.plan { border-radius: var(--g-r-sm); }
.devices li { color: var(--g-text-2); }
.mark { background: var(--g-acc-soft) !important; color: var(--g-acc) !important; box-shadow: inset 0 1px 0 var(--g-hi); }
.error .mark { background: color-mix(in srgb, var(--g-bad) 16%, transparent) !important; color: var(--g-bad) !important; }
.fg-ad::before { color: var(--g-muted); opacity: 1; }

/* ---------- lists / footer ---------- */
footer.bottom { max-width: 1180px; width: calc(100% - 24px); margin: 32px auto 12px; border-radius: var(--g-r-lg); color: var(--g-muted); border-top: 1px solid var(--g-edge); }
footer.bottom a { color: var(--g-text-2); }
.sticky { border-radius: 0; border-inline: 0; border-bottom: 0; background: var(--g-glass-3); }

/* ---------- entrance (spring, once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .g-in { animation: g-in .7s var(--g-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes g-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top, body > header, .card, .stat, .feat, .choice, .door, .plan, .g-card, .g-pill, .devices li, .sticky, .qr, footer.bottom, .store-btn:not(.primary), .btn:not(.primary), .lang, .gtheme, .quick a, .step { background: var(--g-glass-3); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --g-glass: var(--g-glass-3); --g-glass-2: var(--g-glass-3); }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) { :root { --g-edge: var(--g-text-2); --g-line: var(--g-text-2); } }
@media (max-width: 560px) { header.top, body > header { width: calc(100% - 16px); margin-top: 8px; padding-inline: 12px 8px; } header.top nav a, body > header nav a { padding: 8px; } }
.qr { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.danger, main button.danger { color: var(--g-bad) !important; border-color: color-mix(in srgb, var(--g-bad) 40%, transparent) !important; }
.grid .card > p { margin: 0; }
header.top { flex-wrap: nowrap; min-width: 0; }
header.top .brand { min-width: 0; flex: none; }
@media (max-width: 480px) {
  header.top nav a:not([aria-current]) { display: none; }
  header.top nav { gap: 4px !important; }
}