/* ------------------------------- */
/* Stories (niguro [v5 port: Stories], owner, 2026-10-22): v5's story viewer and story composer
   (__ng_stories_js.tpl; stories.js, stories-composer.js), the stories strip, rings and highlights, in Niguro's look.
   - .ng-sv the viewer, .ng-sc the composer: one 9:16 stage. Phones: full screen on the viewers' dark stage
     (#0b0c0e, as Reels and the photo lightbox), safe areas respected. 640px up: a centred card (as tall as the window
     allows, 9:16, 20px corners) on the dimmed page; the viewer's previous / next person beside it.
   - Both scripts drive the look with data-* states on the root (data-loading, data-owner, data-panel, data-step…),
     so every "show when" below is an attribute selector; .hidden (toggled by the scripts) hides inside them.
   - .ng-st-* is shared: the media frame, the layers (text, emoji, sticker, mention, link, music, poll), the text
     stories' gradients and the bottom sheets.
   - Sheets: the viewer's "Viewers" sheet uses the theme's card colours; the composer's tool sheets are dark glass
     over the story. Buttons: Niguro green for the main action (Share to story, Add, Done), white glass for tools.
   z-index 1046: over the header, the bottom bar and the chat (≤ 1040), under #modal (1055), so the report,
   highlight and confirm popups open above a story. */
/* ------------------------------- */

.ng-sv, .ng-sc {
  --ng-st-stage: #0b0c0e;
  --ng-st-glass: rgb(0 0 0 / .45);
  --ng-st-glass-hover: rgb(0 0 0 / .62);
  --ng-st-sheet: hsl(150 12% 8% / .96);
  --ng-st-r: 20px;
  position: fixed; inset: 0; z-index: 1046; display: flex; align-items: center; justify-content: center;
  background: var(--ng-st-stage); color: #fff; font-family: var(--ng-font);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: contain;
}
.ng-sv .hidden, .ng-sc .hidden { display: none !important; }
.ng-sv .ng-ico, .ng-sc .ng-ico { width: 20px; height: 20px; flex: none; }
.ng-sv .truncate, .ng-sc .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-sv button, .ng-sc button { -webkit-appearance: none; appearance: none; font: inherit; }

