/* ==========================================================================
   Liquid Glass theme layer — translucent refractive surfaces over a living
   colour field, floating capsule navigation, pill controls, glass icons.
   Loaded after app.css; only overrides tokens and surfaces.
   ========================================================================== */
:root {
  --tint: #4f5bff;
  --tint-2: #b04dff;
  --tint-soft: color-mix(in srgb, var(--tint) 13%, transparent);

  --bg: #eef0f8;
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-thin: rgba(255, 255, 255, .34);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-edge-2: rgba(255, 255, 255, .25);
  --glass-blur: blur(26px) saturate(190%);
  --bg-elev: var(--glass);
  --bar: rgba(255, 255, 255, .58);
  --fill: rgba(118, 124, 160, .12);
  --fill-2: rgba(118, 124, 160, .22);
  --label: #0d0f1a;
  --label-2: rgba(28, 32, 58, .62);
  --label-3: rgba(28, 32, 58, .34);
  --sep: rgba(40, 46, 90, .10);
  --shadow: 0 1px 1px rgba(20, 24, 60, .04), 0 10px 30px -14px rgba(36, 40, 110, .28);
  --shadow-lg: 0 30px 70px -24px rgba(30, 30, 100, .45);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .35);

  --r-sm: 12px; --r: 22px; --r-lg: 26px; --r-xl: 32px;
  --tabbar-h: 68px;
  --orb-1: #7c83ff; --orb-2: #ff7ac6; --orb-3: #4fd1ff; --orb-4: #ffc46b;
}
:root[data-theme="dark"] {
  --bg: #07070d;
  --glass: rgba(30, 32, 48, .48);
  --glass-strong: rgba(36, 38, 56, .7);
  --glass-thin: rgba(40, 42, 64, .3);
  --glass-edge: rgba(255, 255, 255, .22);
  --glass-edge-2: rgba(255, 255, 255, .05);
  --bar: rgba(26, 28, 42, .55);
  --fill: rgba(150, 156, 200, .14); --fill-2: rgba(150, 156, 200, .24);
  --label: #f4f5fb; --label-2: rgba(226, 230, 255, .62); --label-3: rgba(226, 230, 255, .32);
  --sep: rgba(255, 255, 255, .08);
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .9);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --tint: #7d86ff;
  --orb-1: #3d3fd9; --orb-2: #b0247a; --orb-3: #0b7fb3; --orb-4: #8a4b10;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07070d;
    --glass: rgba(30, 32, 48, .48); --glass-strong: rgba(36, 38, 56, .7); --glass-thin: rgba(40, 42, 64, .3);
    --glass-edge: rgba(255, 255, 255, .22); --glass-edge-2: rgba(255, 255, 255, .05);
    --bar: rgba(26, 28, 42, .55);
    --fill: rgba(150, 156, 200, .14); --fill-2: rgba(150, 156, 200, .24);
    --label: #f4f5fb; --label-2: rgba(226, 230, 255, .62); --label-3: rgba(226, 230, 255, .32);
    --sep: rgba(255, 255, 255, .08);
    --shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .9);
    --hi: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .07);
    --tint: #7d86ff;
    --orb-1: #3d3fd9; --orb-2: #b0247a; --orb-3: #0b7fb3; --orb-4: #8a4b10;
  }
}

/* ---------- living colour field behind the glass ---------- */
body { background: var(--bg); }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, var(--orb-1), transparent 62%),
    radial-gradient(34vmax 34vmax at 92% 18%, var(--orb-2), transparent 60%),
    radial-gradient(40vmax 40vmax at 78% 92%, var(--orb-3), transparent 62%),
    radial-gradient(30vmax 30vmax at 8% 82%, var(--orb-4), transparent 60%);
  opacity: .85; filter: saturate(125%);
  animation: drift 38s ease-in-out infinite alternate;
}
body::after { /* fine grain so large blurs never band */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { opacity: .5; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg); } 100% { transform: translate3d(-2vmax, 3vmax, 0) rotate(-6deg); } }

