/* SNATCH mini app — v3 «все экраны кроме Главной» (2026-10-15). Не трогает v2 home: всё под html.sx3:not(.rxv2-home). */
html.sx3{--c-chrome:linear-gradient(110deg,#77777e 0%,#f7f7f9 20%,#9d9da4 36%,#fff 50%,#8d8d94 64%,#ececef 82%,#727278 100%);
 --c-rim:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.28));
 --c-ease:cubic-bezier(.16,1,.3,1)}
html.sx3:not(.rxv2-home) body{background:#000}
html.sx3:not(.rxv2-home) #root>div>div.fixed.inset-0.-z-10{background:radial-gradient(90% 45% at 50% -8%,#232327 0%,#08080a 55%,#000 100%)}
html.sx3:not(.rxv2-home) #root>div>div.fixed.inset-0.-z-10>div[class*="bg-[linear-gradient(to_right"]{opacity:.18!important}
/* top scroll progress */
.sx3-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--c-chrome);background-size:200% 100%;pointer-events:none;box-shadow:0 0 12px rgba(255,255,255,.5)}
html.rxv2-home .sx3-prog{display:none}
/* header glass */
html.sx3:not(.rxv2-home) #root header{background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html.sx3 #root header [aria-label]{transition:transform .35s var(--c-ease),box-shadow .35s}
html.sx3 #root header [aria-label]:active{transform:scale(.9)}

