/* TickPit unified mobile + tablet header and bottom navigation v2.1.0 */
@media(max-width:1180px){
html{scroll-padding-bottom:90px}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
.tp-nav.tp-mobile-app{display:block!important;overflow:visible!important;width:calc(100% - 20px)!important;min-height:58px!important;top:8px!important;margin:8px 10px 0!important;padding:7px 10px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(18,20,24,.92),rgba(7,9,12,.82))!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
.tp-mobile-headrow{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:42px!important;padding:0!important}
.tp-mobile-headrow .tp-logo{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;max-width:58%!important;font-size:18px!important}
.tp-mobile-headrow #tp-theme{position:absolute!important;left:0!important;right:auto!important;margin:0!important}
.tp-nav.tp-mobile-app>:not(.tp-mobile-headrow):not(.tp-glow-menu):not(.tp-profile-menu),.tp-nav.tp-mobile-app>.tp-links,.tp-nav.tp-mobile-app>.tp-burger{display:none!important}
.tp-glow-menu{position:fixed!important;z-index:99990!important;right:8px!important;left:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;direction:rtl!important;height:64px!important;padding:5px!important;margin:0!important;border-radius:19px!important;background:linear-gradient(180deg,rgba(22,25,30,.96),rgba(7,9,12,.94))!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 14px 42px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;overflow:visible!important}
.tp-glow-item{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;height:52px!important}
.tp-glow-link,.tp-profile-slot .tp-avatar-link,.tp-profile-slot .tp-login-icon{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:52px!important;margin:0!important;padding:0!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#9ca3af!important;text-decoration:none!important;transform:none!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent}
.tp-glow-link:before{content:"";position:absolute;inset:8px;border-radius:12px;background:var(--tp-glow);opacity:0;transform:scale(.72);filter:blur(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.tp-glow-face{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:12px!important;transform:none!important;opacity:1!important}
.tp-glow-back{display:none!important}.tp-glow-icon{display:flex!important;align-items:center!important;justify-content:center!important;color:var(--tp-icon)!important;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tp-icon) 40%,transparent))}
.tp-glow-icon svg,.tp-nav.tp-mobile-app .tp-glow-icon svg{display:block!important;width:24px!important;height:24px!important}
.tp-glow-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.tp-glow-link.is-active{color:#fff!important;background:rgba(255,255,255,.055)!important}.tp-glow-link.is-active:before,.tp-glow-link:active:before{opacity:1;transform:scale(1.45)}
.tp-profile-slot .tp-avatar-link,.tp-profile-slot .tp-login-icon{width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px!important;border-radius:50%!important;overflow:hidden!important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 5px 15px rgba(0,0,0,.3)!important}
/* The anchor is a flex ROW (see .tp-glow-link above) and holds BOTH the letter <span>
   and the <img>. Flex therefore squeezed the image horizontally to make room for the
   span while its height stayed fixed - a non-square box. border-radius:50% on a
   non-square box draws an ELLIPSE, which is the squashed-avatar report.

   The photo is taken out of flow entirely and pinned to the box, so no amount of flex
   pressure can deform it. The span is only a fallback for a broken/missing image, so
   hiding it while an <img> is present is correct rather than cosmetic. */
.tp-profile-slot .tp-avatar-link img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;object-fit:cover!important;border-radius:50%!important;flex:0 0 auto!important}
/* Both builders append the span FIRST and the img SECOND, so the letter always
   precedes the photo: span + img. Hide the letter whenever a photo follows it. */
/* Hide the letter, not the photo. The sibling combinator has to point from the SPAN to
   the image that follows it - selecting "span+img" hides the image, because img is the
   matched element. The :not(:only-child) guard keeps the letter visible when there is no
   photo at all (broken image, or a session with no avatar). */
.tp-profile-slot .tp-avatar-link>span:has(+img){display:none!important}
.tp-profile-slot .tp-avatar-link svg,.tp-profile-slot .tp-login-icon svg{width:23px!important;height:23px!important}
.tp-profile-slot .tp-avatar-link[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(46,204,113,.7),0 0 18px rgba(46,204,113,.28)!important}
.tp-tools-menu{display:none;position:absolute!important;right:0!important;left:0!important;bottom:calc(100% + 10px)!important;top:auto!important;z-index:100010!important;padding:9px!important;border-radius:16px!important;background:rgba(8,10,13,.98)!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 18px 48px rgba(0,0,0,.6)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tp-tools-menu.open{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.tp-tools-menu a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px!important;border-radius:11px!important;color:#d1d5db!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;font-size:11.5px!important;font-weight:700!important;text-decoration:none!important;text-align:center!important}.tp-tools-soon{grid-column:1/-1;color:#7fe6a8;font-size:10px;text-align:center;padding-top:3px;opacity:.8}
body.tp-light .tp-nav.tp-mobile-app{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,246,248,.9))!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 32px rgba(30,35,45,.15),inset 0 1px 0 #fff!important}body.tp-light .tp-glow-menu{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,246,249,.95))!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 38px rgba(30,35,45,.22),inset 0 1px 0 #fff!important}body.tp-light .tp-glow-link{color:#667085!important}body.tp-light .tp-glow-link.is-active{color:#111827!important;background:rgba(0,0,0,.045)!important}body.tp-light .tp-tools-menu{background:rgba(255,255,255,.99)!important;border-color:rgba(0,0,0,.1)!important}body.tp-light .tp-tools-menu a{color:#344054!important;background:rgba(0,0,0,.025)!important;border-color:rgba(0,0,0,.08)!important}
}
/* Tablet band: 721px up to 1180px.
   The max-width was 1024px, which excluded iPad Pro 13 (1032 CSS px) and 1366px
   tablets entirely, so they fell back to the desktop header with no toolbar.
   Upper bound raised to 1180px; tp-mobile-header.js uses the same value.

   Centring uses margin auto, NOT translateX(50%). A transform on a
   position:fixed element makes it its own containing block, so the CSS bottom
   anchor resolves against the element instead of the viewport and the toolbar
   drifts to the top of the page. margin:auto leaves the fixed box untransformed
   so bottom:max(8px,env(safe-area-inset-bottom)) keeps working. */
@media(min-width:721px) and (max-width:1180px){
  .tp-nav.tp-mobile-app{max-width:880px!important;margin-left:auto!important;margin-right:auto!important}
  .tp-glow-menu{
    right:auto!important;
    left:50%!important;
    width:min(620px,calc(100vw - 24px))!important;
    margin-left:calc(min(620px,100vw - 24px) / -2)!important;
    transform:none!important;
  }
}
@media(max-width:370px){.tp-glow-menu{right:4px!important;left:4px!important;gap:0!important;padding:4px!important;height:60px!important}.tp-glow-item,.tp-glow-link{height:50px!important}.tp-glow-icon svg,.tp-nav.tp-mobile-app .tp-glow-icon svg{width:22px!important;height:22px!important}.tp-profile-slot .tp-avatar-link,.tp-profile-slot .tp-login-icon{width:32px!important;height:32px!important;min-width:32px!important}}
@media(prefers-reduced-motion:reduce){.tp-glow-link:before{transition:none!important}}

/* Keep fixed navigation relative to the viewport, not the glass header */
@media(max-width:1180px){.tp-nav.tp-mobile-app{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.tp-nav.tp-mobile-app .tp-glow-menu{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important}}
