.media-hero{position:relative;padding:clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,2.5rem);overflow:hidden}
.media-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(1000px 500px at 50% 0%,rgba(167,139,250,.14),transparent 60%),radial-gradient(800px 400px at 90% 10%,rgba(240,171,252,.1),transparent 55%);pointer-events:none}
.media-hero .section-head{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-bottom:1.5rem}
/* .section-index and its trailing rule come from main.css unchanged — the copy here was a second
   source of truth that would drift the moment the shared one moved. */
/* Page title, not section title: it opens a page the way .faq-hero does, on the pagehead step and the
   display optical grade. The italic takes --lagoon for the same reason — the emphasis inside a page
   title is a different register from the emphasis inside a section heading. */
.media-hero h1{font-family:var(--font-display);font-size:var(--t-pagehead);font-weight:540;letter-spacing:-.026em;line-height:.98;margin:0;color:var(--ivory);
  font-variation-settings:"opsz" var(--opsz-h1),"wght" 540,"WONK" 1}
.media-hero h1 em{font-style:italic;color:var(--lagoon)}
.media-hero .section-note{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-3);margin-top:.4rem}



.media-toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.media-filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filter-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.05rem;border-radius:99px;border:1px solid var(--hairline);background:rgba(255,255,255,.03);color:var(--ivory-2);font-family:var(--font-body);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .3s var(--ease-out);white-space:nowrap}
.filter-chip:hover{border-color:rgba(167,139,250,.4);color:var(--ivory);background:rgba(167,139,250,.08)}
.filter-chip.active{background:linear-gradient(135deg,var(--aurora-soft),var(--aurora-deep));border-color:rgba(167,139,250,.6);color:var(--ink-950);box-shadow:0 0 20px rgba(167,139,250,.25)}
.filter-chip i{font-size:.8rem;color:var(--ivory-3)}
.filter-chip.active i{color:var(--ink-950)}
.filter-chip span{color:inherit}

.media-section{position:relative;padding:clamp(2rem,4vw,4rem) clamp(1.25rem,4vw,2.5rem)}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 520px),1fr));align-items:start;gap:2rem;margin:1.6rem auto 0;max-width:1240px}

.media-skeletons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 520px),1fr));align-items:start;gap:2rem;margin:1.6rem auto 0;max-width:1240px}
.media-skeleton{min-height:300px;padding:1.8rem;border-radius:var(--r-xl);border:1px solid var(--hairline);background:rgba(18,13,32,.55);display:flex;flex-direction:column;gap:1rem}
.media-skeleton-head{display:flex;align-items:center;gap:.9rem}
.media-skeleton-headlines{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.media-skeleton-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.media-skeleton-line{height:12px;border-radius:99px;width:100%}
.media-skeleton-line.medium{width:72%}
.media-skeleton-line.short{width:44%}
.media-skeleton-line.tiny{width:30%;height:9px}
.media-skeleton-frame{aspect-ratio:16/9;border-radius:var(--r-lg)}
.media-skeleton-avatar,.media-skeleton-line,.media-skeleton-frame{background:linear-gradient(90deg,rgba(167,139,250,.09),rgba(167,139,250,.26),rgba(167,139,250,.09));background-size:200% 100%;animation:mediaShimmer 1.4s linear infinite}
@keyframes mediaShimmer{to{background-position:-200% 0}}

.media-card{position:relative;display:flex;flex-direction:column;gap:1.15rem;padding:1.8rem;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface-fill);border:var(--surface-line);
  box-shadow:var(--lit-top),var(--cast-down);transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s,background .35s}

.media-card.is-new{animation:mediaPop .6s var(--ease-spring)}
@keyframes mediaPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.media-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--surface-lit-row);opacity:0;transition:opacity .4s}
.media-card:hover{transform:translateY(-4px);border:var(--surface-line-hover);background:var(--surface-fill-hover);box-shadow:inset 0 1px 0 rgba(216,200,255,.2),0 26px 54px -24px rgba(4,2,10,.85)}
.media-card:hover::before{opacity:1}


.media-card--text{padding:1.5rem 1.65rem;gap:.85rem}
.media-card--text::after{content:'';position:absolute;left:0;top:1.45rem;bottom:1.45rem;width:2px;border-radius:99px;
  background:linear-gradient(180deg,rgba(167,139,250,.62),rgba(167,139,250,.04));opacity:.8;transition:opacity .35s}
.media-card--text:hover::after{opacity:1}
.media-card--text .media-title{margin-top:0}
.media-card--text .media-card-head{gap:.75rem}
.media-card--text .media-avatar{width:40px;height:40px}
.media-card--text .media-avatar.anonymous{padding:8px}
.media-card--media,.media-card--pending{gap:1.05rem}

.media-card-head{display:flex;align-items:center;gap:.9rem}
.media-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(167,139,250,.45);box-shadow:0 0 16px rgba(167,139,250,.18)}
.media-avatar.anonymous{display:grid;place-items:center;padding:10px;background:rgba(167,139,250,.08);border:1px dashed rgba(167,139,250,.4);color:var(--aurora)}
.media-avatar-wrap{position:relative}
.media-status-dot{display:none !important}

