/* ═══════════════════════════════════════════════════════════════════════
   Tier — Obsidian Liquid Glass
   ───────────────────────────────────────────────────────────────────────
   DIRECTION
     Every surface is a bevelled lens floating over a slow electric-blue
     aurora, and every shape is round. Accent #4379FF, sampled from the
     tiersave / Elemeta buttons the client wanted to match.

   THE ONE IDEA — "the lens dock"
     The bottom navigation is a single glass capsule holding circular icon
     lenses. The active tab is a physically raised puck that SLIDES between
     positions, carrying its bottom-right specular catch-light with it.
     No labels anywhere: the puck is the label.

   GLASS RECIPE (adapted from the waseworm.ru/sec header, retuned for OLED
   black — their values assume a light page, so the white inset highlights
   are pushed up and the drop shadow is deepened)
     fill + backdrop-filter(blur, saturate)
       + hairline border
       + inset top highlight  (light source, upper-left)
       + inset bottom shade   (thickness)
       + bottom-right specular rim on a ::before (the signature)
       + outer drop shadow    (lift)

   PERFORMANCE NOTE
     Real backdrop-filter is reserved for CHROME — the dock, cart button,
     sheet, pager, cards, pills. Catalog tiles repeat 12+ times per page and
     render a live Lottie inside, so they get a *simulated* lens (gradients
     + inset shadows, no compositor read-back) instead. Looks the same,
     costs nothing.

   Loaded LAST. It restyles surfaces and the dock; it never moves structure.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── ground ─── */
    /* Navy-black, not pure black — Elemeta's base is #0b0e17. A cool base
       lets the blue bloom read as light, not as a stain on dead black. */
    --lg-ink: #090b14;

    /* ─── brand accent ───
       Electric blue #4888FF, sampled off the Elemeta / tiersave buttons.
       Two stops so buttons can carry a real top-lit gradient. */
    --lg-accent: #4888ff;
    --lg-accent-rgb: 72, 136, 255;
    --lg-accent-deep: #2f63e8;
    --lg-accent-bright: #6fa0ff;
    --lg-teal: #24ada2;
    --lg-teal-rgb: 36, 173, 162;

    /* ─── ambient bloom ───
       Elemeta's background isn't a faint wash — it's a saturated blue bloom
       that actually lights the screen. Strong core, cool falloff. */
    --lg-aurora-1: rgba(58, 104, 235, .52);
    --lg-aurora-2: rgba(40, 78, 200, .30);
    --lg-aurora-3: rgba(36, 120, 173, .20);

    /* ═══ THE WASEWORM LIQUID GLASS ═══
       Faithful to waseworm.ru/sec's .liquid-glass-header. The signature is
       NOT the fill — it's the bright ~1.5px white EDGE plus a specular
       catch-light on the bottom-right, over a real backdrop blur. Miss the
       edge and it reads as a flat dark panel (the slop). Everything below is
       baked into one box-shadow so any element becomes glass with one line. */
    --wg-fill: rgba(255, 255, 255, .06);
    --wg-fill-hi: rgba(255, 255, 255, .11);
    --wg-blur: blur(16px) saturate(185%);
    --wg-blur-lg: blur(22px) saturate(190%);

    --wg-glass:
        inset 0 0 0 1.4px rgba(255, 255, 255, .34),          /* the bright glass edge */
        inset 0 1.6px .5px rgba(255, 255, 255, .55),         /* top highlight */
        inset -11px -9px 0 -12px rgba(255, 255, 255, .72),   /* specular corner */
        inset 0 -9px 0 -8px rgba(255, 255, 255, .42),        /* specular underside */
        inset 0 -1.5px 1px rgba(0, 0, 0, .32),               /* thickness */
        0 10px 30px -14px rgba(0, 0, 0, .7);                 /* lift */

    /* Smaller controls: same edge, shallower stack so it doesn't read busy. */
    --wg-glass-sm:
        inset 0 0 0 1.2px rgba(255, 255, 255, .3),
        inset 0 1.4px .5px rgba(255, 255, 255, .5),
        inset -8px -7px 0 -9px rgba(255, 255, 255, .6),
        inset 0 -1.2px 1px rgba(0, 0, 0, .28),
        0 6px 18px -10px rgba(0, 0, 0, .6);

    --lg-hair: rgba(140, 165, 220, .14);

    --lg-blur: blur(26px) saturate(185%);
    --lg-blur-sm: blur(14px) saturate(165%);

    /* Bevel: upper-left key light, thickness on the underside, real lift. */
    --lg-bevel:
        inset 0 0 0 1px rgba(255, 255, 255, .045),
        inset 0 1.6px .5px rgba(255, 255, 255, .26),
        inset 1.6px 0 .5px -.5px rgba(255, 255, 255, .13),
        inset 0 -1.2px .5px rgba(0, 0, 0, .55),
        inset 0 3px 5px -3px rgba(0, 0, 0, .5),
        0 1px 4px rgba(0, 0, 0, .34),
        0 16px 34px -16px rgba(0, 0, 0, .78);

    --lg-bevel-sm:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 1.3px .5px rgba(255, 255, 255, .22),
        inset 0 -1px .5px rgba(0, 0, 0, .46),
        0 1px 3px rgba(0, 0, 0, .3),
        0 8px 18px -10px rgba(0, 0, 0, .6);

    /* Inverted bevel — light catches the BOTTOM edge, so the pane recedes. */
    --lg-bevel-well:
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        inset 0 3px 6px -2px rgba(0, 0, 0, .85),
        inset 0 1.4px .5px -.4px rgba(0, 0, 0, .7),
        inset 0 -1.5px .5px -.4px rgba(255, 255, 255, .2),
        0 1px 0 rgba(255, 255, 255, .05);

    /* The signature: a bottom-right rim of catch-light. Rides on a ::before
       so it sits above the fill but below content, and survives any
       background change underneath. */
    --lg-spec:
        inset -11px -9px 0 -12px rgba(255, 255, 255, .58),
        inset 0 -10px 0 -9px rgba(255, 255, 255, .38);

    /* ─── round everything ─── */
    --lg-r-xl: 30px;
    --lg-r-lg: 26px;
    --lg-r-md: 22px;
    --lg-r-sm: 16px;

    --lg-ease: cubic-bezier(.22, 1, .36, 1);
    --lg-ease-sharp: cubic-bezier(.86, 0, .07, 1);

    /* Retint the app's own accent tokens (defined in market.css as #0a84ff)
       so filter pill, tabs and any stray accent shift to electric blue too. */
    --market-blue: var(--lg-accent);
    --market-blue-bright: var(--lg-accent-bright);
    --ui-accent: var(--lg-accent);
    --ui-accent-strong: var(--lg-accent-bright);
    --ui-accent-fill: var(--lg-accent);
    --ui-accent-fill-strong: var(--lg-accent-bright);
    --ui-accent-soft: rgba(var(--lg-accent-rgb), .16);

    /* Dock geometry — three equal lenses. market.css derives the capsule
       width, the sliding puck and the cart button's left edge from these,
       so they stay in register no matter what you set here. */
    --market-tab-a: 118px;
    --market-tab-b: 128px;
    --market-cart-seg: 62px;
    --market-tabbar-content-height: 62px;
    --market-tabbar-height: 78px;
}

