/* ==========================================================================
   Lumi Neo v2.0 — one design layer on top of the legacy sheets (loaded LAST).
   Look: deep violet aurora, glass surfaces, pink→violet energy, mobile first.
   Rules of thumb:
     • tokens first (every legacy component reads --bg/--surface/--primary…),
     • backdrop-filter only on fixed bars/sheets (cheap), never on every post card,
     • `html body` prefix + !important only where a legacy hotfix already used !important.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --neo-pink:#ff4fc8;--neo-violet:#8b5cff;--neo-blue:#5b6cff;
  --neo-grad:linear-gradient(135deg,#ff58d0 0%,#a35cff 58%,#6a6bff 100%);
  --neo-ring:conic-gradient(from 200deg,#ff58d0,#8b5cff,#5b6cff,#ff58d0);
  --primary:#ff4fc8;--primary2:#8b5cff;
  --neo-radius:24px;--topbar-h:58px;--nav-h:64px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --neo-ease:cubic-bezier(.22,.8,.24,1);
}
html[data-theme=dark]{
  color-scheme:dark;
  --bg:#09050f;--surface:#140c25;--surface2:#1e1335;--text:#f8f3ff;--muted:#b3a5d0;
  --line:rgba(255,255,255,.09);--nav:rgba(18,10,34,.72);
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --neo-glass:rgba(255,255,255,.06);--neo-glass-line:rgba(255,255,255,.12);
  --neo-glow:0 0 0 1px rgba(255,255,255,.04),0 10px 34px rgba(139,92,255,.16);
}
html[data-theme=light]{
  color-scheme:light;
  --bg:#faf6ff;--surface:#ffffff;--surface2:#f3ecff;--text:#1b1030;--muted:#7a6a96;
  --line:#eadffa;--nav:rgba(255,255,255,.8);
  --shadow:0 18px 50px rgba(110,70,190,.14);
  --neo-glass:rgba(255,255,255,.7);--neo-glass-line:rgba(120,80,200,.14);
  --neo-glow:0 10px 30px rgba(139,92,255,.12);
}

/* ---------- 2. canvas ---------- */
html{background:var(--bg)}
html body{background:transparent!important;color:var(--text);-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0)}
html[data-theme=dark] body::before{background:
  radial-gradient(900px 520px at 88% -8%,rgba(255,79,200,.20),transparent 62%),
  radial-gradient(760px 640px at -12% 28%,rgba(124,77,255,.26),transparent 62%),
  radial-gradient(640px 480px at 62% 112%,rgba(255,79,200,.14),transparent 62%)}
html[data-theme=light] body::before{background:
  radial-gradient(800px 480px at 90% -10%,rgba(255,79,200,.14),transparent 62%),
  radial-gradient(700px 560px at -10% 30%,rgba(139,92,255,.14),transparent 62%)}
.app-shell{padding-bottom:calc(var(--nav-h) + 34px + var(--safe-b))}
:focus-visible{outline:2px solid var(--neo-pink);outline-offset:2px;border-radius:10px}
::selection{background:rgba(255,79,200,.35)}
@keyframes neo-fade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes neo-shimmer{to{background-position:-200% 0}}
@keyframes neo-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}70%{transform:scale(.94)}100%{transform:scale(1)}}

/* ---------- 3. top bar ---------- */
html body .topbar{
  position:sticky;top:0;z-index:30;
  height:calc(var(--topbar-h) + var(--safe-t))!important;padding:var(--safe-t) max(12px,calc((100vw - 1120px)/2)) 0!important;
  background:var(--nav)!important;border-bottom:1px solid var(--neo-glass-line)!important;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  transition:transform .3s var(--neo-ease);will-change:transform
}
html body .topbar.is-tucked{transform:translateY(-102%)}
html body .topbar .brand{gap:9px;font-size:19px!important;font-weight:800;letter-spacing:-.4px}
html body .brand-orb{
  width:34px!important;height:34px!important;border-radius:12px!important;background:var(--neo-grad)!important;color:#fff;
  display:grid;place-items:center;font-weight:900;box-shadow:0 6px 18px rgba(255,79,200,.38),inset 0 1px 0 rgba(255,255,255,.4)
}
html body .topbar .icon-btn{
  width:38px!important;height:38px!important;border-radius:13px!important;background:transparent;color:var(--text);
  display:grid;place-items:center;transition:background .18s,transform .18s;position:relative
}
html body .topbar .icon-btn:hover{background:var(--neo-glass)}
html body .topbar .icon-btn:active{transform:scale(.92)}
html body .topbar .icon-btn svg{width:21px;height:21px}
html body .top-actions{gap:2px}
html body .avatar-mini{width:36px;height:36px;border-radius:50%;padding:2px;background:var(--neo-ring);display:block;margin-left:4px}
html body .avatar-mini img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--bg);display:block}
html body .top-badge,html body .nav-badge{background:var(--neo-grad)!important;color:#fff;border:2px solid var(--bg);box-shadow:0 2px 8px rgba(255,79,200,.45)}
.top-more{position:relative;display:none}
.top-more-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--neo-glass-line);box-shadow:var(--shadow);display:grid;gap:2px;z-index:50}
.top-more-panel[hidden]{display:none}
.top-more-panel a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font-size:14px;font-weight:650}
.top-more-panel a:hover,.top-more-panel a:active{background:var(--surface2)}
.top-more-panel svg{width:18px;height:18px;color:var(--neo-pink)}
@media(max-width:700px){
  html body .topbar .top-extra{display:none!important}
  .top-more{display:block}
  html body .top-register-btn{padding:8px 12px!important;font-size:12px!important;border-radius:12px!important}
}

/* ---------- 4. buttons, cards, inputs ---------- */
html body .btn{border-radius:16px;font-weight:750;transition:transform .15s var(--neo-ease),box-shadow .2s,filter .2s}
html body .btn:active{transform:scale(.97)}
html body .btn.primary{background:var(--neo-grad)!important;color:#fff;box-shadow:0 10px 26px rgba(255,79,200,.32),inset 0 1px 0 rgba(255,255,255,.28)}
html body .btn.primary:hover{filter:brightness(1.06)}
html body .btn.ghost{background:var(--neo-glass);border:1px solid var(--neo-glass-line);color:var(--text)}
html body .card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--neo-glow)}
html body .glass{background:var(--nav)}
html body input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),html body textarea,html body select{
  background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:14px
}
html body input:focus,html body textarea:focus,html body select:focus{outline:none;border-color:rgba(255,79,200,.6);box-shadow:0 0 0 4px rgba(255,79,200,.14)}