/* ---------- hero ---------- */
.sx3-hero{position:relative;min-width:0;max-width:100%;contain:inline-size;overflow:visible;padding:6px 2px 4px;min-height:188px;isolation:isolate}
.sx3-hero .e{font:600 11px/1 inherit;letter-spacing:.28em;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px}
.sx3-hero .e i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:sx3-ping 1.8s infinite}
@keyframes sx3-ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.sx3-hero h1{margin:14px 0 0;font-size:44px;line-height:.96;font-weight:700;letter-spacing:-.045em;max-width:62%;position:relative;z-index:2}
.sx3-hero h1 .w{display:inline-block;background:var(--c-chrome);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx3-liq 7s linear infinite,sx3-word .9s var(--c-ease) both;animation-delay:0s,var(--d,0ms)}
@keyframes sx3-liq{to{background-position:280% 0}}
@keyframes sx3-word{from{opacity:0;transform:translateY(.55em) rotateX(-70deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.sx3-hero p.s{margin:12px 0 0;max-width:64%;font-size:14px;line-height:1.45;color:rgba(255,255,255,.62);position:relative;z-index:2;animation:sx3-fade .9s .35s var(--c-ease) both}
@keyframes sx3-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sx3-3d{position:absolute;right:-18px;top:-14px;width:190px;height:190px;z-index:1;pointer-events:auto;touch-action:pan-y;animation:sx3-fade 1.2s .1s var(--c-ease) both}
.sx3-3d canvas{width:100%!important;height:100%!important;display:block}
.sx3-3d::after{content:"";position:absolute;inset:18% 10% -6%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);z-index:-1;filter:blur(10px)}
.sx3-3d.fb{border-radius:50%;width:140px;height:140px;right:4px;top:10px;background:conic-gradient(from 0deg,#555,#fafafa,#777,#ddd,#555);animation:sx3-spin 6s linear infinite;-webkit-mask:radial-gradient(circle,transparent 38%,#000 40%,#000 46%,transparent 48%,transparent 58%,#000 60%)}
@keyframes sx3-spin{to{transform:rotate(1turn)}}
.sx3-chips{display:flex;gap:8px;margin-top:18px;position:relative;z-index:2;overflow-x:auto;scrollbar-width:none}
.sx3-chip{flex:0 0 auto;padding:10px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);animation:sx3-fade .8s var(--c-ease) both;animation-delay:var(--d,0ms)}
.sx3-chip b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;background:var(--c-chrome);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sx3-chip span{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.04em}
.sx3-marq{margin:18px 0 0;max-width:100%;overflow:hidden;border-block:1px solid rgba(255,255,255,.07);padding:9px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sx3-marq div{display:flex;gap:28px;width:max-content;animation:sx3-mq 22s linear infinite;font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.4);white-space:nowrap}
.sx3-marq div span::before{content:"✦";margin-right:28px;color:rgba(255,255,255,.7)}
@keyframes sx3-mq{to{transform:translateX(-50%)}}
html.sx3 .sx3-hid{display:none!important}

/* ---------- cards ---------- */
html.sx3:not(.rxv2-home) main .liquid-glass{position:relative;background:linear-gradient(165deg,rgba(28,28,31,.92),rgba(9,9,10,.92))!important;border:0!important;border-radius:28px!important;
 box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06) inset;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-style:preserve-3d}
html.sx3:not(.rxv2-home) main .liquid-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--c-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
html.sx3:not(.rxv2-home) main .liquid-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%)}
html.sx3:not(.rxv2-home) main .liquid-glass.sx3-hot::after{opacity:1}
/* entrance (own system, overrides v1 reveal on these screens) */
html.sx3:not(.rxv2-home) main .sx3-r{opacity:0;transform:perspective(900px) translateY(42px) rotateX(16deg) scale(.96);filter:blur(6px);transition:opacity .9s var(--c-ease),transform 1s var(--c-ease),filter .9s var(--c-ease);transition-delay:var(--sd,0ms)}
html.sx3:not(.rxv2-home) main .sx3-r.sx3-in{opacity:1!important;transform:none;filter:none}
html.sx3:not(.rxv2-home) main .sx3-r.sx3-in.sx3-tilt{transition:transform .25s ease-out,opacity .9s,filter .9s}
/* section eyebrows */
html.sx3:not(.rxv2-home) main p[class*="tracking-[0.14em]"],html.sx3:not(.rxv2-home) main h2[class*="tracking-[0.14em]"],html.sx3:not(.rxv2-home) main p[class*="tracking-[0.2em]"]{letter-spacing:.26em!important;font-size:10.5px!important;color:rgba(255,255,255,.48)!important;font-weight:600}
html.sx3:not(.rxv2-home) main h2.text-lg,html.sx3:not(.rxv2-home) main h2.text-xl,html.sx3:not(.rxv2-home) main h3.text-lg{font-size:22px!important;font-weight:650;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#a9a9b0);-webkit-background-clip:text;background-clip:text;color:transparent}
/* inputs */
html.sx3:not(.rxv2-home) main input[data-slot=input],html.sx3:not(.rxv2-home) main textarea{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;transition:border-color .3s,box-shadow .3s,background .3s,transform .3s var(--c-ease)}
html.sx3:not(.rxv2-home) main input[data-slot=input]:focus{border-color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 0 0 4px rgba(255,255,255,.07),0 10px 30px -10px rgba(255,255,255,.25)!important;transform:translateY(-1px)}
/* primary chrome buttons */
html.sx3:not(.rxv2-home) main button.bg-foreground.h-12,html.sx3:not(.rxv2-home) main button[data-slot=button][data-variant=default],html.sx3:not(.rxv2-home) main a.bg-foreground{position:relative;overflow:hidden;background:var(--c-chrome)!important;background-size:220% 100%!important;color:#0a0a0b!important;border:0!important;font-weight:700;letter-spacing:-.01em;box-shadow:0 14px 34px -12px rgba(255,255,255,.35),inset 0 1px 0 #fff,inset 0 -2px 6px rgba(0,0,0,.25)!important;animation:sx3-liq 9s linear infinite;transition:transform .25s var(--c-ease)}
html.sx3:not(.rxv2-home) main button.bg-foreground.h-12::after,html.sx3:not(.rxv2-home) main button[data-slot=button][data-variant=default]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-120%);animation:sx3-sheen 3.6s 1s infinite}
@keyframes sx3-sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
html.sx3:not(.rxv2-home) main button:active,html.sx3:not(.rxv2-home) nav button:active{transform:scale(.95)}
/* pills (days, pay methods, filters) */
html.sx3:not(.rxv2-home) main button.rounded-full{transition:background .35s,color .35s,box-shadow .35s,transform .25s var(--c-ease)}
html.sx3:not(.rxv2-home) main button.rounded-full.bg-foreground{background:linear-gradient(180deg,#fff,#c9c9cf)!important;color:#000!important;box-shadow:0 6px 18px -6px rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.2)}
html.sx3:not(.rxv2-home) main button.rounded-full[class*="border-foreground/"]:not(.bg-foreground){background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.12)!important}

/* ---------- Лента ---------- */
html.sx3.sx3-feed main .liquid-glass.overflow-hidden{border-radius:26px!important}
html.sx3.sx3-feed main .relative.bg-muted{background:radial-gradient(120% 90% at 30% 10%,#2a2a2e,#0b0b0c 70%)!important;overflow:hidden}
html.sx3.sx3-feed main .relative.bg-muted>div.flex{font-size:0!important}
.sx3-ph{position:absolute;inset:0;display:grid;place-items:center;perspective:500px;pointer-events:none}
.sx3-ph i{width:44%;aspect-ratio:1;border-radius:22%;background:var(--c-chrome);background-size:250% 100%;transform-style:preserve-3d;animation:sx3-float 5s ease-in-out infinite,sx3-liq 6s linear infinite;box-shadow:0 30px 40px -20px rgba(0,0,0,.9);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 26%,#000 27%,#000 34%,transparent 35%,transparent 100%),linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.sx3-ph em{position:absolute;bottom:10px;left:12px;font-style:normal;font-size:9px;letter-spacing:.24em;color:rgba(255,255,255,.35)}
@keyframes sx3-float{0%,100%{transform:rotateX(18deg) rotateY(-24deg) translateY(0)}50%{transform:rotateX(-10deg) rotateY(26deg) translateY(-6px)}}
html.sx3.sx3-feed main .relative.bg-muted>span.absolute.top-2{background:#fff!important;color:#000!important;font-weight:800;letter-spacing:.14em;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:sx3-ping 1.8s infinite;z-index:2}
html.sx3.sx3-feed main .relative.bg-muted>span.absolute.bottom-2{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);z-index:2}
html.sx3.sx3-feed main .liquid-glass p.text-lg.font-medium,html.sx3 main .sx3-price{font-size:26px!important;font-weight:750!important;letter-spacing:-.04em;background:var(--c-chrome);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx3-liq 8s linear infinite}
html.sx3.sx3-feed main .rounded-2xl.border.p-3{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border-color:rgba(255,255,255,.09)!important;border-radius:20px;position:relative;overflow:hidden}
html.sx3.sx3-feed main .rounded-2xl.border.p-3::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--c-chrome);box-shadow:0 0 12px rgba(255,255,255,.6)}
html.sx3.sx3-feed main .rounded-2xl.border.p-3 a,html.sx3.sx3-feed main .rounded-2xl.border.p-3 button.underline{text-decoration:none!important;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);margin-top:4px;display:inline-block}
html.sx3.sx3-feed main .liquid-glass.rounded-2xl.px-3{border-radius:20px!important}
/* listing detail */
html.sx3.sx3-listing main h1.text-2xl{font-size:28px!important;font-weight:700;letter-spacing:-.035em;line-height:1.05}
html.sx3.sx3-listing main p.text-3xl{font-size:40px!important;font-weight:800;letter-spacing:-.05em;background:var(--c-chrome);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx3-liq 8s linear infinite}
html.sx3.sx3-listing main .aspect-\[4\/3\].bg-muted{position:relative;background:radial-gradient(120% 90% at 30% 10%,#2a2a2e,#0b0b0c 70%)!important}
html.sx3.sx3-listing main>button.text-xs:first-child{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff!important}
html.sx3.sx3-listing main>button.text-xs:first-child::before{content:"←"}
html.sx3.sx3-listing main dl>div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}

/* ---------- Тарифы ---------- */
html.sx3.sx3-tariffs main article.liquid-glass{padding:24px!important;overflow:hidden}
html.sx3.sx3-tariffs main article.liquid-glass h3{font-size:30px!important}
html.sx3.sx3-tariffs main article.liquid-glass p.text-4xl{font-size:54px!important;font-weight:800!important;letter-spacing:-.06em;background:var(--c-chrome);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx3-liq 8s linear infinite}
html.sx3.sx3-tariffs main article.liquid-glass li{position:relative;padding-left:24px}
html.sx3.sx3-tariffs main article.liquid-glass li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;border-radius:50%;background:var(--c-chrome);box-shadow:0 0 10px rgba(255,255,255,.35)}
html.sx3.sx3-tariffs main article.sx3-feat{background:linear-gradient(165deg,rgba(40,40,44,.95),rgba(10,10,11,.95))!important}
html.sx3.sx3-tariffs main article.sx3-feat::before{padding:1.5px;background:conic-gradient(from var(--a,0deg),#666,#fff,#777,#eee,#555,#fff,#666);animation:sx3-rot 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes sx3-rot{to{--a:360deg}}
.sx3-badge{position:absolute;right:18px;top:20px;font-size:10px;font-weight:800;letter-spacing:.2em;padding:6px 10px;border-radius:999px;background:var(--c-chrome);background-size:250% 100%;color:#000;animation:sx3-liq 6s linear infinite;z-index:4}
html.sx3.sx3-tariffs main article.sx3-feat .sx3-badge~div span.text-xs{display:none}

/* ---------- Профиль ---------- */
html.sx3.sx3-profile main .relative.size-16{width:76px!important;height:76px!important}
html.sx3.sx3-profile main .relative.size-16>span:first-child{animation:sx3-spin 4s linear infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}
html.sx3.sx3-profile main h1.truncate{font-size:28px!important;font-weight:700;letter-spacing:-.04em}
html.sx3.sx3-profile main .h-2.rounded-full{height:8px!important;background:rgba(255,255,255,.06)!important}
html.sx3.sx3-profile main .h-2.rounded-full>div{position:relative;overflow:hidden;background:var(--c-chrome)!important;background-size:220% 100%!important;animation:sx3-liq 4s linear infinite,sx3-grow 1.6s .2s var(--c-ease) both;transform-origin:0 50%;box-shadow:0 0 14px rgba(255,255,255,.5)}
@keyframes sx3-grow{from{transform:scaleX(0)}}
html.sx3.sx3-profile main p.tabular-nums,html.sx3.sx3-profile main p.text-2xl{font-size:30px!important;font-weight:750!important;letter-spacing:-.04em}
html.sx3.sx3-profile main .grid-cols-2>div.rounded-2xl{border-radius:16px;transition:transform .3s var(--c-ease)}

/* ---------- Настройки ---------- */
html.sx3.sx3-settings main [class*="rounded-3xl"] button,html.sx3.sx3-settings main [class*="rounded-3xl"]>div{transition:background .3s}
html.sx3.sx3-settings main [class*="rounded-3xl"] button:active{background:rgba(255,255,255,.06)}

/* ---------- empty / loaders ---------- */
.sx3-empty{display:flex!important;flex-direction:column;align-items:center;gap:12px;padding:22px 8px!important;text-align:center;color:rgba(255,255,255,.6)!important}
.sx3-empty::before{content:"";width:58px;height:58px;border-radius:50%;background:conic-gradient(from 0deg,#444,#fafafa,#666,#ddd,#444);-webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%,transparent 74%,#000 76%);animation:sx3-spin 5s linear infinite}
html.sx3 main.pt-10.text-sm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:70vh;letter-spacing:.2em;font-size:11px!important;text-transform:uppercase}
html.sx3 main.pt-10.text-sm::before{content:"";width:84px;height:84px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#fff 40%,transparent 41%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);animation:sx3-spin 1.1s linear infinite;box-shadow:0 0 30px rgba(255,255,255,.15)}
html.sx3 [class*="animate-pulse"]{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.04) 70%)!important;background-size:300% 100%!important;animation:sx3-shim 1.4s linear infinite!important}
@keyframes sx3-shim{from{background-position:100% 0}to{background-position:-100% 0}}
/* dropdown / dialogs / sheets / toasts */
html.sx3 header .absolute.right-0,html.sx3 header [class*="top-12"],html.sx3 [role=dialog],html.sx3 [data-slot$=content]{background:linear-gradient(165deg,rgba(30,30,33,.92),rgba(8,8,9,.94))!important;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12)!important;border-radius:24px!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12)!important;animation:sx3-pop .45s var(--c-ease) both;transform-origin:top right}
@keyframes sx3-pop{from{opacity:0;transform:translateY(-8px) scale(.94);filter:blur(4px)}}
html.sx3 [data-slot$=overlay],html.sx3 .fixed.inset-0.bg-black\/50,html.sx3 .fixed.inset-0[class*="bg-black/"]{backdrop-filter:blur(10px);background:rgba(0,0,0,.6)!important}
html.sx3 [data-sonner-toast]{background:rgba(18,18,20,.9)!important;backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14)!important;border-radius:18px!important;color:#fff!important}
/* splash loader (fixed z-80) */
html.sx3 .fixed.inset-0.z-\[80\]{background:radial-gradient(70% 50% at 50% 40%,#1c1c1f,#000)!important}
/* ---------- bottom nav ---------- */
html.sx3:not(.rxv2-home) nav>div{background:linear-gradient(180deg,rgba(26,26,29,.78),rgba(6,6,7,.9))!important;border-color:rgba(255,255,255,.12)!important;backdrop-filter:blur(26px) saturate(1.4)!important}
html.sx3:not(.rxv2-home) nav button svg{transition:transform .45s var(--c-ease),filter .45s}
html.sx3:not(.rxv2-home) nav button.bg-foreground svg{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
html.sx3:not(.rxv2-home) nav button.bg-foreground{background:var(--c-chrome)!important;background-size:240% 100%!important;animation:sx3-liq 8s linear infinite;color:#000!important;box-shadow:0 8px 24px -8px rgba(255,255,255,.55),inset 0 1px 0 #fff}
/* reduced motion */
@media (prefers-reduced-motion:reduce){html.sx3 *,html.sx3 *::before,html.sx3 *::after{animation:none!important;transition:none!important}html.sx3 main .sx3-r{opacity:1!important;transform:none!important;filter:none!important}}

html.sx3:not(.rxv2-home) main>*{min-width:0}
.sx3-hero .e{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){html.sx3:not(.rxv2-home) main.grid{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:1023px){html.sx3:not(.rxv2-home) main .grid.content-start{grid-template-columns:minmax(0,1fr)!important}}
html.sx3.sx3-profile main .min-w-0.flex-1{min-width:0}html.sx3.sx3-profile main h1.truncate{font-size:25px!important}