.ng-sv__stage, .ng-sc__stage {
  position: relative; isolation: isolate; container-type: size; width: 100%; height: 100%; overflow: hidden;
  background: #000; user-select: none; -webkit-user-select: none;
  animation: ng-st-in .26s cubic-bezier(.2, .8, .2, 1);
}
.ng-sc__stage { background: hsl(150 8% 10%); }
@keyframes ng-st-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) {
  .ng-sv, .ng-sc { background: rgb(6 8 7 / .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .ng-sv__stage, .ng-sc__stage {
    height: min(calc(100dvh - 32px), 896px); width: calc(min(100dvh - 32px, 896px) * 9 / 16);
    border-radius: var(--ng-st-r); box-shadow: 0 24px 64px rgb(0 0 0 / .5);
  }
}
@media (prefers-reduced-motion: reduce) { .ng-sv__stage, .ng-sc__stage { animation: none; } }

/* ---- the media frame (viewer and composer) ---- */
.ng-st-ambient {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1);
  opacity: .5; filter: blur(48px); pointer-events: none;
}
.ng-st-backdrop { position: absolute; inset: 0; z-index: -1; }
.ng-st-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ng-st-center--over { pointer-events: none; }
.ng-st-media, .ng-st-frame {
  position: relative; aspect-ratio: 9 / 16; width: min(100cqw, calc(100cqh * 9 / 16)); max-height: 100%; overflow: hidden;
}
.ng-st-media { display: flex; align-items: center; justify-content: center; }
.ng-st-media > * { max-width: 100%; max-height: 100%; object-fit: contain; }
.ng-st-frame { container-type: inline-size; }
.ng-st-media--fill { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.ng-st-drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-st-layers { position: absolute; inset: 0; }

/* text stories: the gradients (stories.js stories_backgrounds); Niguro green first */
.ng-st-bg--aurora { background: linear-gradient(135deg, hsl(143 99% 30%), hsl(160 84% 39%) 48%, hsl(199 89% 48%)); }
.ng-st-bg--sunset { background: linear-gradient(135deg, #fb923c, #f43f5e 50%, #c026d3); }
.ng-st-bg--ocean { background: linear-gradient(135deg, #22d3ee, #0ea5e9 50%, #4f46e5); }
.ng-st-bg--forest { background: linear-gradient(135deg, #34d399, #14b8a6 50%, #0e7490); }
.ng-st-bg--candy { background: linear-gradient(135deg, #f472b6, #fb7185 50%, #fcd34d); }
.ng-st-bg--grape { background: linear-gradient(135deg, #c026d3, #7e22ce 50%, #312e81); }
.ng-st-bg--peach { background: linear-gradient(135deg, #fcd34d, #fb923c 50%, #f43f5e); }
.ng-st-bg--midnight { background: linear-gradient(135deg, #334155, #0f172a 50%, #000); }

/* ---- layers (stories.js stories_layer_element; sizes in cqw of the frame, set by the script) ---- */
/* left / top are physical (the script sets them in %), so the centring is too, in both directions */
.ng-st-layer { position: absolute; transform: translate(-50%, -50%); }
.ng-st-layer--text {
  width: max-content; max-width: 86%; padding: .2em .5em; border-radius: .35em; line-height: 1.35;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ng-st-layer--emoji { line-height: 1; }
.ng-st-layer--sticker img { display: block; width: 100%; height: auto; }
.ng-st-layer--mention, .ng-st-layer--link {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .4em; max-width: 86%; padding: .35em .75em;
  border-radius: 999px; background: rgb(255 255 255 / .95); box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
}
.ng-st-layer--mention, .ng-st-layer--mention:hover { color: hsl(220 14% 12%) !important; }
.ng-st-layer--link, .ng-st-layer--link:hover { color: hsl(143 99% 24%) !important; }
.ng-st-layer--link .ng-ico { width: 1.1em; height: 1.1em; }
.ng-st-layer--link .truncate { padding-block: .1em; }
/* music: four shapes, a tap in the composer cycles them */
.ng-st-music { pointer-events: auto; display: inline-flex; align-items: center; max-width: 86%; color: #fff !important; text-decoration: none; line-height: 1.25; }
.ng-st-music img { flex: none; background: rgb(255 255 255 / .15); object-fit: cover; }
.ng-st-music__txt { display: flex; flex-direction: column; min-width: 0; }
.ng-st-music .js_story-music-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-st-music .js_story-music-artist { font-size: .8em; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-st-music--pill { gap: .6em; padding: .35em 1em .35em .35em; border-radius: 999px; background: rgb(0 0 0 / .55); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.ng-st-music--pill img { width: 2.4em; height: 2.4em; border-radius: 50%; animation: ng-st-spin 8s linear infinite; }
.ng-st-music--card { flex-direction: column; align-items: stretch; gap: .6em; width: 13em; padding: .7em; border-radius: 1.3em; background: rgb(0 0 0 / .55); backdrop-filter: blur(10px); }
.ng-st-music--card img { width: 100%; aspect-ratio: 1; border-radius: .8em; }
.ng-st-music--cover { position: relative; display: block; width: 9em; border-radius: 1.3em; background: rgb(0 0 0 / .55); }
.ng-st-music--cover img { display: block; width: 100%; aspect-ratio: 1; border-radius: 1.3em; }
.ng-st-music__badge { position: absolute; right: .5em; bottom: .5em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgb(0 0 0 / .6); }
.ng-st-music__badge .ng-ico, .ng-st-music--text .ng-ico { width: 1.1em; height: 1.1em; }
.ng-st-music--text { gap: .45em; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.ng-st-music--text .ng-st-music__txt { flex-direction: row; gap: .4em; }
@keyframes ng-st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ng-st-music--pill img { animation: none; } }
/* poll */
.ng-st-poll {
  pointer-events: auto; width: 17em; max-width: 92cqw; padding: .9em; border-radius: 1em;
  background: #fff; color: hsl(220 14% 12%); box-shadow: 0 10px 28px rgb(0 0 0 / .3);
}
.ng-st-poll__q { margin-bottom: .7em; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.ng-st-poll__opts { display: flex; gap: .5em; }
.ng-st-poll__opt {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; padding: .7em .6em; border: 0; border-radius: .7em;
  background: hsl(143 25% 93%); color: hsl(220 14% 12%); font-weight: 700; cursor: pointer;
}
/* a story looks the same in day and night: the poll keeps its own light colours */
.ng-st-poll__opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px hsl(143 99% 30%); }
.ng-st-poll__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: hsl(143 99% 30% / .25); transition: width .5s ease; }
[dir="rtl"] .ng-st-poll__bar { inset: 0 0 0 auto; }
.ng-st-poll__label, .ng-st-poll__pct { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-st-poll__pct { font-size: .8em; opacity: .7; }
/* the strip's thumbnails render a text story's layers too */
.ng-st-thumb-layers { position: absolute; inset: 0; display: block; container-type: inline-size; pointer-events: none; }
.ng-st-thumb-layers .ng-st-layer { pointer-events: none !important; }

/* ---- sheets ---- */
.ng-st-sheet {
  position: absolute; inset: auto 0 0; z-index: 30; display: flex; flex-direction: column; gap: 12px;
  max-height: 70%; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  transform: translateY(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
}
.ng-st-sheet__grab { display: flex; justify-content: center; margin: -4px 0 -6px; padding: 6px 0; cursor: grab; touch-action: none; }
.ng-st-sheet__grab:active { cursor: grabbing; }
.ng-st-sheet__grab span { width: 40px; height: 4px; border-radius: 999px; background: currentColor; opacity: .25; }
.ng-st-sheet__head { display: flex; align-items: center; gap: 8px; flex: none; }
.ng-st-sheet__head h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: inherit; }
.ng-st-sheet__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.ng-st-sheet-dim { position: absolute; inset: 0; z-index: 20; display: none; background: rgb(0 0 0 / .5); }
@media (prefers-reduced-motion: reduce) { .ng-st-sheet { transition: none; } }

/* people rows (the audience lists' search, the composer's mentions) */
.ng-st-person {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px;
  background: none; color: inherit; text-align: start; cursor: pointer;
}
.ng-st-person:hover { background: hsl(var(--muted)); }
.ng-sc .ng-st-person:hover { background: rgb(255 255 255 / .1); }
.ng-st-person img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.ng-st-person .truncate { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.ng-st-person__add { color: var(--ng-brand); }

/* spinner (white on the stage, ink in the light sheet) */
.ng-sv__spin { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: ng-st-spin .8s linear infinite; }
.ng-sv__spin--ink { width: 24px; height: 24px; border-color: var(--ng-line); border-top-color: var(--ng-brand); }

/* ================================================================ */
/* the viewer                                                       */
/* ================================================================ */
.ng-sv__nav { display: none; }
@media (min-width: 1024px) {
  .ng-sv__nav {
    position: absolute; top: 50%; z-index: 10; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px;
    border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; backdrop-filter: blur(10px); cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
  }
  .ng-sv__nav:hover { background: rgb(255 255 255 / .22); }
  .ng-sv__nav:active { transform: scale(.95); }
  .ng-sv__nav:disabled { opacity: 0; pointer-events: none; }
  .ng-sv__nav--prev { left: 24px; }
  .ng-sv__nav--next { right: 24px; }
  [dir="rtl"] .ng-sv__nav--prev { left: auto; right: 24px; }
  [dir="rtl"] .ng-sv__nav--next { right: auto; left: 24px; }
  [dir="rtl"] .ng-sv__nav .ng-ico { transform: scaleX(-1); }
}
.ng-sv__surface { position: absolute; inset: 0; touch-action: none; }
.ng-sv__loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.ng-sv[data-loading="true"] .ng-sv__loader { display: flex; }

/* header: progress, author, time, music, actions */
.ng-sv__top, .ng-sv__foot { position: absolute; inset-inline: 0; z-index: 10; transition: opacity .2s ease; }
.ng-sv[data-held="true"] .ng-sv__top, .ng-sv[data-held="true"] .ng-sv__foot { opacity: 0; }
.ng-sv__top {
  top: 0; padding: calc(12px + env(safe-area-inset-top)) 12px 40px; pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / .6), transparent);
}
.ng-sv__bars { display: flex; gap: 4px; }
.ng-sv__bar { flex: 1 1 0; height: 2.5px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .35); }
.ng-sv__bar .js_story-bar { width: 0; height: 100%; border-radius: inherit; background: #fff; }
.ng-sv__who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ng-sv__ava { flex: none; pointer-events: auto; }
.ng-sv__ava img { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px hsl(var(--primary)); }
.ng-sv__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ng-sv__name {
  pointer-events: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #fff !important; text-decoration: none; text-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.ng-sv__time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgb(255 255 255 / .78); }
.ng-sv__music { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 2px; font-size: 12px; font-weight: 500; color: #fff !important; text-decoration: none; }
.ng-sv__music .ng-ico { width: 14px; height: 14px; }
.ng-sv__acts { flex: none; display: flex; align-items: center; gap: 2px; pointer-events: auto; }
.ng-sv__btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #fff; cursor: pointer; transition: background-color .15s ease;
}
.ng-sv__btn:hover { background: rgb(255 255 255 / .15); }
.ng-sv__btn:disabled { opacity: .5; }
.ng-sv__btn:focus-visible, .ng-sv__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ng-sv__btn--sound, .ng-sv__btn--viewer, .ng-sv__btn--repost, .ng-sv__btn--highlight, .ng-sv__btn--manage { display: none; }
.ng-sv[data-sound="true"] .ng-sv__btn--sound,
.ng-sv[data-owner="false"] .ng-sv__btn--viewer,
.ng-sv[data-repost="true"] .ng-sv__btn--repost,
.ng-sv[data-highlightable="true"] .ng-sv__btn--highlight,
.ng-sv[data-manage="true"] .ng-sv__btn--manage { display: grid; }
.ng-sv .ng-sv__off, .ng-sv[data-muted="true"] .ng-sv__on { display: none; }
.ng-sv[data-muted="true"] .ng-sv__off { display: block; }
.ng-sv .ng-sv__play, .ng-sv[data-paused="true"] .ng-sv__pause { display: none; }
.ng-sv[data-paused="true"] .ng-sv__play { display: block; }

/* status toast ("Reply sent", "Story reposted") */
.ng-sv__status { position: absolute; inset: auto 0 144px; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.ng-sv__status span {
  padding: 8px 16px; border-radius: 999px; background: rgb(0 0 0 / .72); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .3s ease;
}
.ng-sv__status span[data-show="true"] { opacity: 1; }

/* footer: the author's counters, or reactions and the reply field */
.ng-sv__foot {
  bottom: 0; padding: 48px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgb(0 0 0 / .7), transparent);
}
.ng-sv__owner { display: none; justify-content: center; }
.ng-sv[data-owner="true"] .ng-sv__owner { display: flex; }
.ng-sv__stats {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .16); color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px); cursor: pointer; transition: background-color .15s ease;
}
.ng-sv__stats:hover { background: rgb(255 255 255 / .26); }
.ng-sv__sep { width: 1px; height: 16px; margin: 0 2px; background: rgb(255 255 255 / .3); }
.ng-sv__rx { display: inline-flex; align-items: center; gap: 8px; } /* niguro [Story counts]: hidden below 1 */
.ng-sv__stats [hidden] { display: none !important; }
.ng-sv__viewer { display: none; flex-direction: column; gap: 10px; }
.ng-sv[data-owner="false"] .ng-sv__viewer { display: flex; }
.ng-sv__reacts { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ng-sv[data-react="false"] .ng-sv__reacts { display: none; }
/* quick reactions: big enough to tap and to see (48px, 44px on narrow phones); the core's .emoji sizing is reset so the
   reaction picture fills the button, and only the still picture shows (the hover loop belongs to the reaction tray) */
.ng-sv__reacts { gap: 6px; }
.ng-sv__react {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 4px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
@media (max-width: 380px) { .ng-sv__reacts { gap: 2px; } .ng-sv__react { width: 44px; height: 44px; } }
.ng-sv__react:hover { transform: translateY(-4px) scale(1.18); }
.ng-sv__react[aria-pressed="true"] { background: rgb(255 255 255 / .25); box-shadow: 0 0 0 2px #fff; }
.ng-sv__react .emoji {
  position: static; display: block; width: 100%; height: 100%; margin: 0; transform: none; top: auto; right: auto; left: auto; bottom: auto;
}
.ng-sv__react .emoji img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ng-sv__react .emoji .ng-rx-anim { display: none; }
.ng-sv__reply { display: none; align-items: center; gap: 8px; }
.ng-sv[data-reply="true"] .ng-sv__reply { display: flex; }
.ng-sv__reply input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px;
  background: rgb(255 255 255 / .1); color: #fff; font-size: 16px; outline: none; backdrop-filter: blur(10px);
}
@media (min-width: 768px) { .ng-sv__reply input { font-size: 14px; } }
.ng-sv__reply input::placeholder { color: rgb(255 255 255 / .75); }
.ng-sv__reply input:focus { border-color: rgb(255 255 255 / .7); }
.ng-sv__reply button {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: hsl(var(--primary)); color: #fff; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.ng-sv__reply button:hover { filter: brightness(1.1); }
.ng-sv__reply button:active { transform: scale(.95); }
.ng-sv__reply button:disabled { opacity: .6; }
[dir="rtl"] .ng-sv__reply button .ng-ico { transform: scaleX(-1); }

/* the viewers sheet: the theme's card colours */
.ng-sv__sheet { height: 70%; max-height: none; background: var(--ng-card); color: var(--ng-ink); }
@media (min-width: 640px) { .ng-sv__sheet { border-radius: 28px 28px 0 0; } }
.ng-sv__sheet .ng-st-sheet__head { padding: 4px 4px 12px; border-bottom: 1px solid var(--ng-line); }
.ng-sv__sheet .js_story-sheet-count { color: var(--ng-sub); font-weight: 600; }
.ng-sv[data-sheet="true"] .ng-sv__sheet { transform: none; visibility: visible; }
.ng-sv[data-sheet="true"] .ng-st-sheet-dim { display: block; }
.ng-sv__people { margin: 0; padding: 4px 0; list-style: none; }
.ng-sv__none { padding: 32px 16px; }
.ng-sv__sheet-loader, .ng-sv__more { display: flex; justify-content: center; padding: 12px 0; }

/* ================================================================ */
/* the composer                                                     */
/* ================================================================ */
/* step 1: the "Create story" chooser, the theme's story popup cards ([Story popup], niguro.css) on the card colour */
.ng-sc__start {
  position: absolute; inset: 0; z-index: 40; display: none; flex-direction: column;
  background: var(--ng-card); color: var(--ng-ink);
}
.ng-sc[data-step="start"] .ng-sc__start { display: flex; }
.ng-sc__start-head { display: flex; align-items: center; gap: 12px; padding: calc(20px + env(safe-area-inset-top)) 20px 0; }
.ng-sc__start-head h2 { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-sc__start-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; }
.ng-story-pub__tile--text { background: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(243 75% 59%) 100%); box-shadow: 0 4px 12px hsl(243 75% 59% / .28); }
.ng-sc .ng-sc__if-videos, .ng-sc[data-videos="true"] .ng-sc__if-novideos { display: none; }
.ng-sc[data-videos="true"] .ng-sc__if-videos { display: block; }
.ng-sc[data-text="false"] .ng-sc__opt-text { display: none; }

/* the canvas, the layers, the snap guides */
.ng-sc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.ng-sc[data-panel="draw"] .ng-sc__canvas { pointer-events: auto; cursor: crosshair; }
.ng-sc[data-panel="draw"] .ng-sc__layers { pointer-events: none; }
.ng-sc__layer { pointer-events: auto; cursor: grab; touch-action: none; }
.ng-sc__layer:active { cursor: grabbing; }
.ng-sc__layer.is-selected { outline: 2px dashed #fff; outline-offset: 4px; }
.ng-sc__ldel, .ng-sc__lhandle {
  position: absolute; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: hsl(150 8% 10%); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .4); text-shadow: none; font-size: 0;
}
.ng-sc__ldel { top: -14px; right: -14px; cursor: pointer; }
.ng-sc__lhandle { bottom: -14px; right: -14px; cursor: nwse-resize; }
.ng-sc__ldel .ng-ico, .ng-sc__lhandle .ng-ico { width: 15px; height: 15px; }
.ng-sc__guide { position: absolute; pointer-events: none; background: hsl(143 89% 50%); }
.ng-sc__guide--x { inset: 0 auto 0 50%; width: 1px; }
.ng-sc__guide--y { inset: 50% 0 auto 0; height: 1px; }

/* glass buttons (top bar, tool rail, small actions) */
.ng-sc__btn {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ng-st-glass); color: #fff; backdrop-filter: blur(10px); cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, color .15s ease;
}
.ng-sc__btn:hover { background: var(--ng-st-glass-hover); }
.ng-sc__btn:active { transform: scale(.95); }
.ng-sc__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ng-sc__btn--sm { width: 36px; height: 36px; background: rgb(255 255 255 / .1); }
.ng-sc__btn--xs { width: 32px; height: 32px; background: rgb(255 255 255 / .1); }
.ng-sc__btn--xs .ng-ico { width: 16px; height: 16px; }
.ng-sc__btn:disabled { opacity: .4; pointer-events: none; }
[dir="rtl"] .ng-sc__top .js_composer-back .ng-ico, [dir="rtl"] .ng-sc__rownav .ng-ico { transform: scaleX(-1); }
.ng-sc__grow { flex: 1 1 auto; }

.ng-sc[data-chrome="false"] .ng-sc__chrome { display: none; }
.ng-sc__top {
  position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 12px 32px; background: linear-gradient(to bottom, rgb(0 0 0 / .45), transparent);
}
.ng-sc__btn--sound { display: none; }
.ng-sc[data-type="video"] .ng-sc__btn--sound { display: grid; }
.ng-sc .ng-sc__off, .ng-sc[data-muted="true"] .ng-sc__btn--sound .ng-sc__on { display: none; }
.ng-sc[data-muted="true"] .ng-sc__btn--sound .ng-sc__off { display: block; }
.ng-sc__rail { position: absolute; top: calc(72px + env(safe-area-inset-top)); right: 12px; z-index: 10; display: flex; flex-direction: column; gap: 10px; }
[dir="rtl"] .ng-sc__rail { right: auto; left: 12px; }
.ng-sc__btn--music, .ng-sc__btn--text { display: none; }
.ng-sc[data-music="true"] .ng-sc__btn--music, .ng-sc[data-type="text"] .ng-sc__btn--text { display: grid; }
.ng-sc[data-type="text"] .ng-sc__btn--media, .ng-sc[data-polls="false"] .ng-sc__btn--poll { display: none; }
.ng-sc__btn[aria-pressed="true"] { background: #fff; color: hsl(220 14% 12%); }
/* desktop: the tool's name beside its button */
.ng-sc__tip {
  position: absolute; right: calc(100% + 8px); top: 50%; padding: 4px 10px; border-radius: 8px; background: rgb(0 0 0 / .72);
  font-size: 12px; font-weight: 600; white-space: nowrap; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
[dir="rtl"] .ng-sc__tip { right: auto; left: calc(100% + 8px); }
@media (hover: hover) { .ng-sc__btn:hover .ng-sc__tip { opacity: 1; } }

.ng-sc__bottom {
  position: absolute; inset: auto 0 0; z-index: 10; display: flex; align-items: center; gap: 8px;
  padding: 40px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(0 0 0 / .55), transparent);
}
.ng-sc__audience {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 999px;
  background: var(--ng-st-glass); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); cursor: pointer;
}
.ng-sc__audience:hover { background: var(--ng-st-glass-hover); }
.ng-sc__audience .ng-ico { width: 17px; height: 17px; }
.ng-sc__audience > .ng-ico:last-child { width: 14px; height: 14px; opacity: .7; }
.ng-sc__audience .js_composer-privacy-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-sc__pv, .ng-sc__ads-ico { display: none; }
.js_composer-privacy-icon[data-privacy="public"] .ng-sc__pv--public,
.js_composer-privacy-icon[data-privacy="friends"] .ng-sc__pv--friends,
.js_composer-privacy-icon[data-privacy="close_friends"] .ng-sc__pv--close_friends,
.ng-sc[data-ads="true"] .ng-sc__ads-ico { display: block; }
.js_composer-privacy-icon { display: inline-grid; }
.ng-sc .btn.ng-sc__post {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px hsl(var(--primary) / .35);
}
.ng-sc__post .ng-ico { width: 18px; height: 18px; }
[dir="rtl"] .ng-sc__post .ng-ico { transform: scaleX(-1); }
@media (max-width: 639px) { .ng-sc__post .ng-ico { display: none; } }

/* dragging a layer: the bin at the bottom */
.ng-sc__trash-zone { position: absolute; inset: auto 0 calc(24px + env(safe-area-inset-bottom)); z-index: 20; display: none; justify-content: center; pointer-events: none; }
.ng-sc[data-dragging="true"] .ng-sc__trash-zone { display: flex; }
.ng-sc__trash { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(0 0 0 / .55); backdrop-filter: blur(10px); transition: transform .15s ease, background-color .15s ease; }
.ng-sc__trash .ng-ico { width: 24px; height: 24px; }
.ng-sc__trash[data-active="true"] { transform: scale(1.25); background: var(--ng-red); }

/* the text editor */
.ng-sc__editor { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; background: rgb(0 0 0 / .65); backdrop-filter: blur(4px); }
.ng-sc[data-panel="text"] .ng-sc__editor { display: flex; }
.ng-sc__editor-top { display: flex; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top)) 12px 0; }
.ng-sc__done, .ng-sc .btn.ng-sc__sheet-done {
  height: 38px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700;
}
.ng-sc__done { background: hsl(var(--primary)); color: #fff; cursor: pointer; }
.ng-sc__done:hover { filter: brightness(1.1); }
.ng-sc__editor-mid { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 48px; }
.ng-sc__size { position: absolute; left: 12px; top: 50%; z-index: 1; display: flex; transform: translateY(-50%); }
[dir="rtl"] .ng-sc__size { left: auto; right: 12px; }
.ng-sc__size input { width: 24px; height: 160px; writing-mode: vertical-lr; direction: rtl; accent-color: #fff; cursor: pointer; }
.ng-sc__input {
  width: 100%; max-height: 100%; overflow-y: auto; padding: .2em .5em; border-radius: .35em; line-height: 1.35;
  overflow-wrap: anywhere; white-space: pre-wrap; outline: none; caret-color: #fff;
}
.ng-sc__input:empty::before { content: attr(data-placeholder); color: rgb(255 255 255 / .5); }
.ng-sc__editor-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.ng-sc__editor .ng-sc__row { display: none; }
.ng-sc__editor[data-option="font"] .ng-sc__row--font,
.ng-sc__editor[data-option="color"] .ng-sc__row--color,
.ng-sc__editor[data-option="background"] .ng-sc__row--background { display: flex; }
.ng-sc__textbar { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 28px; background: rgb(14 16 15 / .82); backdrop-filter: blur(10px); }
.ng-sc__tbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 16px; background: none; color: #fff; cursor: pointer; transition: background-color .15s ease; }
.ng-sc__tbtn:hover { background: rgb(255 255 255 / .1); }
.ng-sc__tbtn[aria-pressed="true"] { background: rgb(255 255 255 / .2); }
.ng-sc__tbtn .ng-ico { width: 22px; height: 22px; }
.ng-sc__wheel { display: block; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#ef4444, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #ef4444); box-shadow: 0 0 0 2px rgb(255 255 255 / .85); }
.ng-sc__al { display: none; }
.js_composer-align-icon { display: inline-grid; }
.js_composer-align-icon[data-align="start"] .ng-sc__al--start,
.js_composer-align-icon[data-align="center"] .ng-sc__al--center,
.js_composer-align-icon[data-align="end"] .ng-sc__al--end { display: block; }

/* rows of chips / swatches, scrolled sideways (arrows on desktop pointers) */
.ng-sc__row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.ng-sc__strip {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth;
  touch-action: pan-x; scrollbar-width: none;
}
.ng-sc__strip::-webkit-scrollbar { display: none; }
.ng-sc__rownav { display: flex; flex: none; gap: 4px; }
.ng-sc__rownav[data-scrollable="false"] { display: none; }
@media (pointer: coarse) { .ng-sc__rownav { display: none; } }
.ng-sc__chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .1); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ng-sc__chip:hover { background: rgb(255 255 255 / .18); }
.ng-sc__chip[aria-pressed="true"] { background: #fff; color: hsl(220 14% 12%); }
.ng-sc__chip .ng-ico { width: 17px; height: 17px; }
/* each font chip shows its own face */
.ng-sc__font--modern { font-family: var(--ng-font); }
.ng-sc__font--classic { font-family: "Playfair Display", Georgia, serif; }
.ng-sc__font--signature { font-family: "Dancing Script", "Brush Script MT", cursive; }
.ng-sc__font--editorial { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800; }
.ng-sc__font--typewriter { font-family: "Courier Prime", "Courier New", monospace; }
.ng-sc__font--neon { font-family: "Righteous", "Arial Rounded MT Bold", sans-serif; font-weight: 400; }
.ng-sc__swatches { gap: 8px; padding: 6px 4px; }
.ng-sc__swatch {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 2px solid rgb(255 255 255 / .5);
  border-radius: 50%; cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.ng-sc__swatch[aria-pressed="true"] { transform: scale(1.1); border-color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
.ng-sc__swatch--none { background: hsl(150 8% 14%); color: #fff; }
.ng-sc__swatch--none .ng-ico { width: 15px; height: 15px; }
.ng-sc__swatch--bg { width: 44px; height: 44px; }

/* the composer's sheets: dark glass over the story */
.ng-sc__sheet { background: var(--ng-st-sheet); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ng-sc__sheet--tall { height: 60%; }
.ng-sc__sheet[data-for="music"] { height: 78%; max-height: 78%; }
.ng-sc__sheet[data-for="poll"], .ng-sc__sheet[data-for="audience"] { max-height: 80%; }
@media (min-width: 640px) { .ng-st-sheet { padding-inline: 20px; } .ng-sc__sheet { border-radius: 28px 28px 0 0; } }
.ng-sc .ng-st-sheet__head h2 { color: rgb(255 255 255 / .85); font-size: 14px; }
.ng-sc[data-panel="stickers"] [data-for="stickers"], .ng-sc[data-panel="mention"] [data-for="mention"],
.ng-sc[data-panel="link"] [data-for="link"], .ng-sc[data-panel="draw"] [data-for="draw"],
.ng-sc[data-panel="filter"] [data-for="filter"], .ng-sc[data-panel="background"] [data-for="background"],
.ng-sc[data-panel="poll"] [data-for="poll"], .ng-sc[data-panel="audience"] [data-for="audience"],
.ng-sc[data-panel="music"] [data-for="music"] { transform: none; visibility: visible; }
.ng-sc__field {
  width: 100%; min-width: 0; height: 44px; flex: none; padding: 0 16px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px;
  background: rgb(255 255 255 / .1); color: #fff; font-size: 16px; outline: none;
}
@media (min-width: 768px) { .ng-sc__field { font-size: 14px; } }
.ng-sc__field::placeholder { color: rgb(255 255 255 / .6); }
.ng-sc__field:focus { border-color: rgb(255 255 255 / .6); }
.ng-sc__form-row { display: flex; align-items: center; gap: 8px; }
.ng-sc__form-row .ng-sc__field { flex: 1 1 0; }
.ng-sc .ng-st-sheet .btn-primary:not(.ng-sc__sheet-done) { height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; }
.ng-sc__poll { display: flex; flex-direction: column; gap: 10px; }
.ng-sc__emojis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 380px) { .ng-sc__emojis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ng-sc__emoji { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; background: none; font-size: 36px; line-height: 1; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.ng-sc__emoji:hover { background: rgb(255 255 255 / .1); }
.ng-sc__emoji:active { transform: scale(.9); }
.ng-sc__stickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1); }
.ng-sc__sticker-head { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.ng-sc__sticker-head + .ng-sc__stickers { margin-top: 8px; padding-top: 0; border-top: 0; }
.ng-sc__stickers button { aspect-ratio: 1; padding: 6px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.ng-sc__stickers button:hover { background: rgb(255 255 255 / .1); }
.ng-sc__stickers img { width: 100%; height: 100%; object-fit: contain; }
.ng-sc__people { display: flex; flex-direction: column; }
/* draw */
.ng-sc__drawbar { display: flex; align-items: center; gap: 8px; }
.ng-sc__link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: rgb(255 255 255 / .82); font-size: 14px; font-weight: 500; cursor: pointer; }
.ng-sc__link:hover { background: rgb(255 255 255 / .1); color: #fff; }
.ng-sc__link .ng-ico { width: 17px; height: 17px; }
.ng-sc__sizes { display: flex; align-items: center; gap: 8px; }
.ng-sc__bsize { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ng-sc__bsize[aria-pressed="true"] { background: rgb(255 255 255 / .2); }
.ng-sc__bsize span { display: block; border-radius: 50%; background: #fff; }
/* filters */
.ng-sc__filters { gap: 12px; padding: 4px; }
.ng-sc__filter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 64px; padding: 0; border: 0; background: none; color: rgb(255 255 255 / .7); font-size: 12px; cursor: pointer; }
.ng-sc__filter[aria-pressed="true"] { color: #fff; }
.ng-sc__filter .js_composer-filter-preview { display: block; width: 64px; height: 64px; border-radius: 18px; background: hsl(150 8% 16%) center / cover; }
.ng-sc__filter[aria-pressed="true"] .js_composer-filter-preview { box-shadow: 0 0 0 2px #fff; }
.ng-sc__filter .truncate { width: 100%; text-align: center; }
/* who can see it */
.ng-sc__privacy { display: flex; flex-direction: column; gap: 8px; }
.ng-sc__pick {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px; border: 1px solid rgb(255 255 255 / .1); border-radius: 16px;
  background: none; color: #fff; text-align: start; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.ng-sc__pick:hover { background: rgb(255 255 255 / .05); }
.ng-sc__pick[aria-pressed="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .18); }
.ng-sc__pick > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ng-sc__pick b { font-size: 14px; font-weight: 600; }
.ng-sc__pick small { font-size: 12px; color: rgb(255 255 255 / .62); }
.ng-sc__pick-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .1); }
.ng-sc .ng-sc__if-friends, .ng-sc[data-friends="true"] .ng-sc__if-nofriends, .ng-sc .ng-sc__if-admin, .ng-sc .ng-sc__if-library { display: none; }
.ng-sc[data-friends="true"] .ng-sc__if-friends, .ng-sc[data-admin="true"] .ng-sc__if-admin { display: flex; }
.ng-sc[data-library="true"] .ng-sc__if-library { display: inline-flex; }
.ng-sc__manage { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .ng-sc__manage { grid-template-columns: 1fr 1fr; } }
.ng-sc__manage .ng-sc__chip { justify-content: center; height: 40px; padding: 0 12px; }
/* music */
.ng-sc__track { display: flex; align-items: center; gap: 12px; flex: none; padding: 8px; border-radius: 16px; background: rgb(255 255 255 / .1); }
.ng-sc__track img, .ng-sc__trackpick img { width: 44px; height: 44px; flex: none; border-radius: 10px; background: rgb(255 255 255 / .1); object-fit: cover; }
.ng-sc__track > span, .ng-sc__tracktxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ng-sc__track b, .ng-sc__track small, .ng-sc__tracktxt b, .ng-sc__tracktxt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-sc__track b, .ng-sc__tracktxt b { font-size: 14px; font-weight: 600; }
.ng-sc__track small, .ng-sc__tracktxt small { font-size: 12px; color: rgb(255 255 255 / .65); }
.ng-sc__tabs { display: flex; gap: 8px; flex: none; }
.ng-sc__tabs .ng-sc__chip[aria-pressed="true"] { background: hsl(var(--primary)); color: #fff; }
.ng-sc__tracks { display: flex; flex-direction: column; }
.ng-sc__trackrow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.ng-sc__trackrow:hover { background: rgb(255 255 255 / .05); }
.ng-sc__trackrow .js_composer-music-play[aria-pressed="true"] .ng-sc__on { display: none; }
.ng-sc__trackrow .js_composer-music-play[aria-pressed="true"] .ng-sc__off { display: block; }
.ng-sc__trackpick { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: #fff; text-align: start; cursor: pointer; }
.ng-sc__trackmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: 11px; color: rgb(255 255 255 / .5); }
.ng-sc__trackmeta .js_composer-music-provider { padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .72); font-weight: 500; }
.ng-sc__loading { display: flex; justify-content: center; padding: 24px 0; }
.ng-sc__none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; font-size: 14px; color: rgb(255 255 255 / .6); text-align: center; }
.ng-sc__none .ng-ico { width: 32px; height: 32px; }
/* uploading */
.ng-sc__busy { position: absolute; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgb(0 0 0 / .7); backdrop-filter: blur(4px); font-size: 14px; font-weight: 500; }
.ng-sc[data-busy="true"] .ng-sc__busy { display: flex; }

/* ================================================================ */
/* the stories row in the feed (__ng_stories.tpl, __ng_stories_card.tpl): our 96 x 150 cards, v5's hooks   */
/* ================================================================ */
.ng-stories__strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ng-stories__strip::-webkit-scrollbar { display: none; }
.ng-stories__slide { flex: 0 0 96px; }
.ng-stories__slide.hidden { display: none; }
.ng-stories__card {
  position: relative; display: block; flex: 0 0 96px; width: 96px; height: 150px; margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: 16px; background-color: var(--ng-fill); text-align: start; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.ng-stories__card:active { transform: scale(.97); }
.ng-stories__card:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-stories__card::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .6)); box-shadow: inset 0 0 0 3px var(--ng-brand);
}
.ng-stories__card[data-seen="true"]::after { box-shadow: none; }
.ng-stories__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ng-stories__card:hover .ng-stories__img { transform: scale(1.05); }
.ng-stories__thumb { position: absolute; inset: 50% 0 auto; display: block; aspect-ratio: 9 / 16; transform: translateY(-50%); container-type: inline-size; pointer-events: none; }
.ng-stories__thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-stories__ava { position: absolute; top: 8px; left: 8px; z-index: 1; display: block; width: 32px; height: 32px; padding: 2px; border-radius: 50%; background: var(--ng-brand); }
.ng-stories__card[data-seen="true"] .ng-stories__ava { background: rgb(255 255 255 / .7); }
.ng-stories__ava img { display: block; width: 100%; height: 100%; border: 2px solid var(--ng-card); border-radius: 50%; object-fit: cover; }
.ng-stories__name {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.ng-stories__name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-stories__name .ng-ico { width: 13px; height: 13px; flex: none; }
/* "Create story": your picture on top, the green + over its edge, the label below */
.ng-stories__card--add { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 6px 12px; background: var(--ng-fill); }
.ng-stories__card--add::after { display: none; }
.ng-stories__card--add:hover { filter: brightness(.97); }
.ng-stories__me { position: absolute; inset: 0 0 52px; background: center / cover no-repeat; }
.ng-stories__plus {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--ng-fill);
  border-radius: 50%; background: var(--ng-brand); color: #fff; box-sizing: content-box; margin-top: -18px;
}
.ng-stories__plus .ng-ico { width: 20px; height: 20px; }
.ng-stories__card--add .ng-story__name { position: relative; z-index: 1; }

/* ---- the stories popups (ajax.stories.audience.tpl, ajax.stories.highlights.tpl): the theme's popup, list rows ---- */
.modal-title .ng-ico { width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: -3px; color: var(--ng-brand); }
.ng-st-audience__lede { margin: 0 0 12px; font-size: 14px; color: var(--ng-sub); }
.ng-st-audience__results:not(:empty) { margin-top: 6px; }
.ng-st-audience__list, .ng-st-hl__list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; }
.ng-st-audience__list .ng-st-person, .ng-st-hl__list .ng-st-person { cursor: default; }
.ng-st-audience__list form, .ng-st-hl__list form { margin: 0; flex: none; }
.ng-st-audience__empty { padding: 20px 8px; }
.ng-st-hl__cover {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(160 84% 39%));
}
.ng-st-hl__cover img { width: 100%; height: 100%; object-fit: cover; }
.ng-st-hl__cover .ng-ico { width: 20px; height: 20px; }
.ng-st-hl__list .btn .ng-ico { width: 15px; height: 15px; margin-inline-end: 4px; vertical-align: -2px; }
.ng-st-hl__del { flex: none; color: var(--ng-red); }
.ng-st-hl__new { display: flex; gap: 8px; }
.ng-st-hl__new .form-control { flex: 1 1 auto; min-width: 0; }

/* ---- Admin › Stories (admin.stories.tpl): the admin's card, with a stats grid and story / track thumbnails ---- */
.ng-st-admin__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-bottom: 1px solid var(--ng-line); }
@media (min-width: 992px) { .ng-st-admin__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ng-st-admin__stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--ng-fill); }
.ng-st-admin__stat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ng-st-admin__stat b { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ng-ink-strong); }
.ng-st-admin__stat small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ng-sub); }
.ng-st-admin__head { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ng-sub); }
.ng-st-admin__tabs { margin-bottom: 16px; max-width: 360px; }
.ng-st-admin__story { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.ng-st-admin__story > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ng-st-admin__story small { color: var(--ng-sub); }
.ng-st-admin__thumb { display: grid; place-items: center; flex: none; width: 36px; height: 56px; overflow: hidden; border-radius: 8px; background: var(--ng-fill); color: var(--ng-sub); }
.ng-st-admin__thumb--sq { width: 40px; height: 40px; }
.ng-st-admin__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ng-st-admin__thumb .ng-ico { width: 18px; height: 18px; }
.ng-st-admin__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ng-st-admin__audio { display: block; width: 220px; height: 36px; }
.ng-st-admin__search { max-width: 320px; margin-bottom: 16px; }
.ng-st-admin__empty { padding: 40px 16px; text-align: center; }

/* ---- /stories/archive (index.newsfeed.tpl "stories_archive"): the stories row's cards in a grid ---- */
.ng-st-archive { padding: 14px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-st-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ng-st-archive .ng-st-archive__card { width: 100%; height: auto; aspect-ratio: 9 / 14; }
.ng-st-archive__star { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fde047; }
.ng-st-archive__star .ng-ico { width: 14px; height: 14px; }
.ng-st-archive__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
.ng-st-archive__views { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; opacity: .85; }
.ng-st-archive__views .ng-ico { width: 13px; height: 13px; }
.ng-st-archive__more { display: flex; justify-content: center; margin-top: 14px; }
.ng-st-archive__empty { padding: 40px 16px; border-radius: var(--ng-r); background: var(--ng-card); text-align: center; }

/* ---- rings: a profile picture (profile.tpl) and a post's author picture (__feeds_post.tpl) with a live story ---- */
.ng-st-ring { position: relative; }
.ng-st-ring::before {
  content: ""; position: absolute; inset: -4px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 210deg, hsl(143 99% 30%), hsl(160 84% 39%), hsl(143 89% 48%), hsl(143 99% 30%));
}
.ng-st-ring[data-seen="true"]::before { background: var(--ng-line); }
.ng-st-ring > img { position: relative; z-index: 1; }
.ng-st-ring__open { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ng-st-ring__open:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 4px; }
/* niguro [Avatar menu] (owner, 2026-10-23): View story / View profile picture under the profile picture (profile.tpl) */
.ng-avmenu { z-index: 1060; min-width: 210px; background: var(--ng-card) !important; box-shadow: 0 0 0 1px var(--ng-line), var(--ng-shadow-lg, 0 8px 24px hsl(0 0% 0% / .25)) !important; }
.ng-avmenu .dropdown-item { color: var(--ng-ink-strong, var(--ng-ink)); }
.ng-avmenu .dropdown-item:hover, .ng-avmenu .dropdown-item:focus-visible { background: var(--ng-fill); }
.ng-avmenu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.ng-avmenu .dropdown-item .ng-ico { width: 20px; height: 20px; flex: none; }
/* highlights row on a profile */
.ng-st-hlrow { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.ng-st-hlrow::-webkit-scrollbar { display: none; }
.ng-st-hlrow__item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 72px; padding: 0; border: 0; background: none; color: var(--ng-ink); cursor: pointer; }
.ng-st-hlrow__cover {
  display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; padding: 3px;
  background: var(--ng-card); box-shadow: 0 0 0 2px var(--ng-line); color: var(--ng-brand);
}
.ng-st-hlrow__cover img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ng-st-hlrow__cover .ng-ico { width: 24px; height: 24px; }
.ng-st-hlrow__item:hover .ng-st-hlrow__cover { box-shadow: 0 0 0 2px var(--ng-brand); }
.ng-st-hlrow__title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; text-align: center; }
.post-avatar-picture.ng-st-avring { box-shadow: 0 0 0 2px var(--ng-card), 0 0 0 4px hsl(var(--primary)); }
.post-avatar-picture.ng-st-avring[data-seen="true"] { box-shadow: 0 0 0 2px var(--ng-card), 0 0 0 4px var(--ng-line); }

/* ---- a story reply in chat (__feeds_message.tpl), v5 Nova's layout in our colours: "Replied to your story"
   with the reply arrow, the story as a tall 112 x 192 card, and the message bubble overlapping its foot ---- */
.ng-st-reply { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 6px; }
.conversation.right .ng-st-reply { align-items: flex-end; }
.ng-st-reply:has(+ .clearfix) { margin-bottom: -20px; }
.ng-st-reply + .clearfix { position: relative; z-index: 1; }
.ng-st-reply__label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ng-sub); }
.ng-st-reply__label .ng-ico { width: 14px; height: 14px; }
.ng-st-reply__card {
  position: relative; display: block; width: 112px; height: 192px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(160 84% 39%)); transition: filter .15s ease, transform .15s ease;
}
.ng-st-reply__card:hover { filter: brightness(.95); }
.ng-st-reply__card:active { transform: scale(.98); }
.ng-st-reply__card img { width: 100%; height: 100%; object-fit: cover; }
.ng-st-reply__card > .ng-ico { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; }
.ng-st-reply__gone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; height: 96px; padding: 0 8px;
  border-radius: 16px; background: var(--ng-fill); color: var(--ng-sub); font-size: 12px; text-align: center;
}
.ng-st-reply__gone .ng-ico { width: 20px; height: 20px; }

/* a reaction floating up the story when it's tapped (stories.js) */
.ng-sv__fly {
  position: absolute; z-index: 25; width: var(--ng-fly-size, 40px); height: var(--ng-fly-size, 40px); margin-left: calc(var(--ng-fly-size, 40px) / -2);
  pointer-events: none; opacity: 0; animation: ng-sv-fly 1.2s cubic-bezier(.2, .7, .3, 1) var(--ng-fly-delay, 0ms) forwards;
}
@keyframes ng-sv-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; transform: translate(calc(var(--ng-fly-x) * .2), -40px) scale(1.15); }
  100% { opacity: 0; transform: translate(var(--ng-fly-x), -260px) scale(.9); }
}