.media-meta{min-width:0;flex:1}
.media-name-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.media-name{font-family:var(--font-display);font-weight:600;font-size:.96rem;letter-spacing:-.01em;color:var(--ivory)}
.media-type-badge{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;padding:.18rem .55rem;border-radius:99px;border:1px solid;color:inherit}
.media-type-badge.art{border-color:rgba(240,171,252,.5);color:var(--lagoon);background:rgba(240,171,252,.1)}
.media-type-badge.stream{border-color:rgba(90,211,164,.5);color:var(--success);background:rgba(90,211,164,.1)}
.media-type-badge.anime{border-color:rgba(245,201,123,.5);color:var(--comet);background:rgba(245,201,123,.1)}
.media-type-badge.gaming{border-color:rgba(167,139,250,.5);color:var(--aurora);background:rgba(167,139,250,.1)}
.media-type-badge.quotes{border-color:rgba(196,181,253,.55);color:var(--aurora-soft);background:rgba(196,181,253,.12)}
.media-type-badge.photography{border-color:rgba(206,198,228,.45);color:var(--ivory-2);background:rgba(206,198,228,.1)}
.media-type-badge.general{border-color:rgba(167,139,250,.4);color:var(--ivory-3);background:rgba(167,139,250,.06)}
.media-op-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .5rem;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--grad-ember);color:var(--ink-950);box-shadow:0 0 10px rgba(245,201,123,.45)}
.media-link{color:var(--aurora);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .2s,text-decoration-thickness .2s,text-shadow .2s}
.media-link:hover{color:var(--aurora-soft);text-decoration-thickness:2px;text-shadow:0 0 8px rgba(167,139,250,.4)}
.quick-actions{position:fixed;bottom:90px;right:20px;display:flex;gap:.8rem;z-index:1000;flex-direction:column}
.quick-action-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(167,139,250,.4);background:rgba(11,6,20,.85);backdrop-filter:blur(12px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s;font-size:1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.quick-action-btn:hover{background:linear-gradient(135deg,var(--aurora),var(--aurora-deep));border-color:rgba(167,139,250,.7);color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px rgba(167,139,250,.45)}
.quick-action-btn.music-on{background:var(--grad-ember);border-color:rgba(245,201,123,.7);color:var(--ink-950);box-shadow:0 12px 32px rgba(245,201,123,.45)}

@media (max-width:1375px){
.quick-actions{flex-direction:row;gap:.6rem;right:1rem;bottom:1.1rem}
.quick-action-btn{width:42px;height:42px;font-size:1rem}
}
.media-name-subrow{display:flex;align-items:center;gap:.6rem;margin-top:.25rem}
.media-date{font-family:var(--font-mono);font-size:.64rem;color:var(--ivory-4);letter-spacing:.06em}
.media-delete{position:absolute;top:.9rem;right:.9rem;width:32px;height:32px;border-radius:50%;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.1);color:#fca5a5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;opacity:0;transform:scale(.8);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),background .3s var(--ease-out),box-shadow .3s var(--ease-out);z-index:3}
.media-card:hover .media-delete{opacity:1;transform:none}
.media-delete:hover{background:rgba(248,113,113,.24);box-shadow:0 0 14px rgba(248,113,113,.35)}
.media-delete:disabled{opacity:.5;cursor:default}

.media-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600;letter-spacing:-.015em;color:var(--ivory);line-height:1.35;margin-top:.15rem;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.media-description{color:var(--ivory-2);font-size:.9rem;line-height:1.68;margin-top:.25rem;overflow-wrap:anywhere}

.media-description.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.media-desc-more{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;margin-top:-.45rem;padding:.24rem .7rem;
  border-radius:99px;border:1px solid rgba(167,139,250,.28);background:rgba(167,139,250,.07);color:var(--aurora);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:all .25s var(--ease-out)}
.media-desc-more:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.55);color:var(--ivory)}
.media-desc-more:focus-visible{outline:2px solid var(--aurora);outline-offset:2px}
.media-desc-more i{font-size:.58rem}


.media-frame{--fw:16;--fh:9;--frame-max-h:460px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;aspect-ratio:var(--fw) / var(--fh);max-height:var(--frame-max-h)}
.media-frame[data-orientation="portrait"],
.media-frame[data-orientation="square"]{width:min(100%,calc(var(--frame-max-h) * var(--fw) / var(--fh)))}
.media-frame[data-orientation="portrait"]{margin-inline:auto}
.media-frame img,.media-frame video{width:100%;height:100%;display:block;object-fit:cover}
.media-image-wrap{border-radius:var(--r-lg);border:1px solid var(--hairline);background:#05020a;margin-top:.4rem}

.media-frame.is-loading{min-height:140px}
.media-frame.is-loading video,.media-frame.is-loading img{opacity:0}
.media-frame video,.media-frame img{transition:opacity .35s ease}
.media-loading-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:radial-gradient(120% 80% at 50% 0%,rgba(167,139,250,.14),rgba(5,2,10,.94) 65%),#05020a;transition:opacity .38s ease}
.media-loading-overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(167,139,250,.05),rgba(167,139,250,.16),rgba(167,139,250,.05));background-size:200% 100%;animation:mediaShimmer 1.4s linear infinite}
.media-loading-ring{position:relative;width:32px;height:32px;border-radius:50%;border:2px solid rgba(167,139,250,.22);border-top-color:var(--aurora);animation:mediaSpin .85s linear infinite}
.media-loading-text{position:relative;display:flex;align-items:center;gap:.45rem;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ivory-3)}
.media-loading-text i{font-size:.8rem;color:var(--aurora)}
.media-loading-pct{min-width:3ch;font-variant-numeric:tabular-nums;color:var(--ivory-2)}
.media-loading-bar{position:relative;width:min(58%,220px);height:3px;border-radius:99px;background:rgba(167,139,250,.18);overflow:hidden}
.media-loading-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--aurora),#8ee6ff);transition:width .18s ease}
@keyframes mediaSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.media-loading-ring,.media-loading-overlay::before{animation:none}
.media-loading-overlay,.media-frame video,.media-frame img,.media-loading-bar i{transition:none}
}
.media-image{background:#05020a}
.media-video{background:#05020a}

.media-video-embed{position:relative;display:flex;width:100%;height:100%}
.video-play-overlay{position:absolute;inset:0;z-index:1;padding:0;border:0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(5,2,10,.42),rgba(5,2,10,.14) 42%,rgba(5,2,10,.58));transition:background .25s}
.video-play-overlay:hover{background:linear-gradient(180deg,rgba(5,2,10,.5),rgba(5,2,10,.2) 42%,rgba(5,2,10,.66))}
.video-play-overlay:focus-visible{outline:2px solid var(--aurora);outline-offset:-3px}
.video-play-ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.15rem;
  background:rgba(167,139,250,.22);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s var(--ease-spring),background .25s}
