/* ============================================================
   MariaSMM — Liquid Glass UI System
   Apple Liquid Glass / Telegram-style translucent surfaces.

   Loaded LAST (right before </head>) on every user page so it
   wins the cascade over each page's own inline <style> block
   without needing to touch that markup or duplicate rules.

   Scope: sidebar/menu (.drawer), top header (.topbar), and the
   service/category cards (.platform-btn / .platform-all).
   Nothing else is touched — layout, icons, text and JS behavior
   are untouched, only background/blur/border/shadow visuals.

   Reusable pieces:
     --lg-*            design tokens (opacity, blur, border, glow)
     .liquid-glass      generic glass surface
     .liquid-glass-header
     .liquid-glass-menu
     .liquid-glass-card
     .liquid-glass-active
   ============================================================ */

:root,
[data-theme="dark"]{
  --lg-blur: 28px;
  --lg-blur-sm: 18px;
  --lg-sat: 180%;

  /* dark theme glass tokens */
  --lg-bg: rgba(22,30,44,0.34);
  --lg-bg-2: rgba(30,41,59,0.30);
  --lg-border: rgba(255,255,255,0.14);
  --lg-border-strong: rgba(255,255,255,0.28);
  --lg-highlight: rgba(255,255,255,0.34);
  --lg-highlight-soft: rgba(255,255,255,0.08);
  --lg-shadow: 0 10px 34px rgba(0,0,0,0.30);
  --lg-shadow-sm: 0 4px 18px rgba(0,0,0,0.22);

  --lg-active-bg: rgba(17,17,17,0.18);
  --lg-active-border: rgba(17,17,17,0.45);
  --lg-active-glow: 0 0 0 1px rgba(17,17,17,0.25), 0 0 20px rgba(17,17,17,0.25);
}

[data-theme="light"]{
  --lg-bg: rgba(255,255,255,0.40);
  --lg-bg-2: rgba(255,255,255,0.34);
  --lg-border: rgba(20,30,50,0.10);
  --lg-border-strong: rgba(20,30,50,0.18);
  --lg-highlight: rgba(255,255,255,0.70);
  --lg-highlight-soft: rgba(255,255,255,0.35);
  --lg-shadow: 0 10px 28px rgba(20,30,50,0.12);
  --lg-shadow-sm: 0 4px 16px rgba(20,30,50,0.09);

  --lg-active-bg: rgba(17,17,17,0.10);
  --lg-active-border: rgba(17,17,17,0.35);
  --lg-active-glow: 0 0 0 1px rgba(17,17,17,0.20), 0 0 16px rgba(17,17,17,0.15);
}

/* ---------- generic reusable glass primitives ---------- */
.liquid-glass,
.liquid-glass-header,
.liquid-glass-menu,
.liquid-glass-card{
  position:relative;
  background:var(--lg-bg);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow), inset 0 1px 0 var(--lg-highlight);
}
.liquid-glass::after,
.liquid-glass-header::after,
.liquid-glass-menu::after,
.liquid-glass-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, var(--lg-highlight-soft) 0%, transparent 32%);
  mix-blend-mode:overlay;
}
.liquid-glass-active{
  background:var(--lg-active-bg)!important;
  border-color:var(--lg-active-border)!important;
  box-shadow:var(--lg-active-glow), inset 0 1px 0 var(--lg-highlight)!important;
}

/* ---------- 1. Sidebar / menu (.drawer) ---------- */
.drawer{
  background:var(--lg-bg)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))!important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))!important;
  border-right:1px solid var(--lg-border)!important;
  box-shadow:var(--lg-shadow)!important;
}
.drawer::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, var(--lg-highlight-soft) 0%, transparent 30%);
  mix-blend-mode:overlay;
}
.drawer-header-bg,
.drawer-item.active-link,
.drawer-balance-pill{
  -webkit-backdrop-filter:blur(var(--lg-blur-sm));
  backdrop-filter:blur(var(--lg-blur-sm));
}

/* ---------- 2. Top header / navbar (.topbar) ---------- */
.topbar{
  background:var(--lg-bg)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))!important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))!important;
  border-bottom:1px solid var(--lg-border)!important;
  box-shadow:var(--lg-shadow-sm), inset 0 1px 0 var(--lg-highlight)!important;
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lg-highlight),transparent);
}

/* Notification bell — bigger + liquid glass */
.notif-btn{
  width:42px!important;
  height:42px!important;
  font-size:17px!important;
  background:var(--lg-bg-2)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  border:1px solid var(--lg-border-strong)!important;
  box-shadow:var(--lg-shadow-sm), inset 0 1px 0 var(--lg-highlight)!important;
}
.notif-btn::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg, var(--lg-highlight-soft) 0%, transparent 45%);
  mix-blend-mode:overlay;
}
.notif-btn .notif-badge{
  transform:scale(1.05);
}

/* ---------- 3. Service / category cards (.platform-btn) ---------- */
.platform-btn{
  background:var(--lg-bg-2)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  border:1px solid var(--lg-border)!important;
  box-shadow:var(--lg-shadow-sm), inset 0 1px 0 var(--lg-highlight-soft)!important;
}

/* selected/active service — translucent glass with per-platform tint & glow,
   never a flat solid fill */
.platform-btn.active{
  background:linear-gradient(135deg, var(--p-glow, var(--lg-active-bg)) 0%, var(--lg-bg-2) 100%)!important;
  border-color:var(--p-color, var(--lg-active-border))!important;
  box-shadow:
    0 0 18px var(--p-glow, rgba(9, 53, 138,0.32)),
    inset 0 1px 0 var(--lg-highlight),
    inset 0 -6px 10px -8px rgba(0,0,0,0.28)!important;
}

/* "All" chip keeps its brand color but as translucent tinted glass,
   not an opaque solid block */
.platform-all{
  background:linear-gradient(135deg, rgba(17,17,17,0.45) 0%, rgba(9, 53, 138,0.32) 100%)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  backdrop-filter:blur(var(--lg-blur-sm)) saturate(var(--lg-sat))!important;
  border-color:rgba(17,17,17,0.45)!important;
  box-shadow:
    0 0 16px rgba(17,17,17,0.20),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -6px 10px -8px rgba(0,0,0,0.22)!important;
}

/* ---------- graceful fallback when backdrop-filter is unsupported ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar, .drawer, .platform-btn,
  .liquid-glass, .liquid-glass-header, .liquid-glass-menu, .liquid-glass-card{
    background:rgba(16,24,36,0.92)!important;
  }
  [data-theme="light"] .topbar,
  [data-theme="light"] .drawer,
  [data-theme="light"] .platform-btn{
    background:rgba(255,255,255,0.92)!important;
  }
}