/* ---------- 5. feed tabs + stories ---------- */
html body .feed-tabs{
  background:var(--nav)!important;border:1px solid var(--neo-glass-line)!important;border-radius:18px!important;padding:4px!important;gap:4px;
  top:calc(var(--topbar-h) + var(--safe-t) + 8px)!important;transition:top .3s var(--neo-ease);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)
}
html body.topbar-tucked .feed-tabs{top:calc(var(--safe-t) + 8px)!important}
html body .feed-tabs a{border-radius:14px!important;padding:10px 6px!important;font-size:13px!important;font-weight:700;text-align:center;color:var(--muted);transition:background .2s,color .2s}
html body .feed-tabs a.active{background:var(--neo-grad)!important;color:#fff!important;box-shadow:0 6px 18px rgba(255,79,200,.34)}
html body .story-strip{gap:10px;scrollbar-width:none}
html body .story-strip::-webkit-scrollbar{display:none}
html body .story>span{background:var(--neo-ring)!important;padding:3px!important;box-shadow:0 0 0 0 rgba(255,79,200,0)}
html body .story.has-story>span{background:var(--neo-ring)!important;box-shadow:0 4px 16px rgba(139,92,255,.35)}
html body .story.no-story>span{background:var(--line)!important}
html body .story>span img{border:3px solid var(--bg);border-radius:50%;width:100%;height:100%;object-fit:cover}
html body .story small{color:var(--muted);font-size:11px;font-weight:600}
html body .story-plus{background:var(--neo-grad)!important;border:2px solid var(--bg)!important}

/* ---------- 6. post cards ---------- */
html body .post-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:26px!important;
  padding:10px 10px 6px;margin:0 0 14px!important;box-shadow:var(--neo-glow)!important;
  contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 620px;
  transition:opacity .22s,transform .22s var(--neo-ease)
}
html body .post-card.is-leaving{opacity:0;transform:scale(.97)}
html body .post-head{padding:4px 6px 10px;border:0!important}
html body .post-head .avatar,html body .post-head .avatar img{width:42px!important;height:42px!important;border-radius:50%;box-sizing:border-box}
html body .post-head .avatar{padding:2px;background:var(--neo-ring);display:block;flex:none;overflow:visible;line-height:0;box-sizing:border-box}
html body .post-head .avatar img{border:2px solid var(--surface);object-fit:cover}
html body .post-head strong{font-size:14.5px}
html body .post-head small{color:var(--muted);font-size:12px}
html body .post-carousel{border-radius:20px;overflow:hidden;background:var(--surface2)}
html body .post-carousel .post-image-wrap{max-height:none!important;overflow:hidden;position:relative;background:var(--surface2);display:block}
html body .post-carousel .post-image{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;display:block;animation:neo-fade .4s ease both;touch-action:manipulation;user-select:none;-webkit-user-select:none}
html body .post-carousel .lumi-video-media{object-fit:cover!important;background:#000}
html body .carousel-dots i{background:rgba(255,255,255,.5)}html body .carousel-dots i.active{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
html body .carousel-count{background:rgba(10,6,20,.55);backdrop-filter:blur(8px);border-radius:999px}
html body .post-actions{padding:8px 4px 2px}
html body .action-btn{width:42px!important;height:42px!important;border-radius:14px;color:var(--text);transition:transform .15s,background .2s}
html body .action-btn:active{transform:scale(.88)}
html body .action-btn svg{width:23px;height:23px}
html body .action-btn.liked{color:var(--neo-pink)}html body .action-btn.liked svg{fill:var(--neo-pink);stroke:var(--neo-pink);animation:neo-pop .45s var(--neo-ease);filter:drop-shadow(0 0 8px rgba(255,79,200,.55))}
html body .action-btn.saved svg{fill:var(--neo-violet);stroke:var(--neo-violet);animation:neo-pop .4s var(--neo-ease)}
html body .post-body{padding:2px 8px 8px;font-size:14px;line-height:1.45}
html body .post-metrics{font-size:13px}
html body .post-body .tags{color:var(--neo-violet);font-weight:600}
html body .comments-summary{color:var(--muted)}
.post-time{display:inline-block;margin-top:2px;font-size:11.5px;color:var(--muted);letter-spacing:.1px}
.post-time:hover{color:var(--text)}
.post-image-wrap .neo-heart{position:absolute;z-index:6;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;animation:neo-heart .95s var(--neo-ease) both}
.neo-heart svg{width:100%;height:100%;fill:url(#none);fill:var(--neo-pink);filter:drop-shadow(0 6px 20px rgba(255,79,200,.7))}
@keyframes neo-heart{0%{transform:scale(.2) rotate(-12deg);opacity:0}18%{transform:scale(1.25) rotate(6deg);opacity:1}34%{transform:scale(.95) rotate(-3deg)}70%{transform:scale(1.05) translateY(-6px);opacity:1}100%{transform:scale(1.3) translateY(-46px);opacity:0}}
.fresh-expiry-badge{margin:0 0 6px 8px}

/* ---------- 7. feed paging: skeleton + end ---------- */
.feed-posts{display:contents}
.feed-more{padding:6px 0 28px}
.feed-skeleton{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:14px;display:grid;gap:12px}
.feed-skeleton[hidden]{display:none}
.feed-skeleton>div{border-radius:14px;background:linear-gradient(100deg,var(--surface2) 30%,rgba(255,255,255,.09) 45%,var(--surface2) 60%) 0 0/200% 100%;animation:neo-shimmer 1.3s linear infinite}
.sk-head{height:40px;width:60%}.sk-media{height:300px;border-radius:20px!important}.sk-line{height:14px;width:80%}
.feed-end{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 14px;color:var(--muted);font-size:13px}
.feed-end[hidden]{display:none}
.feed-end b{color:var(--text);font-size:15px}.feed-end svg{width:26px;height:26px;color:var(--neo-pink)}
.feed-end .btn{margin-top:8px}

/* ---------- 8. bottom navigation ---------- */
html body .bottom-nav.bottom-nav-v15,html body .bottom-nav{
  position:fixed;z-index:40;left:50%;bottom:calc(10px + var(--safe-b))!important;transform:translateX(-50%);
  width:min(500px,calc(100% - 22px))!important;height:var(--nav-h)!important;padding:6px 8px!important;
  display:grid!important;grid-template-columns:1fr 1fr 68px 1fr 1fr!important;align-items:center;gap:2px;
  background:var(--nav)!important;border:1px solid var(--neo-glass-line)!important;border-radius:28px!important;
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:0 14px 44px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.07)!important
}
html[data-theme=light] body .bottom-nav{box-shadow:0 14px 40px rgba(110,70,190,.2),inset 0 1px 0 rgba(255,255,255,.8)!important}
html body .bottom-nav .nav-item{
  height:50px!important;border-radius:18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px!important;font-weight:650;color:var(--muted);position:relative;transition:color .2s,transform .15s
}
html body .bottom-nav .nav-item svg{width:22px!important;height:22px!important;transition:transform .25s var(--neo-ease),filter .25s}
html body .bottom-nav .nav-item:active{transform:scale(.92)}
html body .bottom-nav .nav-item.active{color:var(--neo-pink);background:none!important}
html body .bottom-nav .nav-item.active svg{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 0 9px rgba(255,79,200,.7))}
html body .bottom-nav .nav-item.active::after{content:"";position:absolute;bottom:2px;width:16px;height:3px;border-radius:3px;background:var(--neo-grad);box-shadow:0 0 10px rgba(255,79,200,.7)}
html body .bottom-nav .nav-create{
  width:54px!important;height:54px!important;margin:-16px auto 0!important;border-radius:19px!important;border:3px solid var(--bg)!important;
  background:var(--neo-grad)!important;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(255,79,200,.5),0 0 0 1px rgba(255,255,255,.18) inset!important;transition:transform .25s var(--neo-ease)
}
html body .bottom-nav .nav-create svg{width:26px!important;height:26px!important;stroke-width:2.6}
html body .bottom-nav .nav-create:active{transform:scale(.9) rotate(90deg)}
html body .bottom-nav .nav-create.menu-open{transform:rotate(45deg)}
html body .nav-badge{top:3px!important;right:calc(50% - 22px)!important}
.create-popover-card{background:var(--nav);border:1px solid var(--neo-glass-line);border-radius:26px;box-shadow:var(--shadow)}
.create-option{border-radius:18px}

/* ---------- 9. sheets ---------- */
html body .sheet-backdrop{background:rgba(6,2,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html body .bottom-sheet,html body .mini-sheet{background:var(--surface);border:1px solid var(--neo-glass-line);border-bottom:0;border-radius:30px 30px 0 0!important;box-shadow:0 -20px 60px rgba(0,0,0,.45)}
html body .sheet-grabber{background:var(--neo-glass-line);width:42px;height:5px;border-radius:5px}
html body .post-menu-pop{background:var(--surface);border:1px solid var(--neo-glass-line);border-radius:20px;box-shadow:var(--shadow)}

/* ---------- 10. misc widgets ---------- */
html body .guest-banner{background:linear-gradient(135deg,rgba(255,79,200,.14),rgba(139,92,255,.14)),var(--surface);border-color:var(--neo-glass-line)}
html body .desktop-side{background:var(--surface)}

/* ---------- 11. Lumi Clips: immersive full-screen ---------- */
html body.clips-view{overflow:hidden;background:#05030a}
html body.clips-view::before{display:none}
html body.clips-view .app-shell{padding-bottom:0;min-height:100dvh}
html body.clips-view .topbar{
  position:fixed!important;left:0;right:0;top:0;z-index:36;background:linear-gradient(180deg,rgba(5,3,10,.72),rgba(5,3,10,0))!important;
  border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#fff
}
html body.clips-view .topbar .icon-btn,html body.clips-view .topbar .brand{color:#fff}
html body.clips-view .bottom-nav{background:rgba(14,8,26,.62)!important}
html body .lumi-clips-page{
  position:fixed!important;inset:0;z-index:1;width:100%!important;max-width:none!important;height:100dvh;margin:0!important;padding:0!important;background:#05030a;outline:none
}
html body .lumi-clips-page .lumi-clips-list{
  height:100dvh!important;width:100%!important;max-width:none!important;min-width:0!important;aspect-ratio:auto!important;min-height:0!important;border-radius:0!important;margin:0!important;
  overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:auto
}
html body .lumi-clips-page .lumi-clips-list::-webkit-scrollbar{display:none}
html body .lumi-clips-page .lumi-clip{
  height:100dvh!important;min-height:100dvh!important;width:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;
  display:flex;align-items:center;justify-content:center;contain:layout paint style
}
html body .lumi-clips-page .lumi-clip-stage{
  --clip-bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  position:relative;width:100%;height:100%;overflow:hidden;background:#000;border-radius:0!important;color:#fff;isolation:isolate
}
.lumi-clip-backdrop{position:absolute;inset:-24px;z-index:0;background-size:cover;background-position:center;filter:blur(30px) brightness(.55) saturate(1.4);opacity:0;transition:opacity .3s}
.lumi-clip.is-landscape .lumi-clip-backdrop{opacity:1}
html body .lumi-clip-video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;background:#000;display:block;aspect-ratio:auto!important;opacity:1}
html body .lumi-clip.is-landscape .lumi-clip-video{object-fit:contain;background:transparent}
.lumi-clip-video::cue{color:#fff;background:rgba(0,0,0,.62);font-size:clamp(14px,3.6vw,20px)}
.lumi-clip-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:pointer;touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.lumi-clip-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(5,3,10,.82),rgba(5,3,10,.38) 55%,transparent)}
.lumi-clip-flash{position:absolute;z-index:5;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(10,5,20,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;opacity:0;pointer-events:none;transform:scale(.7);transition:opacity .2s,transform .2s var(--neo-ease)}
.lumi-clip-flash svg{width:38px;height:38px;fill:#fff;stroke:#fff}
.lumi-clip-flash .ic-pause{display:none}
.lumi-clip[data-flash=pause] .lumi-clip-flash .ic-play{display:none}.lumi-clip[data-flash=pause] .lumi-clip-flash .ic-pause{display:block}
.lumi-clip.flashing .lumi-clip-flash{animation:neo-flash .7s var(--neo-ease) both}
@keyframes neo-flash{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.lumi-clip.is-current:not(.is-playing):not(.is-loading):not(.is-buffering):not(.flashing) .lumi-clip-flash{opacity:.95;transform:scale(1)}
.lumi-clip.is-current:not(.is-playing):not(.is-loading):not(.is-buffering):not(.flashing) .lumi-clip-flash .ic-pause{display:none}
.lumi-clip.is-current:not(.is-playing):not(.is-loading):not(.is-buffering):not(.flashing) .lumi-clip-flash .ic-play{display:block}
.lumi-clip-heart{position:absolute;z-index:6;width:110px;height:110px;margin:-55px 0 0 -55px;left:50%;top:50%;pointer-events:none;opacity:0}
.lumi-clip-heart svg{width:100%;height:100%;fill:var(--neo-pink);stroke:none;filter:drop-shadow(0 8px 24px rgba(255,79,200,.8))}
.lumi-clip-heart.burst{animation:neo-heart .95s var(--neo-ease) both}
.lumi-clip-buffer{position:absolute;z-index:5;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;display:none;place-items:center;pointer-events:none}
.lumi-clip.is-buffering .lumi-clip-buffer,.lumi-clip.is-loading .lumi-clip-buffer{display:grid}
.lumi-clip-buffer svg{width:40px;height:40px;color:#fff;animation:lumi-spin 1s linear infinite}
.lumi-clip.has-error .lumi-clip-video{opacity:.35}

/* top-right sound pill */
.lumi-clip-sound{position:absolute;z-index:7;top:calc(var(--topbar-h) + var(--safe-t) + 10px);right:12px;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(10,5,20,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .15s,background .2s}
.lumi-clip-sound:active{transform:scale(.94)}
.lumi-clip-sound svg{width:18px;height:18px}
.lumi-clip-sound .ic-off,.lumi-clip.is-muted .lumi-clip-sound .ic-on{display:none}
.lumi-clip.is-muted .lumi-clip-sound .ic-off{display:block}
.lumi-clip:not(.is-muted) .lumi-clip-sound{padding:0 10px}
.lumi-clip:not(.is-muted) .lumi-clip-sound span{display:none}
.lumi-clip.is-muted.is-current .lumi-clip-sound{background:var(--neo-grad);border-color:transparent;box-shadow:0 6px 20px rgba(255,79,200,.45);animation:neo-pop .6s var(--neo-ease) .4s both}

/* author, caption */
.lumi-clip-info{position:absolute;z-index:6;left:0;right:76px;bottom:calc(var(--clip-bottom) + 14px);padding:0 14px;display:grid;gap:8px;pointer-events:none}
.lumi-clip-info a,.lumi-clip-info button,.lumi-clip-description a{pointer-events:auto}
.lumi-clip-author{display:flex;align-items:center;gap:10px;color:#fff;max-width:100%}
.lumi-clip-author img{width:42px!important;height:42px!important;border-radius:50%;object-fit:cover;border:2px solid transparent;background:var(--neo-ring) border-box;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.lumi-clip-author span{display:grid;min-width:0;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lumi-clip-author b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lumi-clip-author small{opacity:.82;font-size:12px}
.lumi-clip-description{margin:0;font-size:14px;line-height:1.4;max-height:none!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:auto;cursor:pointer}
.lumi-clip-description.is-expanded{-webkit-line-clamp:8;max-height:30vh!important;overflow:auto}
.lumi-clip-description a{color:#ffd3f5;font-weight:700}
.lumi-clip-tags{margin:0;font-size:12.5px;color:#ffd3f5;font-weight:650;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* action rail */
html body .lumi-clip-actions{position:absolute;z-index:7;right:10px;bottom:calc(var(--clip-bottom) + 14px);display:grid;gap:14px;justify-items:center}
html body .lumi-clip-actions .inline{display:block}
html body .lumi-clip-action{
  width:50px;min-width:50px;padding:0!important;border:0;border-radius:0;background:none!important;backdrop-filter:none;color:#fff;
  display:grid;justify-items:center;gap:4px;cursor:pointer;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.65)
}
html body .lumi-clip-action svg{width:44px!important;height:44px!important;padding:11px;border-radius:50%;background:rgba(10,5,20,.46);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);stroke-width:2.1;transition:transform .15s,background .2s}
html body .lumi-clip-action:active svg{transform:scale(.88)}
html body .lumi-clip-action small{font-size:12px;font-weight:700;max-width:60px;line-height:1.1}
html body .lumi-clip-action.liked svg{fill:var(--neo-pink);stroke:var(--neo-pink);background:rgba(255,79,200,.18);animation:neo-pop .45s var(--neo-ease);filter:drop-shadow(0 0 10px rgba(255,79,200,.65))}
.lumi-clip-menu{position:absolute;z-index:9;right:70px;bottom:calc(var(--clip-bottom) + 14px);min-width:206px;padding:6px;border-radius:20px;background:rgba(18,10,34,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.55);display:grid;gap:2px}
.lumi-clip-menu[hidden]{display:none}
.lumi-clip-menu>*{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;border-radius:13px;background:none;color:#fff;font-size:14px;font-weight:650;text-align:left;cursor:pointer;text-decoration:none}
.lumi-clip-menu>*:active,.lumi-clip-menu>*:hover{background:rgba(255,255,255,.09)}
.lumi-clip-menu>*:disabled{opacity:.35;cursor:not-allowed}
.lumi-clip-menu svg{width:18px;height:18px;color:var(--neo-pink)}
.lumi-clip-menu b{margin-left:auto;color:#ffd3f5}

/* progress / seek (sits on top of the bottom nav) */
.lumi-clip-progress{position:absolute;z-index:8;left:0;right:0;bottom:calc(var(--clip-bottom) - 10px);height:26px;display:flex;align-items:flex-end}
.lumi-clip-progress .lumi-clip-time{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(10,5,20,.72);backdrop-filter:blur(10px);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .15s}
.lumi-clip.is-scrubbing .lumi-clip-time{opacity:1}
.lumi-clip-progress input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;padding:0;background:transparent!important;border:0!important;box-shadow:none!important;cursor:pointer;touch-action:none;display:block}
.lumi-clip-progress input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#fff calc(var(--clip-progress,0)*100%),rgba(255,255,255,.28) 0);transition:height .15s}
.lumi-clip-progress input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#fff calc(var(--clip-progress,0)*100%),rgba(255,255,255,.28) 0)}
.lumi-clip-progress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;margin-top:0;border-radius:50%;background:#fff;border:0;transition:width .15s,height .15s,margin .15s}
.lumi-clip-progress input[type=range]::-moz-range-thumb{width:0;height:0;border:0;background:#fff}
.lumi-clip.is-scrubbing .lumi-clip-progress input[type=range]::-webkit-slider-runnable-track{height:7px}
.lumi-clip.is-scrubbing .lumi-clip-progress input[type=range]::-webkit-slider-thumb{width:16px;height:16px;margin-top:-4.5px;box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* end card + floating create + hint */
.lumi-clips-end{height:100dvh;scroll-snap-align:start;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:#fff;padding:24px;background:radial-gradient(500px 400px at 50% 40%,rgba(139,92,255,.3),transparent 70%),#05030a}
.lumi-clips-end[hidden]{display:none}
.lumi-clips-end svg{width:36px;height:36px;color:var(--neo-pink)}
.lumi-clips-end b{font-size:18px}.lumi-clips-end span{font-size:13px;opacity:.75}
.lumi-clips-end button{margin-top:10px;border:0;border-radius:14px;padding:12px 20px;background:var(--neo-grad);color:#fff;font-weight:750;cursor:pointer}
.lumi-clips-list.is-loading-more::after{content:"";position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 24px);width:28px;height:28px;margin-left:-14px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:lumi-spin .8s linear infinite;z-index:9}
.lumi-clips-empty{height:100dvh;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;color:#fff;padding:24px}
.lumi-clips-hint,.lumi-clips-create{display:none}

/* Desktop: a phone-shaped stage in the middle, hints and create button around it */
@media(min-width:900px){
  html body .lumi-clips-page .lumi-clip{padding:calc(var(--topbar-h) + 12px) 0 calc(var(--nav-h) + 40px)}
  html body .lumi-clips-page .lumi-clip-stage{--clip-bottom:16px;width:auto;height:100%;aspect-ratio:9/16;max-width:100%;border-radius:26px!important;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
  .lumi-clip-sound{top:14px}
  .lumi-clips-hint{display:block;position:fixed;left:24px;bottom:calc(var(--nav-h) + 30px);z-index:9;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.06em}
  .lumi-clips-create{display:inline-flex;align-items:center;gap:6px;position:fixed;right:24px;bottom:calc(var(--nav-h) + 30px);z-index:9;padding:12px 18px;border-radius:16px;background:var(--neo-grad);color:#fff;font-weight:750;font-size:14px;box-shadow:0 10px 28px rgba(255,79,200,.4)}
  .lumi-clips-create svg{width:18px;height:18px}
  .lumi-clips-end{height:auto;min-height:60dvh}
}
@media(min-width:900px) and (max-height:700px){html body .lumi-clips-page .lumi-clip{padding-bottom:calc(var(--nav-h) + 24px)}}

/* ---------- 12. motion & accessibility ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(hover:none){html body .topbar .icon-btn:hover{background:transparent}}
@media(max-width:380px){
  html body .bottom-nav .nav-item{font-size:9.5px!important}
  html body .feed-tabs a{font-size:12px!important}
}

/* ==========================================================================
   13. Chat (list + room) — Lumi Neo
   ========================================================================== */
html body .chat-page-title{align-items:flex-end;margin:4px 2px 12px}
html body .chat-page-title h1{font-size:30px;letter-spacing:-.8px;margin:0 0 2px;font-weight:850;line-height:1.05}
html body .chat-page-title p{font-size:13px;margin:0;color:var(--muted)}
html body .chat-search{width:44px;height:44px;border-radius:16px;background:var(--neo-glass);border:1px solid var(--neo-glass-line);display:grid;place-items:center;color:var(--text)}
html body .chat-list{padding:6px;border-radius:26px;overflow:hidden}
html body .chat-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 10px;border-radius:20px;border:0!important;transition:background .18s,transform .15s}
html body .chat-row:hover{background:var(--neo-glass)}html body .chat-row:active{transform:scale(.985);background:var(--surface2)}
html body .chat-row+.chat-row{border-top:0}
html body .chat-avatar{width:54px!important;height:54px!important;padding:2px;background:var(--neo-ring)!important}
html body .chat-avatar img{border:2px solid var(--surface);border-radius:50%;width:100%;height:100%;object-fit:cover}
html body .online-dot{right:1px;bottom:1px;width:13px;height:13px;border:2.5px solid var(--surface);background:#2fd884;box-shadow:0 0 8px rgba(47,216,132,.6)}
html body .chat-row-main{min-width:0;display:grid;gap:2px}
html body .chat-row-main strong{font-size:15px;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html body .chat-row-main small{font-size:13.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html body .chat-row:has([data-chat-unread]:not([hidden])) .chat-row-main small{color:var(--text);font-weight:650}
html body .chat-row-meta{display:grid;justify-items:end;gap:6px;font-size:11.5px;color:var(--muted)}
html body .chat-row-meta b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--neo-grad);color:#fff;font-size:11.5px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(255,79,200,.4)}
html body .chat-row-meta b[hidden]{display:none}
html body .chat-list .empty{padding:44px 20px;text-align:center;display:grid;justify-items:center;gap:8px;color:var(--muted)}
html body .chat-list .empty svg{width:40px;height:40px;color:var(--neo-pink)}

/* Notes card: lighter, glassy */
html body .notes-zone{border-radius:26px;background:var(--surface);border:1px solid var(--line);margin-bottom:12px}
html body .note-cloud{background:var(--surface2);border:1px solid var(--line);color:var(--text)}
html body .note-avatar-wrap.has-note{background:var(--neo-ring)}

/* ---- room shell ---- */
html body.chat-detail-body{background:var(--bg)}
html body.chat-detail-body::before{display:block}
html body.chat-detail-body .chat-room{background:transparent!important;border-color:var(--line)}
html body .chat-room-head{
  grid-template-columns:44px minmax(0,1fr) 44px;height:calc(62px + var(--safe-t))!important;min-height:0!important;padding:var(--safe-t) 8px 0;
  background:var(--nav)!important;border-bottom:1px solid var(--neo-glass-line)!important;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)
}
html body .chat-room-head .icon-btn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--text)}
html body .chat-room-head .icon-btn:active{background:var(--neo-glass)}
html body .chat-peer{gap:10px;display:flex;align-items:center}
html body .chat-peer .avatar{width:42px;height:42px;padding:2px;background:var(--neo-ring);flex:none}
html body .chat-peer .avatar img,html body .chat-peer .avatar b{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--bg);display:grid;place-items:center;font-weight:800;background:var(--surface2)}
html body .chat-peer strong{font-size:15px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .chat-peer small{font-size:12px;color:var(--muted)}
html body .chat-peer small[data-peer-status]:is(.online,[data-online="1"]){color:#2fd884}
html body .pinned-message-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--nav);border-bottom:1px solid var(--line);font-size:12.5px}
html body .pinned-message-bar svg{width:16px;height:16px;color:var(--neo-pink);flex:none}
html body .pinned-message-bar span{display:grid;min-width:0}html body .pinned-message-bar small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- messages ---- */
html body .message-scroll{padding:14px 12px 18px!important;background:transparent!important;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
html body .older-messages-wrap{display:flex;justify-content:center;margin-bottom:10px}
html body .older-messages-wrap .btn{font-size:12px;padding:8px 14px;border-radius:999px;min-height:0}
html body .older-messages-wrap [hidden]{display:none}
html body .chat-room .message-wrap{margin:3px 0!important;animation:neo-msg .26s var(--neo-ease) both}
@keyframes neo-msg{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
html body .chat-room .message-bubble{
  max-width:min(80%,440px);font-size:14.5px!important;line-height:1.38;padding:9px 12px 7px;
  border-radius:20px 20px 20px 6px!important;background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:none;word-break:break-word;overflow-wrap:anywhere
}
html body .chat-room .message-wrap.mine .message-bubble{
  border-radius:20px 20px 6px 20px!important;background:var(--neo-grad)!important;border-color:transparent;color:#fff;
  box-shadow:0 8px 22px rgba(139,92,255,.28)
}
html body .chat-room .message-text{margin:0;white-space:pre-wrap}
html body .chat-room .message-time{display:block;margin-top:3px;font-size:10.5px;color:var(--muted);text-align:right;opacity:.85;font-variant-numeric:tabular-nums}
html body .chat-room .mine .message-time{color:rgba(255,255,255,.78)}
html body .chat-room .message-deleted{margin:0;display:flex;align-items:center;gap:6px;font-style:italic;color:var(--muted);font-size:13.5px}
html body .chat-room .mine .message-deleted{color:rgba(255,255,255,.8)}
html body .chat-room .message-deleted svg{width:15px;height:15px}
html body .reply-quote{display:flex;gap:8px;align-items:flex-start;padding:6px 9px;margin:0 0 6px;border-radius:12px;background:rgba(127,90,255,.14);border-left:3px solid var(--neo-pink);font-size:12.5px;color:var(--muted)}
html body .mine .reply-quote{background:rgba(255,255,255,.18);color:rgba(255,255,255,.9);border-left-color:#fff}
html body .reply-quote svg{width:14px;height:14px;flex:none;margin-top:2px}
html body .reply-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* media inside bubbles */
html body .chat-media-image,html body .chat-media-video{width:min(260px,64vw)!important;max-height:340px;border-radius:15px;object-fit:cover;display:block;margin:-2px 0 4px;background:var(--surface2)}
html body .chat-media-audio{width:min(250px,62vw);height:40px;margin:2px 0 4px;border-radius:999px}
html body .chat-file{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;background:rgba(127,90,255,.14);font-size:13.5px;font-weight:650;margin-bottom:4px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
html body .mine .chat-file{background:rgba(255,255,255,.2)}
html body .chat-file svg{width:18px;height:18px;flex:none}
html body .chat-media-image.is-broken,html body .shared-thumb img.is-broken{visibility:hidden}

/* shared post / story card */
html body .shared-post,html body .shared-story{display:block;width:min(260px,64vw);border-radius:16px;overflow:hidden;margin:-2px 0 6px;background:rgba(10,5,20,.38);border:1px solid rgba(255,255,255,.1);color:inherit}
html[data-theme=light] body .chat-room .theirs .shared-post{background:var(--surface2);border-color:var(--line)}
html body .shared-thumb{display:block;position:relative;aspect-ratio:4/5;max-height:300px;overflow:hidden;background:linear-gradient(135deg,rgba(255,79,200,.3),rgba(124,77,255,.3))}
html body .shared-thumb img,html body .shared-story>img{width:100%;height:100%;max-height:300px;object-fit:cover;display:block}
html body .shared-thumb b{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;background:rgba(10,5,20,.6);backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff}
html body .shared-thumb b svg{width:14px;height:14px;fill:#fff}
html body .shared-post>div,html body .shared-story>div{padding:9px 11px 10px;display:grid;gap:2px}
html body .shared-label{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
html body .shared-label svg{width:12px;height:12px}
html body .shared-post strong,html body .shared-story strong{font-size:13px}
html body .shared-post p,html body .shared-story p{font-size:12.5px;line-height:1.35;margin:2px 0 0;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .shared-post.no-thumb>div{padding:12px}

/* once-photo cards */
html body .once-photo{min-width:0;width:min(250px,64vw);display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:8px 10px;border-radius:16px;border:0;background:rgba(127,90,255,.14);color:inherit;text-align:left;font:inherit}
html body .mine .once-photo{background:rgba(255,255,255,.2)}
html body .once-photo-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--neo-grad);color:#fff}
html body .once-photo-icon svg{width:19px;height:19px}
html body .once-photo-open{cursor:pointer}
html body .once-photo strong{display:block;font-size:13.5px}html body .once-photo small{font-size:11.5px;opacity:.8}
html body .once-photo-expired .once-photo-icon{background:var(--surface2);color:var(--muted)}

/* reactions + picker */
html body .message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
html body .message-reactions:empty{display:none}
html body .message-reactions span{padding:2px 8px;border-radius:999px;font-size:12px;background:rgba(127,90,255,.18);border:1px solid rgba(255,255,255,.1)}
html body .mine .message-reactions span{background:rgba(255,255,255,.22)}
html body .reaction-picker{padding:5px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--neo-glass-line);box-shadow:var(--shadow);gap:0;color:var(--text);bottom:calc(100% + 4px);right:6px;max-width:calc(100vw - 24px)}
html body .reaction-picker button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--text);transition:transform .15s,background .15s}
html body .reaction-picker button:hover,html body .reaction-picker button:active{background:var(--surface2);transform:scale(1.2)}
html body .reaction-picker svg{width:17px;height:17px}
html body .message-wrap.theirs .reaction-picker{right:auto;left:6px}
html body .typing-row{width:54px;height:32px;border-radius:18px 18px 18px 6px;background:var(--surface);margin:6px 0 2px}
html body .typing-row span{background:var(--neo-pink)}

/* ---- reply banner + composer ---- */
html body .chat-reply-banner{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:0;font-size:13px;background:var(--nav);border-top:1px solid var(--neo-glass-line);border-left:3px solid var(--neo-pink);color:var(--muted)}
html body .chat-reply-banner[hidden]{display:none!important}
html body .chat-reply-banner span{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
html body .chat-reply-banner svg{width:16px;height:16px;color:var(--neo-pink);flex:none}
html body .chat-reply-banner b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .chat-reply-banner button{width:32px;height:32px;border:0;border-radius:50%;background:var(--surface2);color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0}
html body .chat-reply-banner button svg{width:16px;height:16px;color:inherit}

html body .chat-composer,html body.chat-detail-body .chat-composer{
  display:flex!important;align-items:center;gap:6px;min-height:0;
  padding:10px 10px calc(10px + var(--safe-b))!important;background:var(--nav)!important;border-top:1px solid var(--neo-glass-line)!important;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)
}
html body .composer-camera,html body .composer-attach,html body .composer-voice{
  flex:none;width:42px!important;height:42px!important;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;
  background:var(--surface2);color:var(--text);position:relative;transition:transform .15s,background .2s
}
html body .composer-camera{background:linear-gradient(135deg,rgba(255,79,200,.2),rgba(139,92,255,.2));color:var(--neo-pink)}
html body .composer-camera svg,html body .composer-attach svg,html body .composer-voice svg{width:20px;height:20px}
html body .composer-camera:active,html body .composer-attach:active,html body .composer-voice:active{transform:scale(.9)}
html body .composer-attach input[type=file]{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;font-size:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html body .composer-text,html body .chat-composer input.composer-text{flex:1 1 auto;min-width:0;height:42px;padding:0 16px!important;border-radius:999px!important;background:var(--surface2)!important;border:1px solid var(--line)!important;font-size:15px;color:var(--text)}
html body .composer-text::placeholder{color:var(--muted)}
html body .composer-voice.recording{background:#ff3b6b;color:#fff;animation:neo-rec 1.1s ease-in-out infinite}
@keyframes neo-rec{50%{box-shadow:0 0 0 9px rgba(255,59,107,.18)}}
html body .chat-composer .send-circle{flex:none;width:42px;height:42px;border-radius:50%;background:var(--neo-grad);box-shadow:0 6px 18px rgba(255,79,200,.4);display:grid;place-items:center}
html body .chat-composer .send-circle svg{width:19px;height:19px;color:#fff;margin-left:-2px}
html body .chat-composer:not(.has-text) .send-circle{display:none}
html body .chat-composer.has-text .composer-voice{display:none}
html body .chat-composer .send-circle:disabled{opacity:.6}
@media(max-width:380px){html body .composer-attach{display:none}html body .chat-composer{gap:5px}}

/* ==========================================================================
   14. Explore / Trending / Saved: tiles + creators + search
   ========================================================================== */
html body .explore-page{max-width:1040px}
html body .explore-heading{align-items:flex-end;margin-bottom:16px}
html body .explore-heading h1{font-size:clamp(28px,6vw,38px);letter-spacing:-1px;font-weight:850;margin:4px 0 6px}
html body .settings-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;background:var(--neo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .search-v15{
  display:flex;align-items:center;gap:8px;top:calc(var(--topbar-h) + var(--safe-t) + 8px)!important;padding:6px 6px 6px 14px;border-radius:22px;
  background:var(--nav)!important;border:1px solid var(--neo-glass-line)!important;box-shadow:var(--neo-glow)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
html body .search-v15>svg{width:20px;height:20px;color:var(--muted);flex:none}
html body .search-v15 input{flex:1;min-width:0;height:42px;border:0!important;background:transparent!important;box-shadow:none!important;font-size:15px;padding:0 4px!important}
html body .search-v15 button{height:42px;padding:0 18px;border:0;border-radius:16px;background:var(--neo-grad);color:#fff;font-weight:750;cursor:pointer;box-shadow:0 6px 18px rgba(255,79,200,.3)}
html body .section-title{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:26px 2px 12px}

/* creators: swipe row, no native scrollbar */
html body .creator-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html body .creator-row::-webkit-scrollbar{display:none}
html body .creator-pill{
  flex:0 0 118px;scroll-snap-align:start;display:grid;justify-items:center;align-content:start;gap:3px;padding:14px 8px 12px;min-width:0!important;
  border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--neo-glow);transition:transform .2s var(--neo-ease),border-color .2s
}
html body .creator-pill:hover{transform:translateY(-3px);border-color:rgba(255,79,200,.4)}
html body .creator-pill:active{transform:scale(.97)}
html body .creator-pill>span{width:66px!important;height:66px!important;padding:3px;background:var(--neo-ring)!important;margin-bottom:5px;display:block}
html body .creator-pill>span>img{border:3px solid var(--surface);border-radius:50%!important;object-fit:cover!important;background:var(--surface2)}
html body .creator-pill strong{max-width:100%;font-size:13px;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
html body .creator-pill small{max-width:100%;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tiles */
html body .explore-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;margin:0}
@media(min-width:700px){html body .explore-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}}
html body .tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,rgba(255,79,200,.22),rgba(124,77,255,.22)),var(--surface2);border-radius:6px;isolation:isolate;-webkit-tap-highlight-color:transparent}
@media(min-width:700px){html body .tile{border-radius:18px}}
html body .tile>img,html body .tile>video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;transition:transform .5s var(--neo-ease),opacity .25s}
html body .tile .tile-preview{opacity:0;z-index:1}html body .tile .tile-preview.is-on{opacity:1}
html body .tile:hover>img,html body .tile:hover>video:not(.tile-preview){transform:scale(1.05)}
html body .tile:active{transform:scale(.98)}
html body .tile::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:2;background:linear-gradient(0deg,rgba(8,3,16,.7),transparent);pointer-events:none;opacity:.9}
html body .tile-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.6)}
html body .tile-empty svg{width:30px;height:30px}
html body .tile img.is-broken{visibility:hidden}
html body .tile.has-broken-media::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 30% 20%,rgba(255,79,200,.35),transparent 60%),linear-gradient(135deg,#2a1450,#150d26)}
html body .tile-kind{position:absolute;z-index:3;top:7px;right:7px;width:26px;height:26px;border-radius:50%;background:rgba(10,5,20,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff}
html body .tile-kind:empty{display:none}
html body .tile-kind svg{width:13px;height:13px}html body .tile.is-video .tile-kind svg{fill:#fff}
html body .tile-stats{position:absolute!important;z-index:3;left:7px!important;bottom:6px!important;right:7px;display:flex!important;align-items:center;gap:3px;padding:0!important;background:none!important;border:0;color:#fff;font-size:11.5px!important;font-weight:750;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden}
html body .tile-stats svg{width:12px!important;height:12px!important;flex:none}
html body .tile-stats svg+svg{margin-left:6px}
html body .tile-stats em{font-style:normal}
@media(max-width:699px){html body .tile-stats{font-size:10.5px!important}}
html body .empty-state{display:grid;justify-items:center;gap:6px;padding:40px 20px;text-align:center;margin-top:14px;color:var(--muted)}
html body .empty-state svg{width:36px;height:36px;color:var(--neo-pink)}
html body .empty-state h2{color:var(--text);margin:4px 0 0;font-size:18px}

/* ==========================================================================
   15. Profile, notifications, trending chips, forms
   ========================================================================== */
html body .tile-pin{position:absolute;z-index:3;top:7px;left:7px;width:26px;height:26px;border-radius:50%;background:rgba(10,5,20,.52);backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff}
html body .tile-pin svg{width:13px;height:13px}

/* trending chips (legacy forced white cards -> invisible text on dark) */
html body .trend-tag-card{padding:16px 14px 14px;border-radius:26px}
html body .trend-tag-card .section-title{margin:0 2px 12px}
html body .trend-tags{gap:8px;scrollbar-width:none}html body .trend-tags::-webkit-scrollbar{display:none}
html body .trend-tags a{padding:10px 15px;border-radius:16px;background:linear-gradient(135deg,rgba(255,79,200,.16),rgba(139,92,255,.16))!important;border:1px solid var(--neo-glass-line)!important;color:var(--text);transition:transform .15s,border-color .2s}
html body .trend-tags a:hover{border-color:rgba(255,79,200,.5)}html body .trend-tags a:active{transform:scale(.96)}
html body .trend-tags strong{font-size:14.5px;color:var(--text)}
html body .trend-tags small{font-size:11.5px;color:var(--muted);opacity:1}
html body .explore-heading .btn.ghost{flex:none;white-space:nowrap}

/* profile */
html body .profile-hero{
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:16px!important;align-items:start!important;
  padding:16px!important;margin:2px 0 14px;border-radius:28px;background:var(--surface)!important;border:1px solid var(--line);box-shadow:var(--neo-glow)
}
html body .profile-avatar{width:84px!important;height:84px!important;padding:3px;background:var(--line)!important;display:block}
html body .profile-avatar.profile-has-story{background:var(--neo-ring)!important;box-shadow:0 6px 22px rgba(139,92,255,.4)}
html body .profile-avatar>img{border:3px solid var(--surface)!important;border-radius:50%!important}
html body .profile-main h1{font-size:21px;letter-spacing:-.4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 2px}
html body .profile-main .handle{color:var(--muted);font-size:13.5px;margin:0 0 6px}
html body .profile-main>p{font-size:14px;line-height:1.45;white-space:pre-line;margin:0 0 6px}
html body .creator-mode-badge,html body .lumi-pro-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:750;background:linear-gradient(135deg,rgba(255,79,200,.2),rgba(139,92,255,.2));color:var(--neo-pink)}
html body .profile-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:10px 0 12px!important}
html body .profile-stats span{padding:9px 4px!important;border-radius:16px!important;background:var(--surface2)!important;text-align:center;font-size:11px!important;color:var(--muted)}
html body .profile-stats b{display:block;font-size:17px!important;color:var(--text);letter-spacing:-.3px}
html body .profile-quick-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html body .profile-action-main{flex:1 1 auto;min-width:0;justify-content:center}
html body .profile-action-icon{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
html body .profile-action-menu{position:relative}html body .profile-action-menu>summary{list-style:none;cursor:pointer}html body .profile-action-menu>summary::-webkit-details-marker{display:none}
html body .profile-action-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;padding:6px;border-radius:20px;background:var(--surface);border:1px solid var(--neo-glass-line);box-shadow:var(--shadow);display:grid;gap:2px}
html body .profile-action-dropdown a,html body .profile-action-dropdown button{display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:13px;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:650;text-align:left;cursor:pointer}
html body .profile-action-dropdown a:hover,html body .profile-action-dropdown button:hover{background:var(--surface2)}
html body .profile-action-dropdown svg{width:18px;height:18px;color:var(--neo-pink)}
html body .profile-action-dropdown .danger-text,html body .profile-action-dropdown .danger-text svg{color:#ff5a7a}
html body .highlight-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}
html body .highlight-bubble{display:grid;justify-items:center;gap:5px;flex:none;width:68px}
html body .highlight-bubble>span{width:64px;height:64px;padding:3px;border-radius:50%;background:var(--neo-ring)}
html body .highlight-bubble img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--bg)}
html body .highlight-bubble small{font-size:11px;color:var(--muted);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .profile-page .profile-grid{margin:0 -2px}
html body .private-profile{display:grid;justify-items:center;gap:6px;text-align:center;padding:36px 20px;color:var(--muted)}
html body .private-profile svg{width:34px;height:34px;color:var(--neo-pink)}

/* notifications */
html body .page-title-row h1{font-size:30px;letter-spacing:-.8px;font-weight:850}
html body .page-title-row p{font-size:13.5px;max-width:46ch}
html body .follow-requests{padding:14px;border-radius:26px;margin-bottom:12px}
html body .follow-requests h2{font-size:16px;margin:0 0 10px}
html body .follow-requests article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;flex-wrap:nowrap}
html body .follow-requests article+article{border-top:1px solid var(--line)}
html body .follow-requests .user-line{display:flex;align-items:center;gap:10px;min-width:0}
html body .follow-requests .user-line span:last-child{display:grid;min-width:0}
html body .follow-requests .user-line strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .follow-requests .user-line small{color:var(--muted);font-size:12px}
html body .follow-requests article>div{display:flex;gap:6px;flex:none}
html body .follow-requests .btn{min-height:36px;padding:0 14px;font-size:13px;border-radius:12px}
html body .notification-list{display:grid;gap:8px}
html body .notification{grid-template-columns:48px minmax(0,1fr) auto!important;gap:12px!important;padding:12px 14px!important;border-radius:22px;transition:transform .15s,background .2s}
html body .notification:active{transform:scale(.985)}
html body .notification .avatar{width:48px;height:48px;padding:2px;background:var(--neo-ring)}
html body .notification .avatar img{border:2px solid var(--surface);border-radius:50%;width:100%;height:100%;object-fit:cover}
html body .notification strong{font-size:14px}
html body .notification p{margin:1px 0 3px;font-size:13.5px;color:var(--text);opacity:.9;overflow-wrap:anywhere}
html body .notification small{font-size:11.5px;color:var(--muted)}
html body .notif-thumb{width:48px;height:48px;border-radius:12px;object-fit:cover}
html body .card.empty,html body .empty{display:grid;justify-items:center;gap:8px;padding:38px 20px;text-align:center;color:var(--muted)}
html body .card.empty svg,html body .empty>svg{width:36px;height:36px;color:var(--neo-pink)}

/* forms: native controls follow the theme */
html body input[type=checkbox],html body input[type=radio],html body input[type=range]{accent-color:var(--neo-pink)}
html body input[type=file]{width:100%;color:var(--muted);font-size:13px;background:var(--surface2);border:1px dashed var(--neo-glass-line);border-radius:14px;padding:8px}
html body input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:11px;background:var(--neo-grad);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
html body label{font-weight:650}
html body .auth-card,html body .auth-page .card{border-radius:30px}
html body .error,html body .form-error{border-radius:14px}
@media(max-width:520px){html body .explore-heading{flex-wrap:wrap;align-items:flex-start}html body .explore-heading>.btn{order:2}}