.video-play-overlay:hover .video-play-ring{transform:scale(1.08);background:rgba(167,139,250,.34)}
.video-chip{position:absolute;z-index:2;pointer-events:none;display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .6rem;border-radius:99px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(5,2,10,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.video-duration{right:.65rem;bottom:.65rem;letter-spacing:.06em;text-transform:none}
.media-frame.is-playing .video-play-overlay,.media-frame.is-playing .video-chip{opacity:0;pointer-events:none}
.media-remove-image{position:absolute;top:.65rem;right:.65rem;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.65);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;opacity:0;transition:opacity .25s,background .25s,border-color .25s;z-index:2}
.media-image-wrap:hover .media-remove-image{opacity:1}
.media-remove-image:hover{background:#ef4444;border-color:#ef4444}

/* A gallery is one frame holding every file of the post, stepped by the arrows, with a
   counter and dots so a visitor knows what is waiting before they tap. The frame itself still
   opens the post, so a nav button is the only extra hit target.
   display:block on purpose: the frame centres a single picture, but a track is several
   pictures wide, and a centred track would sit half a photo out of the frame at index 0.
   touch-action:pan-y hands the horizontal gesture to the carousel and leaves vertical
   scrolling to the browser, so a swipe never fights the page. */
.media-frame.media-gallery{display:block;touch-action:pan-y}
/* A pan that arrives before the eye does reads as a cut, not a move. The carousel gets its
   own softer deceleration instead of the global expo curve, and a connected artwork glides
   considerably longer, because sliding one wide surface is meant to be watched. */
.media-gallery-track{display:flex;width:100%;height:100%;--gallery-pan-ease:cubic-bezier(0.33,0.08,0.18,1);
  transition:transform .52s var(--gallery-pan-ease);will-change:transform}
.media-gallery.is-continuous .media-gallery-track{transition-duration:.82s;transition-timing-function:var(--ease-in-out)}
.media-gallery-track.is-dragging{transition:none}
/* contain, not cover: a carousel exists to show whole pictures, and a crop is the one thing
   an author cannot undo after publishing. The matte is the same ink every frame already uses.
   .media-frame is part of the selector because the frame rule above paints every image it
   holds with object-fit:cover, and a carousel must be allowed to disagree. */
.media-frame .media-gallery-slide{flex:0 0 100%;width:100%;height:100%;min-width:100%;object-fit:contain;background:#05020a}
.media-gallery-slide.is-missing{opacity:.22}
.media-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:29px;height:29px;padding:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;color:#fff;font-size:.68rem;
  border:1px solid rgba(255,255,255,.3);background:rgba(5,2,10,.45);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .25s,background .25s,border-color .25s}
.media-gallery-nav.is-prev{left:.55rem}
.media-gallery-nav.is-next{right:.55rem}
.media-gallery:hover .media-gallery-nav,.media-gallery:focus-within .media-gallery-nav{opacity:1}
.media-gallery-nav:hover{background:rgba(167,139,250,.4);border-color:rgba(167,139,250,.7)}
.media-gallery-nav:focus-visible{outline:2px solid var(--aurora);outline-offset:2px;opacity:1}
.media-gallery-nav:active{transform:translateY(-50%) scale(.94)}
/* Nothing is written over the picture: the frame is the artwork and the rail under it is the
   only chrome the visitor reads. The "2 / 5" still exists for a screen reader, just not on
   the canvas, and the kind of file each frame holds is already in the frame's own label. */
.media-gallery-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.media-gallery-unit{display:block}
.media-gallery-rail{display:flex;justify-content:center;align-items:center;padding-top:.6rem}
.media-gallery-dots{display:flex;gap:.34rem;align-items:center}
.media-gallery-dots i{width:6px;height:6px;border-radius:99px;background:rgba(167,139,250,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background .34s var(--ease-out),width .34s var(--ease-spring),box-shadow .34s var(--ease-out)}
.media-gallery-dots i.is-active{width:18px;background:var(--aurora);box-shadow:0 0 10px rgba(167,139,250,.45)}
.detail-post-article .media-gallery-unit{margin-bottom:1.4rem}
.detail-post-article .media-gallery-unit .detail-post-media-wrap{margin-bottom:0}
/* Connected pieces: every frame keeps its own width, they sit flush at a shared height and
   the pan is measured in pixels, so the next piece begins on the exact pixel where this one
   ends and the artwork reads as one surface rather than a slideshow. */
.media-gallery.is-continuous .media-gallery-track{width:max-content}
.media-gallery.is-continuous .media-gallery-slide{flex:0 0 auto;width:auto;min-width:0;object-fit:contain;border-radius:0}
/* A finger has no hover, but it has the swipe the frame already listens for and the dots under it, so the
   arrows stay off the artwork there too instead of sitting on the picture the whole time. */
@media (hover:none){
.media-gallery-dots i{width:7px;height:7px}
.media-gallery-dots i.is-active{width:20px}
}
@media (prefers-reduced-motion:reduce){
.media-gallery-track,.media-gallery-nav,.media-gallery-dots i{transition:none}
}

/* The composer strip is the queue the post will be written from, in order — first frame is
   the cover, so the row stays complete for every reader even without the gallery column.
   The order buttons make that order something the author controls rather than guesses. */
.post-gallery{margin-top:.75rem;padding:.7rem .75rem;border-radius:var(--r-lg);border:1px solid var(--hairline);background:rgba(167,139,250,.05)}
.post-gallery-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem .75rem;flex-wrap:wrap;margin-bottom:.6rem}
.post-gallery-count{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--aurora)}
.post-gallery-hint{font-size:.68rem;color:var(--ivory-3)}
.post-gallery-strip{display:flex;gap:.5rem;flex-wrap:wrap;overflow-x:visible;padding-bottom:.3rem}
.post-gallery-item{position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);background:#05020a}
.post-gallery-item img{width:100%;height:100%;display:block;object-fit:cover}
.post-gallery-item.is-cover{border-color:rgba(167,139,250,.65);box-shadow:0 0 0 1px rgba(167,139,250,.32)}
.post-gallery-tag{position:absolute;left:0;bottom:0;padding:.15rem .4rem;border-radius:0 8px 0 0;font-family:var(--font-mono);
  font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(167,139,250,.8)}
.post-gallery-index{position:absolute;left:3px;top:3px;min-width:16px;padding:.1rem .25rem;border-radius:6px;
  font-family:var(--font-mono);font-size:.55rem;text-align:center;color:#fff;background:rgba(5,2,10,.66);border:1px solid rgba(255,255,255,.16)}
.post-gallery-remove{position:absolute;bottom:3px;right:3px;width:20px;height:20px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.7);color:#fff;font-size:.65rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s,background .2s}
.post-gallery-item:hover .post-gallery-remove,.post-gallery-remove:focus-visible{opacity:1}
.post-gallery-remove:hover{background:#ef4444;border-color:#ef4444}
/* The arrows sit on the vertical middle of each edge, which is the only space a thumbnail
   always has free: corners belong to the cover tag, the kind chip and the remove button. */
.post-gallery-order{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 2px;
  opacity:0;transition:opacity .2s}
.post-gallery-item:hover .post-gallery-order,.post-gallery-item:focus-within .post-gallery-order{opacity:1}
.post-gallery-move{width:19px;height:17px;padding:0;border-radius:6px;cursor:pointer;display:grid;place-items:center;
  font-size:.5rem;color:#fff;background:rgba(167,139,250,.24);border:1px solid rgba(255,255,255,.3);transition:background .2s}
.post-gallery-move:hover{background:rgba(167,139,250,.5)}
.post-gallery-move:disabled{opacity:.3;cursor:default}
.post-gallery-add{display:grid;place-items:center;cursor:pointer;color:var(--aurora);font-size:1rem;
  background:rgba(167,139,250,.08);border-style:dashed;transition:background .2s,color .2s}
.post-gallery-add:hover{background:rgba(167,139,250,.18);color:var(--ivory)}
/* The seam verdict is shown while the author still has the queue, because a panorama is only
   worth publishing as one post if they can see that the wall understood it. */
.post-gallery-note{flex:1 1 100%;margin:.15rem 0 0;font-size:.66rem;line-height:1.5;color:var(--ivory-3)}
.post-gallery-note.is-continuous{color:var(--aurora)}
@media (hover:none){
.post-gallery-remove,.post-gallery-order{opacity:1}
}

.media-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;border-top:1px solid var(--hairline);padding-top:1rem;margin-top:auto}
.media-like-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem .45rem .85rem;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--hairline);color:var(--ivory-3);font-size:.8rem;font-weight:600;font-family:var(--font-mono);
  transition:all .3s var(--ease-out)}
.media-like-btn:hover{border-color:rgba(248,113,113,.5);color:#fda4af;background:rgba(253,164,175,.08)}
.media-like-btn .media-like-heart{width:15px;height:15px;fill:currentColor;transition:transform .3s var(--ease-spring)}
.media-like-btn.liked{color:#fda4af;border-color:rgba(253,164,175,.55);background:rgba(253,164,175,.12);box-shadow:0 0 14px rgba(253,164,175,.2)}
.media-like-btn.liked .media-like-heart{transform:scale(1.15);fill:#fda4af}
.media-like-count{min-width:1ch;text-align:center}

.media-reply-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1rem;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--hairline);color:var(--ivory-3);font-size:.8rem;font-weight:600;font-family:var(--font-mono);
  transition:all .3s var(--ease-out);margin-left:auto}
.media-reply-btn:hover{border-color:rgba(167,139,250,.5);color:var(--aurora);background:rgba(167,139,250,.08)}


.media-replies{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hairline)}
.media-replies-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-3)}
.media-replies-header i{color:var(--aurora);font-size:.75rem}

