/* Nexli visual artwork polish: presentation only, 2026-09-20.
 * Existing activity functionality, tap targets, navigation and safety controls are unchanged. */
:root{--nx-glow:0 0 0 1px rgba(96,144,241,.13),0 10px 29px rgba(2,4,15,.46);--nx-real-gradient:linear-gradient(100deg,#ff832d 0%,#ff2c75 25%,#ed259e 43%,#963bf1 68%,#176fea 100%)}
body{background:radial-gradient(ellipse at 87% 3%,rgba(88,24,133,.20),transparent 31%),radial-gradient(ellipse at 0 25%,rgba(27,81,184,.14),transparent 45%),linear-gradient(180deg,#070917,#090d1b 53%,#060a15 100%)}

/* Render the founder-selected painted wordmark while retaining its DOM text for accessibility. */
.brand,.brand.xl{background-image:url('./art-nexli-wordmark.svg')!important;background-repeat:no-repeat!important;background-size:contain!important;background-position:center center!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;filter:drop-shadow(0 1px 5px rgba(251,41,166,.20));-webkit-text-fill-color:transparent!important;color:transparent!important;font-size:0!important;letter-spacing:0!important;line-height:1!important;display:block!important;max-width:100%}
.topbar{position:relative;justify-content:center}
.topbar>div:first-child{max-width:calc(100% - 58px);text-align:center;margin-inline:auto}
.topbar .brand{width:185px;height:52px;margin-inline:auto}
.brand.xl{width:230px;height:64px;margin-inline:auto}
.topbar .topbar-actions{position:absolute;right:16px;top:19px}
.tag{font-size:10px;letter-spacing:2.15px;margin-top:0;color:#e4eafe}
.topbar .tag{text-align:center;white-space:normal}

/* Preserve the current midnight/neon control system. */
.card,.weatherbar,.travel,.zero,.modal{background:linear-gradient(165deg,rgba(18,24,43,.99),rgba(9,14,28,.99) 76%);border-color:rgba(134,157,221,.33);box-shadow:var(--nx-glow),inset 0 1px 0 rgba(226,232,255,.035)}
#app .btn.primary,#app .seg button.active,#app .chip.on{background:var(--nx-real-gradient);color:#fff;border-color:rgba(255,195,233,.23);box-shadow:0 8px 19px rgba(106,43,181,.26),inset 0 1px 0 rgba(255,255,255,.20)}
#app .btn:not(.primary):not(.danger),#app .bell{background:linear-gradient(178deg,#303749,#1a2134);border-color:rgba(155,172,217,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 13px rgba(0,0,0,.18)}
#app .btn.danger{background:linear-gradient(110deg,#49202f,#642141);color:#ffc0ce;border-color:rgba(255,107,143,.45)}
#app .btn:focus-visible,#app .chip:focus-visible{outline-color:#65c7ff}
.field input,.field select,.field textarea,#chatBody{background:#151c2e;border-color:rgba(142,165,220,.34)}
.bottomnav{background:rgba(6,9,19,.97);border-top-color:rgba(122,146,208,.33);box-shadow:0 -8px 25px rgba(0,0,0,.32)}
.bottomnav button.active svg{filter:drop-shadow(0 0 5px rgba(255,50,174,.45))}

/* Every photo sits above a branded fallback. Images remain invisible until decoded,
   so a failed request never exposes a browser broken-image icon. */
.nx-art-frame{position:relative;display:block;overflow:hidden;isolation:isolate;pointer-events:none;background:radial-gradient(circle at 78% 18%,rgba(45,181,255,.34),transparent 31%),radial-gradient(circle at 18% 78%,rgba(255,54,166,.34),transparent 36%),linear-gradient(135deg,#241441,#111b3d 56%,#071328);border:1px solid rgba(168,184,231,.30);box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08)}
.nx-art-image{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center;opacity:0;transition:opacity .24s ease;pointer-events:none}
.nx-art-frame.is-loaded .nx-art-image{opacity:1}
.nx-art-frame::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,5,14,.01),rgba(2,5,14,.08) 65%,rgba(2,5,14,.23));pointer-events:none}
.nx-art-fallback{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nx-art-fallback::before,.nx-art-fallback::after{content:"";position:absolute;width:72%;height:24%;border-radius:999px;filter:blur(4px);opacity:.75}
.nx-art-fallback::before{transform:rotate(-17deg);background:linear-gradient(90deg,#ff7b2e,#ff36a6,#8d49ff)}
.nx-art-fallback::after{transform:rotate(17deg);background:linear-gradient(90deg,#8848ff,#2ac8ff);mix-blend-mode:screen}
.nx-art-orbit{position:absolute;width:54px;height:54px;border:1px solid rgba(255,255,255,.42);border-radius:50%;box-shadow:0 0 22px rgba(117,98,255,.45),inset 0 0 18px rgba(255,76,177,.24)}
.nx-art-symbol{position:relative;z-index:1;color:#fff;font-size:28px;font-weight:800;line-height:1;text-shadow:0 1px 10px #080a19,0 0 16px rgba(116,115,255,.7)}

/* Discover and My Activities cards. */
.nx-art-card{width:100%;aspect-ratio:16/9;max-height:230px;margin-bottom:13px;border-radius:15px}
.nx-art-detail{width:100%;aspect-ratio:16/9;max-height:330px;margin-bottom:15px;border-radius:17px}

/* Upcoming-across-cities and keyword-search results keep the original buttons and listeners. */
#personalUpcomingAcrossCities [data-personal-activity].nx-art-row,#nsResults [data-ns-activity].nx-art-row{position:relative!important;box-sizing:border-box;min-height:110px!important;padding:13px 15px 13px 130px!important;border:1px solid rgba(148,165,223,.42)!important;border-radius:18px!important;text-align:left!important;overflow:hidden;overflow-wrap:anywhere}
#personalUpcomingAcrossCities [data-personal-activity].nx-art-row{display:block;width:100%}
#nsResults [data-ns-activity].nx-art-row{align-items:flex-start}
.nx-art-row>.nx-art-thumb{position:absolute;left:0;top:0;bottom:0;width:116px;border-width:0 1px 0 0;border-radius:17px 0 0 17px;box-shadow:none}
.nx-art-row>.nx-art-thumb::after{background:linear-gradient(90deg,rgba(2,5,14,.02) 52%,rgba(8,12,25,.36))}
#personalUpcomingAcrossCities .nx-art-row strong,#nsResults .nx-art-row strong{font-size:16px;line-height:1.22}
#personalUpcomingAcrossCities .nx-art-row .small,#nsResults .nx-art-row .small{font-size:12px;line-height:1.38}

/* The existing functional filter buttons become readable image tiles. */
#view .chips .chip.nx-category-tile{position:relative;isolation:isolate;box-sizing:border-box;width:132px;min-height:104px;padding:10px!important;white-space:normal;text-align:left;vertical-align:bottom;display:inline-flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;color:#fff;border-radius:17px;border:1px solid rgba(150,169,225,.42);font-size:14px;line-height:1.18;text-shadow:0 1px 5px #05060e,0 2px 11px #05060e;background:#11182c!important;box-shadow:0 7px 19px rgba(0,0,0,.30)}
#view .chips .chip.nx-category-tile>.nx-art-tile{position:absolute;inset:0;z-index:0;width:auto;height:auto;border:0;border-radius:inherit;box-shadow:none}
#view .chips .chip.nx-category-tile>.nx-art-tile::after{background:linear-gradient(0deg,rgba(3,6,16,.94),rgba(3,6,16,.28) 55%,rgba(3,6,16,.03) 82%)}
.nx-category-label{position:relative;z-index:3;display:block;width:100%;font-weight:750}
.nx-category-label .chip-n{font-size:11px;opacity:.84}
#view .chips .chip.nx-category-tile.on{border:2px solid #fb56b9;box-shadow:0 0 0 1px rgba(115,139,255,.38),0 8px 20px rgba(0,0,0,.34)}

/* Decorative neon Bring & Prepare icons. */
#view .bring-row{position:relative;padding-left:34px}
#view .bring-row>.nx-bring-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:25px;height:25px;pointer-events:none;filter:drop-shadow(0 0 3px rgba(215,55,240,.28))}
#view .bring-row>div:first-of-type{min-width:0;overflow-wrap:anywhere}

@media(max-width:540px){
  #view .chips .chip.nx-category-tile{width:124px;min-height:98px}
  .nx-art-card{max-height:205px}
  .nx-art-detail{max-height:245px}
}
@media(max-width:380px){
  .topbar .brand{width:165px;height:47px}
  .tag{font-size:9px;letter-spacing:1.55px}
  #view .chips .chip.nx-category-tile{width:112px;min-height:92px;padding:9px!important;font-size:13px}
  #personalUpcomingAcrossCities [data-personal-activity].nx-art-row,#nsResults [data-ns-activity].nx-art-row{padding-left:112px!important}
  .nx-art-row>.nx-art-thumb{width:100px}
  .nx-art-card{max-height:182px}
  .nx-art-detail{max-height:215px}
}
@media(prefers-reduced-motion:reduce){.nx-art-image{transition:none}}