/* ---------- the glass material ---------- */
.list, .card, .kpi, .form-list, .mini-card, .tl-card, .table-wrap, .chip, .search input, .segmented,
.input-solo, .banner, .rail, .springboard-wrap, dialog.sheet, .toast, .stepper, .rail .me {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--hi), var(--shadow);
  border: 0;
}
.row, .pick, .field { background: transparent; }
.row + .row::before, .field + .field::before, .pick + .pick::before { border-top-color: var(--sep); }
a.row:active, button.row:active, label.row:active, .pick:active { background: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] a.row:active, :root[data-theme="dark"] button.row:active { background: rgba(255, 255, 255, .06); }

.list, .form-list, .table-wrap { border-radius: var(--r); }
.card, .kpi, .mini-card { border-radius: var(--r-lg); }
.card, .kpi { padding: 18px; }

/* specular sheen on raised surfaces */
.card, .kpi, .mini-card, .hero { position: relative; isolation: isolate; }
.kpi::after, .mini-card::after, .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%);
  opacity: .5;
}
:root[data-theme="dark"] .kpi::after, :root[data-theme="dark"] .mini-card::after, :root[data-theme="dark"] .card::after { opacity: .12; }

/* ---------- typography & sizes ---------- */
body { font-size: 16px; line-height: 1.5; }
.page-head { padding: 6px 4px 18px; }
.page-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.035em; }
.section-title h2 { font-size: 21px; font-weight: 780; }
.row { min-height: 58px; padding: 11px 16px; gap: 13px; }
.row .title { font-size: 16px; font-weight: 600; }
.row .sub { font-size: 13.5px; }
.kpi .val { font-size: 28px; font-weight: 820; }
.group-label { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; margin: 22px 18px 8px; }