/* ═══ 1 ─ AMBIENT ══════════════════════════════════════════════════════
   market.css flattens the page to pure #000, which leaves the glass with
   nothing to refract — bevels with no light source read as grey noise.
   These two fixed layers give the lenses something to be lenses *of*. */

/* The ink must live on <html> ALONE. In the root stacking context a body
   background paints at step 3 (in-flow block backgrounds) while negative
   z-index layers paint at step 2 — so any opaque body background buries
   .lg-ambient no matter how it's stacked. Root gets the colour, body gets
   nothing, the aurora sits between them. */
html {
    background: var(--lg-ink) !important;
}

body,
body.oem-body,
[data-theme="dark"] body.oem-body {
    background: transparent !important;
}

.lg-ambient,
.lg-grain {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    contain: paint;
}

.lg-ambient {
    background:
        radial-gradient(66% 30% at 50% -2%, var(--lg-aurora-1), transparent 68%),
        radial-gradient(52% 40% at 88% 8%, rgba(var(--lg-teal-rgb), .16), transparent 70%),
        radial-gradient(60% 30% at 0% 34%, var(--lg-aurora-2), transparent 72%),
        radial-gradient(80% 46% at 50% 108%, var(--lg-aurora-3), transparent 74%);
    animation: lg-drift 32s ease-in-out infinite;
    will-change: transform;
}