.media-reply{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:.75rem 1rem;border-radius:var(--r-md);background:rgba(255,255,255,.02);border:1px solid rgba(167,139,250,.1);transition:background .2s,border-color .2s;margin-bottom:.65rem;animation:replyIn .35s var(--ease-out) both}
@keyframes replyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.media-reply:hover{background:rgba(255,255,255,.035);border-color:rgba(167,139,250,.25)}


.nested-replies{display:flex;flex-direction:column;gap:.65rem;margin-left:1.6rem;padding-left:1.1rem;border-left:2px solid rgba(167,139,250,.2);margin-top:.4rem;transition:border-color .2s}
.nested-replies:hover{border-left-color:rgba(167,139,250,.55)}
.media-reply.nested{background:transparent;border:none;padding:.35rem 0 .35rem 0;margin-bottom:0}

.media-reply-head{display:flex;align-items:center;gap:.65rem;position:relative}
.media-reply-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(167,139,250,.4)}
.media-reply-avatar.anonymous{display:grid;place-items:center;padding:6px;background:rgba(167,139,250,.08);border:1px dashed rgba(167,139,250,.4);color:var(--aurora)}
.media-reply-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0;flex:1}
.media-reply-name{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ivory)}
.media-reply-date{font-family:var(--font-mono);font-size:.62rem;color:var(--ivory-4)}