/* ---------- glass icon tiles ---------- */
.tile { position: relative; overflow: hidden; border-radius: 11px; width: 36px; height: 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(0, 0, 0, .12), 0 4px 12px -6px rgba(0, 0, 0, .35); }
.tile::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.tile .ic { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.tile.lg { border-radius: 15px; width: 48px; height: 48px; }
.t-indigo { background: linear-gradient(150deg, #8b93ff, #4f46e5); } .t-blue { background: linear-gradient(150deg, #5ec2ff, #1d6bf0); }
.t-green { background: linear-gradient(150deg, #5ee59a, #10a35a); } .t-orange { background: linear-gradient(150deg, #ffc061, #f2710c); }
.t-red { background: linear-gradient(150deg, #ff8a8a, #e3263a); } .t-pink { background: linear-gradient(150deg, #ff9bd2, #e0337f); }
.t-teal { background: linear-gradient(150deg, #6af0dc, #0f9f93); } .t-purple { background: linear-gradient(150deg, #d39bff, #8b2fe0); }
.t-yellow { background: linear-gradient(150deg, #ffe680, #e3a400); } .t-gray { background: linear-gradient(150deg, #b8bed2, #6b7290); }
.empty .tile { background: var(--glass-thin); box-shadow: var(--hi); color: var(--label-2); }

.app-icon .tile { width: 62px; height: 62px; border-radius: 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(0,0,0,.14), 0 10px 22px -10px rgba(0,0,0,.5); }
.app-icon .tile .ic { width: 29px; height: 29px; }
.app-icon { font-size: 12.5px; font-weight: 600; }

.avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -6px rgba(0,0,0,.4); }

/* ---------- floating capsule tab bar ---------- */
.tabbar {
  inset-inline: 12px; bottom: calc(10px + var(--safe-b)); height: var(--tabbar-h); padding: 6px;
  border-radius: 34px; background: var(--bar);
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: var(--hi), 0 18px 40px -16px rgba(20, 20, 70, .45);
  max-width: 560px; margin-inline: auto;
}
.tab { border-radius: 28px; gap: 2px; font-size: 10.5px; color: var(--label-2); position: relative; }
.tab.on { color: var(--tint); }
.tab.on::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px -8px rgba(40, 40, 120, .35);
  animation: lens .45s var(--spring);
}
:root[data-theme="dark"] .tab.on::before { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.08); }
@keyframes lens { from { transform: scale(.6); opacity: 0; } }
.screen { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 40px); }

/* ---------- app bar ---------- */
.appbar.scrolled { background: var(--bar); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: 0 1px 0 var(--sep); }
.icon-btn { color: var(--label); }
.appbar .icon-btn, .back-btn {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--hi), 0 6px 16px -10px rgba(0,0,0,.35);
}
.appbar .icon-btn { width: 42px; height: 42px; }
.back-btn { border-radius: 99px; padding: 6px 8px 6px 14px; height: 40px; font-size: 15.5px; color: var(--label); }
.back-btn .ic { width: 22px; height: 22px; }

/* ---------- buttons: pills ---------- */
.btn { border-radius: 999px; height: 52px; font-weight: 680; letter-spacing: -.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 82%, #fff), var(--tint));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(0,0,0,.12), 0 10px 24px -12px var(--tint); }
.btn.sm { height: 38px; border-radius: 999px; padding: 0 16px; }
.btn.tinted, .btn.gray { background: var(--glass); color: var(--tint); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--hi), 0 6px 16px -10px rgba(0,0,0,.3); }
.btn.gray { color: var(--label); }
.btn.green { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -12px #16a34a; }
.btn.red { background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -12px #e11d48; }
.btn.orange { background: linear-gradient(180deg, #fdba74, #ea580c); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -12px #ea580c; }
.btn.danger-tinted { background: color-mix(in srgb, var(--red) 13%, var(--glass)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--hi); }
.btn.white { background: rgba(255,255,255,.92); color: #3730a3; box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(0,0,0,.4); }
.btn.glass { background: rgba(255,255,255,.18); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.28); }

.fab {
  border-radius: 24px; width: 60px; height: 60px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 26px);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tint) 70%, #fff), var(--tint) 55%, var(--tint-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(0,0,0,.18), 0 18px 36px -12px var(--tint);
}

/* ---------- hero: tinted glass over colour ---------- */
.hero { border-radius: var(--r-xl); padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18), 0 26px 50px -22px #5b21b6; }
.hero::after { background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.35), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%); }
.glass { background: rgba(255,255,255,.18); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* ---------- chips / segmented / inputs ---------- */
.chip { border-radius: 99px; padding: 8px 16px; font-weight: 620; }
.chip.on { background: var(--label); color: var(--bg); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.segmented { border-radius: 99px; padding: 3px; }
.segmented a, .segmented label { border-radius: 99px; padding: 8px 6px; }
.segmented .on, .segmented input:checked + span { background: var(--glass-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -4px rgba(30,30,90,.25); }
:root[data-theme="dark"] .segmented .on, :root[data-theme="dark"] .segmented input:checked + span { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.segmented label span { border-radius: 99px; padding: 8px 4px; margin: -8px -6px; }
.search input { height: 44px; border-radius: 99px; padding: 0 44px 0 16px; }
.search .ic { inset-inline-start: 15px; top: 12px; }
.input-solo { height: 56px; border-radius: 20px; }
.input-solo:focus { box-shadow: var(--hi), 0 0 0 4px var(--tint-soft); }
.switch i { background: var(--fill-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.switch i::after { box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 -1px 2px rgba(0,0,0,.06); }
.switch input:checked + i { background: linear-gradient(180deg, #4ade80, #22c55e); }

/* ---------- sheets & toasts ---------- */
dialog.sheet { background: var(--glass-strong); border-radius: 32px 32px 0 0; -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); }
@media (min-width: 700px) { dialog.sheet { border-radius: 32px; } }
dialog.sheet::backdrop { background: rgba(10, 10, 30, .28); backdrop-filter: blur(6px); }
.sheet-head .x .icon-btn { background: var(--fill); box-shadow: none; }
.toast { border-radius: 99px; padding: 12px 18px 12px 14px; background: var(--glass-strong); }
.offline-pill { background: rgba(15,15,25,.82); backdrop-filter: blur(20px); }

/* ---------- side rail (admin / large screens) ---------- */
@media (min-width: 960px) {
  .rail { margin: 14px; height: calc(100dvh - 28px); border-radius: 30px; top: 14px; border: 0; }
  .rail a { border-radius: 16px; }
  .rail a.on { background: var(--glass-strong); color: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px -10px rgba(30,30,90,.3); }
  :root[data-theme="dark"] .rail a.on { background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
  .rail .me { border-radius: 20px; }
  .fab { bottom: 30px; }
}

/* timeline cards: glass with coloured edge glow */
.tl-card { border-inline-start: 0; box-shadow: var(--hi), var(--shadow), inset -4px 0 0 var(--c, var(--tint)); }
[dir="ltr"] .tl-card { box-shadow: var(--hi), var(--shadow), inset 4px 0 0 var(--c, var(--tint)); }

/* auth screens: deeper colour */
.auth { background: transparent; }
.auth .logo { border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 10px rgba(0,0,0,.18), 0 24px 50px -18px var(--tint); }

/* punch button keeps its colour but gains a glass lens */
.punch { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -10px 24px rgba(0,0,0,.2), 0 34px 70px -24px #7c3aed; }
.punch::selection { background: none; }

/* progressive enhancement: no backdrop-filter → solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255,255,255,.94); --glass-strong: #fff; --bar: rgba(255,255,255,.96); }
  :root[data-theme="dark"] { --glass: rgba(28,30,44,.96); --glass-strong: #24263a; --bar: rgba(26,28,42,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255,255,255,.95); --bar: rgba(255,255,255,.97); }
  body::before { animation: none; }
}

/* ---------- brand palette (Egypt Smile logo: sun yellow, sea blue, coral) ---------- */
:root { --orb-1: #ffcf3f; --orb-2: #ff7aa8; --orb-3: #34b6ff; --orb-4: #7c83ff; }
:root[data-theme="dark"] { --orb-1: #a46b00; --orb-2: #9d1f55; --orb-3: #075e9a; --orb-4: #3a2fb8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --orb-1: #a46b00; --orb-2: #9d1f55; --orb-3: #075e9a; --orb-4: #3a2fb8; } }

/* ---------- photo / video backgrounds from the media library ---------- */
.bg-media { position: fixed; inset: 0; z-index: -3; overflow: hidden; }
.bg-media img, .bg-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.bg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,30,.15), rgba(10,10,30,.55)); }
body.has-bg::before { opacity: .35; }
body.has-bg.app-bg .bg-media img { filter: blur(22px) saturate(140%); transform: scale(1.15); }
body.has-bg.app-bg .bg-media::after { background: color-mix(in srgb, var(--bg) 55%, transparent); }

/* ---------- guest portal ---------- */
.guest { min-height: 100dvh; display: grid; place-items: end center; padding: 24px 16px calc(24px + var(--safe-b)); }
@media (min-width: 600px) { .guest { place-items: center; } }
.guest-card { width: 100%; max-width: 420px; padding: 26px 20px 20px; border-radius: 34px; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(34px) saturate(200%); backdrop-filter: blur(34px) saturate(200%); box-shadow: var(--hi), var(--shadow-lg); }
.guest-card .logo { width: 72px; height: 72px; border-radius: 22px; margin: -62px auto 12px; }
.guest-card .logo .ic { width: 42px; height: 42px; }
.guest-card h1 { text-align: center; margin: 0; font-size: 27px; font-weight: 820; letter-spacing: -.03em; }
.guest-card .lead { text-align: center; color: var(--label-2); margin: 6px 0 18px; }
.platforms { display: grid; gap: 10px; }
.platform { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 20px; cursor: pointer; text-align: start;
  background: color-mix(in srgb, var(--pc) 14%, var(--glass)); box-shadow: var(--hi); font-size: 16.5px; color: var(--label); transition: transform .2s var(--spring); }
.platform:active { transform: scale(.97); }
.platform b { flex: 1; }
.platform .dotc { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--pc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px var(--pc); }
.platform .chev { color: var(--label-3); }
.steps { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.steps .btn { margin-inline-start: auto; }
details.join summary { cursor: pointer; color: var(--tint); font-weight: 600; text-align: center; list-style: none; }
details.join summary::-webkit-details-marker { display: none; }
.glass-btn { background: var(--glass); color: var(--tint); box-shadow: var(--hi); }

/* auth screen over brand media */
body.has-bg .auth h1, body.has-bg .auth .lead { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
body.has-bg .auth .lead { opacity: .92; }
/* same for the media-library photo slideshow (partials/media_bg) — the grey muted text was unreadable on photos */
body:has(> .media-bg) .auth .lead, body:has(> .media-bg) .auth .tagline, body.has-bg .auth .auth-card > p.muted, body:has(> .media-bg) .auth .auth-card > p.muted { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.btn { white-space: nowrap; } .page-head .row-between { flex-wrap: wrap; }
html:not([dir="rtl"]) .ic.chev, html:not([dir="rtl"]) .back-btn .ic { transform: scaleX(-1); }