@keyframes lg-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) }
    34%      { transform: translate3d(3%, -2.5%, 0) scale(1.09) }
    67%      { transform: translate3d(-2.5%, 2%, 0) scale(1.04) }
}

/* Fractal grain. Without it a wide gradient on OLED banding-cracks into
   visible steps; with it the ambient reads as a photographed surface. */
.lg-grain {
    z-index: -1;
    inset: 0;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cinematic vignette — the corners fall to true black so the centred bloom
   reads as a single directed light, not an even wash. This is most of what
   separates "premium dark" from "flat dark". */
.lg-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 34%, transparent 52%, rgba(0, 0, 0, .55) 100%),
        linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .4) 100%);
}

/* app.css paints an opaque strip behind the status bar in fullscreen mode.
   Soften it so the aurora's top lobe isn't sliced off by a hard edge. */
body:before {
    background: linear-gradient(180deg, rgba(7, 7, 10, .88) 0%, rgba(7, 7, 10, .5) 56%, transparent 100%) !important;
}

/* ═══ 2 ─ THE LENS DOCK ════════════════════════════════════════════════ */

.market-tabbar {
    grid-template-columns: var(--market-tab-a) var(--market-tab-b);
    width: calc(var(--market-tab-a) + var(--market-tab-b) + 8px);
    height: var(--market-tabbar-content-height);
    padding: 4px;
    border-radius: 999px;
    background-color: var(--wg-fill);
    -webkit-backdrop-filter: var(--wg-blur-lg);
    backdrop-filter: var(--wg-blur-lg);
    box-shadow: var(--wg-glass);
    isolation: isolate;
}

/* the sliding glass indicator — a frosted sub-lens with its own bright edge,
   NOT a solid blue puck. It carries the specular corner as it slides. */
.market-tabbar:after {
    top: 4px;
    left: 4px;
    width: var(--market-tab-a);
    height: calc(var(--market-tabbar-content-height) - 8px);
    border-radius: 999px;
    background-color: var(--wg-fill-hi);
    box-shadow: var(--wg-glass-sm);
    transition:
        width .42s var(--lg-ease),
        translate .42s var(--lg-ease);
}

.market-tabbar[data-active="packs"]:after {
    width: var(--market-tab-b);
    translate: var(--market-tab-a) 0;
}

.market-tabbar-item {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: calc(var(--market-tabbar-content-height) - 8px);
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(198, 212, 240, .52);
    font: 700 14px/1 var(--ui-font, "Montserrat", system-ui, sans-serif);
    letter-spacing: -.1px;
    transition: color .22s ease, transform .18s var(--lg-ease);
}

/* icons were the wrong call — labels only, as asked */
.market-tabbar-icon { display: none !important }

.market-tabbar-item.is-active,
#packsTab.is-active {
    color: #fff;
    font-size: 14px;
}

#packsTab { color: rgba(198, 212, 240, .52) }

.market-tabbar-item:active { transform: scale(.94) }

/* ─── cart: the third lens ─── */
.market-cart-dock {
    width: var(--market-cart-seg);
    height: calc(var(--market-tabbar-content-height) - 8px);
    bottom: calc(10px + var(--ui-safe-bottom));
    border-radius: 50%;
}

