/* aurora102 — оболочка приложения: анимации переходов, индикатор навигации, мобильный
   док, нижние шторки, pull-to-refresh, заставка, тосты, установка и обновление PWA.
   Работает во всех стилях; цвета берутся из токенов. */
:root{--dock-h:66px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--shell-ease:cubic-bezier(.2,.8,.2,1);--shell-spring:cubic-bezier(.22,1.28,.36,1)}
html{scroll-padding-top:96px}
body{overscroll-behavior-y:none}

/* ---- переходы страниц ---- */
.page-enter>*,.page-enter .home-column>*{animation:oc-rise .55s var(--shell-ease) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes oc-rise{from{opacity:0;transform:translate3d(0,14px,0) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.topbar h1.title-swap{animation:oc-title .45s var(--shell-ease) both}
@keyframes oc-title{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- индикатор активного раздела ---- */
.nav-indicator{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:15px;pointer-events:none;opacity:0;
 background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 30%,transparent),color-mix(in srgb,var(--aurora-2,var(--primary)) 16%,transparent));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 34%,transparent),0 10px 30px -12px color-mix(in srgb,var(--primary) 70%,transparent);
 transition:transform .55s var(--shell-spring),width .55s var(--shell-spring),height .55s var(--shell-spring),opacity .3s}
.nav-indicator.is-ready{opacity:1}
.oc-navigation{isolation:isolate}
.oc-navigation .dest{position:relative;z-index:1}
:root:not([data-panel-style=aurora]) .nav-indicator{display:none}

/* ---- верхняя панель ---- */
.install-steps{display:grid;gap:10px;padding:0;margin:4px 0 0;list-style:none;counter-reset:s}
.install-steps li{counter-increment:s;display:flex;gap:12px;align-items:center;color:var(--on-surface)}
.install-steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;background:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--primary)}