.media-thread-collapse-btn{background:none;border:none;color:var(--ivory-4);font-family:var(--font-mono);font-size:.72rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .2s;margin-left:auto}
.media-thread-collapse-btn:hover{color:var(--aurora);background:rgba(167,139,250,.15)}

.media-reply.collapsed .media-reply-text,
.media-reply.collapsed .media-reply-actions,
.media-reply.collapsed .nested-replies,
.media-reply.collapsed .media-inline-reply-wrap{display:none !important}
.media-reply.collapsed{padding:.5rem .8rem;opacity:.7}
.media-reply-collapsed-notice{display:none;font-size:.75rem;font-style:italic;color:var(--ivory-4);margin-left:.4rem}
.media-reply.collapsed .media-reply-collapsed-notice{display:inline}

.media-reply-text{color:var(--ivory-2);font-size:.86rem;line-height:1.6;margin-top:.2rem;white-space:pre-wrap;word-break:break-word}
.media-reply-actions{display:flex;align-items:center;gap:.65rem;margin-top:.3rem}
.media-reply-like{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);color:var(--ivory-4);font-size:.68rem;font-weight:600;font-family:var(--font-mono);transition:all .3s}
.media-reply-like:hover{border-color:rgba(167,139,250,.4);color:var(--aurora);background:rgba(167,139,250,.08)}
.media-reply-like.liked{color:#fda4af;border-color:rgba(253,164,175,.55);background:rgba(253,164,175,.12)}

.media-reply-like .media-like-heart{width:13px;height:13px;flex:0 0 13px;fill:currentColor;transition:transform .3s var(--ease-spring)}
.media-reply-like.liked .media-like-heart{transform:scale(1.15);fill:#fda4af}
.media-reply-reply{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);color:var(--ivory-4);font-size:.68rem;font-weight:600;font-family:var(--font-mono);transition:all .3s}
.media-reply-reply:hover{border-color:rgba(167,139,250,.4);color:var(--aurora);background:rgba(167,139,250,.08)}
.media-reply-delete{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:99px;cursor:pointer;
  background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);color:#fca5a5;font-size:.68rem;font-weight:600;font-family:var(--font-mono);transition:all .3s;margin-left:auto}
.media-reply-delete:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.5)}
.media-reply-like i,.media-reply-reply i,.media-reply-delete i{font-size:.65rem}


.media-view-more-replies-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border-radius:99px;font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:var(--aurora);background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.28);cursor:pointer;transition:all .25s;margin-top:.6rem;width:fit-content}
.media-view-more-replies-btn:hover{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6);transform:translateY(-1px)}


.media-inline-reply-wrap{margin-top:.6rem;padding:.75rem .9rem;border-radius:var(--r-md);background:rgba(11,6,20,.7);border:1px solid var(--hairline);display:flex;flex-direction:column;gap:.6rem}
.media-inline-reply-textarea{width:100%;min-height:54px;padding:.6rem .8rem;border-radius:var(--r-sm);font-family:inherit;font-size:.84rem;color:var(--ivory);background:rgba(255,255,255,.03);border:1px solid var(--hairline);resize:none}
.media-inline-reply-textarea:focus{outline:none;border-color:var(--aurora);box-shadow:0 0 0 2px rgba(167,139,250,.2)}
.media-inline-reply-actions{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
.media-inline-reply-cancel{padding:.4rem .9rem;border-radius:var(--r-sm);background:none;border:1px solid var(--hairline);color:var(--ivory-3);font-size:.76rem;cursor:pointer;transition:all .2s}
.media-inline-reply-cancel:hover{color:var(--ivory);border-color:rgba(255,255,255,.3)}
.media-inline-reply-submit{padding:.4rem 1.1rem;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--aurora-soft),var(--aurora-deep));border:1px solid rgba(167,139,250,.5);color:var(--ink-950);font-weight:700;font-size:.76rem;cursor:pointer;transition:all .2s}
.media-inline-reply-submit:hover{transform:translateY(-1px);box-shadow:0 0 16px rgba(167,139,250,.35)}

.media-reply-form{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--hairline)}
.media-reply-input-wrap{display:flex;gap:.7rem;align-items:flex-start}
.media-reply-avatar-small{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(167,139,250,.35)}
.media-reply-avatar-small.anonymous{display:grid;place-items:center;padding:6px;background:rgba(167,139,250,.08);border:1px dashed rgba(167,139,250,.4);color:var(--aurora)}
.media-reply-textarea{flex:1;min-height:52px;padding:.75rem .95rem;border-radius:var(--r-md);font-family:inherit;font-size:.86rem;color:var(--ivory);
  background:rgba(11,6,20,.66);border:1px solid var(--hairline);resize:none;transition:border-color .3s,box-shadow .3s}
.media-reply-textarea:focus{outline:none;border-color:var(--aurora);box-shadow:0 0 0 3px rgba(167,139,250,.16)}
/* Once the emoji mirror is live in the reply box it, not the textarea, holds the caret — and it carries the
   border as an inline copy of the field's own, so the ring has to be stated against that copy. */
.media-reply-input-wrap .ch-rich:focus{outline:none;border-color:var(--aurora)!important;box-shadow:0 0 0 3px rgba(167,139,250,.16)}
.media-reply-send{padding:.75rem 1.3rem;border-radius:var(--r-md);background:linear-gradient(135deg,var(--aurora-soft),var(--aurora-deep));border:1px solid rgba(167,139,250,.5);color:var(--ink-950);font-weight:700;font-size:.8rem;cursor:pointer;transition:transform .3s,box-shadow .3s,opacity .3s;white-space:nowrap}
.media-reply-send:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(167,139,250,.35)}
.media-reply-send:disabled{opacity:.6;cursor:not-allowed}

