/* ARTEMIDA V153 — unified soft shadow pass.
   Scope: visual depth only. No layout, business logic, sizing or interaction changes. */

:root{
  --shadow:0 16px 42px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.07);
  --shadow-soft:0 10px 28px rgba(0,0,0,.14),0 2px 7px rgba(0,0,0,.055);

  /* Liquid-glass surfaces: compact shadow footprint, no cloudy halo. */
  --lg-shadow:0 10px 28px rgba(0,0,0,.15),0 2px 7px rgba(0,0,0,.06);
  --lg-shadow-hover:0 14px 34px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.07);

  --v153-shadow-panel:0 10px 28px rgba(0,0,0,.15),0 2px 7px rgba(0,0,0,.055);
  --v153-shadow-panel-hover:0 14px 34px rgba(0,0,0,.18),0 3px 9px rgba(0,0,0,.065);
  --v153-shadow-floating:0 12px 32px rgba(0,0,0,.19),0 3px 9px rgba(0,0,0,.075);
  --v153-shadow-control:0 5px 15px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.045);
  --v153-shadow-accent:0 7px 18px rgb(var(--theme-rgb)/.08);
}

html[data-theme="pearl"]{
  --shadow:0 15px 38px rgba(62,47,72,.09),0 3px 9px rgba(62,47,72,.035);
  --shadow-soft:0 9px 25px rgba(62,47,72,.07),0 2px 6px rgba(62,47,72,.03);
  --lg-shadow:0 9px 25px rgba(62,47,72,.075),0 2px 6px rgba(62,47,72,.03);
  --lg-shadow-hover:0 13px 31px rgba(62,47,72,.10),0 3px 8px rgba(62,47,72,.035);
  --v153-shadow-panel:0 9px 25px rgba(62,47,72,.075),0 2px 6px rgba(62,47,72,.03);
  --v153-shadow-panel-hover:0 13px 31px rgba(62,47,72,.10),0 3px 8px rgba(62,47,72,.035);
  --v153-shadow-floating:0 11px 29px rgba(62,47,72,.11),0 3px 8px rgba(62,47,72,.04);
  --v153-shadow-control:0 4px 13px rgba(62,47,72,.055),0 1px 4px rgba(62,47,72,.025);
}

/* Base glass: preserve the crisp glass rim while keeping depth close to the surface. */
.glass-panel,
.glass-card,
.glass-mini,
[data-liquid-glass="panel"],
[data-liquid-glass="popover"],
[data-liquid-glass="floating"]{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.025),
    var(--v153-shadow-panel)!important;
}

/* Large page chrome should never cast a 50–100px fog bank. */
.landing-nav,
.page-topbar,
.legal-topbar,
.site-top-hub,
body[data-page="faq"] .faq-top-hub,
.sidebar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 8px 24px rgba(0,0,0,.13),
    0 2px 6px rgba(0,0,0,.045)!important;
}

/* Floating and modal surfaces get a little more separation, still without glow. */
.own-vpn-float,
.purchase-auto-note,
.network-float,
.legal-hub nav,
.modal,
.admin-modal,
.profile-modal,
.review-modal,
.landing-auth-panel,
.theme-popover,
.appearance-popover,
.shader-popover,
.toast{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.115),
    var(--v153-shadow-floating)!important;
}

/* The exact banner from the reported screenshot. */
.own-vpn-float{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 9px 24px rgba(0,0,0,.18),
    0 2px 7px rgba(0,0,0,.07)!important;
}
.own-vpn-float.is-dragging{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 29px rgba(0,0,0,.21),
    0 3px 8px rgba(0,0,0,.08)!important;
}

/* Hub launcher and other compact floating controls. */
.legal-hub summary,
.own-vpn-support-float,
.theme-control-floating{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    var(--v153-shadow-control)!important;
}
.legal-hub summary:hover,
.own-vpn-support-float:hover,
.theme-control-floating:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 7px 18px rgba(0,0,0,.13)!important;
}