/* ---- тост ---- */
.snackbar{border-radius:18px!important;padding:13px 18px!important;font-weight:600;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:color-mix(in srgb,var(--on-surface) 92%,transparent)!important;box-shadow:0 18px 50px -12px rgba(0,0,0,.6)!important;animation:oc-toast .45s var(--shell-spring) both}
.snackbar--err{background:color-mix(in srgb,var(--error) 92%,#000)!important;color:#fff!important}
@keyframes oc-toast{from{opacity:0;transform:translate(-50%,18px) scale(.94)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- плашки PWA: обновление, офлайн, установка ---- */
.shell-toast{position:fixed;left:50%;z-index:35;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 24px);padding:10px 10px 10px 18px;border-radius:22px;color:var(--on-surface);
 background:color-mix(in srgb,var(--surface-2) 88%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,var(--outline-variant));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 22px 60px -18px rgba(0,0,0,.75);animation:oc-toast .5s var(--shell-spring) both;font-size:14px;font-weight:600}
.shell-toast .btn{height:36px;padding:0 16px;flex:none}
.shell-toast .shell-x{flex:none}
.offline-pill{position:fixed;left:50%;top:calc(var(--safe-t) + 10px);z-index:36;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:650;color:#fff;background:color-mix(in srgb,var(--error) 80%,#140d10);box-shadow:0 12px 30px -8px rgba(0,0,0,.6);animation:oc-drop .45s var(--shell-spring) both}
.offline-pill i{width:8px;height:8px;border-radius:50%;background:#fff;animation:oc-blink 1.2s infinite}
@keyframes oc-drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes oc-blink{50%{opacity:.3}}
.install-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:14px 14px 14px 16px;border-radius:22px;border:1px solid color-mix(in srgb,var(--primary) 34%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--aurora-2,var(--primary)) 8%,transparent));animation:oc-rise .5s var(--shell-ease) both}
.install-card img{width:46px;height:46px;border-radius:14px;flex:none;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 80%,transparent)}
.install-card .grow{min-width:0}
.install-card>.btn{grid-column:auto}
.install-card>.icon-btn{position:absolute;top:8px;right:8px;width:32px;height:32px}
.install-card{position:relative}
.install-card:has(>.icon-btn){padding-right:44px}
@media(max-width:560px){.install-card{grid-template-columns:46px minmax(0,1fr)}.install-card>.btn{grid-column:1/-1;width:100%;margin-top:8px}}
.install-card b{display:block;font-size:15px}
.install-card small{display:block;color:var(--on-surface-variant);font-size:12.5px;line-height:1.35}

/* ---- заставка (только установленное приложение) ---- */
#splash{display:none}
@media (display-mode:standalone){
 #splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:22px;background:radial-gradient(70% 50% at 50% 42%,color-mix(in srgb,var(--primary) 22%,#08070d),#08070d);transition:opacity .5s var(--shell-ease),visibility .5s}
 #splash.is-gone{opacity:0;visibility:hidden}
 #splash img{width:96px;height:96px;border-radius:28px;box-shadow:0 24px 70px -16px color-mix(in srgb,var(--primary) 90%,transparent);animation:oc-splash 1.4s var(--shell-spring) both}
 #splash b{font-size:20px;font-weight:760;letter-spacing:-.4px;color:#f3f1fa;animation:oc-rise .7s .15s var(--shell-ease) both}
 #splash span{display:block;width:120px;height:3px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.1)}
 #splash span::after{content:'';display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--aurora-2,var(--primary)));animation:oc-load 1.1s ease-in-out infinite}
}
@keyframes oc-splash{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes oc-load{from{transform:translateX(-110%)}to{transform:translateX(260%)}}

/* ---- pull-to-refresh ---- */
.ptr{position:fixed;left:50%;top:calc(var(--safe-t) + 8px);z-index:20;width:42px;height:42px;margin-left:-21px;border-radius:50%;display:grid;place-items:center;pointer-events:none;opacity:0;
 background:color-mix(in srgb,var(--surface-2) 90%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,var(--outline-variant));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px -8px rgba(0,0,0,.6);color:var(--primary);transform:translateY(-60px)}
.ptr svg{width:22px;height:22px}
.ptr.is-loading svg{animation:oc-spin .8s linear infinite}
@keyframes oc-spin{to{transform:rotate(360deg)}}

/* ---- «Ещё» ---- */
.more-sheet{display:grid;gap:18px}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.more-tile{display:grid;justify-items:center;align-content:center;gap:8px;min-height:96px;padding:12px 6px;border-radius:20px;border:1px solid color-mix(in srgb,var(--outline-variant) 70%,transparent);background:color-mix(in srgb,var(--surface-2) 60%,transparent);color:var(--on-surface);font:inherit;font-size:12.5px;font-weight:600;text-align:center;cursor:pointer;transition:transform .35s var(--shell-spring),border-color .2s,background .2s;animation:oc-rise .45s var(--shell-ease) both;animation-delay:calc(var(--i,0)*30ms)}
.more-tile:active{transform:scale(.94)}
.more-tile[aria-current]{border-color:color-mix(in srgb,var(--primary) 60%,transparent);background:color-mix(in srgb,var(--primary) 16%,transparent)}
.more-tile .ms{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.more-tile .ms svg{width:22px;height:22px}
.more-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--on-surface-variant);font-size:12px}

/* ---- телефон и планшет ---- */
@media(max-width:839px){
 .topbar{gap:6px;padding-top:var(--safe-t)!important;height:calc(60px + var(--safe-t))!important}
 .content{padding-bottom:calc(var(--dock-h) + 40px + var(--safe-b))!important}
 :root .app .oc-navigation{inset:auto 12px calc(10px + var(--safe-b)) 12px!important;width:auto!important;height:var(--dock-h)!important;padding:6px!important;gap:2px!important;border-radius:26px!important;flex-direction:row!important;overflow:visible!important;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--outline-variant))!important;background:color-mix(in srgb,var(--surface-1) 78%,transparent)!important;backdrop-filter:blur(26px) saturate(170%)!important;-webkit-backdrop-filter:blur(26px) saturate(170%)!important;box-shadow:0 20px 50px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05)!important;animation:oc-dock .6s var(--shell-spring) both}
 :root .app .oc-navigation .dest{display:none!important}
 :root .app .oc-navigation .dest[data-dock],:root .app .oc-navigation .dest--more{display:flex!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;height:100%!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:0 2px!important;border-radius:20px!important;background:transparent!important;box-shadow:none!important;font-size:10.5px!important;font-weight:650!important;color:var(--on-surface-variant)!important;transition:color .25s,transform .3s var(--shell-spring)}
 :root .app .oc-navigation .dest:active{transform:scale(.9)}
 :root .app .oc-navigation .dest .ms{width:26px!important;height:26px!important;display:grid!important;place-items:center!important;background:none!important;border-radius:0!important;transition:transform .45s var(--shell-spring)}
 :root .app .oc-navigation .dest[aria-current]{color:var(--on-surface)!important}
 :root .app .oc-navigation .dest[aria-current] .ms{color:var(--primary)!important;transform:translateY(-1px) scale(1.08)}
 :root .app .oc-navigation .dest .ms svg{width:23px;height:23px}
 .nav-indicator{display:block!important;border-radius:20px}
 :root .snackbar{bottom:calc(var(--dock-h) + 22px + var(--safe-b))!important}
 .shell-toast{bottom:calc(var(--dock-h) + 22px + var(--safe-b))}
 .emulator-dock{bottom:calc(var(--dock-h) + 22px + var(--safe-b))!important}
 .fab{bottom:calc(var(--dock-h) + 24px + var(--safe-b))!important}
 .builder-actions{bottom:calc(var(--dock-h) + 20px + var(--safe-b))!important}
 #log-btn{display:none}

 /* нижняя шторка вместо центрального окна */
 dialog#dialog{width:100%!important;max-width:100%!important;margin:auto 0 0!important;max-height:calc(100dvh - var(--safe-t) - 28px)!important;border-radius:30px 30px 0 0!important;padding:30px 18px calc(20px + var(--safe-b))!important;animation:oc-sheet .5s var(--shell-spring) both;touch-action:pan-y}
 dialog#dialog::before{content:'';position:absolute;left:50%;top:10px;width:42px;height:5px;margin-left:-21px;border-radius:9px;background:color-mix(in srgb,var(--on-surface) 28%,transparent)}
 dialog#dialog[open]::backdrop{animation:oc-fade .35s both}
 dialog#dialog.is-dragging{animation:none;transition:none}
 dialog#dialog.is-closing{transition:transform .28s var(--shell-ease)!important;transform:translateY(105%)!important}
 dialog#dialog .dialog__actions{position:sticky;bottom:calc(-20px - var(--safe-b));margin:16px -18px calc(-20px - var(--safe-b));padding:12px 18px calc(14px + var(--safe-b));background:inherit;justify-content:stretch}
 dialog#dialog .dialog__actions>.btn{flex:1 1 0}
 dialog#dialog .dialog__body{max-height:none}
 dialog#dialog h2{font-size:22px;margin-bottom:12px}
}
@keyframes oc-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes oc-fade{from{opacity:0}}
@keyframes oc-dock{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:380px){:root .app .oc-navigation .dest[data-dock],:root .app .oc-navigation .dest--more{font-size:9.5px!important}.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* установленное приложение: без выделения текста интерфейса, как у нативного */
@media (display-mode:standalone){
 .oc-navigation,.topbar,.more-tile,.btn,.chip,.icon-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
@media(prefers-reduced-motion:reduce){
 .page-enter>*,.page-enter .home-column>*,.more-tile,.install-card,.snackbar,.shell-toast,.offline-pill,dialog#dialog,:root .app .oc-navigation{animation:none!important}
 .nav-indicator{transition:none}
}