.media-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:5rem 1rem;color:var(--ivory-3);text-align:center}
.media-empty-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:var(--aurora);
  background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.3);box-shadow:0 0 30px rgba(167,139,250,.2)}
.media-empty h3{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--ivory);margin:0}
.media-empty p{font-size:.9rem;line-height:1.7;max-width:34ch;margin:0}

.media-show-more{grid-column:1/-1;justify-self:center;margin-top:1.6rem;display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 2rem;border-radius:99px;
  background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.35);color:var(--aurora);font-weight:600;font-size:.86rem;cursor:pointer;
  transition:all .35s var(--ease-out)}
.media-show-more:hover{background:rgba(167,139,250,.16);box-shadow:var(--lit-top),0 14px 30px -16px rgba(4,2,10,.8);transform:translateY(-2px)}


.post-modal .modal-content{width:min(600px,92vw)}
.post-identity{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:var(--r-md);margin-bottom:1.2rem;
  background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.25)}
.post-identity[hidden]{display:none}
.post-identity-avatar{width:44px;height:44px;border-radius:50%;border:2px solid rgba(167,139,250,.5);object-fit:cover}
.post-identity-text{flex:1;display:flex;flex-direction:column}
.post-identity-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-3)}
.post-identity-text strong{font-size:.92rem}
.post-identity-badge{color:#5865f2;font-size:1.2rem}

.post-image-picker{display:flex;align-items:center;gap:1rem}
.post-picker-side{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0}
.post-picker-guide{margin:0;font-size:.68rem;line-height:1.55;color:var(--ivory-3);max-width:38ch}
.post-picker-guide.is-quiet{opacity:.72}
.post-image-preview{width:96px;height:96px;border-radius:var(--r-lg);object-fit:cover;border:2px dashed rgba(167,139,250,.4);padding:8px;background:rgba(167,139,250,.05)}
.post-upload-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.2rem;border-radius:99px;cursor:pointer;font-size:.82rem;font-weight:600;
  border:1px solid var(--hairline-strong);background:rgba(255,255,255,.04);color:var(--ivory-2);transition:all .3s}
.post-upload-btn:hover{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.5);color:var(--aurora)}


.post-upload-progress{margin-top:1rem;display:none;flex-direction:column;gap:.45rem}
.post-upload-progress.active{display:flex}
.post-upload-info{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.74rem;color:var(--ivory-3)}
.post-upload-percent{color:var(--aurora);font-weight:700}
.post-upload-track{height:6px;border-radius:99px;background:rgba(11,6,20,.7);border:1px solid var(--hairline);overflow:hidden}
.post-upload-progress-bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--aurora),var(--lagoon));transition:width .25s ease-out}

.post-counter{text-align:right;font-family:var(--font-mono);font-size:.68rem;color:var(--ivory-3);margin-top:.4rem}
.post-form-error{min-height:1.2rem;margin-top:.35rem;font-size:.78rem;color:#fca5a5}
.post-confirm-icon{width:66px;height:66px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:#fca5a5;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4)}
.post-confirm-text{color:var(--ivory-2);font-size:.88rem;line-height:1.65;margin-bottom:1.6rem}
.post-confirm-buttons{display:flex;gap:.8rem;justify-content:center}
.post-confirm-buttons .btn,.post-confirm-buttons .submit-btn{width:auto;min-width:120px}

@media (max-width:640px){
  .media-grid{grid-template-columns:1fr;gap:1.4rem}
  .media-card{padding:1.35rem 1.25rem}
  .media-card--text{padding:1.2rem 1.1rem;gap:.75rem}
  .media-toolbar{flex-direction:column;align-items:flex-start;gap:1rem}
  .media-filters{width:100%;overflow-x:auto;padding-bottom:.5rem}
  .media-toolbar .btn{width:100%;justify-content:center}
  .nested-replies{margin-left:.75rem;padding-left:.65rem}
  .media-frame{--frame-max-h:min(72vh,400px)}
  .video-play-ring{width:54px;height:54px;font-size:1rem}
  .post-modal .modal-content{width:min(520px,92vw)}
}

.media-toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,20px);z-index:5000;display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1.3rem;border-radius:99px;font-size:.84rem;font-weight:600;color:var(--ivory);
  background:rgba(18,13,32,.95);border:1px solid rgba(167,139,250,.4);box-shadow:var(--shadow-3),0 0 24px rgba(167,139,250,.2);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease-out)}
.media-toast.show{opacity:1;transform:translate(-50%,0)}
.media-toast i{color:var(--aurora)}
.media-toast.error{border-color:rgba(248,113,113,.5)}
.media-toast.error i{color:#fca5a5}

.media-spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(11,6,20,.3);border-top-color:var(--ink-950);animation:mediaSpin .8s linear infinite;vertical-align:-2px;margin-right:.4rem}

#createPostModal .modal-content{width:min(600px,92vw)}
#deletePostConfirmModal .modal-content{width:min(400px,92vw);text-align:center}

