/* ============================================================
   Liquid Glass layer  (bold)
   Loaded AFTER theme-dark.css. Gives the site a colored aurora
   backdrop and turns panels into translucent frosted "liquid
   glass": backdrop blur + saturation, specular rims, depth
   shadows, and an SVG refraction pass (#lgRefract) on Chromium.
   Pure local CSS. Degrades to clean frosted blur elsewhere.
   ============================================================ */

:root {
    --lg-blur: 26px;
    --lg-sat: 185%;
    --lg-stroke: rgba(255, 255, 255, .20);
    --lg-stroke-strong: rgba(255, 255, 255, .34);
    --lg-hi: rgba(255, 255, 255, .40);          /* top specular rim   */
    --lg-lo: rgba(0, 0, 0, .30);
    --lg-fill-1: rgba(255, 255, 255, .19);
    --lg-fill-2: rgba(255, 255, 255, .07);
    --lg-tint: rgba(30, 33, 41, .26);
    --lg-shadow: 0 24px 60px -18px rgba(0, 0, 0, .66);
    --lg-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Aurora backdrop so the glass has color to refract ---------- */
/* applied to body AND to the homepage shell (which paints its own bg) */
body,
body .home-v3,
body .profile-page {
    background:
        radial-gradient(40% 26% at 10% 5%, rgba(84, 168, 199, .34), transparent 62%),
        radial-gradient(40% 24% at 95% 13%, rgba(229, 86, 75, .26), transparent 62%),
        radial-gradient(46% 22% at 18% 42%, rgba(84, 168, 199, .22), transparent 60%),
        radial-gradient(46% 24% at 90% 58%, rgba(229, 86, 75, .18), transparent 60%),
        radial-gradient(52% 26% at 48% 82%, rgba(84, 168, 199, .22), transparent 62%),
        radial-gradient(46% 24% at 12% 98%, rgba(120, 90, 200, .14), transparent 60%),
        #070809 !important;
}

/* ============================================================
   Shared glass recipe
   ============================================================ */
body .news-item,
body .home-v3 .news-item,
body .home-v3 .core,
body .profile-card,
body .modal-content,
header.ir-nav .ir-menu,
body .st-tabs,
body .canvas-map {
    background:
        linear-gradient(180deg, var(--lg-fill-1) 0%, var(--lg-fill-2) 100%),
        linear-gradient(135deg, rgba(84, 168, 199, .12) 0%, rgba(229, 86, 75, .05) 55%, transparent 80%),
        var(--lg-tint) !important;
    -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-stroke) !important;
    box-shadow:
        var(--lg-shadow),
        inset 0 1px 0 var(--lg-hi),
        inset 0 -1px 1px var(--lg-lo) !important;
}

/* ---------- Homepage stat/feature cards (shell + core) ---------- */
body .home-v3 .shell {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 20px 46px -22px rgba(0, 0, 0, .6) !important;
    border-radius: 28px;
}
body .home-v3 .core {
    border-radius: 22px !important;
}
body .home-v3 .shell:hover {
    border-color: var(--lg-stroke-strong) !important;
    transform: translateY(-4px);
    transition: transform .5s var(--lg-ease), border-color .5s var(--lg-ease);
}

/* ---------- News cards ---------- */
body .news-item, body .home-v3 .news-item { border-radius: 22px !important; overflow: hidden; }
body .news-item:hover, body .home-v3 .news-item:hover {
    border-color: var(--lg-stroke-strong) !important;
    transform: translateY(-6px);
    box-shadow: 0 30px 66px -22px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

/* ---------- Profile / modals ---------- */
body .profile-card { border-radius: 22px; }
body .modal-content { border-radius: 20px; --lg-blur: 30px; }
body .modal-header, body .modal-footer { border-color: rgba(255, 255, 255, .10); }

/* ============================================================
   Header — richer glass + specular
   ============================================================ */
header.ir-nav {
    background: linear-gradient(180deg, rgba(18, 20, 26, .66), rgba(10, 11, 14, .58)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(0, 0, 0, .4);
}
header.ir-nav.ir-scrolled {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 44px -22px rgba(0, 0, 0, .95) !important;
}
header.ir-nav .ir-cabinet,
header.ir-nav .ir-burger {
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
header.ir-nav .ir-menu { --lg-blur: 22px; border-radius: 16px; }

/* ============================================================
   Marquee band -> frosted strip
   ============================================================ */
body .home-v3 .hv3-marq {
    background: rgba(255, 255, 255, .05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

/* ============================================================
   Form fields — visible translucent glass
   ============================================================ */
body .form-control, body .form-select {
    background: rgba(255, 255, 255, .06) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
body .form-control:focus, body .form-select:focus {
    background: rgba(84, 168, 199, .12) !important;
    border-color: #54a8c7 !important;
    box-shadow: 0 0 0 4px rgba(84, 168, 199, .20), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

/* ============================================================
   Pagination pills
   ============================================================ */
body .pagination .page-link {
    background: rgba(255, 255, 255, .06) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
body .pagination .page-item.active .page-link {
    background: #f4f5f6 !important; color: #0a0a0b;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ============================================================
   Soft bands -> faint frosted separators
   ============================================================ */
body .news-page__intro,
body .article-content__background,
body .shop-info {
    background: rgba(255, 255, 255, .045) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ============================================================
   Readability — text-dense panels use a DARKER glass, and the
   muted greys are brightened so they stay legible on frost.
   ============================================================ */
body .profile-card,
body .modal-content,
body .st-tabs {
    --lg-fill-1: rgba(255, 255, 255, .085);
    --lg-fill-2: rgba(255, 255, 255, .03);
    --lg-tint: rgba(11, 12, 16, .52);
}
/* brighten muted text tokens on profile / work / settings */
body .pf-wrap, body .wk-wrap {
    --pf-muted: #c6ccd2 !important;
    --pf-soft:  #a7aeb5 !important;
}
body .pm { --pm-muted: #c6ccd2 !important; }
body .pf-section-title,
body .wk-section-title { color: #b6bdc4 !important; }
body .pf-label { color: #c6ccd2 !important; }
body .pf-empty { color: #9aa1a8 !important; }
body .hm-title { color: #aeb9c8 !important; }
/* settings tabs: readable inactive text, solid active */
body .st-tab { color: #c6ccd2 !important; }
body .st-tab:hover { color: #ffffff !important; }
body .st-tab.active { color: #ffffff !important; }
body .ga-lead { color: #bcc2c8 !important; }
/* section subtitle accents stay crisp */
body .section-subtitle { color: #6cc0dd !important; }
/* generic muted utility a touch brighter on glass */
body .text-muted, body .text-primary-emphasis { color: #9098a0 !important; }

/* ============================================================
   SVG refraction pass (Chromium/Edge). Invalid on engines that
   don't support url() in backdrop-filter -> they keep the frost.
   ============================================================ */
@supports (backdrop-filter: blur(1px)) {
    header.ir-nav,
    body .modal-content,
    body .home-v3 .core,
    body .news-item,
    header.ir-nav .ir-menu {
        -webkit-backdrop-filter: blur(24px) saturate(180%) url(#lgRefract);
        backdrop-filter: blur(24px) saturate(180%) url(#lgRefract);
    }
}