.market-cart-dock:before {
    top: 18px;
    bottom: 18px;
    background: rgba(255, 255, 255, .13);
}

.market-cart-dock:active {
    background-color: transparent;
    transform: scale(.9);
}

/* app.js stacks up to three thumbs. At 22px with an 11px bite they span
   44px, which clears the 56px lens with room for the ring. Anything larger
   spills past the capsule's right edge. */
.market-cart-dock-thumb {
    width: 22px;
    height: 22px;
    padding: 1px;
    background: rgba(255, 255, 255, .12);
    box-shadow:
        0 0 0 1.5px rgba(12, 12, 17, .95),
        inset 0 1px .5px rgba(255, 255, 255, .3),
        inset 0 -1px .5px rgba(0, 0, 0, .5);
}

.market-cart-dock-thumb + .market-cart-dock-thumb { margin-left: -11px }

/* ═══ 3 ─ SURFACES: round + glass ══════════════════════════════════════ */

/* Shared rim helper: any surface that opts in gets the specular catch-light.
   Applied via ::before so it can't fight a component's own ::after. */
.market-hero-banner:before,
.market-pager.oem-pager:before,
.market-filter-pill:before,
.market-cart-sheet:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: var(--lg-spec);
    opacity: .55;
}

/* Glass cards — frosted, bright-edged, translucent. */
.ui-card,
.market-pager.oem-pager {
    border-radius: var(--lg-r-lg);
    background-color: var(--wg-fill);
    -webkit-backdrop-filter: var(--wg-blur);
    backdrop-filter: var(--wg-blur);
    box-shadow: var(--wg-glass);
}

.market-pager.oem-pager {
    position: relative;
    margin-top: 12px;
    padding: 8px 10px;
}

.market-filter-pill {
    position: relative;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background-color: var(--wg-fill);
    -webkit-backdrop-filter: var(--wg-blur);
    backdrop-filter: var(--wg-blur);
    box-shadow: var(--wg-glass-sm);
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: transform .2s var(--lg-ease), background-color .2s ease;
}

.market-filter-pill:active {
    transform: scale(.96);
    opacity: 1;
    background-color: var(--wg-fill-hi);
}

.market-hero-banner {
    position: relative;
    border-radius: var(--lg-r-xl);
    box-shadow:
        inset 0 0 0 1.2px rgba(255, 255, 255, .16),
        inset 0 1.4px .5px rgba(255, 255, 255, .3),
        0 18px 44px -20px rgba(0, 0, 0, .85),
        0 0 44px -18px rgba(var(--lg-accent-rgb), .5);
}

/* a hairline glass reflection sweeping the banner's top edge */
.market-hero-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 22%);
}

/* Glass round navigation arrows in the pager. */
.market-page-button.ui-icon-button,
.market-page-button.oem-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--wg-fill);
    -webkit-backdrop-filter: var(--wg-blur);
    backdrop-filter: var(--wg-blur);
    box-shadow: var(--wg-glass-sm);
    transition: transform .2s var(--lg-ease), opacity .2s ease;
}

.market-page-button:active:not(:disabled) { transform: scale(.9); opacity: 1 }
.market-page-button:disabled { opacity: .34 }

/* ─── Catalog tiles: liquid glass ───
   Frosted, bright-edged panes floating over the blue bloom — the waseworm
   recipe. The specular corner makes each tile read as a real lens. */
.market-template-grid .oem-template-preview {
    border-radius: var(--lg-r-lg);
    background-color: var(--wg-fill);
    background-image: radial-gradient(72% 58% at 50% 42%, rgba(255, 255, 255, .09), transparent 70%);
    -webkit-backdrop-filter: var(--wg-blur);
    backdrop-filter: var(--wg-blur);
    box-shadow: var(--wg-glass);
    transition:
        box-shadow .3s var(--lg-ease),
        transform .3s var(--lg-ease),
        background-color .3s ease;
}

/* A soft pool of light directly under the emoji, so each one reads as a lit
   object sitting on glass rather than a sticker floating in a dark box. */