.media-fallback-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2.5rem 1rem;color:var(--ivory-4);font-size:.82rem;min-height:180px;background:rgba(255,255,255,.02);text-align:center}
.media-fallback-error i{font-size:1.8rem;color:#f87171;opacity:.85}
.media-fallback-error span{max-width:240px;line-height:1.4}


.post-detail-modal{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;background:rgba(4,2,8,.82);backdrop-filter:blur(20px);padding:1.2rem;opacity:0;transition:opacity .35s var(--ease-out)}
.post-detail-modal.visible{opacity:1}
.post-detail-content{position:relative;width:min(960px,94vw);max-height:92vh;border-radius:var(--r-2xl,24px);background:linear-gradient(168deg,rgba(26,18,48,.96),rgba(11,6,20,.98));border:1px solid rgba(167,139,250,.35);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(167,139,250,.15);display:flex;flex-direction:column;overflow:hidden;animation:modalScaleIn .35s var(--ease-spring) both}
@keyframes modalScaleIn{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}

.post-detail-close{position:absolute;top:1rem;right:1.2rem;z-index:10;width:38px;height:38px;border-radius:50%;border:1px solid rgba(167,139,250,.3);background:rgba(18,13,32,.85);backdrop-filter:blur(8px);color:var(--ivory);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s ease}
.post-detail-close:hover{background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.5);color:#fca5a5;transform:rotate(90deg)}

.post-detail-scroll{flex:1;overflow-y:auto;padding:2.2rem 2.4rem 3rem;scroll-behavior:smooth}
.post-detail-scroll::-webkit-scrollbar{width:8px}
.post-detail-scroll::-webkit-scrollbar-track{background:rgba(11,6,20,.5)}
.post-detail-scroll::-webkit-scrollbar-thumb{background:rgba(167,139,250,.3);border-radius:99px}
.post-detail-scroll::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.6)}


.post-scroll-nav{position:absolute;bottom:1.8rem;right:2rem;z-index:100;display:flex;flex-direction:column;gap:.55rem;animation:fadeUp .3s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.post-scroll-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(167,139,250,.4);background:rgba(15,10,28,.92);backdrop-filter:blur(12px);color:var(--aurora);display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;transition:all .25s var(--ease-out);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.post-scroll-btn:hover{background:linear-gradient(135deg,var(--aurora),var(--aurora-deep));color:#0b0614;transform:translateY(-2px);box-shadow:0 8px 24px rgba(167,139,250,.4)}


.media-card-open-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.3);color:var(--aurora);font-size:.78rem;transition:all .25s var(--ease-out)}
.media-card-open-btn i{font-size:.8rem}
.media-card-open-btn:hover{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6);transform:translateY(-1px)}
.media-card-open-btn:focus-visible{outline:2px solid var(--aurora);outline-offset:2px}

/* The share control carries no word beside it, so it borrows the open button's circle and adds the one
   state a clipboard copy cannot otherwise show: the arrow becomes a check while the toast is up. */
.media-share-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.3);color:var(--aurora);transition:all .25s var(--ease-out)}
.media-share-btn i{font-size:.8rem}
.media-share-btn:hover{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6);transform:translateY(-1px)}
.media-share-btn:focus-visible{outline:2px solid var(--aurora);outline-offset:2px}
.media-share-btn.is-copied{border-color:rgba(126,224,180,.6);color:#7ee0b4}
.media-share-btn.is-copied i::before{content:"\f00c"}
.detail-actions-bar .media-share-btn{margin-left:auto}

.media-comments-preview-banner{margin-top:.8rem;padding:.65rem 1rem;border-radius:var(--r-md);background:rgba(167,139,250,.06);border:1px dashed rgba(167,139,250,.28);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .25s;font-family:var(--font-mono);font-size:.78rem;color:var(--ivory-3)}
.media-comments-preview-banner:hover{background:rgba(167,139,250,.14);border-color:var(--aurora);color:var(--ivory)}
.media-comments-preview-banner i{color:var(--aurora)}

.media-load-more-comments-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.3rem;border-radius:99px;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--aurora);background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.35);cursor:pointer;transition:all .25s;margin:1rem auto 0;width:fit-content;align-self:center}
.media-load-more-comments-btn:hover{background:rgba(167,139,250,.25);border-color:rgba(167,139,250,.7);transform:translateY(-1px)}


.detail-post-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.detail-post-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(167,139,250,.5);box-shadow:0 0 20px rgba(167,139,250,.25)}
.detail-post-meta{flex:1}
.detail-post-title{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.02em;color:var(--ivory);line-height:1.25;margin:0 0 .8rem}
.detail-post-desc{font-size:1rem;line-height:1.7;color:var(--ivory-2);margin-bottom:1.4rem;white-space:pre-wrap;word-break:break-word}
.detail-post-media-wrap{--frame-max-h:min(620px,70vh);border-radius:var(--r-xl);border:1px solid var(--hairline);background:#05020a;margin-bottom:1.4rem}
.detail-actions-bar{display:flex;align-items:center;gap:1.2rem;padding:.9rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:1.5rem}
.detail-comments-title{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aurora);margin-bottom:1.2rem}
.media-card-clickable-head,.media-card-clickable-title{cursor:pointer;transition:color .2s}
.media-card-clickable-title:hover{color:var(--aurora)}
.media-image-clickable{cursor:pointer;transition:opacity .2s}
.media-image-clickable:hover{opacity:.92}
.detail-reply-count{font-family:var(--font-mono);font-size:.84rem;color:var(--aurora);display:flex;align-items:center;gap:.5rem}


.media-reply[data-depth="0"] > .media-reply-body > .nested-replies,
.media-reply[data-depth="1"] > .media-reply-body > .nested-replies,
.media-reply[data-depth="2"] > .media-reply-body > .nested-replies,
.media-reply[data-depth="3"] > .media-reply-body > .nested-replies{margin-left:1.25rem;padding-left:.85rem}
.media-reply[data-depth="4"] > .media-reply-body > .nested-replies{margin-left:0;padding-left:.85rem}
.media-reply.nested{min-width:0}
.media-reply-body{min-width:0}
.media-reply-name{max-width:min(220px,45vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-thread-empty{text-align:center;padding:2.2rem 1rem;color:var(--ivory-3);font-size:.9rem}
.media-thread-empty i{font-size:2rem;margin-bottom:.6rem;display:block;opacity:.5;color:var(--aurora)}
.media-nested-toggle{display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;padding:.35rem .85rem;border-radius:99px;font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--aurora);background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.24);cursor:pointer;transition:all .2s;width:fit-content}
.media-nested-toggle:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.55)}
.media-nested-toggle i{font-size:.62rem}
.media-thread-collapse-btn+.media-reply-delete{margin-left:0}