/* Common cards/panels that have their own legacy literal shadows. */
.admin-kpi-card,
.admin-accounts-card,
.admin-reviews-card,
.admin-review-card,
.admin-traffic-card,
.admin-maintenance-card,
.checkout-card,
.developer-panel,
.developer-doc-card,
.developer-trial-card,
.device-custom-panel,
.diagnostic-card,
.empty-card,
.faq-side-card,
.featured-review-card,
.handoff-card,
.hero-card,
.cabinet-card,
.key-card,
.legal-card,
.maintenance-card,
.my-review-card,
.own-vpn-coming-card,
.own-vpn-price-card,
.profile-identity-card,
.public-review-card,
.referral-card,
.review-kind-card,
.review-page-card,
.telegram-profile-panel,
.vpn-server-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    var(--v153-shadow-panel)!important;
}

/* Nested actionable cards: a restrained lift rather than a colored cloud. */
.profile-setting-card:hover,
.profile-action:hover:not(:disabled),
.developer-doc-card[open],
.network-chip:hover,
.legal-hub nav a:hover,
.theme-popover .theme-grid>button:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 7px 19px rgba(0,0,0,.105)!important;
}

/* Primary CTAs may keep a small theme-coloured depth cue, never a large neon halo. */
.btn.primary,
.site-login-button.is-ready,
.landing-cabinet.is-ready,
.landing-buy,
#buyButton,
.hero-actions .btn.primary[href="#tariff"]{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 20px rgb(var(--theme-rgb-2)/.11),
    0 2px 7px rgba(0,0,0,.07)!important;
}
.btn.primary:hover,
.landing-buy:hover,
#buyButton:hover,
.hero-actions .btn.primary[href="#tariff"]:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 10px 24px rgb(var(--theme-rgb-2)/.14),
    0 3px 8px rgba(0,0,0,.08)!important;
}

/* Selected controls: keep state visibility without blooming into surrounding content. */
.period-card.active,
.choice.active,
.auth-tabs button.active,
.chips button.active,
.side-link.active,
.mobile-link.active,
.appearance-popover .theme-grid>button.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgb(var(--theme-rgb)/.08),
    0 5px 15px rgb(var(--theme-rgb)/.055)!important;
}
.period-card.active .period-selected{
  box-shadow:0 3px 10px rgb(var(--theme-rgb)/.12)!important;
}

/* Inputs and small controls should feel tactile, not elevated like panels. */
[data-liquid-glass="control"],
.account-button,
.soft-action,
.os-picker button,
.app-option,
.install-key-option,
.developer-topup-presets button{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    var(--v153-shadow-control)!important;
}

/* Decorative state lights can glow locally; keep the radius tight. */
.live i,
.developer-live-dot,
.side-status i,
.eyebrow i,
.sidebar .side-link.active::before{
  box-shadow:0 0 8px currentColor!important;
}

/* Light theme keeps the same hierarchy with much lower opacity. */
html[data-theme="pearl"] .glass-panel,
html[data-theme="pearl"] .glass-card,
html[data-theme="pearl"] .glass-mini,
html[data-theme="pearl"] .landing-nav,
html[data-theme="pearl"] .page-topbar,
html[data-theme="pearl"] .legal-topbar,
html[data-theme="pearl"] .site-top-hub,
html[data-theme="pearl"] .sidebar,
html[data-theme="pearl"] .own-vpn-float,
html[data-theme="pearl"] .purchase-auto-note,
html[data-theme="pearl"] .network-float,
html[data-theme="pearl"] .legal-hub nav,
html[data-theme="pearl"] .modal,
html[data-theme="pearl"] .landing-auth-panel,
html[data-theme="pearl"] .theme-popover,
html[data-theme="pearl"] .appearance-popover,
html[data-theme="pearl"] .toast{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    var(--v153-shadow-panel)!important;
}

@media(max-width:820px){
  /* Short viewing distances need even less depth on phones/tablets. */
  :root{
    --v153-shadow-panel:0 7px 20px rgba(0,0,0,.13),0 2px 5px rgba(0,0,0,.045);
    --v153-shadow-panel-hover:0 9px 24px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.055);
    --v153-shadow-floating:0 9px 25px rgba(0,0,0,.17),0 2px 6px rgba(0,0,0,.06);
  }
  .own-vpn-float{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 7px 20px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.055)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  /* Shadow hierarchy stays identical; only avoid hover-induced visual jumps. */
  [data-liquid-glass],.glass-panel,.glass-card,.glass-mini{transition-property:border-color,background,opacity!important}
}