.market-template-grid .oem-template-preview:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 78%;
    height: 78%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 66%);
    pointer-events: none;
    z-index: 1;
}

.market-card-preview-button:active .oem-template-preview { transform: scale(.965) }

/* Selected: keep the glass, swap the white edge for a bright accent edge and
   add a coloured bloom. Reads as the same lens, now lit blue. */
.market-template-grid .oem-template-tile--selected .oem-template-preview {
    background-color: rgba(var(--lg-accent-rgb), .1);
    box-shadow:
        inset 0 0 0 1.6px rgba(var(--lg-accent-rgb), .9),
        inset 0 1.6px .5px rgba(255, 255, 255, .5),
        inset -11px -9px 0 -12px rgba(255, 255, 255, .7),
        inset 0 -1.5px 1px rgba(0, 0, 0, .3),
        0 0 20px -4px rgba(var(--lg-accent-rgb), .55),
        0 12px 30px -16px rgba(0, 0, 0, .8);
}

/* oem-ui.css draws its own chunky near-white ::after ring — suppress it. */
.market-template-grid .oem-template-tile--selected .oem-template-preview:after {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* "Добавить" — a glass pill with the bright edge, not a dark slab. */
.market-card-add {
    height: 44px;
    border-radius: 999px;
    background-color: var(--wg-fill);
    -webkit-backdrop-filter: var(--wg-blur);
    backdrop-filter: var(--wg-blur);
    box-shadow: var(--wg-glass-sm);
    font-size: 13.5px !important;
    font-weight: 700 !important;
    transition: transform .2s var(--lg-ease), background-color .22s ease, color .22s ease;
}

.market-card-add:active { transform: scale(.95); opacity: 1 }

/* Selected → glass tinted blue with an accent edge; the label goes white.
   Stays a lens, just lit by the accent — no flat solid slab. */
.oem-template-tile--selected .market-card-add {
    background-color: rgba(var(--lg-accent-rgb), .34);
    color: #fff;
    box-shadow:
        inset 0 0 0 1.4px rgba(var(--lg-accent-rgb), .85),
        inset 0 1.4px .5px rgba(255, 255, 255, .5),
        inset -8px -7px 0 -9px rgba(255, 255, 255, .55),
        0 6px 18px -8px rgba(var(--lg-accent-rgb), .7);
}

/* ─── Cart sheet ─── */
.market-cart-sheet {
    position: relative;
    border-radius: var(--lg-r-xl) var(--lg-r-xl) 0 0;
    background-color: rgba(14, 14, 19, .82);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    backdrop-filter: blur(34px) saturate(180%);
    box-shadow:
        inset 0 1.6px .5px rgba(255, 255, 255, .22),
        0 -20px 50px -20px rgba(0, 0, 0, .9);
}

.market-cart-sheet:before { border-radius: var(--lg-r-xl) var(--lg-r-xl) 0 0 }

.market-close-button {
    border-radius: 50%;
    background-color: var(--lg-fill);
    box-shadow: var(--lg-bevel-sm);
    transition: transform .2s var(--lg-ease);
}

.market-close-button:active { transform: scale(.88) }

/* ═══ 4 ─ FALLBACKS & MOTION ═══════════════════════════════════════════ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .market-tabbar,
    .ui-card,
    .market-pager.oem-pager { background-color: rgba(18, 18, 24, .96) }
    .market-cart-sheet { background-color: rgba(16, 16, 21, .98) }
    .market-filter-pill { background-color: rgba(38, 38, 46, .96) }
}

@media (prefers-reduced-motion: reduce) {
    .lg-ambient { animation: none }

    .market-tabbar:after,
    .market-tabbar-icon,
    .market-filter-pill,
    .market-card-add,
    .market-template-grid .oem-template-preview {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .lg-ambient,
    .lg-grain,
    .market-tabbar:before { display: none }

    .market-tabbar,
    .ui-card {
        background: Canvas;
        border: 1px solid CanvasText;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}