.media-reply-preview{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:.7rem;min-width:0}
.media-preview-reply{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.55rem;min-width:0}
.media-preview-line{grid-column:1;grid-row:1;justify-self:center;width:2px;border-radius:2px;background:rgba(167,139,250,.22);margin-top:22px}
.media-preview-reply[data-depth="0"]>.media-preview-line{display:none}
.media-preview-avatar{grid-column:1;grid-row:1;width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid rgba(167,139,250,.35);background:rgba(167,139,250,.08);display:grid;place-items:center;font-size:.6rem;color:var(--aurora)}
.media-preview-content{grid-column:2;grid-row:1;min-width:0}
.media-preview-meta{display:flex;align-items:center;gap:.4rem;min-width:0;flex-wrap:wrap}
.media-preview-name{font-family:var(--font-display);font-weight:600;font-size:.78rem;color:var(--ivory);max-width:min(160px,38vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-preview-date{font-family:var(--font-mono);font-size:.6rem;color:var(--ivory-4)}
.media-preview-text{font-size:.8rem;line-height:1.5;color:var(--ivory-2);margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.media-preview-likes{display:inline-flex;align-items:center;gap:.3rem;margin-top:.25rem;font-family:var(--font-mono);font-size:.62rem;color:#fda4af}
.media-preview-likes svg{width:10px;height:10px}
.media-preview-children{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:.7rem;margin-top:.7rem;padding-left:1rem;min-width:0}
.media-more-replies-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.65rem;padding:.5rem 1rem;border-radius:99px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--aurora);background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.28);cursor:pointer;transition:all .25s var(--ease-out);width:fit-content}
.media-more-replies-btn:hover{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6);transform:translateY(-1px)}
.media-more-replies-btn[hidden]{display:none}
.media-more-replies-btn i:last-child{font-size:.62rem}


.media-like-peek{position:fixed;z-index:6000;width:min(268px,calc(100vw - 20px));padding:.7rem .75rem;border-radius:var(--r-md,14px);background:linear-gradient(168deg,rgba(30,21,54,.99),rgba(11,6,20,.99));border:1px solid rgba(167,139,250,.35);box-shadow:0 18px 44px rgba(0,0,0,.65);color:var(--ivory-2);font-family:var(--font-mono);font-size:.76rem;opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .16s var(--ease-out),transform .16s var(--ease-out);pointer-events:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.media-like-peek.visible{opacity:1;transform:none;pointer-events:auto}
.media-like-peek[hidden]{display:none}
.media-like-peek::-webkit-scrollbar{width:6px}
.media-like-peek::-webkit-scrollbar-thumb{background:rgba(167,139,250,.35);border-radius:99px}
.media-like-peek-head{display:flex;align-items:center;gap:.45rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aurora);margin-bottom:.5rem}
.media-like-peek-head i{font-size:.7rem}
.media-like-peek-empty{display:flex;align-items:center;gap:.5rem;color:var(--ivory-4);font-size:.74rem;line-height:1.4}
.media-like-peek-empty i{color:rgba(167,139,250,.5)}
.media-like-peek-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.media-like-peek-row{display:flex;align-items:center;gap:.5rem;min-width:0}
.media-like-peek-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(167,139,250,.35);background:rgba(167,139,250,.08)}
.media-like-peek-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:var(--ivory)}
.media-like-peek-you{margin-left:auto;flex-shrink:0;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aurora);border:1px solid rgba(167,139,250,.35);border-radius:99px;padding:.1rem .4rem}
.media-like-peek-toggle{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:.55rem;padding:.45rem .6rem;border-radius:var(--r-sm,10px);background:linear-gradient(180deg,rgba(38,27,68,.96),rgba(24,16,44,.99));border:1px solid rgba(167,139,250,.32);color:var(--aurora);font-family:var(--font-mono);font-size:.68rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s;position:sticky;bottom:0}
.media-like-peek-toggle:hover{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6)}
.media-like-btn,.media-reply-like{-webkit-touch-callout:none;touch-action:manipulation}

@media (prefers-reduced-motion: reduce){
  .media-card{transition:none}
  .media-like-peek{transition:none}
}

/* Same picture, cheaper path. The wall scrolls under fixed controls and under chips painted on every video
   and gallery tile, and a backdrop blur there is recomputed for the whole region behind it on every scroll
   frame. On the lite tier the tint carries the contrast instead — the recipe the nav and the hero controls
   already use. */
html[data-rv-tier="lite"] .quick-action-btn{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,6,20,.96)}
html[data-rv-tier="lite"] .video-play-ring{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(167,139,250,.36)}
html[data-rv-tier="lite"] .video-chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,2,10,.9)}
html[data-rv-tier="lite"] .media-gallery-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,2,10,.78)}
/* A track is moved on a swipe, so its layer does not have to be reserved between swipes; the browser
   promotes it for the transition on its own. */
html[data-rv-tier="lite"] .media-gallery-track{will-change:auto}

/* A finger has no hover to leave, but a tap still raises the card and its 54px glow — and that lifted,
   glowing state then sticks to the last card touched for the rest of the visit. Only the decoration is
   gated: the delete control that .media-card:hover reveals stays reachable, and a pointer device is
   untouched. */
@media (hover:none){
.media-card:hover{transform:none;box-shadow:var(--lit-top),var(--cast-down)}
.quick-action-btn:hover{transform:none}
}