:root{
 --glass-bg-strong:rgba(34,26,54,.06);
 --glass-line:rgba(255,255,255,.17);
 --glass-hi:rgba(255,255,255,.38);
 --glass-lo:rgba(0,0,0,.28);
 --glass-shadow:0 10px 28px rgba(0,0,0,.34);
 --glass-blur:blur(18px) saturate(200%);
 --glass-text:#fff;
}
body.light{
 --glass-bg-strong:rgba(255,255,255,.08);
 --glass-line:rgba(255,255,255,.95);
 --glass-hi:rgba(255,255,255,1);
 --glass-lo:rgba(60,40,110,.10);
 --glass-shadow:0 10px 26px rgba(70,50,120,.18);
 --glass-text:var(--accent);
}

/* ---------- liquid glass: ONLY the bottom navigation ---------- */
body .bottom-nav{
 border-radius:999px!important;padding:6px!important;
 background:var(--glass-bg-strong)!important;
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
 border:1px solid var(--glass-line)!important;
 box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),var(--glass-shadow)!important;
}
body .bottom-nav button{border-radius:999px!important;background:transparent!important;color:var(--muted);transition:background .25s,box-shadow .25s,color .25s}
body .bottom-nav button[aria-current=page]{
 color:var(--glass-text)!important;font-weight:650;
 background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 52%,transparent),color-mix(in srgb,var(--accent) 22%,transparent))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 14px color-mix(in srgb,var(--accent) 30%,transparent),0 0 24px color-mix(in srgb,var(--accent) 55%,transparent)!important;
}

/* ---------- everything else: plain rounded capsules, no blur, no gloss ---------- */
.primary,a.primary{border-radius:999px!important}
.primary:hover{filter:none!important}
.primary:active{transform:none}

/* hero photo stays on its own layer, so nothing repaints it when a button is hovered */
.service-art{will-change:transform;backface-visibility:hidden}
.service-art img{backface-visibility:hidden}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body .bottom-nav{background:var(--surface,#1b1c27)!important}
}
@media(prefers-reduced-transparency:reduce){
 body .bottom-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface,#1b1c27)!important}
}

/* ---------- brighter nav labels and a vivid "Купить" ---------- */
body .bottom-nav button{color:color-mix(in srgb,var(--text) 82%,transparent)!important}
body .bottom-nav button svg{stroke-width:2.1}
body .bottom-nav button[aria-current=page]{
 background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,transparent),color-mix(in srgb,var(--accent) 34%,transparent))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 16px color-mix(in srgb,var(--accent) 38%,transparent),0 0 26px color-mix(in srgb,var(--accent) 65%,transparent)!important;
}
body.light .bottom-nav button{color:color-mix(in srgb,var(--text) 78%,transparent)!important}
.bal-buy{
 background:linear-gradient(115deg,#924bfa,#c43bd5 58%,#e54e9e)!important;color:#fff!important;font-weight:700;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(196,59,213,.5)!important;text-shadow:0 1px 2px rgba(0,0,0,.25)}
body.work-mode .bal-buy{
 background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent))!important;color:var(--accentInk,#fff)!important;text-shadow:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)!important}

body .bottom-nav button:not([aria-current=page]){text-shadow:0 1px 3px rgba(0,0,0,.45)}
body.light .bottom-nav button:not([aria-current=page]){text-shadow:none}

/* ---------- small, neat badges on photo and video tiles ---------- */
.tile .badge{top:8px!important;left:8px!important;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px!important;border-radius:999px!important;
 font-size:10px!important;font-weight:700;letter-spacing:.01em;line-height:1.25;text-transform:none;color:#fff!important;
 background:rgba(12,10,22,.52)!important;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tile .badge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
.tile .badge-hot::before{width:9px;height:12px;border-radius:0;margin-left:-1px;background:linear-gradient(180deg,#d9b4ff,#c43bd5 55%,#e54e9e);filter:drop-shadow(0 0 3px rgba(196,59,213,.8));
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 1 4 13.5h6.2L9 23l10.5-13.2h-6.4z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 1 4 13.5h6.2L9 23l10.5-13.2h-6.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.tile .badge-photo::before{width:8px;height:8px;border-radius:2px;background:none;border:1.5px solid #fff}
.tile .badge-video::before{width:0;height:0;border-radius:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;background:none;box-shadow:none}

/* ---------- brighter menu buttons ---------- */
body .bottom-nav button{color:#fff!important;opacity:1;font-weight:600}
body.light .bottom-nav button{color:color-mix(in srgb,var(--text) 92%,transparent)!important}
body .bottom-nav .nav-icon svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
body:not(.work-mode) .bottom-nav button[aria-current=page]{
 background:linear-gradient(115deg,#924bfa,#c43bd5 58%,#e54e9e)!important;color:#fff!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 28px rgba(196,59,213,.7)!important}
body.work-mode .bottom-nav button[aria-current=page]{
 background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent))!important;color:var(--accentInk,#fff)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 28px color-mix(in srgb,var(--accent) 75%,transparent)!important}

/* ---------- selected menu button: translucent glass pill ---------- */
body:not(.work-mode) .bottom-nav button[aria-current=page]{
 background:linear-gradient(115deg,rgba(146,75,250,.42),rgba(196,59,213,.36) 58%,rgba(229,78,158,.42))!important;
 border:1px solid rgba(255,255,255,.28)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(196,59,213,.35)!important}
body.work-mode .bottom-nav button[aria-current=page]{
 background:color-mix(in srgb,var(--accent) 40%,transparent)!important;
 border:1px solid rgba(255,255,255,.28)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)!important}
body.light:not(.work-mode) .bottom-nav button[aria-current=page]{color:#5b1d8f!important}

/* usage counter on every template tile */
.tile .uses-chip{position:absolute;top:8px;right:8px;z-index:2;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.25;color:#fff;background:rgba(12,10,22,.52);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}