/* Specificity guards for legacy V149–V152 states that used !important shadows. */
.sidebar:hover,
.sidebar:focus-within,
.sidebar.is-open{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 27px rgba(0,0,0,.16),0 2px 7px rgba(0,0,0,.055)!important;
}
.site-top-hub:hover,
body[data-page="faq"] .faq-top-hub:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.14),0 2px 7px rgba(0,0,0,.05)!important;
}
.faq-search-main,
.faq-item{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--v153-shadow-panel)!important;
}
.faq-search-main:focus-within{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 3px rgb(var(--theme-rgb)/.04),0 8px 22px rgba(0,0,0,.13)!important;
}
.network-float[open],
.network-float:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--v153-shadow-panel-hover)!important;
}
.network-float-body{
  /* The parent float already owns elevation; a second 48–70px shadow created the dark cloud. */
  box-shadow:none!important;
}
.landing-page .legal-hub[open] nav,
.legal-hub[open] nav{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--v153-shadow-floating)!important;
}
.modal-layer>.modal{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.115),var(--v153-shadow-floating)!important;
}
.admin-purchase-tooltip,
.payment-pending-notice{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),var(--v153-shadow-floating)!important;
}
.featured-review-card.is-active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 10px 27px rgba(0,0,0,.16),0 3px 9px rgb(var(--theme-rgb)/.035)!important;
}
.vpn-api-terminal{
  box-shadow:0 9px 25px rgba(0,0,0,.17),0 2px 7px rgba(0,0,0,.055)!important;
}
.landing-page .landing-buy,
.landing-page #buyButton,
.landing-page .hero-actions .btn.primary[href="#tariff"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px rgb(var(--theme-rgb-2)/.11),0 2px 7px rgba(0,0,0,.07)!important;
}
.landing-page .landing-buy:hover,
.landing-page #buyButton:hover,
.landing-page .hero-actions .btn.primary[href="#tariff"]:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 10px 24px rgb(var(--theme-rgb-2)/.14),0 3px 8px rgba(0,0,0,.08)!important;
}

html[data-theme="pearl"] .sidebar:hover,
html[data-theme="pearl"] .sidebar:focus-within,
html[data-theme="pearl"] .sidebar.is-open,
html[data-theme="pearl"] .site-top-hub:hover,
html[data-theme="pearl"] .faq-search-main,
html[data-theme="pearl"] .faq-item,
html[data-theme="pearl"] .network-float[open],
html[data-theme="pearl"] .legal-hub[open] nav,
html[data-theme="pearl"] .modal-layer>.modal,
html[data-theme="pearl"] .admin-purchase-tooltip,
html[data-theme="pearl"] .payment-pending-notice{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),var(--v153-shadow-panel)!important;
}

/* Liquid-glass JS adds attributes at runtime; keep those attribute-specific popovers soft too. */
.theme-popover[data-liquid-glass],
.appearance-popover[data-liquid-glass],
.shader-popover[data-liquid-glass],
.landing-auth-panel[data-liquid-glass],
.modal[data-liquid-glass],
.review-modal[data-liquid-glass],
.profile-modal[data-liquid-glass]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.115),var(--v153-shadow-floating)!important;
}
html[data-theme="pearl"] .theme-popover[data-liquid-glass],
html[data-theme="pearl"] .appearance-popover[data-liquid-glass],
html[data-theme="pearl"] .shader-popover[data-liquid-glass],
html[data-theme="pearl"] .landing-auth-panel[data-liquid-glass],
html[data-theme="pearl"] .modal[data-liquid-glass]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),var(--v153-shadow-panel)!important;
}

.live i,.developer-live-dot,.side-status i{box-shadow:0 0 8px rgba(158,231,196,.28)!important}
.eyebrow i,.sidebar .side-link.active::before{box-shadow:0 0 8px rgb(var(--theme-rgb)/.22)!important}

/* Legacy top-hub selectors carry a body qualifier; match their specificity so V153 wins. */
.landing-page .landing-nav,
body:not([data-page="faq"]) .page-topbar,
body.legal-page:not([data-page="faq"]) .legal-topbar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 24px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.045)!important;
}
html[data-theme="pearl"] .landing-page .landing-nav,
html[data-theme="pearl"] body:not([data-page="faq"]) .page-topbar,
html[data-theme="pearl"] body.legal-page:not([data-page="faq"]) .legal-topbar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 8px 22px rgba(62,47,72,.065),0 2px 5px rgba(62,47,72,.025)!important;
}