/*
 * Niguro theme for Sngine — foundation.
 *
 * Loaded after the default theme's style.min.css and before the admin's
 * Design colours (_head.css.tpl), so Admin › Design still wins.
 * The look follows niguroapp (niguro.com): Theme Settings tokens, Fira Sans /
 * FiraGO / Cal Sans, flat white cards on a cool grey canvas, pill buttons,
 * soft shadows only on things that float (menus, popovers, modals).
 * Night mode is Sngine's body.night-mode (+ data-bs-theme="dark").
 */

/* ------------------------------- */
/* Fonts (self-hosted, OFL) */
/* ------------------------------- */

@font-face { font-family: "Fira Sans"; src: url(../fonts/FiraSans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fonts/FiraSans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fonts/FiraSans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fonts/FiraSans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fonts/FiraSans-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "FiraGO"; src: url(../fonts/FiraGO-400.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "FiraGO"; src: url(../fonts/FiraGO-600.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Cal Sans"; src: url(../fonts/CalSans-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

/* ------------------------------- */
/* Tokens (niguro Theme Settings defaults, as on niguro.com) */
/* ------------------------------- */

/* Brand accent = niguro.com's saved Theme Settings accent #01983b (hsl 143 99% 30%), the same shade in day and
   night (niguro: "primary controls keep the Brand Accent in both modes, never brightened"); day tints use its hue 143.
   Night surfaces use the Dark Mode Accent's hue (#0b5f2d -> 144). (user, 2026-10-17) */
:root {
  --ng-field-h: 40px; /* one-line fields and the buttons that sit beside them (user, 2026-10-17) */
  --background: 214 24% 94.3%;
  --foreground: 220 10% 30%;
  --card: 0 0% 100%;
  --primary: 143 99% 30%;
  --primary-foreground: 0 0% 100%;
  --muted: 143 25% 93%;
  --muted-foreground: 0 0% 45%;
  --accent: 143 30% 95%;
  --border: 143 20% 90%;
  --destructive: 2 72% 52%;

  --ng-ink-strong: hsl(220 14% 20%);
  --ng-red: hsl(2 72% 52%);
  --ng-shadow-lg: 0 8px 28px hsl(30 20% 10% / .10);
  --ng-r: 18px;
  --ng-r-md: 14px;
  --ng-r-sm: 12px;
  --ng-font: "Fira Sans", "FiraGO", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ng-font-ne: "FiraGO", "Fira Sans", ui-sans-serif, system-ui, sans-serif;
  --ng-font-brand: "Cal Sans", var(--ng-font);

  /* Sngine's own variables */
  --body-font-family: var(--ng-font);
  --body-bg-color: hsl(214 24% 94.3%);
  --body-bg-color-dark: hsl(143 45% 6%);
  --body-color: hsl(220 10% 30%);
  --body-color-dark: hsl(0 0% 97%);
  --link-color: hsl(143 99% 30%);
  --header-bg-color: #fff;
  --header-bg-color-dark: hsl(143 40% 9%);
  --card-dark-color: hsl(143 40% 9%);
  --card-dark-divider: hsl(143 35% 18%);
  --card-dark-hover: hsl(143 35% 14%);
  --card-dark-input: hsl(143 35% 14%);
  --card-dark-input-color: hsl(0 0% 97%);
  --plyr-color-main: hsl(143 99% 30%);

  /* Bootstrap 5.3 */
  --bs-primary: hsl(143 99% 30%);
  --bs-primary-rgb: 1, 152, 59;
  --bs-link-color: hsl(143 99% 30%);
  --bs-link-color-rgb: 1, 152, 59;
  --bs-link-hover-color: hsl(143 99% 25%);
  --bs-link-hover-color-rgb: 3, 150, 40;
  --bs-body-font-family: var(--ng-font);
  --bs-body-bg: hsl(214 24% 94.3%);
  --bs-body-color: hsl(220 10% 30%);
  --bs-border-color: hsl(143 20% 90%);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: 18px;
  --bs-focus-ring-color: hsl(143 99% 30% / .25);
}

/* Derived tokens are declared on body too, so they resolve with body.night-mode's
   triplets (a custom property is computed where it is declared). */
:root, body {
  --ng-canvas: hsl(var(--background));
  --ng-card: hsl(var(--card));
  --ng-ink: hsl(var(--foreground));
  --ng-sub: hsl(var(--muted-foreground));
  --ng-faint: hsl(var(--muted-foreground) / .75);
  --ng-line: hsl(var(--border));
  --ng-fill: hsl(var(--muted));
  --ng-fill-2: hsl(var(--accent));
  --ng-brand: hsl(var(--primary));
  --ng-tint: hsl(var(--primary) / .1);
  /* icon tiles, one accent everywhere (niguroapp's mono tints): this behind a --ng-brand icon */
  /* [Flat cards] (owner, 2026-10-19): niguroapp's own tile values (app.css .na-svc__ico with the mono tint hue 143),
     opaque instead of a see-through brand wash, so tiles read the same calm tint on every surface: day 143 75% 95%,
     night 143 25% 17% (was hsl(var(--primary) / .1) day, / .15 night, which went greener and brighter at night) */
  --ng-tile: hsl(143 75% 95%);
}
body.night-mode { --ng-tile: hsl(143 25% 17%); }
/* the verified badge (__svg_icons.tpl verified_badge, everywhere): the bright accent, as vivid as Sngine's blue was
   (owner, 2026-10-18) */
:root, body { --ng-verified: hsl(143 89% 38%); }
body.night-mode { --ng-verified: hsl(143 75% 48%); }

/* night surfaces = the parent niguro dark palette, as live niguro.com renders it (read 2026-10-17):
   deep greens on the accent hue 143 — background 45% 6%, card 40% 9%, muted 35% 14%, border 35% 18% */
body.night-mode {
  --background: 143 45% 6%;
  --foreground: 0 0% 97%;
  --card: 143 40% 9%;
  --primary: 143 99% 30%;
  --muted: 143 35% 14%;
  --muted-foreground: 143 12% 62%;
  --accent: 143 40% 18%;
  --border: 143 35% 18%;
  --destructive: 2 80% 64%;
  --ng-ink-strong: hsl(0 0% 98%);
  --ng-red: hsl(2 80% 64%);
  --ng-shadow-lg: 0 8px 28px hsl(0 0% 0% / .38);
  --link-color: hsl(143 99% 30%);
  --plyr-color-main: hsl(143 99% 30%);
  --bs-primary: hsl(143 99% 30%);
  --bs-primary-rgb: 1, 152, 59;
  --bs-link-color: hsl(143 99% 30%);
  --bs-link-color-rgb: 1, 152, 59;
  --bs-body-bg: hsl(143 45% 6%);
  --bs-body-color: hsl(0 0% 97%);
  --bs-border-color: hsl(143 35% 18%);
}

/* ------------------------------- */
/* Base */
/* ------------------------------- */

html, body, * { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  font-family: var(--ng-font);
  color: var(--ng-ink);
  background-color: var(--ng-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.night-mode { color: var(--ng-ink); background-color: var(--ng-canvas); }
html[lang^="ne"] body, [lang^="ne"] { font-family: var(--ng-font-ne); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ng-ink-strong); letter-spacing: -.01em; }
body.night-mode :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--ng-ink-strong); }
a { color: var(--ng-brand); }
::selection { background: hsl(var(--primary) / .2); }
:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

/* ------------------------------- */
/* Sngine's hard-coded purple (#5e72e4) and dark greys, swapped for tokens */
/* ------------------------------- */

.main-icon, .main-icon *, .x-form-tools,
body.night-mode .main-icon, body.night-mode .main-icon *, body.night-mode .x-form-tools { color: var(--ng-brand) !important; fill: var(--ng-brand) !important; }
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle { color: hsl(var(--primary-foreground)); border-color: var(--ng-brand); background-color: var(--ng-brand); }
.btn-primary:hover, .btn-primary:focus { color: hsl(var(--primary-foreground)); border-color: var(--ng-brand); background-color: var(--ng-brand); filter: brightness(1.06); }
.btn-outline-primary { color: var(--ng-brand); border-color: var(--ng-brand); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle { color: hsl(var(--primary-foreground)); border-color: var(--ng-brand); background-color: var(--ng-brand); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--ng-brand); }
.bg-primary { background: var(--ng-brand) !important; }
.text-primary { color: var(--ng-brand) !important; }
.bg-gradient-primary, .bg-gradient-blue { background: linear-gradient(87deg, var(--ng-brand) 0, hsl(150 80% 28%) 100%) !important; }
body.night-mode .btn-secondary { border-color: var(--card-dark-color); background-color: var(--card-dark-color); }
body.night-mode .card-balance { background-color: var(--card-dark-divider); }
body.night-mode .blog-references-section { border-color: var(--card-dark-divider); }
body.night-mode .blog-references-heading { border-bottom-color: var(--card-dark-divider); }
.conversation-body .text { background: var(--ng-canvas); }
body.night-mode .fake-effect { background: var(--card-dark-color); }

/* Sngine's colourful icons use the purple as their accent: make it Niguro green. */
svg [fill="#5e72e4" i] { fill: var(--ng-brand); }
svg [stroke="#5e72e4" i] { stroke: var(--ng-brand); }

/* ------------------------------- */
/* Cards */
/* ------------------------------- */

.card { border: 0; border-radius: var(--ng-r); background: var(--ng-card); box-shadow: none; }
body.night-mode .card { background: var(--ng-card); color: var(--ng-ink); }
.card-header { border-radius: var(--ng-r) var(--ng-r) 0 0 !important; background: transparent; }
.card-footer { border-radius: 0 0 var(--ng-r) var(--ng-r) !important; }
.card-header, .card-header strong { color: var(--ng-ink-strong); }

/* ------------------------------- */
/* Buttons */
/* ------------------------------- */

.btn { border-radius: 999px; font-weight: 700; letter-spacing: 0; }
.btn-light { background: var(--ng-fill); border-color: transparent; color: var(--ng-ink); }
.btn-light:hover { background: var(--ng-fill-2); border-color: transparent; color: var(--ng-ink); }
body.night-mode .btn-light { background: var(--ng-fill); color: var(--ng-ink); }

/* ------------------------------- */
/* Forms */
/* ------------------------------- */

/* niguroapp's fields: filled, no border until focus, 12px corners */
.form-control, .form-select {
  min-height: var(--ng-field-h); padding: 8px 14px; font-size: 15px; line-height: 1.4; border: 1.5px solid transparent; border-radius: var(--ng-r-sm); background-color: var(--ng-fill); color: var(--ng-ink);
  box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
/* one-line fields are exactly the field height (Sngine pages sometimes add their own padding) */
input.form-control:not([type="file"]):not([type="range"]):not([type="color"]):not(.form-control-sm):not(.form-control-lg), select.form-select:not([multiple]):not([size]):not(.form-select-sm):not(.form-select-lg) { height: var(--ng-field-h); padding-top: 0; padding-bottom: 0; }
.form-select { padding-right: 38px; }
.input-group-text { padding: 0 14px; }
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control:hover, .form-select:hover { background-color: var(--ng-fill-2); }
.form-control:focus, .form-select:focus { border-color: transparent; background-color: var(--ng-card); color: var(--ng-ink); box-shadow: none; outline: none; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ng-fill); opacity: .85; }
.form-control::placeholder { color: var(--ng-faint); }
.input-group > .form-control, .input-group > .form-select { min-height: var(--ng-field-h); }
.input-group > .btn { border: 0; background: var(--ng-fill-2); color: var(--ng-ink); }
.form-check-input:checked { background-color: var(--ng-brand); border-color: var(--ng-brand); }
.form-check-input:focus { box-shadow: none; outline: none; }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e"); }
/* Sngine's on/off switch: 40x24 (small 32x18), a round knob, brand when on (user, 2026-10-17: smaller) */
.switch { width: 40px; height: 24px; flex: none; vertical-align: middle; }
.switch .slider { border-radius: 999px; background-color: var(--ng-faint); transition: background-color .2s ease; }
body.night-mode .switch .slider { background-color: var(--ng-fill-2); }
.switch .slider:before { width: 18px; height: 18px; left: 3px; bottom: 3px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 3px hsl(0 0% 0% / .25); transition: transform .2s ease; }
.switch input:checked + .slider { background-color: var(--ng-brand); }
.switch input:checked + .slider:before { transform: translateX(16px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
.switch input:focus + .slider { box-shadow: none; }
.switch.sm { width: 32px; height: 18px; }
.switch.sm .slider:before { width: 14px; height: 14px; left: 2px; bottom: 2px; }
.switch.sm input:checked + .slider:before { transform: translateX(14px); }

/* ------------------------------- */
/* Floating surfaces: dropdowns, popovers, modals, toasts */
/* ------------------------------- */

.dropdown-menu { border: 0; border-radius: var(--ng-r-md); box-shadow: var(--ng-shadow-lg); padding: 6px; }
.dropdown-item { border-radius: 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ng-fill); }
.dropdown-item.active, .dropdown-item:active { background: var(--ng-brand); color: hsl(var(--primary-foreground)); }
body.night-mode .dropdown-menu { background: var(--ng-card); }
body.night-mode .dropdown-item:hover, body.night-mode .dropdown-item:focus { background: var(--ng-fill); }
.popover { border: 0; border-radius: var(--ng-r-md); box-shadow: var(--ng-shadow-lg); }
/* popups are white in day mode (the card colour), like the header sheets */
.modal-content { border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.modal-header { border-bottom-color: var(--ng-line); }
.modal-footer { border-top-color: var(--ng-line); }

/* ------------------------------- */
/* Small bits */
/* ------------------------------- */

.badge.bg-danger, .counter.red { background-color: var(--ng-red) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ng-brand); }
.page-item.active .page-link { background-color: var(--ng-brand); border-color: var(--ng-brand); }
.page-link { color: var(--ng-brand); }
.progress-bar { background-color: var(--ng-brand); }

/* ------------------------------- */
/* Icons */
/* ------------------------------- */

.ng-ico { display: block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ng-when-night { display: none !important; }
body.night-mode .ng-when-day { display: none !important; }
body.night-mode .ng-when-night { display: grid !important; }
.ng-when-day, .ng-when-night { display: grid; place-items: center; }
@media (max-width: 1023.98px) { .ng-only-desk { display: none !important; } }
@media (min-width: 1024px) { .ng-no-desk { display: none !important; } }

/* ------------------------------- */
/* Shell: header (56px, niguroapp's cloud edge) */
/* ------------------------------- */

body { padding-top: 56px; }
body.n_activated, body.n_live { padding-top: 106px; }

/* [Watch] the header search field's shadows, shared with the /watch header's field (css/pages/watch.css) */
.main-header.ng-top, .ngw-top {
  --ng-search-shadow: 0 1px 2px hsl(220 10% 12% / .03), 0 2px 8px hsl(220 10% 12% / .04);
  --ng-search-shadow-focus: 0 1px 2px hsl(220 10% 12% / .04), 0 3px 12px hsl(220 10% 12% / .06);
}
body.night-mode .main-header.ng-top, body.night-mode .ngw-top {
  --ng-search-shadow: 0 1px 2px hsl(0 0% 0% / .16), 0 2px 10px hsl(0 0% 0% / .14);
  --ng-search-shadow-focus: 0 1px 3px hsl(0 0% 0% / .2), 0 4px 14px hsl(0 0% 0% / .2);
}
/* [Watch] end */
.main-header.ng-top {
  --ng-hdr: var(--ng-card);
  height: 56px; padding: 0; background: transparent !important; box-shadow: none !important; isolation: isolate;
}
body.night-mode .main-header.ng-top {
  background: transparent !important; box-shadow: none !important;
}
/* [perf: header cloud] The bar and its cloud are one surface: the bar's background lives in ::after and
   the round puffs (as on niguro.com) hang 13px below it in .ng-top__cloud (_header.tpl): a 2px band and
   two rows of circles (30px and 64px apart) drifting opposite ways at the old speeds (30px/14s and
   64px/14.336s = 300px and 625px per 140s). They move by transform, on the compositor; the old
   mask-position animation repainted the bar and kept the main thread busy on every page. */
.main-header.ng-top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none;
  background: var(--ng-hdr);
}
/* [Cloud: instant theme] (owner, 2026-10-19): the cloud switches day / night in the same frame as its bar. The
   puffs were currentColor gradients behind a .2s colour transition: on a switch the bar flipped at once and the
   cloud faded after it (and an engine that keeps a pseudo-element's currentColor gradient once painted showed the
   old colour until a reload). Now the 2px band (inset shadow) and both rows of puffs paint the --ng-cloud token
   as a plain colour, the puffs' shapes being a fixed black mask: no colour is baked into an image and nothing
   transitions on a theme switch. Only the dim fades, as the bar's own dim layer does ([Header dim: one rule]):
   the registered --ng-cloud-dim percentage transitions, the colour it mixes into follows --ng-hdr at once. */
@property --ng-cloud-dim { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.ng-top__cloud {
  --ng-cloud: var(--ng-hdr);
  position: absolute; left: 0; right: 0; top: 100%; height: 13px; z-index: -1; overflow: hidden; pointer-events: none;
  box-shadow: inset 0 2px var(--ng-cloud); transition: --ng-cloud-dim .2s;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ng-top__cloud { --ng-cloud: color-mix(in srgb, rgb(8 12 18) var(--ng-cloud-dim), var(--ng-hdr)); }
}
.ng-top__cloud::before, .ng-top__cloud::after {
  content: ""; position: absolute; top: 0; bottom: 0; background-color: var(--ng-cloud);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.ng-top__cloud::before {
  left: -60px; right: -60px;
  -webkit-mask-image: radial-gradient(circle at 50% -5px, #000 0 12px, transparent 12.5px); mask-image: radial-gradient(circle at 50% -5px, #000 0 12px, transparent 12.5px);
  -webkit-mask-size: 30px 13px; mask-size: 30px 13px; -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: ng-hdr-puffs-a 14s linear infinite;
}
.ng-top__cloud::after {
  left: -64px; right: -64px;
  -webkit-mask-image: radial-gradient(circle at 50% -10px, #000 0 21px, transparent 21.5px); mask-image: radial-gradient(circle at 50% -10px, #000 0 21px, transparent 21.5px);
  -webkit-mask-size: 64px 13px; mask-size: 64px 13px; -webkit-mask-position: 15px 0; mask-position: 15px 0;
  animation: ng-hdr-puffs-b 14.336s linear infinite;
}
/* [/Cloud: instant theme] */
@keyframes ng-hdr-puffs-a { from { transform: translateX(0); } to { transform: translateX(30px); } }
@keyframes ng-hdr-puffs-b { from { transform: translateX(0); } to { transform: translateX(-64px); } }
@media (prefers-reduced-motion: reduce) { .ng-top__cloud::before, .ng-top__cloud::after { animation: none; } }
/* [/perf: header cloud] */
/* [perf: off-screen] niguro-perf.js marks the card / section around a looping animation .ng-offscreen while it
   is off screen: the animations inside wait there and go on from the same frame when it comes back */
.ng-offscreen, .ng-offscreen::before, .ng-offscreen::after,
.ng-offscreen *, .ng-offscreen *::before, .ng-offscreen *::after { animation-play-state: paused !important; }
/* [perf: far posts] a feed post more than 1500px from the screen is skipped at its measured height (niguro-perf.js
   sets both); near the screen it is an ordinary post again */
.js_posts_stream > ul > li.ng-far { content-visibility: auto; }
/* [perf: video] once Plyr has a video, Chrome's own controls are never shown; display: none on them also stops
   their loading-spinner animations, which otherwise kept the page redrawing every frame */
.plyr video::-webkit-media-controls, .plyr video::-webkit-media-controls-enclosure { display: none !important; }

.ng-top__in { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; }
@media (min-width: 640px) { .ng-top__in { gap: 10px; padding: 0 12px 0 8px; } }

/* start: menu button + logo */
.ng-top__lang { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ng-top__lang > li { margin: 0; }
.ng-top__lang .ng-langbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px; background: var(--ng-fill); color: var(--ng-ink); font-weight: 700; font-size: 14px; font-family: var(--ng-font-ne); line-height: 1; white-space: nowrap; cursor: pointer; }
.ng-top__lang .ng-langbtn:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-top__lang .ng-langbtn:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.main-header .ng-top__start { display: flex; align-items: center; gap: 2px; flex: none; height: auto; padding: 0; overflow: visible; }
.main-header .ng-top__start .menu-icon { top: auto; left: auto; height: 44px; padding: 0; border-radius: 50%; }
.main-header .ng-logo { display: flex; align-items: center; height: 44px; padding: 0 6px; line-height: 1; font-size: inherit; }
.main-header .ng-logo img { max-height: 32px; width: auto; }
.ng-wordmark { font-family: var(--ng-font-brand); font-weight: 700; font-size: 25px; letter-spacing: -.01em; line-height: 1; color: hsl(143 99% 24%); white-space: nowrap; }
body.night-mode .ng-wordmark { color: #fff; }

/* search */
.ng-top__search { flex: 1; min-width: 0; display: flex; justify-content: center; }
.ng-top__search .search-wrapper { width: 100%; max-width: 640px; }
/* [Layout: header search] phones and tablets: no search field in the bar (the search button, .ng-fab, opens the
   search there), as on phones before (user, 2026-10-18) */
@media (max-width: 1023.98px) { .ng-top__search { display: none; } }
/* niguroapp's bar field (app.css .na-search__form + zz-search-focus.css), day and night: the card colour,
   no border, 14.5px text, the icon 18px at 14px, the text from 40px. Its soft shadow (--ng-search-shadow,
   more while focused) is on the form in css/pages/search.css: fields themselves never get one here. */
.main-header .search-wrapper .form-control,
body.night-mode .main-header .search-wrapper .form-control {
  height: 42px; margin: 0; padding: 0 16px 0 40px; border: 0; border-radius: 999px;
  background: var(--ng-card); color: var(--ng-ink); font-size: 14.5px;
}
.main-header .search-wrapper .form-control::placeholder,
body.night-mode .main-header .search-wrapper .form-control::placeholder { color: var(--ng-faint); opacity: 1; }
.main-header .search-input-icon { top: 50%; left: 14px; right: auto; transform: translateY(-50%); line-height: 0; }
.main-header .search-input-icon .header-icon, .main-header .search-input-icon .header-icon * { fill: var(--ng-sub) !important; color: var(--ng-sub) !important; }

/* actions */
.main-header .ng-top__actions { flex: none; margin-left: auto; }
.ng-top__actions > ul { display: flex; align-items: center; gap: 2px; margin: 0; }
.ng-top__actions > ul > li { flex: none; margin: 0; text-align: center; }
.ng-top__actions > ul > li > a:not(.btn),
.main-header .ng-top__start .menu-icon {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border-radius: 50%; line-height: 1; color: var(--ng-sub); background: transparent;
}
.ng-top__actions > ul > li > a:not(.btn):hover,
.ng-top__actions > ul > li.dropdown.show > a:not(.btn),
.main-header .ng-top__start .menu-icon:hover { background: var(--ng-fill); color: var(--ng-ink); }
body.night-mode .ng-top__actions > ul > li.dropdown.show > a:not(.btn) { background: var(--ng-fill); }
.ng-top__actions > ul > li > a.ng-langbtn,
.ng-top__actions > ul > li > button.ng-langbtn {
  width: auto; height: 36px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ng-fill); color: var(--ng-ink); font-weight: 700; font-size: 14px; font-family: var(--ng-font-ne);
}
/* niguro i18n: the switch is a <button> (cookie only, __ng_lang_switch.tpl) */
.ng-top__actions > ul > li > button.ng-langbtn { position: relative; margin: 0; border: 0; line-height: 1; white-space: nowrap; cursor: pointer; }
.ng-top__actions > ul > li > button.ng-langbtn:hover,
.ng-top__actions > ul > li.dropdown.show > button.ng-langbtn { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-top__actions > ul > li > button.ng-langbtn:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-langbtn[aria-busy="true"], .ng-mitem[aria-busy="true"] { opacity: .6; cursor: progress; }
.ng-langbtn .ng-ico { width: 18px; height: 18px; }
.navbar-wrapper.ng-top__actions .counter {
  position: absolute; top: 6px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--ng-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--ng-hdr) !important;
}
.navbar-wrapper.ng-top__actions .js_live-messages .counter { background: var(--ng-brand); }
.ng-you .user-menu > img { width: 34px; height: 34px; margin: 0; border-radius: 50%; object-fit: cover; }
.ng-you .user-menu.dropdown-toggle::after, .ng-you .user-menu .title { display: none; }
.ng-signin.btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; font-size: 14px; }
/* guests: a round avatar icon (to /nid) in the avatar's place */
.navbar-wrapper.ng-top__actions .ng-you .ng-guest-ava { display: grid; margin: 5px; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ng-fill); color: var(--ng-sub); }
.navbar-wrapper.ng-top__actions .ng-you .ng-guest-ava:hover { background: var(--ng-fill-2); color: var(--ng-ink); }
.ng-guest-ava .ng-ico { width: 18px; height: 18px; }
/* niguro [shared header buttons] (2026-10-18): one round-button look for every header. The site header's actions
   (.ng-top__actions > ul > li > a, above; [phone app header] below) are the source; the pages with their own header
   (/news, /watch, /maps, /radio) use them too: guests' language and day / night come from __ng_hdr_prefs.tpl inside
   a .ng-top__actions list (.ng-hdr-prefs), the news desk link is an <li> of that list, and the other header icon
   buttons (Watch's menu, back and phone search) take .ng-hbtn, the same 44px circle, colours, hover and focus as the
   site header's menu button; .ng-hbtn--act is a right-hand action, filled 40px on phones as the site header's. */
/* [Round buttons: one look] (2026-10-18): .ng-iconbtn (the in-page round icon buttons: sheets, the composer,
   stories, admin) is the same 44px circle as .ng-hbtn, so both take this one rule; they differ only in display
   (.ng-iconbtn is a block-level grid, below) and .ng-hbtn's reset for links. */
.ng-hbtn, .ng-iconbtn {
  position: relative; place-items: center; flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ng-sub);
}
.ng-hbtn { display: inline-grid; margin: 0; padding: 0; line-height: 1; cursor: pointer; }
.ng-hbtn:hover, .ng-hbtn[aria-expanded="true"], .ng-iconbtn:hover { background: var(--ng-fill); color: var(--ng-ink); }
.ng-hbtn:focus-visible,
.ng-top__actions > ul > li > a:not(.btn):focus-visible,
.main-header .ng-top__start .menu-icon:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-hdr-prefs { flex: none; }
/* the language icon keeps its 18px on pages whose css sizes every icon (.ngw .ng-ico, .ng-news …) */
.ng-top__actions > ul > li > button.ng-langbtn .ng-ico { width: 18px; height: 18px; }
.ng-hdr-prefs > ul { padding: 0; list-style: none; }
/* on the map there is no bar under them: a card fill and shadow, as the map's avatar (maps.css) */
.ngm-bar .ng-hdr-prefs > ul > li > a:not(.btn),
.ngm-bar .ng-hdr-prefs > ul > li > button.ng-langbtn { background: var(--ng-card); color: var(--ng-ink); box-shadow: var(--ng-shadow-lg); }
.ngm-bar .ng-hdr-prefs > ul > li > a:not(.btn):hover,
.ngm-bar .ng-hdr-prefs > ul > li > button.ng-langbtn:hover { background: var(--ng-fill); }
@media (max-width: 767.98px) {
  .ng-hbtn--act { width: 40px; height: 40px; background: var(--ng-fill); color: var(--ng-ink); }
  .ng-hbtn--act:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
  .ng-hbtn--act .ng-ico { width: 20px; height: 20px; }
  /* guests' language button round, as [phone app header] makes it in the site header */
  .ng-hdr-prefs > ul > li > button.ng-langbtn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; font-size: 15px; }
  .ng-hdr-prefs .ng-langbtn .ng-ico { display: none; }
}
/* [/shared header buttons] */
/* niguro [phone app header] (owner, 2026-10-18): phones only (under 768px; tablets and desktop unchanged), an
   app-like bar. It replaces the centred-logo grid that was here. Top row (56px): the 2×2 menu button and the logo
   on the left; on the right round soft-filled buttons, Search (opens the search overlay, it left the bottom bar),
   Messages and Notifications with their unread counts. The avatar moved to the bottom bar (its toggle stays here,
   hidden, so the bottom bar's avatar opens this same "You" sheet); members find day / night in that sheet's
   Appearance card, guests keep the language and day / night buttons here. Second row (40px): the section links
   (.ng-top__links, _header.tpl), one sideways-scrolling row of icon + label, the current one in the accent colour.
   The bar is 96px; the cloud edge hangs under it as before. The home's Search mode keeps its 56px corner bar. */
.ng-top__links { display: none; }
@media (max-width: 767.98px) {
  .ng-top__search { display: none; }
  body { padding-top: 96px; --ng-top: 96px; }
  body.n_activated, body.n_live { padding-top: 146px; }
  body.ng-home-search { padding-top: 56px; --ng-top: 56px; }
  body.ng-home-search.n_activated, body.ng-home-search.n_live { padding-top: 106px; }
  .main-header.ng-top { height: 96px; }
  body.ng-home-search .main-header.ng-top { height: 56px; }
  .ng-top__in { height: 56px; gap: 8px; padding: 0 8px 0 4px; }
  .main-header .ng-top__start { gap: 0; min-width: 0; }
  .main-header .ng-logo { padding: 0 4px; }
  .main-header .ng-top__actions { margin-left: auto; }
  .ng-top__actions > ul { gap: 8px; }
  /* the round soft-filled buttons (not the avatar, which the home's Search mode still shows) */
  .ng-top__actions > ul > li:not(.ng-you) > a:not(.btn) { width: 40px; height: 40px; background: var(--ng-fill); color: var(--ng-ink); }
  .ng-top__actions > ul > li:not(.ng-you) > a:not(.btn):hover,
  .ng-top__actions > ul > li.dropdown.show:not(.ng-you) > a:not(.btn) { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
  .ng-top__actions > ul > li > a:not(.btn) .ng-ico { width: 20px; height: 20px; }
  .navbar-wrapper.ng-top__actions .counter { top: -3px; right: -4px; }
  /* hidden toggles take no room (their sheets are fixed, so they still open): the requests bell (opened from the
     notifications sheet) and the member's avatar (opened from the bottom bar) */
  .ng-top__actions > ul > li.ng-requests { display: contents; }
  body:not(.visitor):not(.ng-home-search) .ng-top__actions > ul > li.ng-you { display: contents; }
  body:not(.visitor):not(.ng-home-search) .ng-top__actions > ul > li.ng-you > .user-menu { display: none; }
  body.visitor:not(.ng-home-search) .ng-top__actions > ul > li.ng-you { display: none; }
  /* members: no language or day / night button in the bar on any page (results page and the home's Search mode
     too); both are in the avatar's "You" sheet. !important and the extra classes beat home.css's Search-mode list. */
  html body:not(.visitor) .main-header .ng-top__actions > ul > li:is(.ng-theme-li, .ng-lang-li),
  html body:not(.visitor) .main-header .ng-top__lang { display: none !important; }
  /* the home's Search mode (members): its avatar stays (that page has no bottom bar). niguro [Search home header]
     (owner, 2026-10-19): Search, Messages and Notifications are no longer brought back there; the bar is the home
     switch and the avatar at every width (home.css [Search home header]) */
  /* guests: language and day / night as round buttons too; the language one shows its short name (ने / EN) */
  .main-header .ng-top__actions > ul > li > button.ng-langbtn,
  .main-header .ng-top__lang .ng-langbtn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; font-size: 15px; }
  .main-header .ng-langbtn .ng-ico { display: none; }
  /* the results page's language switch (guests) stays after the menu button */
  .main-header .ng-top__lang { margin: 0; }
  .main-header .ng-top__lang + .ng-logo { padding: 0 2px 0 6px; }
  /* second row: the section links */
  .ng-top__links {
    display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 6px 2px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .ng-top__links::-webkit-scrollbar { display: none; }
  .ng-top__link {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 999px;
    color: var(--ng-sub); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  }
  .ng-top__link .ng-ico { width: 18px; height: 18px; }
  .ng-top__link:hover, .ng-top__link:focus { color: var(--ng-ink); text-decoration: none; }
  .ng-top__link.is-active, .ng-top__link.is-active:hover { color: var(--ng-brand); }
  .ng-top__link:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: -2px; }
  body.ng-home-search .ng-top__links { display: none; }
  /* niguro [phone header links] (2026-10-18): no links row (the search results page, or every destination is off
     or already in the bottom bar; _header.tpl adds body.ng-no-toplinks): the one-row 56px bar, as the Search mode */
  body.ng-no-toplinks { padding-top: 56px; --ng-top: 56px; }
  body.ng-no-toplinks.n_activated, body.ng-no-toplinks.n_live { padding-top: 106px; }
  body.ng-no-toplinks .main-header.ng-top { height: 56px; }
  /* [/phone header links] */
}
@media (min-width: 768px) { .ng-top__actions > ul > li.ng-msearch-li { display: none; } }
/* [/phone app header] */
/* niguro [Header sizes] (owner, 2026-10-19): one size, icon, gap and fill for every header button, guests and
   members, in every header: the site header (menu, search, language, day / night, create, requests, messages,
   notifications, avatar), the search results header, and the /news, /watch, /maps and /radio headers.
     - size: 40px circles on phones (under 768px), 44px from 768px (--ng-hbtn-size);
     - icon: 20px at every width (--ng-hbtn-ico);
     - gap: 8px between buttons at every width (--ng-hbtn-gap), also between a header's button groups;
     - fill: clear at every width (hover --ng-fill), as niguro.com; the language button and phones' guest avatar keep
       the soft fill; this was phones soft-filled before, as the site
       header's [phone app header] / [shared header buttons] already drew most of them; the map keeps its card
       fill at every width (its buttons float over the map, maps.css [Maps header]);
     - language: a 40px circle with the short name on phones, a pill as tall as the round buttons (44px) from 768px;
     - avatar: the toggle is the button size; the photo (and the guests' avatar disc) 34px inside it, so its edge
       lines up with the others' hover circle; on phones (and on the map) the guests' avatar is a full button.
   !important on the sizes only: page css (watch .ngw .ng-ico, news 1em icons, serp's 12px-corner day / night,
   maps' 40px) sized them one by one. */
:root { --ng-hbtn-size: 44px; --ng-hbtn-ico: 20px; --ng-hbtn-gap: 8px; --ng-hbtn-ava: 34px; }
@media (max-width: 767.98px) { :root { --ng-hbtn-size: 40px; } }
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn, .ngm-bar__search > .ngm-iconbtn, .ng-top__actions > ul > li.ng-you > a.user-menu) {
  width: var(--ng-hbtn-size) !important; height: var(--ng-hbtn-size) !important; border-radius: 50% !important;
}
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) :is(.ng-top__actions > ul > li > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn, .ngm-bar__search > .ngm-iconbtn, .ng-langbtn) .ng-ico {
  width: var(--ng-hbtn-ico) !important; height: var(--ng-hbtn-ico) !important;
}
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) .ng-top__actions > ul > li.ng-you > a.user-menu > img { width: var(--ng-hbtn-ava) !important; height: var(--ng-hbtn-ava) !important; }
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) { height: var(--ng-hbtn-size) !important; }
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) .ng-top__actions > ul > li.ng-you > a.ng-guest-ava,
.ngm-bar .ng-top__actions > ul > li.ng-you > a.ng-guest-ava { width: var(--ng-hbtn-size) !important; height: var(--ng-hbtn-size) !important; margin: 0 !important; }
:is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) .ng-top__actions > ul,
:is(.ngw-top__end, .ngw-top__start, .ngm-bar__user, .ng-rd__acts, .edn-header-actions, .ng-serp-head__acts > ul) { gap: var(--ng-hbtn-gap) !important; }
@media (max-width: 767.98px) {
  /* (owner, 2026-10-19, as niguro.com) phones: the icon buttons are clear (the soft fill on hover / open only); the
     language button and the guests' avatar keep their soft fill */
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn) {
    background: transparent; color: var(--ng-ink);
  }
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn, .ng-top__actions > ul > li.ng-you > a.ng-guest-ava) {
    background: var(--ng-fill); color: var(--ng-ink);
  }
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn):is(:hover, [aria-expanded="true"]) {
    background: var(--ng-fill); color: var(--ng-ink-strong);
  }
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn, .ng-top__actions > ul > li.ng-you > a.ng-guest-ava):is(:hover, [aria-expanded="true"]),
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) .ng-top__actions > ul > li.dropdown.show > :is(a:not(.btn), button.ng-langbtn) {
    background: var(--ng-fill-2); color: var(--ng-ink-strong);
  }
}
@media (min-width: 768px) {
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn, .ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) {
    background: transparent; color: var(--ng-sub);
  }
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn, .ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn):is(:hover, [aria-expanded="true"]),
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) .ng-top__actions > ul > li.dropdown.show > :is(a:not(.btn), button.ng-langbtn) {
    background: var(--ng-fill); color: var(--ng-ink);
  }
  /* the language pill: 14px side padding, its icon and short name */
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) { padding: 0 14px; border-radius: 999px; }
  /* the guests' avatar disc: 34px inside the 44px button box, as the members' photo (not on the map: a full button) */
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) .ng-top__actions > ul > li.ng-you > a.ng-guest-ava {
    width: var(--ng-hbtn-ava) !important; height: var(--ng-hbtn-ava) !important; margin: calc((var(--ng-hbtn-size) - var(--ng-hbtn-ava)) / 2) 0 !important;
  }
  /* the requests toggle is never shown (its sheet opens from the notifications one, above) but its empty <li> took
     a second gap between Create and Messages (phones make it display: contents) */
  .ng-top__actions > ul > li.ng-requests { margin-left: calc(-1 * var(--ng-hbtn-gap)); }
}
/* the home's Search ⇄ Discover switch: the same 8px gap to the next button (home.css gave it a 6px margin too) */
.ng-top__actions > ul > li.ng-hswitch-li > .ng-hswitch { margin-left: 0; margin-right: 0; }
/* niguro [Header sizes: niguro.com] (owner, 2026-10-19): the phone header at niguroapp's own sizes (assets/css/app.css
   .na-iconbtn / .na-top__brand / .na-langbtn): 24px icons in 44px tap targets at every width, 2px apart on phones;
   the logo 36px tall on phones; the language a 32px pill with its 16px icon and 13px short name. */
:root { --ng-hbtn-ico: 24px; }
@media (max-width: 767.98px) {
  :root { --ng-hbtn-size: 44px; --ng-hbtn-gap: 2px; --ng-hbtn-ico: 29px; } /* (owner) phones: icons 5px larger than niguroapp's 24px */
  .main-header .ng-logo img { max-height: 36px; }
  .main-header .ng-top__actions > ul > li > button.ng-langbtn,
  .main-header .ng-top__lang .ng-langbtn {
    width: auto !important; height: 32px !important; padding: 0 10px; margin: 0 4px; gap: 4px; border-radius: 999px; font-size: 13px;
  }
  :is(.main-header, .ng-serp-head) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) .ng-ico { display: inline-block; width: 16px !important; height: 16px !important; }
}
@media (min-width: 768px) {
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ngm-bar, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) .ng-ico { width: 18px !important; height: 18px !important; }
}
/* niguro [No zoom] (owner, 2026-10-19): no double-tap zoom on phones (iOS ignores user-scalable=no in _head.tpl's viewport;
   touch-action: manipulation stops the double-tap zoom and its tap delay; maximum-scale=1 already stops iOS zooming into form fields) */
html { touch-action: manipulation; }
/* [/Header sizes] */

/* ------------------------------- */
/* Standalone pages (sign in / sign up): no header, links or bottom bar */
/* ------------------------------- */

body.ng-standalone { padding-top: 0 !important; }
body.ng-standalone .footer,
body.ng-standalone .footer-bottom-bar { display: none !important; }

/* ------------------------------- */
/* Sign in / sign up (niguroapp's /nid and /signup) */
/* ------------------------------- */

body.ng-standalone {
  background: radial-gradient(1200px 520px at 50% -180px, hsl(var(--primary) / .16), transparent 70%), var(--ng-canvas);
  background-attachment: fixed;
}
/* --ng-field-h: niguroapp's auth fields are 52px tall (account.css), so every field in here is */
.ng-auth { --ng-field-h: 52px; min-height: 100dvh; padding: 40px 24px; display: flex; align-items: center; justify-content: center; }
/* under 1024px niguroapp's page column keeps 8px to the screen edges and the shell adds none */
@media (max-width: 1023.98px) { .ng-auth { padding-left: 8px; padding-right: 8px; } }

/* The card. Sngine's panel switch (jQuery hide/fadeIn) writes inline display values,
   so the grid is forced and only a real hide (the class without an inline style,
   or an inline display:none) hides it. */
.ng-auth__card {
  position: relative; display: grid !important; grid-template-columns: minmax(16rem, .96fr) minmax(0, 1.04fr);
  width: min(100%, 54rem); border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card); overflow: hidden; /* [Card radius] */
}
/* niguroapp's cards as niguro.com shows them (its Google button included): sign in 580px tall,
   sign up 750px; without a social button the panes keep their content centred in that height
   (user, 2026-10-17: match niguro.com's width and height) */
@media (min-width: 768px) {
  .ng-auth__card--in { min-height: 580px; }
  .ng-auth__card--up { min-height: 750px; }
}
.ng-auth__card.x-hidden:not([style*="display"]),
.ng-auth__card[style*="display: none"] { display: none !important; }
/* the dashed seam with the seal */
.ng-auth__card::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 18%; bottom: 18%; left: 48%; border-left: 1px dashed hsl(var(--primary) / .3);
}
.ng-auth__card::after {
  content: "\2767"; position: absolute; z-index: 4; pointer-events: none; top: 50%; left: 48%;
  display: grid; width: 2rem; height: 2rem; place-items: center; transform: translate(-50%, -50%);
  border: 1px solid hsl(var(--primary) / .22); border-radius: 999px; background: var(--ng-card); color: var(--ng-brand); font-size: 1rem; line-height: 1;
}
body.night-mode .ng-auth__card::before { border-color: hsl(var(--primary-foreground) / .34); }
body.night-mode .ng-auth__card::after { border-color: hsl(var(--primary-foreground) / .28); background: var(--ng-brand); color: hsl(var(--primary-foreground)); }

/* brand pane */
.ng-auth__brand {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 28px; text-align: center; color: var(--ng-ink);
  background:
    radial-gradient(420px 320px at 0% 0%, hsl(var(--primary) / .22), transparent 70%),
    radial-gradient(360px 300px at 100% 100%, hsl(var(--primary) / .14), transparent 70%),
    linear-gradient(160deg, hsl(var(--primary) / .12), hsl(var(--primary) / .04));
}
.ng-auth__brand::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; right: -90px; top: -90px; width: 280px; height: 280px;
  border-radius: 50%; border: 36px solid hsl(var(--primary) / .07);
}
.ng-auth__brand > * { position: relative; z-index: 1; }
.ng-auth__top { display: flex; flex-direction: column; align-items: center; }
.ng-auth__logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 18px; background: var(--ng-card); }
.ng-auth__logo img { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; }
.ng-auth__logo span { font-family: var(--ng-font-brand); font-size: 28px; font-weight: 700; color: var(--ng-brand); }
.ng-auth__pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; margin: 0 0 14px; border-radius: 999px;
  background: hsl(var(--card) / .75); color: var(--ng-brand); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.ng-auth__top h1 { margin: 0; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--ng-ink); }
.ng-auth__top h1 + p { margin: 14px auto 0; max-width: 340px; color: var(--ng-sub); font-size: 15px; line-height: 1.6; }
.ng-auth__features { display: grid; gap: 10px; margin-top: 32px; width: 100%; max-width: 360px; text-align: left; }
.ng-auth__features > div { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ng-ink); }
.ng-auth__features--sub > div { align-items: flex-start; }
.ng-auth__features .ng-ico { width: 18px; height: 18px; color: var(--ng-brand); }
.ng-auth__features--sub .ng-ico { margin-top: 1px; }
.ng-auth__features b { display: block; font-weight: 600; }
.ng-auth__features small { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ng-sub); }
.ng-auth__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: 13px; line-height: 20px; color: var(--ng-sub); }
.ng-auth__note .ng-ico { width: 16px; height: 16px; }

/* form pane */
.ng-auth__form { display: flex; align-items: center; padding: 48px 44px; background: var(--ng-card); }
.ng-auth__inner { width: 100%; max-width: 360px; margin: 0 auto; }
.ng-auth__head { margin-bottom: 28px; }
/* the eyebrow is niguroapp's 26px pill line, centred over the heading */
.ng-auth__eyebrow {
  display: flex; align-items: center; justify-content: center; width: fit-content; height: 26px; margin: 0 auto 6px; padding: 0 12px;
  color: var(--ng-brand); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ng-auth__head h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--ng-ink); }
.ng-auth__head h2 + p { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--ng-sub); }

.ng-auth__social { margin-bottom: 20px; }
/* social login on but no provider switched on: no empty box and no "or" line */
.ng-auth__social:not(:has(a, .ng-gis)), .ng-auth__social:not(:has(a, .ng-gis)) + .ng-auth__or { display: none; }
/* Sign in with Google (Google Identity Services): Google draws its own 40px filled-black pill, niguro.com's 300px,
   centred; the row keeps its height while Google's script loads. A second provider sits 8px below. */
.ng-gis { display: flex; justify-content: center; min-height: 40px; }
.ng-gis__btn { max-width: 100%; }
.ng-gis__btn iframe { max-width: 100%; }
.ng-gis__error + .btn-social { margin-top: 8px; }
.ng-gis__error { margin: 8px 0 0; font-size: 13px; line-height: 18px; text-align: center; color: var(--ng-red); }
/* Google's own 40px pill on niguroapp */
.ng-auth__social .btn-social.btn:not(.btn-icon):not(.rounded-circle):not(.btn-close):not(.dropdown-toggle-split) {
  display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 40px; margin-bottom: 8px !important; padding: 0 16px;
  border: 0; border-radius: 999px !important; background: #131314; color: #e3e3e3; font-size: 14px; font-weight: 500;
}
.ng-auth__social .btn-social:last-of-type { margin-bottom: 0 !important; }
.ng-auth__social .btn-social:hover { background: #2a2a2c; color: #fff; }
.ng-auth__or { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--ng-sub); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ng-auth__or::before, .ng-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ng-line); }

.ng-auth .form-group { margin-bottom: 0; }
.ng-auth .form-label { display: block; margin-bottom: 7px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ng-ink); }
.ng-auth .form-control, .ng-auth .form-select {
  height: var(--ng-field-h); min-height: var(--ng-field-h); padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--ng-r-sm);
  background-color: var(--ng-fill); color: var(--ng-ink); font-size: 15px; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ng-auth .form-select { padding-right: 36px; }
.ng-auth .form-control:hover, .ng-auth .form-select:hover { background-color: var(--ng-fill-2); }
.ng-auth .form-control:focus, .ng-auth .form-select:focus {
  outline: none; border-color: transparent; background-color: var(--ng-card); box-shadow: none;
}
.ng-auth .form-control::placeholder { color: var(--ng-faint); }
.ng-auth .form-check { display: flex; align-items: center; gap: 8px; min-height: 0; padding-left: 0; margin: 0; }
.ng-auth .form-check-input { float: none; width: 18px; height: 18px; margin: 0; border-radius: 6px; flex: none; }
.ng-auth .form-check-label { font-size: 13px; color: var(--ng-ink); }
/* niguroapp's big auth buttons (Next, Back, Sign In, Sign Up): 52px, 12px corners; Back is its quiet text button */
.ng-auth form .btn:not(.btn-icon):not(.rounded-circle):not(.btn-close):not(.dropdown-toggle-split) {
  min-height: 52px; padding: 0 22px; border-radius: var(--ng-r-sm) !important; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.005em;
}
.ng-auth .btn-primary:active { transform: translateY(1px); }
.ng-auth .btn.btn-light { background: transparent; color: var(--ng-sub); }
.ng-auth .btn.btn-light:hover { background: var(--ng-fill-2); color: var(--ng-sub); }
.ng-auth .alert { border-radius: var(--ng-r-sm); font-size: 14px; }
.ng-auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ng-auth__trio { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: 8px; }
.ng-auth__trio .form-select { padding-left: 12px; padding-right: 28px; background-position: right 8px center; }
.ng-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.ng-auth__row .form-check-label, .ng-auth__row a { line-height: 20px; }
.ng-auth__row .form-check-label { padding-top: 0; font-size: 14px; }
.ng-auth__row a, .ng-auth__foot a { font-weight: 600; }

/* steps */
.ng-steps__progress { display: flex; gap: 6px; margin: 0 0 18px; }
/* niguroapp's spacing: sign in 20px under the bar; sign up 16px under the bar and between fields,
   the step line 18.4px over the first field, and the buttons 21.6px under the last one */
.ng-auth [data-ng-steps="signin"] .ng-steps__progress { margin-bottom: 20px; }
.ng-auth [data-ng-steps="signup"] .ng-steps__progress { margin-bottom: 16px; }
.ng-auth [data-ng-steps="signup"] .ng-steps__step { gap: 16px; }
.ng-auth [data-ng-steps="signup"] .ng-steps__title { margin-bottom: 2.4px; }
.ng-auth [data-ng-steps="signup"] .ng-steps__actions { padding-top: 5.6px; }
.ng-steps__progress span { flex: 1 1 0; height: 5px; border-radius: 999px; background: var(--ng-fill); transition: background-color .2s ease; }
.ng-steps__progress span.is-active { background: var(--ng-brand); }
.ng-steps__step { display: grid; gap: 18px; }
.ng-steps__step[hidden] { display: none !important; }
.ng-steps__step > .btn { width: 100%; }
.ng-steps__title { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ng-sub); }
.ng-steps__error { margin: 8px 0 0; font-size: 13px; color: var(--ng-red); }
.ng-steps__actions { display: flex; gap: 12px; }
.ng-steps__actions > * { flex: 1 1 0; }
.ng-steps__who {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--ng-line); border-radius: 999px;
}
.ng-steps__who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ng-ink); }
.ng-steps__change { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ng-brand); font-size: 13px; font-weight: 600; }
.ng-steps__change:hover { background: hsl(var(--primary) / .1); }

/* links under the form */
.ng-auth__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ng-line); text-align: center; }
.ng-auth__foot p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ng-sub); }
.ng-auth__foot p + p { margin-top: 20px; }
.ng-auth__private { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px !important; line-height: 16px !important; }
@media (max-width: 639.98px) { .ng-auth__private { font-size: 14px !important; } } /* niguroapp's text-xs on phones */
.ng-auth__private .ng-ico { width: 14px; height: 14px; }

/* Phones: no outer card. The brand pane becomes a short hero and the form sits on its own sheet. */
@media (max-width: 767.98px) {
  .ng-auth { align-items: flex-start; padding: 20px 8px 28px; }
  .ng-auth__card { display: block !important; width: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .ng-auth__card::before, .ng-auth__card::after { display: none; }
  .ng-auth__brand { padding: 12px 8px 22px; background: transparent; overflow: visible; }
  .ng-auth__brand::before { display: none; }
  .ng-auth__logo { width: 56px; height: 56px; margin-bottom: 16px; }
  .ng-auth__top h1 { font-size: 28px; }
  .ng-auth__top h1 + p { font-size: 14px; margin-top: 8px; }
  .ng-auth__features, .ng-auth__note { display: none; }
  .ng-auth__form { padding: 26px 20px 24px; border: 1px solid var(--ng-line); border-radius: var(--ng-r); }
  .ng-auth__head { text-align: center; margin-bottom: 22px; }
  .ng-auth__head h2 { font-size: 21px; }
}

/* ------------------------------- */
/* Shell: icon rail (desktop, 1024px and up) */
/* ------------------------------- */

.ng-rail { display: none; }
@media (min-width: 1024px) {
  body.ng-has-rail { padding-left: 84px; }
  .ng-rail {
    position: fixed; z-index: 990; top: 56px; bottom: 0; left: 0; width: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 0;
    overflow-y: auto;
    /* niguroapp's rail: the card surface with a hairline edge, so it and the top bar read as one L-shaped frame;
       frosted at night (user, 2026-10-17) */
    background: var(--ng-card); box-shadow: 1px 0 0 var(--ng-line);
  }
  body.night-mode .ng-rail {
    background: hsl(var(--card) / .72);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  }
  .ng-rail__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; padding: 6px 0 8px; border-radius: 16px;
    color: var(--ng-sub); text-decoration: none; transition: color .15s ease;
  }
  .ng-rail__ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 34px; border-radius: 999px; transition: background-color .15s ease; }
  .ng-rail__label { font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; }
  .ng-rail__item:hover { color: var(--ng-ink); }
  .ng-rail__item:hover .ng-rail__ico { background: var(--ng-fill); }
  .ng-rail__item.is-active { color: var(--ng-ink); }
  .ng-rail__item.is-active .ng-rail__ico { background: hsl(var(--primary) / .14); color: var(--ng-brand); }
}

/* ------------------------------- */
/* Shell: pill nav and search button (phones and tablets) */
/* ------------------------------- */

/* ---- [Bottom bar gap] (begin) — (owner, 2026-10-19) phones and tablets: the page's last content ends exactly
   --ng-bnav-gap (12px) above the floating bottom bar, on every page that has it. One rule, from the bar's own size:
   --ng-bnav-h (its height) and --ng-bnav-b (its distance from the screen's foot, safe area included) are set once
   here and the bar itself uses them; the page's foot clearance is their sum plus the gap. The trailing margin of
   the page's last blocks (a card's, a post's, a "see more"'s 12-20px) would add to it, so the margin of the chain of
   last shown children in .main-wrapper is dropped (hidden ones, the phones' hidden footer and side column, skipped) (the frame's own negative offset, .ng-frame, is left alone). Pages
   without the bar (reels, messages, maps: body.ng-standalone or their own shells) keep their own layout. ---- */
:root {
  --ng-bnav-h: 62px; --ng-bnav-b: calc(12px + env(safe-area-inset-bottom, 0px)); --ng-bnav-gap: 12px;
  /* where anything that floats over the page sits: 12px above the bar (sticky Save, go to top, toasts, the floating
     buttons, the cookie notice) */
  --ng-bnav-clear: calc(var(--ng-bnav-b) + var(--ng-bnav-h) + var(--ng-bnav-gap));
  /* a page's own floating button over the bar (home's Search / Discover switch, money's Create ad): its height plus
     the gap, set by that page (home.css, money.css); the cookie notice and go to top rise above it. --ng-cc-h is the
     phones' cookie card (one row). */
  --ng-float: 0px; --ng-cc-h: 48px;
}
@media (max-width: 1023.98px) {
  body:not(.ng-standalone) { padding-bottom: var(--ng-bnav-clear); }
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)):not(.ng-frame),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)),
  body:not(.ng-standalone) .main-wrapper > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) > :nth-last-child(1 of :not(script, style, template, link, .ng-footer, .ng-col-side, .modal, [hidden], .x-hidden)) { margin-bottom: 0 !important; }
  /* the cookie notice: a floating card 12px above the bar (it covered the bar) on the pages that have it */
  body:not(.ng-standalone):not(.ng-chatapp) #cc-main .cm.cm--bar {
    /* (owner, 2026-10-19) just above the bar, the pill nav's width (left 12px, right 84px: clear of the avatar and the
       floating buttons' column), so it no longer rises over the page's own floating button */
    left: 12px !important; right: 84px !important; bottom: var(--ng-bnav-clear) !important; width: auto !important;
    height: var(--ng-cc-h); box-sizing: border-box;
    border: 1px solid var(--ng-line); border-radius: 16px; box-shadow: var(--ng-pop-shadow, 0 8px 24px hsl(0 0% 0% / .16));
  }
  body:not(.ng-standalone):not(.ng-chatapp) #cc-main .cm.cm--bar .cm__body { height: 100%; padding: 0 8px 0 12px !important; }
  /* the phones' card: smaller line and pills */
  body:not(.ng-standalone):not(.ng-chatapp) #cc-main .cm.cm--bar .cm__body { gap: 8px; }
  body:not(.ng-standalone):not(.ng-chatapp) #cc-main .cm.cm--bar .cm__desc { font-size: 11.5px; }
  body:not(.ng-standalone):not(.ng-chatapp) #cc-main .cm.cm--bar .cm__btn { height: 26px; min-height: 26px; padding: 0 10px; font-size: 11.5px; }
  /* (go to top: 12px above the bar and the page's own floating button on phones and tablets, [Smart up] below) */
}
/* ---- [Bottom bar gap] (end) ---- */
.ng-pillnav {
  position: fixed; z-index: 995; left: 12px; right: 84px; bottom: var(--ng-bnav-b); height: var(--ng-bnav-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; padding: 0 6px; border-radius: 999px;
}
/* The glass lives on ::before: a backdrop-filter on the nav itself would make it the
   containing block of the fixed create sheet inside it. */
.ng-pillnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: hsl(var(--card) / .72);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: inset 0 0 0 .5px hsl(var(--foreground) / .08), inset 0 1px 0 hsl(0 0% 100% / .55), 0 8px 24px -10px hsl(var(--foreground) / .22);
}
body.night-mode .ng-pillnav::before {
  background: hsl(var(--card) / .62);
  box-shadow: inset 0 0 0 .5px hsl(0 0% 100% / .10), inset 0 1px 0 hsl(0 0% 100% / .08), 0 8px 28px -10px hsl(0 0% 0% / .6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ng-pillnav::before { background: hsl(var(--card) / .96); }
}
.ng-pillnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; margin: 0 1px; border-radius: 999px;
  color: var(--ng-sub); font-size: 11px; font-weight: 600; line-height: 1.1; text-decoration: none;
  transition: background-color .25s cubic-bezier(.2, .8, .2, 1), color .25s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ng-pillnav__item .ng-ico { width: 22px; height: 22px; }
.ng-pillnav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-pillnav__item:hover { color: var(--ng-ink); }
.ng-pillnav__item:active { transform: scale(.94); }
.ng-pillnav__item.is-active { background: hsl(var(--primary) / .12); color: var(--ng-brand); }
body.night-mode .ng-pillnav__item.is-active { background: hsl(0 0% 100% / .12); color: var(--ng-ink); }
.ng-pillnav__create { display: flex; justify-content: center; }
.ng-pillnav__plus {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ng-brand); color: hsl(var(--primary-foreground));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .25), 0 8px 20px -8px hsl(var(--primary) / .55);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ng-pillnav__plus:hover { color: hsl(var(--primary-foreground)); filter: brightness(1.05); }
.ng-pillnav__plus:active { transform: scale(.9); }
.ng-pillnav__plus .ng-ico { width: 26px; height: 26px; }
body.night-mode .ng-pillnav__plus { box-shadow: 0 8px 24px -8px hsl(0 0% 0% / .6); }
/* [Niguro sheets] the create menu is a bottom sheet like the header's (niguro.js opens, closes, dims and drags
   it as one of them): full width from the bottom, the handle, 24px top corners, safe-area padding, a phone's
   width on tablets; the pill rises over the page dim while it is open */
.ng-pillnav.is-sheet-open { z-index: 1001; } /* [perf: :has] was :has(.ng-pillnav__create > .dropdown-menu.show); niguro-perf.js sets the class */
.ng-pillnav__create .dropdown-menu.ng-sheet {
  position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 3;
  width: 100% !important; min-width: 0; max-width: none; margin: 0 !important; transform: none;
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(8px, calc(50% - 320px)) calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 24px 24px 0 0; background: var(--ng-card); box-shadow: 0 -8px 32px hsl(30 20% 10% / .14);
}
.ng-pillnav__create .dropdown-menu.ng-sheet::before { content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--ng-line); }
.ng-pillnav__create .dropdown-menu.ng-sheet.show { animation: ng-sheet-up .28s cubic-bezier(.2, .8, .2, 1) both; }
.ng-pillnav__create .dropdown-menu.ng-sheet.is-closing { animation: ng-sheet-down .26s cubic-bezier(.4, 0, .6, 1) both; }
.ng-pillnav__create .dropdown-menu.ng-sheet.ng-noanim { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ng-pillnav__create .dropdown-menu.ng-sheet.show, .ng-pillnav__create .dropdown-menu.ng-sheet.is-closing { animation-duration: .01s; }
}
.ng-fab {
  position: fixed; z-index: 995; right: 12px; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: hsl(143 99% 30%); box-shadow: 0 6px 24px hsl(220 20% 10% / .2);
}
.ng-fab:hover { color: hsl(143 99% 25%); }
.ng-fab .ng-ico { width: 26px; height: 26px; }
body.night-mode .ng-fab { background: var(--ng-card); color: var(--ng-brand); box-shadow: 0 6px 24px hsl(0 0% 0% / .5); }
/* niguro [phone app header]: phones (under 768px) swap the search button for the member's avatar (opens the header's
   "You" sheet, niguro.js) or, for guests, a sign-in button; search is in the header there. The pill's own Sign In
   is left out on phones (the round button is it). Tablets keep the search button. */
.ng-fab--you { display: none; }
@media (max-width: 767.98px) {
  .ng-fab:not(.ng-fab--you) { display: none; }
  .ng-fab--you { display: grid; padding: 0; border: 0; cursor: pointer; }
  .ng-fab--you img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  .ng-fab--you:active { transform: scale(.94); }
  .ng-pillnav__item--signin { display: none; }
}
/* [/phone app header] */
@media (min-width: 1024px) {
  .ng-pillnav, .ng-fab { display: none !important; }
}

/* Go to top (niguroapp's #goto-top, _footer.bottom_bar.tpl): a brand circle that rises in after 500px of
   scrolling (niguro.js). Desktop: 32px in the bottom-right corner. Phones and tablets (under 1024px): the
   [Smart up] button below (tapping the pill nav's open tab also scrolls to the top: [Tap to top], niguro.js). */
.ng-totop {
  position: fixed; z-index: 994; right: 16px; bottom: 24px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--ng-brand); color: hsl(var(--primary-foreground)); box-shadow: var(--ng-shadow-lg);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, filter .15s ease;
}
.ng-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ng-totop:hover { filter: brightness(1.06); }
.ng-totop .ng-ico { width: 18px; height: 18px; }
[dir="RTL"] .ng-totop { right: auto; left: 16px; }
/* ---- [Smart up] (begin) — (owner, 2026-10-19) phones and tablets: the same button only shows on scrolling back up
   (40px or more) after going more than 1.5 screens down; it fades out after 2s without scrolling, at once on
   scrolling down, and on a tap (niguro.js). The floating buttons' look (card, brand ink, soft shadow, the hairline
   ring of home's toggle) at 44px, centred on the column of the avatar and the page's own floating button, 12px over
   the pill nav and over that page button when there is one (--ng-float: home's Search / Discover, money's Create ad),
   so both can show at once without touching; it rises over the cookie card too. None on pages with their own
   full-screen shell (reels, messages, maps, standalone pages) or while a sheet, modal or the lightbox is open. ---- */
@media (max-width: 1023.98px) {
  .ng-totop {
    right: 18px; bottom: calc(var(--ng-bnav-clear) + var(--ng-float)); width: 44px; height: 44px;
    background: var(--ng-card); color: var(--ng-brand); box-shadow: 0 6px 24px hsl(220 20% 10% / .2), 0 0 0 1px var(--ng-line);
    transform: translateY(12px) scale(.92); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
  }
  body.night-mode .ng-totop { box-shadow: 0 6px 24px hsl(0 0% 0% / .5), 0 0 0 1px var(--ng-line); }
  .ng-totop:hover { color: var(--ng-brand); }
  .ng-totop:active { transform: scale(.92); }
  .ng-totop:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
  .ng-totop .ng-ico { width: 22px; height: 22px; }
  html.show--consent .ng-totop { bottom: calc(var(--ng-bnav-clear) + var(--ng-float) + var(--ng-cc-h) + var(--ng-bnav-gap)); }
  body:has(.ng-home--search) .ng-totop { bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--ng-vswitch-h, 48px) + var(--ng-bnav-gap)); }
  [dir="RTL"] .ng-totop { right: auto; left: 18px; }
  :is(body.ng-standalone, body.ng-maps, body.ng-reelsapp, body.lightbox-open, body.modal-open, body.ng-dimmed, body.ng-pane-open, html.ng-csheet-open body, html.ngm-has-panel body) .ng-totop { display: none !important; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { .ng-totop { transition: opacity .01s; transform: none; } }
/* ---- [Smart up] (end) ---- */
body.ng-chatapp .ng-totop, body:has(.ng-reels) .ng-totop { display: none !important; }
/* wide screens with Sngine's online-friends column: see [Chat rail] (the button sits left of its foot buttons) */

/* the create sheet: a 3-column grid of tiles, Post across the top */
.ng-pillnav__create .footer-quick-adds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.ng-pillnav__create .footer-quick-adds .add-quick-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 76px; padding: 10px 6px;
  border-radius: var(--ng-r-md); background: var(--ng-fill); color: var(--ng-ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.ng-pillnav__create .footer-quick-adds .add-quick-item.full { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 56px; }
.ng-pillnav__create .footer-quick-adds .add-quick-item.full .mt5 { margin-top: 0 !important; }
.ng-pillnav__create .footer-quick-adds .add-quick-item:hover { background: var(--ng-fill-2); color: var(--ng-ink); }
body.night-mode .ng-pillnav__create .footer-quick-adds .add-quick-item { background: var(--ng-fill); color: var(--ng-ink); }

/* ------------------------------- */
/* Shared pieces: accent tiles, small segmented control, keyboard hint */
/* ------------------------------- */

html.ng-lock { overflow: hidden; }
.ng-ctile {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--ng-tile); color: var(--ng-brand);
}
.ng-ctile .ng-ico { width: 18px; height: 18px; }
/* [Segments: one style] (owner, 2026-10-18): every selected tab / segmented toggle looks like the Reshare popup's
   "Publish to" pills ([reshare publish-to] below): a soft fill track with 3px inside, 999px pills of 13px / 600 text in
   the muted ink; hover lifts the pill with a light card wash; the selected pill is the card colour with a hairline
   lift and the brand ink by day, a brand wash with no shadow at night; keyboard focus is a 2px brand ring. These
   tokens are that look in one place (set on body so --ng-card, --primary and the inks are the mode's); .ng-seg is
   the shared class, and the page segments (/markets .sd-seg / .na-nx-seg, the writer's .ng-wr__seg and gallery
   layout pills, the avatar menu's .ng-you-pref__seg, /cricket, /football, /trends places, /news, the tools, the
   header's All / Services switch, the emoji / sticker tabs) draw from the same tokens. --ng-seg-h-lg is the larger
   36px / 14px size of the page-level tab bars (feed tabs, profile tabs, the notification sheets). Replaces the
   [Segmented: selected] block (same --ng-seg-on-* names, now the Reshare look). Underline tabs stay their own. */
:root, body {
  --ng-seg-bg: var(--ng-fill); --ng-seg-pad: 3px; --ng-seg-gap: 2px; --ng-seg-r: 999px;
  --ng-seg-h: 32px; --ng-seg-px: 14px; --ng-seg-fs: 13px; --ng-seg-fw: 600; --ng-seg-ico: 16px;
  --ng-seg-h-lg: 36px; --ng-seg-fs-lg: 14px;
  --ng-seg-ink: var(--ng-sub);
  --ng-seg-hover-bg: hsl(var(--card) / .6); --ng-seg-hover-ink: var(--ng-ink-strong);
  --ng-seg-on-bg: var(--ng-card); --ng-seg-on-ink: var(--ng-brand); --ng-seg-on-shadow: 0 1px 3px hsl(220 20% 10% / .12);
  --ng-seg-focus: 2px solid var(--ng-brand);
}
body.night-mode { --ng-seg-on-bg: hsl(var(--primary) / .18); --ng-seg-on-shadow: none; }
.ng-seg { display: inline-flex; gap: var(--ng-seg-gap); padding: var(--ng-seg-pad); border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); }
.ng-seg button {
  height: var(--ng-seg-h); padding: 0 var(--ng-seg-px); border: 0; border-radius: var(--ng-seg-r); background: transparent; color: var(--ng-seg-ink);
  font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); display: inline-flex; align-items: center; gap: 6px;
  transition: background-color .15s, color .15s;
}
.ng-seg :is(button, a) .ng-ico { width: var(--ng-seg-ico); height: var(--ng-seg-ico); }
.ng-seg :is(button, a):hover { background: var(--ng-seg-hover-bg); color: var(--ng-seg-hover-ink); }
.ng-seg :is(button, a):focus-visible { outline: var(--ng-seg-focus); outline-offset: 1px; }
.ng-seg button[aria-selected="true"], .ng-seg button[aria-selected="true"]:hover { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); }
/* [/Segments: one style] */
/* [Chips: one size] (owner, 2026-10-18): every filter / category chip is one shape: 28px tall, 13px text at weight 500,
   0 12px inside, a 999px pill, 14px icons. Each family keeps its own colours and its selected state. The families set
   the size tokens in their own rules; the rule below is what they share: one line that ends in an ellipsis when a
   label is too long for the row (the chip is an inline-block so a bare text label can be cut), icons in line, and
   on touch screens an invisible ::after 8px above and below, so the 28px pill answers a 44px tap without moving
   anything (overflow: clip with a clip margin keeps that reach tappable; browsers without it keep the 28px pill).
   /football's crest pills, the writer's category chips and /media's phone nav lay their insides out with flex and
   use the size tokens only. Badges, status pills and action buttons are not chips and keep their sizes. */
:root, body {
  --ng-chip-h: 28px; --ng-chip-px: 12px; --ng-chip-pad: 0 var(--ng-chip-px); --ng-chip-r: 999px;
  --ng-chip-fs: 13px; --ng-chip-fw: 500; --ng-chip-ico: 14px; --ng-chip-gap: 6px; --ng-chip-hit: 8px;
}
:where(.ng-chip:not(code), .ng-chiprow > a, .ng-chiprow > button, .ngc-chip, .ngc-pills button, .ng-ck-pill, .ng-ck-hchip, .ng-hchip,
  .ng-hnpl__pill, #ngm-chips > .ngm-chip, .ng-sl-chip, .ng-rchip, .ng-set__chip, .nw-chip, .ng-rd__pill, .ng-serp-pill, .ng-serp-lp__chip,
  .ngt-chip, .ngt-pc .filter-tab, .ngs-chip, .ngw-chip) {
  position: relative; box-sizing: border-box; max-width: 100%; overflow: hidden; overflow: clip; overflow-clip-margin: var(--ng-chip-hit);
  white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; text-align: center; text-decoration: none;
}
:where(.ng-chip:not(code), .ng-chiprow > a, .ng-chiprow > button, .ngc-chip, .ngc-pills button, .ng-ck-pill, .ng-ck-hchip, .ng-hchip,
  .ng-hnpl__pill, #ngm-chips > .ngm-chip, .ng-sl-chip, .ng-rchip, .ng-set__chip, .nw-chip, .ng-rd__pill, .ng-serp-pill, .ng-serp-lp__chip,
  .ngt-chip, .ngt-pc .filter-tab, .ngs-chip, .ngw-chip) > :is(.ng-ico, svg, .svg-container, .ng-spi, img, .form-check-input) {
  display: inline-block; width: var(--ng-chip-ico); height: var(--ng-chip-ico); margin: -2px var(--ng-chip-gap) 0 0; vertical-align: middle;
}
:where(.ng-chip:not(code), .ng-chiprow > a, .ng-chiprow > button, .ngc-chip, .ngc-pills button, .ng-ck-pill, .ng-ck-hchip, .ng-hchip,
  .ng-hnpl__pill, #ngm-chips > .ngm-chip, .ng-sl-chip, .ng-rchip, .ng-set__chip, .nw-chip, .ng-rd__pill, .ng-serp-pill, .ng-serp-lp__chip,
  .ngt-chip, .ngt-pc .filter-tab, .ngs-chip, .ngw-chip) > :is(.ng-ico, svg, .svg-container, .ng-spi, img, .form-check-input):not(:first-child) { margin: -2px 0 0 var(--ng-chip-gap); }
/* icons stay in the line even where a page sets its icons to display: block (the tools' .ngt-chip) */
:is(.ng-chip:not(code), .ng-chiprow > a, .ng-chiprow > button, .ngc-chip, .ngc-pills button, .ng-ck-pill, .ng-ck-hchip, .ng-hchip,
  .ng-hnpl__pill, #ngm-chips > .ngm-chip, .ng-sl-chip, .ng-rchip, .ng-set__chip, .nw-chip, .ng-rd__pill, .ng-serp-pill, .ng-serp-lp__chip,
  .ngt-chip, .ngt-pc .filter-tab, .ngs-chip, .ngw-chip) > :is(.ng-ico, svg, .svg-container, .ng-spi, img, .form-check-input) { display: inline-block; vertical-align: middle; }
@media (pointer: coarse) {
  :where(.ng-chip:not(code), .ng-chiprow > a, .ng-chiprow > button, .ngc-chip, .ngc-pills button, .ng-ck-pill, .ng-ck-hchip, .ng-hchip,
  .ng-hnpl__pill, #ngm-chips > .ngm-chip, .ng-sl-chip, .ng-rchip, .ng-set__chip, .nw-chip, .ng-rd__pill, .ng-serp-pill, .ng-serp-lp__chip,
  .ngt-chip, .ngt-pc .filter-tab, .ngs-chip, .ngw-chip)::after { content: ""; position: absolute; inset: calc(var(--ng-chip-hit) * -1) 0; }
}
/* [/Chips: one size] */
.ng-kbd { font: 600 11px var(--ng-font); padding: 3px 6px; border-radius: 6px; background: var(--ng-fill); color: var(--ng-sub); border: 0; }
.ng-iconbtn { display: grid; } /* its circle, colours and hover: [Round buttons: one look], with .ng-hbtn */

/* ------------------------------- */
/* The ☰ full-screen menu */
/* ------------------------------- */

.ng-fmenu {
  position: fixed; inset: 0; z-index: 1050; overflow-y: auto; overscroll-behavior: contain; background: var(--ng-card);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s, transform .22s, visibility .2s;
}
.ng-fmenu.is-open { opacity: 1; visibility: visible; transform: none; }
.ng-fmenu__bar {
  position: sticky; top: 0; z-index: 3; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px;
  background: var(--ng-card);
}
.ng-fmenu__logo { display: flex; align-items: center; height: 44px; padding: 0 6px 0 0; }
.ng-fmenu__logo img { max-height: 32px; width: auto; }
.ng-fmenu__logo .logo-dark { display: none; }
body.night-mode .ng-fmenu__logo .logo-light { display: none; }
body.night-mode .ng-fmenu__logo .logo-dark { display: block; }
.ng-fmenu__search {
  flex: 1; max-width: 680px; margin: 0 auto; height: var(--ng-field-h); display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 999px; background: var(--ng-fill); color: var(--ng-sub);
}
.ng-fmenu__search .ng-ico { width: 18px; height: 18px; }
.ng-fmenu__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ng-ink); font-size: 15px; }
.ng-fmenu__search input::placeholder { color: var(--ng-faint); }
.ng-fmenu__wrap { max-width: calc(1100px + 32px); margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.ng-fm-me { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ng-r); background: var(--ng-fill-2); color: var(--ng-ink-strong); }
body.night-mode .ng-fm-me { background: hsl(var(--muted) / .7); }
.ng-fm-me__body { flex: 1; min-width: 0; }
.ng-fm-me__body b { display: block; font-size: 15px; }
.ng-fm-me__body small { display: block; font-size: 12px; color: var(--ng-sub); }
.ng-fm-me .btn { flex: none; border-radius: 999px; }
.ng-fm-section { display: flex; flex-direction: column; gap: 16px; }
.ng-fm-section[hidden] { display: none; }
.ng-fm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 4px 0; }
.ng-fm-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ng-ink-strong); letter-spacing: -.01em; }
.ng-fm-head h2 small { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--ng-sub); }
.ng-svcgroup h3 { margin: 0 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ng-sub); }
.ng-svcgroup[hidden] { display: none !important; }
/* phones and tablets: an app launcher, three tiles a row (more on wider screens) */
.ng-svcwrap { display: flex; flex-direction: column; gap: 18px; }
.ng-svcwrap[hidden] { display: none !important; }
.ng-svclist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
@media (min-width: 560px) { .ng-svclist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .ng-svclist { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ng-svcitem {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px 6px; border-radius: 16px;
  color: var(--ng-ink-strong); text-align: center; text-decoration: none;
}
.ng-svcitem[hidden] { display: none !important; }
.ng-svcitem:hover, .ng-svcitem:active { background: hsl(var(--foreground) / .05); color: var(--ng-ink-strong); }
.ng-svcitem .ng-ctile { width: 44px; height: 44px; border-radius: 14px; }
.ng-svcitem__t { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ng-fm-empty { padding: 16px; border-radius: var(--ng-r); background: var(--ng-fill-2); }
.ng-fm-empty p { margin: 0 0 10px; }
.ng-fm-empty .btn { border-radius: 999px; }
.ng-fm-links { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 4px 0; font-size: 13px; color: var(--ng-sub); }
.ng-fm-links a { color: var(--ng-sub); }
.ng-fm-links a:hover { color: var(--ng-brand); }
/* phones and tablets (under 1024px): the menu slides up as a sheet with a gap above it and a
   handle; no logo; on tablets its content keeps a phone's width, centred */
@media (max-width: 1023.98px) {
  .ng-fmenu {
    inset: 72px 0 0 0; border-radius: 24px 24px 0 0; box-shadow: var(--ng-shadow-lg);
    opacity: 1; transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
  }
  .ng-fmenu.is-open { transform: none; }
  .ng-fmenu__bar { height: auto; padding: 18px max(6px, calc(50% - 330px)) 8px max(12px, calc(50% - 324px)); border-radius: 24px 24px 0 0; }
  .ng-fmenu__bar::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--ng-line); }
  .ng-fmenu__logo { display: none; }
  .ng-fmenu__wrap { max-width: 672px; padding-top: 12px; }
}
/* [Menu cards] (owner, 2026-10-19): on the phone/tablet sheet only the Social section's items (.ng-fm-section--social
   in _ng_menu.tpl) take a coloured icon tile, each its item's hue (--h, set in _ng_menu.tpl) through the tag-tint
   formula (day 80% 94% behind 68% 37%, night 30% 18% behind 75% 66%). No cards; All services (categories and A–Z)
   stays as before. Item layout, sizes and type are unchanged. Desktop keeps its columns. */
@media (max-width: 1023.98px) {
  .ng-fmenu .ng-fm-section--social .ng-svcitem .ng-ctile { background: hsl(var(--h) 80% 94%); color: hsl(var(--h) 68% 37%); }
  body.night-mode .ng-fmenu .ng-fm-section--social .ng-svcitem .ng-ctile { background: hsl(var(--h) 30% 18%); color: hsl(var(--h) 75% 66%); }
}
/* [/Menu cards] */
/* desktop: headed columns side by side, everything on one screen */
@media (min-width: 1024px) {
  .ng-fmenu__bar { padding-left: max(24px, calc((100% - 1100px) / 2)); padding-right: max(24px, calc((100% - 1100px) / 2)); border-bottom: 1px solid var(--ng-line); }
  .ng-fmenu__bar [data-ng-close] { margin-right: -10px; }
  .ng-fmenu__wrap { max-width: calc(1100px + 48px); padding: 24px 24px 40px; gap: 14px; }
  .ng-svcwrap { display: block; column-count: 4; column-gap: 28px; padding: 4px 0 0; }
  /* (.ng-svcwrap--3, a three-column variant, was never used by a template or script: removed 2026-10-18) */
  .ng-svcgroup { break-inside: avoid; margin-bottom: 18px; }
  .ng-svcgroup h3 { margin-bottom: 6px; }
  .ng-svclist { display: flex; flex-direction: column; gap: 0; }
  .ng-svcitem { flex-direction: row; gap: 10px; width: 100%; padding: 5px 6px; border-radius: 10px; text-align: left; }
  .ng-svcitem:hover { background: var(--ng-fill); }
  .ng-svcitem .ng-ctile { width: 30px; height: 30px; border-radius: 9px; }
  .ng-svcitem .ng-ctile .ng-ico { width: 16px; height: 16px; }
  .ng-svcitem__t { font-size: 14px; }
  .ng-fm-section + .ng-fm-section { margin-top: 8px; }
}

/* ------------------------------- */
/* Header sheets: notifications (All | Requests), messages, you, create (the prototype's sheets) */
/* Desktop: a card 16px from the right, 8px under the bar, that fades and scales in.
   Phones: a bottom sheet that slides up, with a handle. The page and the bar dim behind.
   Opening and closing are animated by niguro.js (Bootstrap only toggles .show). */
/* ------------------------------- */

/* the bar keeps one bell: the requests button opens from the All | Requests pill */
.ng-top__actions > ul > li.ng-requests > a { display: none; }

/* the dimmed page (a shared scrim) and the dimmed bar (inside the header, under its sheets) */
.ng-scrim { position: fixed; inset: 0; z-index: 1000; background: var(--ng-dim); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.ng-scrim.is-open { opacity: 1; visibility: visible; }
/* Sngine adds docked chat boxes (z-index 1000) after it: keep them under the dim while a sheet is open */
body.ng-dimmed .chat-widget { z-index: 999; }
/* ---- [Header dim: one rule] (2026-10-18) ----
   A header sheet (avatar, notifications, messages: niguro.js dims the page with .ng-scrim, body.ng-dimmed) opens
   from inside its header, so every header that holds one rises over the scrim (z-index 1001) for the sheet to float
   bright, and dims itself with the scrim's own colour laid over the whole bar (::before, over everything in it:
   the search field, its Ctrl K and Ask Bhotu icons, buttons) so it is not "lifted". Only the open sheet stays
   bright, above that layer (z-index 60 > 50, see "the sheet"). The cloud puffs under a bar (.ng-top__cloud) take
   the colour of the dim over the bar ([perf: header cloud]: no second, dimmed copy). Headers: the site header,
   the search results header (serp.css: the overlay takes its cloud mask; under 1024px it stays under the scrim),
   /news, /watch, /radio and /maps (maps.css: the bar floats on the map, so its layer covers the screen).
   A page sets --ng-hdr-dim-z / --ng-hdr-dim-a on its header to opt out at some widths. */
:root { --ng-dim: rgb(8 12 18 / .45); }
:where(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top)::before {
  content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: var(--ng-dim); opacity: 0; transition: opacity .2s;
}
body.ng-dimmed :is(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top) { z-index: var(--ng-hdr-dim-z, 1001); }
body.ng-dimmed :is(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top)::before { opacity: var(--ng-hdr-dim-a, 1); }
/* the cloud mixes the same 45% of the scrim's colour into its own --ng-cloud ([Cloud: instant theme]) */
body.ng-dimmed :is(.main-header.ng-top, .ng-news .edn-header, .ng-rd__top) .ng-top__cloud { --ng-cloud-dim: 45%; }
/* (owner, 2026-10-19) one even dim, and nothing in the header changes while a sheet is open:
   - a drag: the bar's layer and the cloud lighten with the page dim as the sheet follows the finger, and fade
     out with it when the sheet closes (niguro.js sets html.ng-dim-follow and --ng-dim-k, 1 → 0, and clears them
     on every way of closing); while the finger moves nothing lags behind it;
   - the bottom bar's create menu (⊕) lifts the pill over the dim (its sheet is inside it): the pill takes the
     same dim layer (::after, under its sheet);
   - phones and tablets (under 1024px, where the menus are sheets): the button that opened the sheet keeps its
     rest look (no fill or ring for [aria-expanded] / .show, nor for a tap's sticky hover on touch screens), and
     the page behind doesn't scroll (the dim and the sheet stay where they are; iOS: [iOS pinned]). */
html.ng-dim-follow body.ng-dimmed :is(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top)::before { opacity: calc(var(--ng-hdr-dim-a, 1) * var(--ng-dim-k, 1)); }
html.ng-dim-follow body.ng-dimmed :is(.main-header.ng-top, .ng-news .edn-header, .ng-rd__top) .ng-top__cloud { --ng-cloud-dim: calc(45% * var(--ng-dim-k, 1)); }
html.ng-dragging :is(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top)::before,
html.ng-dragging .ng-top__cloud, html.ng-dragging .ng-pillnav::after { transition: none; }
.ng-pillnav::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: var(--ng-dim); opacity: 0; transition: opacity .2s;
}
body.ng-dimmed .ng-pillnav.is-sheet-open::after { opacity: 1; }
html.ng-dim-follow body.ng-dimmed .ng-pillnav.is-sheet-open::after { opacity: var(--ng-dim-k, 1); }
/* (owner, 2026-10-19) phones and tablets: the dim lands in one frame everywhere. The page dim and the bar's layer
   faded on the compositor while the cloud's colour (--ng-cloud-dim, a registered property) faded on the main
   thread and trailed behind on iOS; no fade at all keeps the page, the bar, its cloud and the pill even (the
   sheets still slide; a drag still follows the finger) */
@media (max-width: 1023.98px) {
  .ng-scrim, .ng-csheet__scrim, .modal-backdrop.fade, .ng-top__cloud, .ng-pillnav::after,
  :where(.main-header.ng-top, .ng-serp-head, .ng-news .edn-header, .ngw-top, .ng-rd__top, .ngm-top)::before { transition: none !important; }
}
@media (max-width: 1023.98px) {
  body.ng-dimmed { overflow: hidden; }
  .ng-scrim { touch-action: none; }
}
@media (max-width: 767.98px) {
  body.ng-dimmed :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn) {
    background: transparent !important; color: var(--ng-ink) !important;
  }
  body.ng-dimmed :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn, .ng-top__actions > ul > li.ng-you > a.ng-guest-ava) {
    background: var(--ng-fill) !important; color: var(--ng-ink) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.ng-dimmed :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn, .ng-top__actions > ul > li > button.ng-langbtn, .ng-top__lang .ng-langbtn) {
    background: transparent !important; color: var(--ng-sub) !important;
  }
}
@media (max-width: 767.98px) and (hover: none) {
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn):hover:not([aria-expanded="true"]) {
    background: transparent; color: var(--ng-ink);
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) and (hover: none) {
  :is(.main-header, .ng-serp-head, .edn-header, .ngw-top, .ng-rd__bar) :is(.ng-top__actions > ul > li:not(.ng-you) > a:not(.btn), .ng-top__start > .menu-icon, .ng-hbtn):hover:not([aria-expanded="true"]) {
    background: transparent; color: var(--ng-sub);
  }
}
/* ---- [/Header dim: one rule] ---- */

/* the sheet */
.ng-top__actions .dropdown-menu.ng-sheet {
  position: fixed !important; top: 64px !important; right: var(--ng-sheet-right, 16px) !important; left: auto !important; bottom: auto !important; z-index: 60; /* over the header's dim layer ([Header dim: one rule]) */
  width: 400px; max-width: calc(100vw - 24px); min-width: 0 !important; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); margin: 0 !important;
  padding: 0 16px 20px; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-radius: var(--ng-r); background: var(--ng-card); box-shadow: 0 8px 28px hsl(30 20% 10% / .12); color: var(--ng-ink);
  transform-origin: top right; text-align: left; font-size: 15px;
}
/* larger screens: menus stand off the page with a soft all-round shadow, a touch deeper at night with a faint
   light edge so they read on the dark page (user, 2026-10-17) */
@media (min-width: 1024px) {
  .dropdown-menu, :is(.ng-top__actions, .ng-serp-head__acts) .dropdown-menu.ng-sheet {
    box-shadow: 0 0 0 1px hsl(var(--border) / .55), 0 2px 6px hsl(150 20% 10% / .05), 0 12px 32px hsl(150 20% 10% / .10);
  }
  body.night-mode .dropdown-menu, body.night-mode :is(.ng-top__actions, .ng-serp-head__acts) .dropdown-menu.ng-sheet {
    box-shadow: 0 0 0 1px hsl(0 0% 100% / .07), 0 2px 8px hsl(0 0% 0% / .25), 0 14px 36px hsl(0 0% 0% / .45);
  }
}
.ng-top__actions .dropdown-menu.ng-sheet.show { animation: ng-sheet-in .18s ease both; }
.ng-top__actions .dropdown-menu.ng-sheet.is-closing { animation: ng-sheet-out .16s ease both; }
.ng-top__actions .dropdown-menu.ng-sheet.ng-noanim { animation: none !important; }
@keyframes ng-sheet-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ng-sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 1023.98px) {
  .ng-top__actions .dropdown-menu.ng-sheet {
    top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100%; max-width: none;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); border-radius: 24px 24px 0 0;
    padding-left: max(16px, calc(50% - 320px)); padding-right: max(16px, calc(50% - 320px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform-origin: bottom center;
  }
  .ng-top__actions .dropdown-menu.ng-sheet.show { animation: ng-sheet-up .28s cubic-bezier(.2, .8, .2, 1) both; }
  .ng-top__actions .dropdown-menu.ng-sheet.is-closing { animation: ng-sheet-down .26s cubic-bezier(.4, 0, .6, 1) both; }
  .ng-top__actions .dropdown-menu.ng-sheet::before {
    content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--ng-line);
  }
}
@keyframes ng-sheet-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ng-sheet-down { from { transform: none; } to { transform: translateY(105%); } }
@media (prefers-reduced-motion: reduce) {
  .ng-top__actions .dropdown-menu.ng-sheet.show, .ng-top__actions .dropdown-menu.ng-sheet.is-closing { animation-duration: .01s; }
}

/* head: big title, actions, close */
.ng-top__actions .ng-sheet__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 -4px 0 2px; padding: 14px 0 10px;
  border: 0; background: var(--ng-card); font-size: 12px; color: var(--ng-sub);
}
@media (max-width: 1023.98px) { .ng-top__actions .ng-sheet__head { padding-top: 6px; } }
.ng-top__actions .ng-sheet__head .title { flex: 1; min-width: 0; margin: 0; font-size: 19px; line-height: 1.2; font-weight: 800; color: var(--ng-ink-strong); }
.ng-top__actions .ng-sheet__head .text-link { font-size: 13px; font-weight: 700; color: var(--ng-brand); }
.ng-top__actions .ng-sheet__head .text-link:hover { text-decoration: none; }
.ng-sheet__label { font-size: 12px; color: var(--ng-sub); }
.ng-top__actions .ng-sheet__head .switch { margin: 0; }
.ng-sheet__x .ng-ico { width: 20px; height: 20px; }

/* All | Requests */
.ng-sheet__tabs { display: flex; width: 100%; margin: 0 0 6px; padding: var(--ng-seg-pad); /* [Segments: one style] */ }
.ng-sheet__tabs button { flex: 1; height: var(--ng-seg-h-lg); justify-content: center; font-size: var(--ng-seg-fs-lg); /* [Segments: one style] */ }
.ng-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ng-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ng-count[hidden] { display: none; }
/* a small dot on the bell when only requests are waiting */
.js_live-notifications > a.ng-has-requests::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--ng-red); box-shadow: 0 0 0 2px var(--ng-card);
}
.js_live-notifications > a.ng-has-requests:has(.counter:not(.x-hidden):not([style*="none"]))::after { display: none; }

/* body and rows (the prototype's notification rows) */
.ng-sheet .dropdown-widget-body { padding: 0; font-size: 14px; }
.ng-sheet .dropdown-widget-body .js_scroller > p, .ng-sheet .dropdown-widget-body .text-muted.text-center { padding: 18px 0; color: var(--ng-sub) !important; }
.ng-sheet .slimScrollDiv, .ng-sheet .js_scroller { height: auto !important; overflow: visible !important; }
.ng-sheet .slimScrollBar, .ng-sheet .slimScrollRail { display: none !important; }
.ng-sheet .feeds-item { position: relative; border: 0; background: transparent; }
.ng-sheet .feeds-item.unread { background: transparent; }
.ng-sheet .feeds-item.unread::after { content: ""; position: absolute; right: 4px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--ng-brand); pointer-events: none; }
.ng-sheet .data-container { display: flex; align-items: flex-start; gap: 12px; min-height: 0; margin: 0 -4px; padding: 12px 8px; border-radius: 14px; }
.ng-sheet a.data-container:hover, .ng-sheet .data-container.clickable:hover { background: var(--ng-fill); }
.ng-sheet .data-avatar { position: relative; float: none; flex: none; }
.ng-sheet .data-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ng-sheet .data-avatar .left-avatar, .ng-sheet .data-avatar .right-avatar { width: 23px; height: 48px; }
.ng-sheet .data-avatar .right-avatar { width: 24px; }
.ng-note__badge {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--ng-brand); color: #fff; box-shadow: 0 0 0 2px var(--ng-card);
}
.ng-note__badge i { font-size: 10px; color: #fff !important; }
.ng-note__badge:has(.inline-emoji) { background: var(--ng-card); }
.ng-note__badge .inline-emoji { transform: scale(.75); }
.ng-sheet .data-content { flex: 1; min-width: 0; padding: 0 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--ng-ink); word-wrap: break-word; }
.ng-sheet .data-content .name, .ng-sheet .data-content .name a { font-weight: 700; color: var(--ng-ink-strong); }
/* notifications read as one line: "Name did something", then the time */
.ng-sheet .ng-note__ava + .data-content > div:first-child,
.ng-sheet .ng-note__ava + .data-content > div:first-child + div { display: inline; }
.ng-sheet .data-content .time, .ng-sheet .data-content .js_moment { display: block; margin-top: 2px; font-size: 12px; color: var(--ng-sub); }
.ng-sheet .data-content .text { color: var(--ng-sub); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.ng-sheet .feeds-item.unread .data-content .text { color: var(--ng-ink-strong); font-weight: 600; }
.ng-sheet .data-content .data-img { border: 0; border-radius: 10px; width: 44px; height: 44px; }
.ng-sheet .data-content i[class*="fa-"] { color: var(--ng-brand); }
.ng-sheet .data-content .btn { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.ng-sheet .data-content .btn-danger, .ng-sheet .data-content .btn-light { background: var(--ng-fill); border-color: transparent; color: var(--ng-ink); }
/* friend requests (the requests sheet, .ng-requests): one row — a 40px avatar, the name (cut with … when long)
   over mutual friends, and Confirm / Decline on the right of the same row (user, 2026-10-17) */
.ng-requests .ng-sheet .data-container { align-items: center; padding-top: 10px; padding-bottom: 10px; }
.ng-requests .ng-sheet .data-avatar img { width: 40px; height: 40px; }
.ng-requests .ng-sheet .data-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; align-self: center; column-gap: 10px; padding-right: 0; }
.ng-requests .ng-sheet .data-content > * { grid-column: 1; min-width: 0; margin-top: 0 !important; }
.ng-requests .ng-sheet .data-content > .float-end { grid-column: 2; grid-row: 1; float: none !important; display: flex; gap: 6px; margin: 0; }
.ng-requests .ng-sheet .data-content > .float-end .btn { height: 32px; padding: 0 12px; }
.ng-requests .ng-sheet .data-content > .mt5 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-requests .ng-sheet .data-content > .mt5 .name a { font-size: 14px; font-weight: 600; }
.ng-requests .ng-sheet .data-content > div:not(.float-end):not(.mt5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ng-sub); }

/* footer: the prototype's soft full-width button */
.ng-sheet .dropdown-widget-footer {
  display: flex; align-items: center; justify-content: center; height: 40px; margin: 8px 0 0; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--ng-tint); color: var(--ng-brand); font-size: 14px; font-weight: 700;
}
.ng-sheet .dropdown-widget-footer:hover { text-decoration: none; background: hsl(var(--primary) / .16); color: var(--ng-brand); }
/* notifications, messages, requests: a one-liner when the list is empty, and the footer only with more
   than 3 rows (.ng-dd--empty / .ng-dd--more: set by the templates, kept in step by niguro.js) */
.ng-sheet .ng-dd-empty { display: none; gap: 12px; padding: 28px 16px 10px; font-size: 14px; line-height: 1.4; }
.ng-dd--empty > .ng-sheet .ng-dd-empty { display: flex; }
.ng-sheet .ng-dd-empty .ng-lrow__icon { width: 48px; height: 48px; border-radius: 16px; }
.ng-sheet .ng-dd-empty .ng-lrow__icon .ng-ico { width: 24px; height: 24px; }
.ng-dd:not(.ng-dd--more) > .ng-sheet > .dropdown-widget-footer { display: none; }

/* messages: the green badge (the general red counter rule is !important) */
.navbar-wrapper.ng-top__actions .js_live-messages .counter { background: var(--ng-brand) !important; }

/* ------------------------------- */
/* The "You" sheet's content */
/* ------------------------------- */

.ng-you-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ng-r-md); background: var(--ng-fill-2); color: var(--ng-ink-strong); text-decoration: none; }
body.night-mode .ng-you-card { background: hsl(var(--muted) / .7); }
.ng-you-card:hover { color: var(--ng-ink-strong); filter: brightness(.98); }
.ng-you-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.ng-you-card__body { flex: 1; min-width: 0; }
.ng-you-card__body b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-you-card__body small { display: block; font-size: 12px; color: var(--ng-sub); }
.ng-you-card .ng-ico { width: 18px; height: 18px; color: var(--ng-sub); }
.ng-you-money { display: flex; gap: 8px; margin-top: 10px; }
.ng-you-money a { flex: 1; padding: 10px 12px; border-radius: var(--ng-r-md); background: var(--ng-fill-2); color: var(--ng-ink-strong); text-decoration: none; }
body.night-mode .ng-you-money a { background: hsl(var(--muted) / .7); }
.ng-you-money small { display: block; font-size: 12px; color: var(--ng-sub); }
.ng-you-money b { display: block; font-size: 15px; font-weight: 700; }
.ng-you-list { margin-top: 10px; }
.ng-mitem {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ng-ink-strong); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none;
}
.ng-mitem:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-mitem__tile { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ng-fill-2); color: var(--ng-brand); }
body.night-mode .ng-mitem__tile { background: hsl(var(--muted)); }
.ng-mitem__tile .ng-ico { width: 18px; height: 18px; }
.ng-mitem small { display: block; font-size: 12px; font-weight: 500; color: var(--ng-sub); }
.ng-mitem__grow { flex: 1; }
.ng-mitem__meta { font-size: 13px; color: var(--ng-sub); }
/* the day/night switch shows the current mode (Sngine's js_theme-mode flips body.night-mode) */
.ng-switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: var(--ng-line); transition: background .2s; }
.ng-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .2s; }
body.night-mode .ng-switch { background: var(--ng-brand); }
body.night-mode .ng-switch::after { transform: translateX(18px); }
/* niguro [You menu prefs] (_user_menu.tpl): Appearance + Language, two equal cards under the profile card in the
   profile card's tint, a small label over a segmented pill; the active segment is a filled brand pill. Two
   columns at every width; one card alone (no language switch) takes the full width. Day / night follows
   body.night-mode, so the pill is right after either switch without a reload. */
.ng-you-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ng-you-prefs--one { grid-template-columns: minmax(0, 1fr); }
.ng-you-pref { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 12px; border-radius: var(--ng-r-md); background: var(--ng-fill-2); }
body.night-mode .ng-you-pref { background: hsl(var(--muted) / .7); }
.ng-you-pref__label { display: block; font-size: 12px; line-height: 1.3; color: var(--ng-sub); }
.ng-you-pref__seg { display: flex; gap: var(--ng-seg-gap); margin-top: auto; padding: var(--ng-seg-pad); border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); /* [Segments: one style] */ }
.ng-you-pref__seg button {
  flex: 1 1 0; min-width: 0; height: var(--ng-seg-h); padding: 0 6px; border: 0; border-radius: var(--ng-seg-r); background: transparent; color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s, color .15s; /* [Segments: one style] */
}
.ng-you-pref__seg button:hover { color: var(--ng-seg-hover-ink); background: var(--ng-seg-hover-bg); /* [Segments: one style] */ }
.ng-you-pref__seg .ng-ico { width: var(--ng-seg-ico); height: var(--ng-seg-ico); flex: none; /* [Segments: one style] */ }
body:not(.night-mode) .ng-you-pref__seg .ng-you-pref__day,
body.night-mode .ng-you-pref__seg .ng-you-pref__night,
.ng-you-pref__seg button.is-on { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); cursor: default; } /* [Segments: one style] */
.ng-you-pref__seg button:focus-visible { outline: var(--ng-seg-focus); outline-offset: 1px; } /* [Segments: one style] */
/* /niguro [You menu prefs] */
/* niguro [UI sounds] (_user_menu.tpl): the Sounds / Voice card under Appearance / Language, the same cards and pills.
   One column per tile (a third tile just fits); each tile is one button, its Off / On pill fills the side that's on. */
.ng-you-prefs--quick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ng-you-quick { width: 100%; border: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ng-you-quick:focus-visible { outline: var(--ng-seg-focus); outline-offset: 2px; }
.ng-you-quick .ng-you-pref__label { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-you-quick .ng-you-pref__label .ng-ico { width: 14px; height: 14px; flex: none; }
.ng-you-quick__off, .ng-you-quick__on {
  flex: 1 1 0; min-width: 0; height: var(--ng-seg-h); padding: 0 6px; border-radius: var(--ng-seg-r); color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; /* [Segments: one style] */
}
.ng-you-quick:hover .ng-you-quick__off, .ng-you-quick:hover .ng-you-quick__on { color: var(--ng-seg-hover-ink); }
.ng-you-quick[aria-pressed="true"] .ng-you-quick__on,
.ng-you-quick[aria-pressed="false"] .ng-you-quick__off { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); } /* [Segments: one style] */
/* /niguro [UI sounds] */
/* niguro [You menu everywhere]: pages with their own header (/news, /maps: $ng_standalone) put the avatar menu in
   the same .ng-top__actions > ul > li.ng-you as the site header. They have no bottom bar, so on phones the avatar
   stays in their header ([phone app header] above hides it where the bottom bar's avatar opens the sheet). Same
   specificity as that rule, later, so it wins. */
@media (max-width: 767.98px) {
  body.ng-standalone:not(.visitor) .ng-top__actions > ul > li.ng-you { display: block; }
  body.ng-standalone:not(.visitor) .ng-top__actions > ul > li.ng-you > .user-menu { display: grid; }
}
/* /niguro [You menu everywhere] */


/* ------------------------------- */
/* Desktop create panel: Menu | Create (the prototype's + panel) */
/* ------------------------------- */

.ng-btn-soft { height: 38px; border-radius: 10px; background: var(--ng-tint); color: var(--ng-brand); font-size: 14px; font-weight: 600; border: 0; }
.ng-btn-soft:hover { background: hsl(var(--primary) / .16); color: var(--ng-brand); }
.ng-ctile--round { border-radius: 50%; }
.ng-citem {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px; border-radius: 14px;
  color: var(--ng-ink-strong); text-align: left; text-decoration: none;
}
.ng-citem[hidden] { display: none !important; }
.ng-citem:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-citem__body { flex: 1; min-width: 0; }
.ng-citem__body b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.ng-citem__body small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ng-sub); }

/* a Menu head, then the two columns; each column scrolls on its own */
.ng-top__actions .dropdown-menu.ng-cmenu { width: 720px; padding: 0 16px 20px; overflow: hidden; }
.ng-top__actions .dropdown-menu.ng-cmenu.show { display: flex; flex-direction: column; }
.ng-cmenu__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-rows: minmax(0, 1fr); gap: 12px; align-items: start; }
.ng-cmenu__menu, .ng-cmenu__create { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ng-cmenu__search { max-width: none; margin: 0 0 4px; }
.ng-cmenu__grp[hidden] { display: none !important; }
.ng-cmenu__grp h3 { margin: 14px 8px 2px; font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-cmenu__grp + .ng-cmenu__grp { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--ng-line); }
.ng-cmenu__menu > .btn { margin-top: 8px; }
.ng-cmenu__create { padding: 8px; border-radius: var(--ng-r-md); background: var(--ng-fill-2); }
body.night-mode .ng-cmenu__create { background: hsl(var(--muted) / .6); }
.ng-cmenu__create h3 { margin: 4px 8px 6px; font-size: 18px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-cmenu__create .ng-citem { min-height: 48px; }
.ng-cmenu__create .ng-citem:hover { background: var(--ng-card); }
.ng-cmenu__create .ng-citem__body b .badge { margin-left: 4px; font-size: 10px; vertical-align: middle; }
.ng-cmenu__create hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--ng-line); opacity: 1; }

/* ------------------------------- */
/* Header search: its attached suggestions and the phone overlay are in css/pages/search.css */
/* ------------------------------- */

/* ------------------------------- */
/* Popups in Sngine's #modal (niguro.js tags it): the create forms are wide with their fields
   in two columns on desktop. On phones and tablets every popup is a bottom sheet ("Bottom sheets", below). */
/* ------------------------------- */

@media (min-width: 1024px) {
  #modal.ng-msheet .modal-content, #modal.ng-cmodal .modal-content { border: 0; border-radius: 20px; background: var(--ng-card); box-shadow: 0 12px 40px hsl(30 20% 10% / .16); }
  #modal.ng-msheet.fade .modal-dialog, #modal.ng-cmodal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  #modal.ng-msheet.show .modal-dialog, #modal.ng-cmodal.show .modal-dialog { transform: none; }
}
#modal.ng-msheet .modal-header, #modal.ng-cmodal .modal-header { padding: 14px 12px 10px 18px; border: 0; }
#modal.ng-msheet .modal-title, #modal.ng-cmodal .modal-title { display: flex; align-items: center; font-size: 19px; font-weight: 800; color: var(--ng-ink-strong); }
#modal.ng-cmodal .modal-body { padding: 4px 18px 8px; }
#modal.ng-cmodal .modal-footer { padding: 10px 18px 16px; border: 0; }
@media (min-width: 1024px) {
  #modal.ng-cmodal .modal-dialog { max-width: min(980px, calc(100vw - 48px)); }
  #modal.ng-cmodal .modal-body { columns: 2; column-gap: 28px; }
  #modal.ng-cmodal .modal-body > * { break-inside: avoid; }
  #modal.ng-cmodal .modal-body > .alert { column-span: all; }
  /* Reshare (ajax.share.publisher.tpl): where to, then the message, in one narrow column */
  #modal.ng-cmodal:has(form.ng-reshare) .modal-dialog { max-width: 520px; }
  #modal.ng-cmodal .ng-reshare .modal-body { columns: auto; }
}
.ng-reshare__ico { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; color: var(--ng-brand); }
.ng-reshare__ico .ng-ico { width: 22px; height: 22px; }
/* niguro [reshare publish-to] (ajax.share.publisher.tpl): "Publish To" as one row of small segmented pills, the
   blog / news editor's compact Publish To (writer.css .ng-wr__seg), and the page / group / event choice under it as
   a compact list of 36px rows (writer.css .ng-wr__rows). Stacked: pills, 12px, list, 14px, Message. */
.ng-reshare__field { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.ng-reshare__label { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong); }
.ng-reshare__to { display: flex; gap: var(--ng-seg-gap); margin: 0; padding: var(--ng-seg-pad); border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); /* [Segments: one style] */ }
.ng-reshare__to .button-label {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: var(--ng-seg-h); margin: 0; padding: 0 8px; border: 0; border-radius: var(--ng-seg-r); background: transparent; box-shadow: none; color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; transition: background .15s, color .15s; cursor: pointer; /* [Segments: one style] */
}
.ng-reshare__to .button-label:hover { background: var(--ng-seg-hover-bg); color: var(--ng-seg-hover-ink); box-shadow: none; /* [Segments: one style] */ }
.ng-reshare__to .button-label .icon { width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; opacity: 1; filter: none; flex: none; }
.ng-reshare__to .button-label .icon svg { width: var(--ng-seg-ico); height: var(--ng-seg-ico); /* [Segments: one style] */ }
.ng-reshare__to .button-label .title { margin: 0; overflow: hidden; font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); text-overflow: ellipsis; white-space: nowrap; /* [Segments: one style] */ }
.ng-reshare__to .input-label:checked + .button-label { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); /* [Segments: one style] */ }
/* night: no ring or icon disc from Sngine's night .button-label rules */
body.night-mode .ng-reshare__to .button-label { box-shadow: none; color: var(--ng-seg-ink); /* [Segments: one style] */ }
body.night-mode .ng-reshare__to .button-label:hover { color: var(--ng-seg-hover-ink); /* [Segments: one style] */ }
body.night-mode .ng-reshare__to .button-label .icon { background: none; }
body.night-mode .ng-reshare__to .input-label:checked + .button-label { background: var(--ng-seg-on-bg); box-shadow: var(--ng-seg-on-shadow); color: var(--ng-seg-on-ink); /* [Segments: one style] */ }
.ng-reshare__to .input-label:focus-visible + .button-label { outline: var(--ng-seg-focus); outline-offset: 1px; /* [Segments: one style] */ }
/* four pills (Event too) on a phone: the icons go so the words keep their room */
@media (max-width: 420px) { .ng-reshare__to:has(> .button-label:nth-of-type(4)) .button-label .icon { display: none; } }
.ng-reshare [id^="js_share-to-"] > .ng-reshare__pick { margin: -2px 0 14px; }
.ng-reshare__pick .form-label { margin-bottom: 6px; font-size: 13px; }
.ng-reshare__q { height: 36px; margin-bottom: 6px; font-size: 13.5px; }
.ng-reshare__rows { display: flex; flex-direction: column; gap: 2px; max-height: 188px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 12px; background: var(--ng-fill); }
.ng-reshare__row {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ng-ink); font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ng-reshare__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ng-reshare__row:hover { background: var(--ng-card); }
.ng-reshare__row[aria-checked="true"] { background: var(--ng-card); color: var(--ng-brand); font-weight: 700; }
.ng-reshare__row[aria-checked="true"]::after { content: ""; flex: none; width: 14px; height: 8px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ng-reshare__row[hidden] { display: none; }
.ng-reshare__row:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: -2px; }
.ng-reshare__none { margin: 6px 2px 0; font-size: 13px; color: var(--ng-sub); }
/* niguro [reshare publish-to] end */
@media (max-width: 1023.98px) {
  #modal.ng-msheet .modal-header, #modal.ng-cmodal .modal-header { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { #modal.ng-msheet.fade .modal-dialog { transition-duration: .01s; } }

/* ------------------------------- */
/* Bottom sheets (phones and tablets, under 1024px): every popup (Sngine's #modal and any other
   Bootstrap modal) slides up from the bottom, full width, with the handle, corners and motion of the
   header sheets, the ☰ menu and the composer; on tablets its content keeps a phone's width (640px),
   centred. Its body scrolls inside while the head and footer stay; dragging it down closes it
   (niguro.js, "Bottom sheets: drag down to close"). Popups with a static backdrop (calls) can't be
   dragged and show no handle. 1024px and up keep Sngine's centred popups. */
/* ------------------------------- */

@media (max-width: 1023.98px) {
  .modal { padding: 0 !important; overflow: hidden; overscroll-behavior: contain; }
  /* the sheet slides instead of fading (the backdrop still fades); Bootstrap waits for this
     transition before it hides the popup, so it lasts as long as the slide down */
  .modal.fade:not(.show) { opacity: 1; }
  .modal.fade { transition: opacity .26s linear; }
  .modal .modal-dialog {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; display: block; height: auto; min-height: 0;
    width: 100% !important; max-width: none !important; margin: 0 !important;
  }
  .modal.fade .modal-dialog { transform: translateY(105%); transition: transform .26s cubic-bezier(.4, 0, .6, 1); }
  .modal.show .modal-dialog { transform: none; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  /* a static popup answers a tap outside with a small lift (instead of Bootstrap's zoom) */
  .modal.show.modal-static .modal-dialog { transform: translateY(-8px); }
  .modal .modal-content {
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 32px hsl(30 20% 10% / .14);
    padding-left: max(0px, calc(50% - 320px)); padding-right: max(0px, calc(50% - 320px));
  }
  .modal .modal-content::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--ng-line); }
  .modal.ng-nodrag .modal-content::before { visibility: hidden; }
  .modal .modal-header { padding-top: 6px; }
  /* the body scrolls (also when Sngine wraps body and footer in a form) */
  .modal .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .modal .modal-content > .modal-body, .modal .modal-content > form > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .modal.fade, .modal.fade .modal-dialog, .modal.show .modal-dialog { transition-duration: .01s; }
}
/* while a sheet is being dragged (any sheet; niguro.js) */
html.ng-dragging, html.ng-dragging * { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* ---- [iOS pinned] (owner, 2026-10-19: on an iPhone the sheets and the bottom bar left a gap at the screen's foot
   while scrolling) ----
   Every sheet and the bottom bar are fixed with bottom: 0 (or the bar's --ng-bnav-b), as children of <body> or of
   a fixed parent with no transform, filter, backdrop-filter, will-change, contain or perspective (the pill's glass
   is on its ::before for that reason), and their heights are dvh with a vh fallback. What still moved them on iOS
   WebKit: the page's rubber-band bounce (at the top and the end of every page, and on short pages that don't
   scroll at all) carries fixed elements with it, and the page behind an open sheet kept scrolling under the dim.
   So on iOS (only its WebKit knows -webkit-touch-callout) the page doesn't bounce (scrolling inside a sheet or a
   list still does, contained), and an open sheet locks the page (overflow: hidden on the root: body.ng-dimmed,
   html.ng-lock, html.ng-csheet-open, Bootstrap's body.modal-open; the dims take no touch scroll). */
@media (max-width: 1023.98px) {
  @supports (-webkit-touch-callout: none) {
    html { overscroll-behavior-y: none; }
  }
}
/* ---- [/iOS pinned] ---- */

/* ---- [Pull to refresh] (owner, 2026-10-19; niguro-ptr.js, loaded only on the pages that opt in, _js_files.tpl) ----
   html.ng-ptr-on: the page has the theme's pull-to-refresh, so the browsers' own is off there (Android Chrome's
   pull, iOS's bounce; [iOS pinned] already stops iOS's on every page), and nothing refreshes twice. The indicator
   (.ng-ptr) is a clip box fixed under the page's top bar (--ng-ptr-top, measured at each pull) and under the bar's
   z-index (1001), so the round card drops out from under the bar and its cloud and never covers it; the page itself
   doesn't move. The card: the ring fills with the pull; ready = brand fill, the arrow turned, "Release to refresh";
   refreshing = the ring spins; done = a check and "Updated". Theme tokens only (day and night follow them). */
@media (max-width: 1023.98px) {
  html.ng-ptr-on, html.ng-ptr-on body { overscroll-behavior-y: none; }
}
.ng-ptr { position: fixed; left: 0; right: 0; top: var(--ng-ptr-top, 0px); height: 140px; z-index: 1000; overflow: hidden; pointer-events: none; display: none; }
.ng-ptr.is-on { display: block; }
.ng-ptr__puck {
  position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate3d(-50%, -54px, 0); will-change: transform;
}
.ng-ptr.is-settling .ng-ptr__puck { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.ng-ptr__card {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ng-card); color: var(--ng-brand); box-shadow: 0 0 0 1px var(--ng-line), var(--ng-shadow-lg);
  transition: background-color .15s, color .15s;
}
.ng-ptr__card > svg { grid-area: 1 / 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ng-ptr__ring { width: 28px; height: 28px; transform: rotate(-90deg); stroke-width: 2.5; }
.ng-ptr__track { stroke: var(--ng-line); }
.ng-ptr__arc { stroke: currentColor; stroke-dasharray: 62.83; stroke-dashoffset: 62.83; }
.ng-ptr__arrow { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; transform: rotate(var(--ng-ptr-turn, 0deg)); transition: transform .2s, opacity .15s; }
.ng-ptr__check { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; opacity: 0; transition: opacity .15s; }
.ng-ptr.is-ready .ng-ptr__card, .ng-ptr.is-refreshing .ng-ptr__card, .ng-ptr.is-done .ng-ptr__card { background: var(--ng-brand); color: hsl(var(--primary-foreground)); box-shadow: var(--ng-shadow-lg); }
.ng-ptr.is-ready .ng-ptr__track, .ng-ptr.is-refreshing .ng-ptr__track { stroke: currentColor; opacity: .3; }
.ng-ptr.is-ready .ng-ptr__arrow { transform: rotate(180deg); }
.ng-ptr.is-refreshing .ng-ptr__arrow, .ng-ptr.is-done .ng-ptr__arrow, .ng-ptr.is-done .ng-ptr__ring { opacity: 0; }
.ng-ptr.is-refreshing .ng-ptr__arc { stroke-dashoffset: 44 !important; }
.ng-ptr.is-refreshing .ng-ptr__ring { animation: ng-ptr-spin .8s linear infinite; }
.ng-ptr.is-done .ng-ptr__check { opacity: 1; }
.ng-ptr__label {
  padding: 3px 10px; border-radius: 999px; background: var(--ng-card); color: var(--ng-ink); box-shadow: 0 0 0 1px var(--ng-line), var(--ng-shadow-lg);
  font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; opacity: 0; transition: opacity .15s;
}
.ng-ptr__label:empty { visibility: hidden; }
.ng-ptr.is-ready .ng-ptr__label, .ng-ptr.is-refreshing .ng-ptr__label, .ng-ptr.is-done .ng-ptr__label { opacity: 1; }
@keyframes ng-ptr-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) {
  .ng-ptr.is-settling .ng-ptr__puck { transition-duration: .01s; }
  .ng-ptr__card, .ng-ptr__arrow, .ng-ptr__check, .ng-ptr__label { transition: none; }
  .ng-ptr.is-refreshing .ng-ptr__ring { animation: none; }
  .ng-ptr.is-refreshing .ng-ptr__arc { stroke-dashoffset: 0 !important; }
}
/* ---- [/Pull to refresh] ---- */

/* ---- [Sheet keyboard] (owner, 2026-10-19, iOS): while a text field in a sheet has focus, niguro.js
   ("[Sheet keyboard]") sets html.ng-kb with --ng-kb (the keyboard's height over the layout viewport's foot) and
   --ng-vh (the visible height): every sheet stands on the keyboard and keeps within what is visible, and the home
   bar's safe-area padding (under the keyboard now) goes, so no gap shows between the sheet and the keyboard. The
   comments, chat, picker and photo sheets already stand on var(--ng-kb) and size by var(--ng-vh). ---- */
@media (max-width: 1023.98px) {
  html.ng-kb .modal .modal-dialog { bottom: var(--ng-kb); }
  html.ng-kb .modal .modal-content { max-height: calc(var(--ng-vh) - 24px); padding-bottom: 0; }
  html.ng-kb body.publisher-focus [id="publisher-wapper"] > .ng-pub { bottom: var(--ng-kb); max-height: calc(var(--ng-vh) - 24px); padding-bottom: 16px; }
  html.ng-kb .ng-pub .ng-pub__bar { padding-bottom: 8px; }
  html.ng-kb .ng-top__actions .dropdown-menu.ng-sheet.show { bottom: var(--ng-kb) !important; max-height: calc(var(--ng-vh) - 24px); padding-bottom: 20px; }
  html.ng-kb .ng-pillnav__create .dropdown-menu.ng-sheet.show { bottom: var(--ng-kb) !important; max-height: calc(var(--ng-vh) - 24px); padding-bottom: 12px; }
  html.ng-kb .ng-csheet__body .post-comments > :is(.js_comment-form, .js_comment-disabled-msg) { padding-bottom: 10px; }
  html.ng-kb :is(.ng-bs__panel, .ng-pk__panel) { padding-bottom: 0; }
  html.ng-kb .ng-pv__foot { padding-bottom: 10px; }
  /* Messages (a full-screen page): its foot, the composer, stands on the keyboard too */
  html.ng-kb .ng-msgr { bottom: var(--ng-kb); }
  html.ng-kb :is(.ng-msgr__main, .ng-msgr__main > .card, .ng-msgr__main .panel-messages) { height: var(--ng-vh); }
  html.ng-kb .ng-msgr .chat-form { padding-bottom: 10px; }
}
/* ---- [/Sheet keyboard] ---- */


/* ------------------------------- */
/* The left column: the services panel, dressed like niguroapp's home panel: a light wash of the
   brand hue at the top fading into the card (and a cooler glow in the corner), a faint brand
   ring, group heads with a short brand bar (grey while closed), rows with a tinted icon tile
   that tint with their own hue on hover. The brand follows Admin > Design (see _head.css.tpl). */
/* ------------------------------- */

.ng-panel {
  padding: 10px; border: 0; border-radius: var(--ng-r); /* niguroapp's .na-panel__card padding (user, 2026-10-17) */
  background:
    radial-gradient(120% 180px at 100% 0%, hsl(190 80% 60% / .10), transparent 70%),
    linear-gradient(180deg, hsl(var(--primary) / .10) 0%, hsl(var(--primary) / .04) 160px, transparent 320px),
    var(--ng-card);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / .08);
}
body.night-mode .ng-panel {
  background:
    radial-gradient(120% 180px at 100% 0%, hsl(var(--primary) / .14), transparent 70%),
    linear-gradient(180deg, hsl(var(--primary) / .16) 0%, hsl(var(--primary) / .05) 160px, transparent 320px),
    var(--ng-card);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / .12);
}
.ng-panel details + details { border-top: 1px solid hsl(var(--primary) / .10); }
.ng-panel summary {
  position: relative; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 22px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ng-ink-strong); cursor: pointer; user-select: none;
}
.ng-panel summary::-webkit-details-marker { display: none; }
.ng-panel summary::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 16px; margin-top: -8px; border-radius: 4px;
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary) / .45));
}
.ng-panel details:not([open]) > summary { color: var(--ng-sub); }
.ng-panel details:not([open]) > summary::before { background: var(--ng-fill-2); }
.ng-panel summary span { flex: 1; }
.ng-panel summary:hover { background: var(--ng-fill); }
.ng-panel summary > .ng-ico { width: 16px; height: 16px; color: var(--ng-faint); transition: transform .2s; }
.ng-panel details[open] > summary > .ng-ico { transform: rotate(180deg); }
.ng-panel details > a {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--ng-ink); text-decoration: none; transition: background-color .15s ease, transform .15s ease;
}
.ng-panel details > a + a { margin-top: 4px; }
.ng-panel details[open] > a:last-child { margin-bottom: 12px; }
.ng-panel details > a:hover { background: hsl(var(--primary) / .06); color: var(--ng-ink); transform: translateX(2px); }
body.night-mode .ng-panel details > a:hover { background: hsl(var(--primary) / .09); }
.ng-panel__ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: var(--ng-tile); color: var(--ng-brand); transition: box-shadow .15s ease;
  --ng-ico-sw: 2; /* niguroapp's panel icons are drawn at 2 (the site default is 1.75) */
}
.ng-panel__ico .ng-ico, .ng-panel__ico img { width: 16px; height: 16px; object-fit: contain; }
.ng-panel details > a:hover .ng-panel__ico { box-shadow: 0 4px 10px hsl(var(--primary) / .22); }
.ng-panel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-panel details > a.is-active { background: hsl(var(--primary) / .10); color: var(--ng-brand); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ng-panel details > a { transition: none; } .ng-panel details > a:hover { transform: none; } }

/* ------------------------------- */
/* The post box and the "Create post" dialog (Sngine's publisher, _publisher.tpl)
   Structure from Facebook, look from our tokens. The inline composer is the dialog: it shows
   while the page has publisher-focus (Sngine's own focus mode), centred on desktop, a bottom
   sheet on phones. In Sngine's modal composer the same parts sit inside #modal. */
/* ------------------------------- */

/* the post box */
.ng-postbox { padding: 12px 16px 6px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-postbox__row { display: flex; align-items: center; gap: 10px; }
.ng-postbox__ava { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.ng-postbox__field {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ng-fill);
  color: var(--ng-sub); font-size: 15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .15s;
}
.ng-postbox__field:hover { filter: brightness(.97); }
body.night-mode .ng-postbox__field:hover { filter: brightness(1.12); }
.ng-postbox__acts { display: flex; gap: 4px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ng-line); }
.ng-postbox__acts button {
  flex: 1; min-width: 0; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ng-sub); font-size: 14px; font-weight: 600; transition: background .15s;
}
.ng-postbox__acts button:hover { background: var(--ng-fill); }
.ng-postbox__acts .ng-ico { width: 22px; height: 22px; flex: none; color: var(--ng-brand); }
.ng-postbox__acts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-postbox__short { display: none; }
/* the short label when the post box itself is narrow (phones, or a narrow desktop column) */
.ng-postbox { container-type: inline-size; }
@container (max-width: 459.98px) { .ng-postbox__long { display: none; } .ng-postbox__short { display: inline; } }

/* the inline composer becomes the dialog */
[id="publisher-wapper"] > .publisher-overlay {
  position: fixed; inset: 0; z-index: 1040; display: block; background: rgb(8 12 18 / .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
body.publisher-focus [id="publisher-wapper"] > .publisher-overlay { opacity: 1; visibility: visible; }
[id="publisher-wapper"] > .ng-pub {
  position: fixed; z-index: 1041; left: 50%; top: 50%; width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: 0; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 12px 40px hsl(30 20% 10% / .18); opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 12px)) scale(.98);
  transition: opacity .2s, transform .24s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
body.publisher-focus [id="publisher-wapper"] > .ng-pub { z-index: 1041; opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
/* phones and tablets (under 1024px): a bottom sheet; on tablets its content keeps a phone's width, centred */
@media (max-width: 1023.98px) {
  [id="publisher-wapper"] > .ng-pub {
    --ng-pub-px: max(16px, calc(50vw - 320px));
    left: 0; top: auto; bottom: 0; width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    border-radius: 24px 24px 0 0 !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); opacity: 1;
    padding-left: var(--ng-pub-px); padding-right: var(--ng-pub-px);
    transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility .32s;
  }
  [id="publisher-wapper"] > .ng-pub .ng-pub__head {
    margin-left: calc(-1 * var(--ng-pub-px)); margin-right: calc(-1 * var(--ng-pub-px));
    padding-left: calc(var(--ng-pub-px) - 8px); padding-right: calc(var(--ng-pub-px) - 8px);
  }
  body.publisher-focus [id="publisher-wapper"] > .ng-pub { transform: none; }
  [id="publisher-wapper"] > .ng-pub::before { content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--ng-line); }
}
@media (prefers-reduced-motion: reduce) { [id="publisher-wapper"] > .ng-pub { transition-duration: .01s; } }
/* Sngine's own overlay and close button are not used in the modal composer */
[id="publisher-wapper-modal"] > .publisher-overlay, .ng-pub .publisher-close { display: none !important; }

/* the dialog */
.ng-pub { margin-bottom: 0; padding: 0 16px 16px; border: 0; border-radius: var(--ng-r) !important; background: var(--ng-card); box-shadow: none; /* [Card radius] */ }
.ng-pub .publisher-slider { display: block !important; height: auto !important; overflow: visible !important; }
.ng-pub__head {
  position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
  margin: 0 -16px 12px; padding: 8px; border-bottom: 1px solid var(--ng-line); background: var(--ng-card);
}
.ng-pub__title { grid-area: 1 / 2; margin: 0; text-align: center; font-size: 19px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-pub__title--more, .ng-pub.is-more .ng-pub__title { display: none; }
.ng-pub.is-more .ng-pub__title--more { display: block; }
.ng-pub__back, .ng-pub__x { width: 36px; height: 36px; background: var(--ng-fill); color: var(--ng-ink); }
.ng-pub__back { grid-area: 1 / 1; visibility: hidden; }
.ng-pub__x { grid-area: 1 / 3; justify-self: end; }
.ng-pub.is-more .ng-pub__back { visibility: visible; }
.ng-pub.is-more .ng-pub__x { visibility: hidden; }
.ng-pub__back .ng-ico, .ng-pub__x .ng-ico { width: 20px; height: 20px; }

/* who is posting, and the privacy */
.ng-pub__who { display: flex; align-items: center; gap: 10px; }
.ng-pub__who > img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.ng-pub__whobody { min-width: 0; }
.ng-pub__whobody > b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ng-ink-strong); }
.ng-pub__whobody .btn-group, .ng-pub__whobody .js_publisher-privacy-public { margin-top: 3px; }
.ng-pub__whobody .btn-group > .btn, .ng-pub__whobody .js_publisher-privacy-public {
  height: 26px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--ng-fill); color: var(--ng-ink-strong);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center;
}
.ng-pub__whobody .btn-group-icon { margin-right: 6px !important; font-size: 12px; }

/* what is on your mind */
.ng-pub .publisher-message { min-height: 112px; padding: 10px 0 6px; }
.ng-pub .publisher-message > .publisher-avatar { display: none; }
.ng-pub .publisher-message .ql-editor, .ng-pub .publisher-message textarea { padding: 0; font-size: 20px; line-height: 1.4; color: var(--ng-ink-strong); }
.ng-pub .publisher-message .ql-editor { min-height: 96px; }
.ng-pub .publisher-message .ql-editor.ql-blank::before { content: var(--ng-ask); left: 0; right: 0; font-style: normal; color: var(--ng-sub); }
.ng-pub .publisher-message.colored { min-height: 0; padding: 30px; border-radius: 14px; }
.ng-pub .publisher-message.colored .ql-editor { font-size: 24px; font-weight: 700; text-align: center; }

/* "Add to your post": the main tools as accent icons, then the more button */
.ng-pub .publisher-tools-tabs { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; padding: 6px 6px 6px 16px; border: 1px solid var(--ng-line); border-radius: 12px; }
.ng-pub__addlabel { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ng-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-pub .publisher-tools-tabs ul.row { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; --bs-gutter-x: 0; }
.ng-pub .publisher-tools-tabs ul.row > li { display: none; width: auto; padding: 0; list-style: none; }
.ng-pub .publisher-tools-tabs ul.row > li.ng-quick { display: block; }
.ng-pub .publisher-tools-tab {
  position: relative; width: 40px; height: 40px; margin: 0; padding: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: transparent; color: transparent; font-size: 0; transition: background .15s;
}
.ng-pub .publisher-tools-tab:hover { background: var(--ng-fill); }
.ng-pub .publisher-tools-tab.activated { background: var(--ng-tint); }
/* night: no background behind the tools (Sngine's night rule gave each one a card-hover fill; user, 2026-10-17) */
body.night-mode .ng-pub .publisher-tools-tab { background: transparent; }
body.night-mode .ng-pub .publisher-tools-tab:hover { background: var(--ng-fill); }
body.night-mode .ng-pub .publisher-tools-tab.activated { background: var(--ng-tint); }
.ng-pub .publisher-tools-tab svg { width: 24px !important; height: 24px !important; margin: 0 !important; }
.ng-pub .publisher-tools-tab .badge, .ng-pub .publisher-tools-tab .spinner-grow { display: none; }
.ng-pub__more { width: 40px; height: 40px; flex: none; color: var(--ng-sub); }
.ng-pub__more .ng-ico { width: 22px; height: 22px; }
@media (max-width: 399.98px) { .ng-pub__addlabel { display: none; } .ng-pub .publisher-tools-tabs { justify-content: space-between; padding-left: 6px; } }
/* the tool icons are the accent, like every icon tile (the global .main-icon rule) */

/* more: every tool (two columns, with names) and the post options, sliding in */
.ng-pub.is-more .ng-pub__who, .ng-pub.is-more .publisher-message,
.ng-pub.is-more .publisher-slider > :not(.publisher-tools-tabs):not(.publisher-footer),
.ng-pub.is-more .publisher-footer > :not(.publisher-footer-options) { display: none !important; }
.ng-pub.is-more .publisher-tools-tabs { display: block; margin: 0; padding: 0; border: 0; animation: ng-pub-more .26s cubic-bezier(.2, .8, .2, 1) both; }
.ng-pub.is-more .ng-pub__addlabel, .ng-pub.is-more .ng-pub__more { display: none; }
.ng-pub.is-more .publisher-tools-tabs ul.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.ng-pub.is-more .publisher-tools-tabs ul.row > li { display: block; }
.ng-pub.is-more .publisher-tools-tab {
  width: 100%; height: 52px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 10px;
  border-radius: 10px; color: var(--ng-ink-strong) !important; font-size: 15px; font-weight: 600; text-align: left; white-space: nowrap;
}
.ng-pub.is-more .publisher-tools-tab .badge { display: inline-block; margin-left: 4px; font-size: 10px; }
.ng-pub:not(.is-more) .publisher-footer-options { display: none; }
.ng-pub.is-more .publisher-footer { padding: 0; animation: ng-pub-more .26s cubic-bezier(.2, .8, .2, 1) both; }
.ng-pub.is-more .publisher-footer-options { margin: 12px 0 0; padding: 12px 4px 0; border-top: 1px solid var(--ng-line); border-bottom: 0; }
.ng-pub:not(.is-more) .publisher-tools-tabs, .ng-pub:not(.is-more) .publisher-message { animation: ng-pub-back .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes ng-pub-more { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ng-pub-back { from { opacity: .4; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@media (max-width: 399.98px) { .ng-pub.is-more .publisher-tools-tabs ul.row { grid-template-columns: minmax(0, 1fr); } }

/* the Post button, full width */
.ng-pub .publisher-footer { padding: 12px 0 0; text-align: left; }
.ng-pub .publisher-footer-buttons { display: block; }
.ng-pub .publisher-footer-buttons .d-grid { display: block !important; }
.ng-pub .js_publisher-btn { width: 100%; height: 38px; min-height: 38px; margin: 0 !important; border-radius: 10px; font-size: 14px; font-weight: 600; }

/* ------------------------------- */
/* Colored posts: Sngine's backgrounds for text posts (Admin › Colored Posts; Niguro's 24 in db/044)
   Every background sits centred in its 300px box (Sngine pins it to the top-left corner, which cut the lower part of
   an illustration off in a wide box); the publisher's picker is one compact row of small round swatches that
   scrolls sideways (_publisher.tpl .ng-colored-grid; niguro.js turns the mouse wheel into sideways scrolling there).
   In the feed the block is media: the same gap under the header as a photo, full card width, flush on the divider. */
/* ------------------------------- */
.post-colored, .publisher-message.colored, .post-colored-preview { background-position: center !important; }
.publisher-meta[data-meta="colored"] { padding: 8px 0 4px; }
.ng-colored-grid {
  display: flex; gap: 8px; padding: 4px 3px 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.ng-colored-grid .colored-pattern-item {
  display: block; flex: none; width: 30px; height: 30px; margin: 0; border: 0; border-radius: 50%; scroll-snap-align: start;
  background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px hsl(0 0% 0% / .12); transition: transform .15s;
}
.ng-colored-grid .colored-pattern-item:hover { transform: scale(1.1); }
.ng-colored-grid .colored-pattern-item.active { box-shadow: 0 0 0 2px var(--ng-card), 0 0 0 4px var(--ng-brand); }
body.night-mode .ng-colored-grid .colored-pattern-item { border: 0; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .14); }
body.night-mode .ng-colored-grid .colored-pattern-item.active { box-shadow: 0 0 0 2px var(--ng-card), 0 0 0 4px var(--ng-brand); }
/* text over 120 characters: the swatches rest, with a hint (niguro.js); the counter on the background */
.ng-colored-hint { display: none; margin: 2px 3px 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--ng-sub); }
.publisher-meta[data-meta="colored"].is-over .ng-colored-hint { display: block; }
.publisher-meta[data-meta="colored"].is-over .colored-pattern-item:not(.active) { opacity: .35; pointer-events: none; }
.ng-colored-count {
  position: absolute; right: 14px; bottom: 10px; display: none; padding: 1px 7px; border-radius: 999px; background: hsl(0 0% 0% / .18);
  color: inherit; font-size: 12px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.publisher-message.colored { position: relative; }
.publisher-message.colored .ng-colored-count { display: block; }
.ng-colored-count.is-full { background: hsl(0 70% 45% / .85); color: #fff; }
/* the feed: a gap under the header like a photo's, flush on the actions' divider, full width */
.post-body > .post-replace > .post-colored { margin: 12px 0 0; border-radius: 0; }
.post-body > .post-replace:has(> .post-colored) { margin-bottom: 0; }
.post-body > .post-replace:has(> .post-colored) ~ .post-actions { margin-top: 0; }
/* a reshared post's inner card: the same gap under its header, and its media (background, photos, video)
   follows the card's rounded corners instead of poking out square */
.post-snippet { overflow: hidden; }
.post-snippet .post-colored { margin: 12px 0 0; border-radius: 0; }
.post-snippet > div > .mt10 { margin-top: 12px !important; }
/* /Colored posts */

/* ------------------------------- */
/* The composer, compact (user, 2026-10-17): it holds many tools, so smaller type and icons and tighter gaps
   (text 14px, labels 13px, icons 20px; what you write stays 16px so phones don't zoom in). The tool icons are
   plain icons in their own colours, no tile behind them: a soft hover / focus only, and the tool in use marked
   with a dot under it. Every tap target stays at least 36px. */
/* ------------------------------- */
.ng-pub { padding: 0 14px 14px; }
.ng-pub__head { grid-template-columns: 40px minmax(0, 1fr) 40px; margin: 0 -14px 10px; padding: 6px; }
.ng-pub__title { font-size: 17px; font-weight: 700; }
.ng-pub__back, .ng-pub__x { width: 36px; height: 36px; }
.ng-pub__back .ng-ico, .ng-pub__x .ng-ico { width: 18px; height: 18px; }
.ng-pub__who { gap: 8px; }
.ng-pub__who > img { width: 36px; height: 36px; }
.ng-pub__whobody > b { font-size: 14px; }
.ng-pub__whobody .btn-group, .ng-pub__whobody .js_publisher-privacy-public { margin-top: 2px; }
.ng-pub__whobody .btn-group > .btn, .ng-pub__whobody .js_publisher-privacy-public { height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.ng-pub .publisher-message { min-height: 84px; padding: 8px 0 4px; }
.ng-pub .publisher-message .ql-editor, .ng-pub .publisher-message textarea { font-size: 16px; line-height: 1.45; }
.ng-pub .publisher-message .ql-editor { min-height: 72px; }
.ng-pub .publisher-message.colored { padding: 24px; }
.ng-pub .publisher-message.colored .ql-editor { font-size: 22px; line-height: 1.3; }
/* the tools row */
.ng-pub .publisher-tools-tabs { margin: 10px 0 0; padding: 3px 3px 3px 12px; gap: 2px; border-radius: 10px; }
.ng-pub__addlabel { font-size: 14px; }
.ng-pub__more { width: 36px; height: 36px; }
.ng-pub__more .ng-ico { width: 20px; height: 20px; }
body .ng-pub .publisher-tools-tab, body.night-mode .ng-pub .publisher-tools-tab,
body .publisher-tools-tab, body.night-mode .publisher-tools-tab { background: transparent; box-shadow: none; }
body .ng-pub .publisher-tools-tab { width: 36px; height: 36px; }
body .ng-pub .publisher-tools-tab:hover, body.night-mode .ng-pub .publisher-tools-tab:hover,
body .ng-pub .publisher-tools-tab:focus-visible, body.night-mode .ng-pub .publisher-tools-tab:focus-visible { background: var(--ng-fill); }
body .ng-pub .publisher-tools-tab.activated, body.night-mode .ng-pub .publisher-tools-tab.activated { background: transparent; }
/* a tool that can't go with the one in use: faded, without Sngine's white / black veil (a tile in night mode) */
.ng-pub .publisher-tools-tab.disabled { opacity: .38; cursor: default; }
.ng-pub .publisher-tools-tab.disabled::after { display: none; }
body .ng-pub .publisher-tools-tab.disabled:hover, body.night-mode .ng-pub .publisher-tools-tab.disabled:hover { background: transparent; }
/* what you write uses the site's font, like the post it becomes */
.ng-pub .publisher-message .ql-editor { font-family: var(--ng-font); }
.ng-pub .publisher-tools-tab.activated::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ng-brand);
}
.ng-pub .publisher-tools-tab .main-icon { padding: 0 !important; background: none !important; box-shadow: none !important; }
.ng-pub .publisher-tools-tab svg { width: 20px !important; height: 20px !important; }
/* the round hover sits centred on the icon: a 36px square, the icon its only visible child (no stray margin,
   line-height or the hidden label's text pushing it off) */
body .ng-pub:not(.is-more) .publisher-tools-tab { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; }
.ng-pub:not(.is-more) .publisher-tools-tab .js_x-uploader { display: flex; line-height: 0; }
.ng-pub .publisher-tools-tab .svg-container { display: flex; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; }
/* more: every tool in two columns, then the post options */
.ng-pub.is-more .publisher-tools-tabs ul.row { gap: 0 6px; }
body .ng-pub.is-more .publisher-tools-tab { width: 100%; height: 40px; gap: 10px; padding: 0 8px; border-radius: 9px; font-size: 14px; }
body .ng-pub.is-more .publisher-tools-tab.activated { color: var(--ng-brand) !important; }
.ng-pub.is-more .publisher-tools-tab.activated::after { display: none; }
.ng-pub.is-more .publisher-footer-options { margin-top: 8px; padding-top: 8px; }
.ng-pub .publisher-footer-options .form-table-row { margin-bottom: 6px !important; }
.ng-pub .publisher-footer-options .form-label { font-size: 14px; }
.ng-pub .publisher-footer-options .form-text { font-size: 12.5px; }
.ng-pub .publisher-footer-options .avatar .main-icon { width: 20px !important; height: 20px !important; }
/* what the tools open: the rows under the text (feeling, location, album, GIF, poll...) */
.ng-pub .publisher-meta { margin: 0; padding: 6px 0; font-size: 13px; }
.ng-pub .publisher-meta input { padding: 9px 14px 9px 36px; border-radius: 12px; font-size: 14px; line-height: 18px; }
.ng-pub .publisher-meta input.no-icon { padding: 9px 14px; }
.ng-pub .publisher-meta .svg-container { top: 15px; left: 12px; }
.ng-pub #feelings-menu-toggle { padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.ng-pub #feelings-data span { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.ng-pub .feelings-list .feeling-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 10px; border-radius: 8px; }
.ng-pub .feelings-list .feeling-item .icon { display: block; padding: 0; }
.ng-pub .feelings-list .feeling-item .icon .twa { font-size: 20px; width: 24px; height: 24px; background-size: 24px 24px; }
.ng-pub .feelings-list .feeling-item .data { display: block; font-size: 14px; }
/* the Post button */
.ng-pub .publisher-footer { padding-top: 10px; }
/* /The composer, compact */

/* Colored posts, continued: the words on a background take its text colour (Sngine sets it on the box), the
   placeholder too, day and night */
.ng-pub .publisher-message.colored .ql-editor, .ng-pub .publisher-message.colored textarea { color: inherit; }
.ng-pub .publisher-message.colored .ql-editor.ql-blank::before { color: inherit; opacity: .7; }
/* Sngine's night rule makes the editor white with !important; on a background the background's colour wins */
body.night-mode .ng-pub .publisher-message.colored .ql-editor, body.night-mode .ng-pub .publisher-message.colored textarea,
body.night-mode .ng-pub .publisher-message.colored .ql-editor.ql-blank::before { color: inherit !important; }
/* /Colored posts, continued */

/* ------------------------------- */
/* niguro [composer layout] (_publisher.tpl .ng-pub__chips / .ng-pub__bar, niguro.js "[composer layout]").
   Phones and tablets (under 1024px), Facebook's mobile composer: the sheet opens at 60% of the screen and grows with
   what is in it up to 95%; under the name one row of small outlined chips that scrolls sideways (text tools and post
   options); the text; what the tools open; then a bar pinned at the foot: media tools as icons left, Post right.
   Stacked gaps: name, 10px, chips, 8px, text. From 1024px up the rows are hidden and the dialog is as before. */
/* ------------------------------- */
.ng-pub__chips, .ng-pub__bar { display: none; }
@media (max-width: 1023.98px) {
  [id^="publisher-wapper"] > .ng-pub { display: flex; flex-direction: column; padding-bottom: 0; }
  [id^="publisher-wapper"] > .ng-pub > * { flex: none; }
  [id="publisher-wapper"] > .ng-pub { min-height: 60vh; min-height: 60dvh; max-height: 95vh; max-height: 95dvh; }
  /* "Add to your post" and "…": their tools are in the chips and the bar now */
  .ng-pub .publisher-tools-tabs { display: none !important; }
  /* the chips */
  .ng-pub__chips {
    --ng-pg: var(--ng-pub-px, 14px); /* [Scroll arrows] inset */
    display: flex; gap: 6px; margin-top: 10px; padding-block: 0 2px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none;
  }
  .ng-pub__chips::-webkit-scrollbar { display: none; }
  .ng-pub__chips > li { flex: none; width: auto; margin: 0; padding: 0; list-style: none; }
  .ng-pub__chip, body .ng-pub:not(.is-more) .ng-pub__chips .publisher-tools-tab {
    display: inline-flex; flex: none; align-items: center; gap: 6px; width: auto; height: 32px; margin: 0; padding: 0 12px; overflow: visible;
    border: 1px solid var(--ng-line); border-radius: 999px; background: transparent; box-shadow: none; color: var(--ng-ink-strong);
    font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
  }
  .ng-pub__chip .ng-ico { width: 16px; height: 16px; flex: none; color: var(--ng-brand); }
  .ng-pub .ng-pub__chips .publisher-tools-tab svg, .ng-pub .ng-pub__chip svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
  .ng-pub .ng-pub__chips .svg-container { width: 16px !important; height: 16px !important; }
  .ng-pub__chip .main-icon { padding: 0 !important; background: none !important; box-shadow: none !important; }
  .ng-pub__chips .publisher-tools-tab .float-end, .ng-pub__chips .publisher-tools-tab .spinner-grow { display: none; }
  .ng-pub__chips .publisher-tools-tab .text-gradient { font-size: 13px; }
  body .ng-pub .ng-pub__chips .publisher-tools-tab:hover, body.night-mode .ng-pub .ng-pub__chips .publisher-tools-tab:hover,
  .ng-pub__chip:hover { background: var(--ng-fill); }
  .ng-pub__chip:focus-visible, .ng-pub__chips .publisher-tools-tab:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 1px; }
  /* in use: the accent outline and tint (no dot) */
  body .ng-pub .ng-pub__chips .publisher-tools-tab.active, body .ng-pub .ng-pub__chips .publisher-tools-tab.activated,
  body.night-mode .ng-pub .ng-pub__chips .publisher-tools-tab.active, body.night-mode .ng-pub .ng-pub__chips .publisher-tools-tab.activated,
  .ng-pub__chip[aria-pressed="true"] { border-color: var(--ng-brand); background: var(--ng-tint); color: var(--ng-brand); }
  .ng-pub .ng-pub__chips .publisher-tools-tab.activated::after { display: none; }
  .ng-pub__chip:disabled { opacity: .38; cursor: default; }
  .ng-pub__chip:disabled:hover { background: transparent; }
  /* what the options' chips open (the date, the collaborators, the price...): under the text; their switches stay hidden */
  body .ng-pub:not(.is-more) .publisher-footer-options { display: block; margin: 0; padding: 0; border: 0; }
  .ng-pub .publisher-footer-options > .form-table-row { display: none; }
  .ng-pub .publisher-footer-options > .form-group, .ng-pub .publisher-footer-options > [id] { margin: 8px 0 0; }
  .ng-pub .publisher-footer { padding: 0; }
  .ng-pub .publisher-footer > .alert { margin: 8px 0 0 !important; }
  /* the bar */
  .ng-pub__bar {
    position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
    margin: auto calc(-1 * var(--ng-pub-px, 14px)) 0; padding: 8px var(--ng-pub-px, 14px) calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ng-line); background: var(--ng-card);
  }
  [id^="publisher-wapper"] > .ng-pub > .ng-pub__bar { margin-top: auto; }
  .ng-pub > .publisher-slider { padding-bottom: 12px; }
  .ng-pub__media { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; margin: 0 0 0 -6px; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; list-style: none; }
  .ng-pub__media::-webkit-scrollbar { display: none; }
  .ng-pub__media > li { flex: none; width: auto; margin: 0; padding: 0; list-style: none; }
  .ng-pub__bar .publisher-footer-buttons, .ng-pub__bar .publisher-footer-buttons .d-grid { display: block !important; flex: none; margin: 0; }
  .ng-pub__bar .js_publisher-btn { width: auto; min-width: 84px; height: 36px; min-height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }
  .ng-pub .js_publisher-btn.ng-pub__empty { opacity: .45; cursor: default; box-shadow: none; }
}
/* /niguro [composer layout] */

/* ------------------------------- */
/* The stories card (__ng_stories.tpl) and the feed tabs right above the posts (__ng_feedtabs.tpl) */
/* ------------------------------- */

.ng-storiescard { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
@media (min-width: 768px) { .ng-storiescard { padding: 16px 20px 20px; } }
.ng-storiescard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.ng-storiescard__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-storiescard__del { width: 36px; height: 36px; margin: -6px -6px -6px 0; }
.ng-storiescard__del .ng-ico { width: 18px; height: 18px; }
.ng-feedtabs { display: flex; width: 100%; margin: 0 0 12px; padding: var(--ng-seg-pad); /* [Segments: one style] */ }
.ng-feedtabs__lede { margin: -2px 6px 12px; font-size: 14px; color: var(--ng-sub); }
/* tabs that are links (the feed head) */
.ng-seg a {
  flex: 1; height: var(--ng-seg-h-lg); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ng-seg-r); color: var(--ng-seg-ink); font-size: var(--ng-seg-fs-lg); font-weight: var(--ng-seg-fw); text-decoration: none; transition: background .15s, color .15s; /* [Segments: one style] */
}
.ng-seg a:hover { color: var(--ng-seg-hover-ink); background: var(--ng-seg-hover-bg); /* [Segments: one style] */ }
.ng-seg a[aria-current="page"] { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); /* [Segments: one style] */ }

/* stories: 96 x 150 cards in one swipeable row; "Create story" first (the prototype's .story) */
.ng-stories.stories-wrapper { margin: 0; padding: 0; overflow: visible; }
.ng-stories #stories { display: flex !important; gap: 10px; overflow-x: auto !important; scrollbar-width: none; }
.ng-stories #stories::-webkit-scrollbar { display: none; }
.ng-stories #stories > .add-story, .ng-stories #stories > .story { flex: 0 0 96px; width: 96px !important; max-width: none; height: 150px; margin: 0 !important; }
.ng-stories #stories > .add-story {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 6px 12px;
  border-radius: 16px; background: var(--ng-fill); transition: filter .15s;
}
.ng-stories #stories > .add-story:hover { filter: brightness(.97); }
.ng-stories .add-story .img { display: none; }
.ng-stories .add-story .add {
  position: static; transform: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--ng-brand); color: #fff;
}
.ng-stories .add-story .add .ng-ico { width: 20px; height: 20px; }
.ng-story__name { font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--ng-ink-strong); }
.ng-stories #stories > .story > .item-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background: var(--ng-fill); }
.ng-stories #stories > .story > .item-link > .item-preview { position: absolute; inset: 0; width: 100%; height: 100% !important; max-height: none; margin: 0; border-radius: 0; }
.ng-stories #stories > .story > .item-link > .item-preview > img { width: 100%; height: 100%; object-fit: cover; padding: 0; border: 0; border-radius: 0; }
.ng-stories #stories > .story > .item-link::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 #stories > .story.seen { opacity: 1; }
.ng-stories #stories > .story.seen > .item-link::after { box-shadow: none; }
.ng-stories #stories > .story > .item-link > .info {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; margin: 0; padding: 0; color: #fff; text-align: left;
  font-size: 12px; font-weight: 700; line-height: 1.2;
}
.ng-stories #stories > .story > .item-link > .info .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 700; }
.ng-stories #stories > .story > .item-link > .info .time { display: none; }

/* ------------------------------- */
/* Site announcements (_announcements.tpl): the prototype's banner slot */
/* ------------------------------- */

.ng-ann { margin-bottom: 20px; }
.ng-ann__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--ng-r); }
.ng-ann__track::-webkit-scrollbar { display: none; }
.ng-ann__item {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 52px 16px 16px; overflow: hidden; border-radius: var(--ng-r);
  background: linear-gradient(150deg, hsl(var(--h) 90% 38% / .16), hsl(var(--h) 90% 38% / .05) 70%), var(--ng-card);
}
body.night-mode .ng-ann__item { background: linear-gradient(150deg, hsl(var(--h) 70% 48% / .22), hsl(var(--h) 70% 48% / .07) 70%), var(--ng-card); }
.ng-ann__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: hsl(var(--h) 85% 37%); color: #fff; }
.ng-ann__icon .ng-ico { width: 20px; height: 20px; }
.ng-ann__copy { flex: 1; min-width: 0; }
.ng-ann__kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--h) 85% 30%); }
body.night-mode .ng-ann__kicker { color: hsl(var(--h) 70% 64%); }
.ng-ann__title { margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--ng-ink-strong); }
.ng-ann__text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub); }
.ng-ann__text p, .ng-ann__text ul, .ng-ann__text ol { margin: 0 0 6px; }
.ng-ann__text > :last-child { margin-bottom: 0; }
.ng-ann__text a { color: var(--ng-brand); font-weight: 600; }
.ng-ann__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; }
.ng-ann__close .ng-ico { width: 18px; height: 18px; }
/* the dots are buttons with a 20px hit area around the 6px dot (no extra space under the track: -7px) */
.ng-ann__dots { display: flex; justify-content: center; gap: 0; margin: 1px 0 -7px; }
.ng-ann__dot { display: grid; place-items: center; height: 20px; padding: 0 3px; border: 0; background: none; cursor: pointer; }
.ng-ann__dot span { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--ng-line); transition: width .2s, background .2s; }
.ng-ann__dot:hover span { background: var(--ng-sub); }
.ng-ann__dot.is-on span { width: 18px; background: var(--ng-brand); }
.ng-ann__dot:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 0; border-radius: 6px; }
/* touch screens: once, the cards slide a little to show the next one, then spring back (niguro.js) */
.ng-ann__track.is-hint > .ng-ann__item { animation: ng-ann-hint 1.1s cubic-bezier(.3, .7, .2, 1) both; }
[dir="RTL"] .ng-ann__track.is-hint > .ng-ann__item { animation-name: ng-ann-hint-rtl; }
@keyframes ng-ann-hint { 0% { transform: none; } 35%, 50% { transform: translateX(-56px); } 78% { transform: translateX(5px); } 100% { transform: none; } }
@keyframes ng-ann-hint-rtl { 0% { transform: none; } 35%, 50% { transform: translateX(56px); } 78% { transform: translateX(-5px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ng-ann__track.is-hint > .ng-ann__item { animation: none; } }


/* ------------------------------- */
/* Posts (Sngine's __feeds_post.tpl, unchanged): niguroapp's Cafe card (.na-cafe)
   Flat card, 14px corners; head 40px avatar + name + grey meta; text; media edge to edge;
   counts; a soft action bar under a hairline. 16px side gutter, 20px from 768px.
   Cards 12px apart (16px from 768px). */
/* ------------------------------- */

.post { --ng-pg: 16px; margin-bottom: 12px; border: 0; border-radius: var(--ng-r-md); background: var(--ng-card); box-shadow: none; }
@media (min-width: 768px) { .post { --ng-pg: 20px; margin-bottom: 16px; } }
/* head */
.post-header { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px var(--ng-pg) 0; }
.post-header > .post-avatar { display: block; flex: none; width: 40px; padding: 0; }
.post-header .post-avatar-picture { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.post-header > .post-meta { display: block; flex: 1; min-width: 0; width: auto; }
.post-header .post-author { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ng-ink-strong) !important; }
.post-header .post-author:hover { text-decoration: underline; }
.post-header .post-title { font-size: 14px; color: var(--ng-sub); }
.post-header .verified-badge svg, .post-header .pro-badge svg { width: 15px; height: 15px; }
.post-header .post-time { margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--ng-sub); }
.post-header .post-time a { color: var(--ng-sub); }
.post-header .post-time a:hover { color: var(--ng-ink); }
.post-header .post-time .text-link { color: var(--ng-brand); font-weight: 600; }
.post-header .post-time .btn-group > .btn { height: auto; min-height: 0; padding: 0 2px; border: 0; background: transparent; color: var(--ng-sub); font-size: 11px; line-height: 1; }
.post-header .post-time .btn-group > .btn::after { display: none; }
/* Sngine's chevron becomes a round "more" button */
.post-meta > .float-end.dropdown { margin: -4px -8px 0 6px; }
.post-meta > .float-end.dropdown > .dropdown-toggle {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ng-sub); cursor: pointer; transition: background .15s, color .15s;
}
.post-meta > .float-end.dropdown > .dropdown-toggle:hover, .post-meta > .float-end.dropdown > .dropdown-toggle[aria-expanded="true"] { background: var(--ng-fill); color: var(--ng-ink); }
.post-meta > .float-end.dropdown > .dropdown-toggle::after { display: none; }
.post-meta > .float-end.dropdown > .dropdown-toggle .fa-chevron-down { font-size: 16px; }
.post-meta > .float-end.dropdown > .dropdown-toggle .fa-chevron-down::before { content: "\f141"; }

/* text */
.post-body > .post-replace > .post-text, .post-body > .post-text { margin: 10px 0 0; padding: 0 var(--ng-pg); font-size: 15px; line-height: 1.55; color: var(--ng-ink); overflow-wrap: anywhere; }
.post-body > .post-replace > .post-text:empty { display: none; }
.post-body .post-text a { color: var(--ng-brand); }

/* media: photos run edge to edge (2px between them); link, video and file cards sit inset, rounded */
.post-body > .mt10 { margin-top: 12px !important; }
.post .pg_wrapper { margin: 0; overflow: hidden; border-radius: 0; background: var(--ng-fill); }
.post .pg_wrapper img { border-radius: 0; }
.post .pg_wrapper .pg_2x, .post .pg_wrapper .pg_3x, .post .pg_wrapper .pg_4x { padding: 1px; }
.post-body .post-media { margin: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--ng-fill-2); }
body.night-mode .post-body .post-media { background: hsl(var(--muted) / .7); }

/* counts */
.post-stats { margin: 10px 0 0; padding: 0 var(--ng-pg); font-size: 12.5px; color: var(--ng-sub); }
.post-stats .pointer:hover { color: var(--ng-ink); text-decoration: underline; }
/* the action bar */
.post-actions { gap: 4px; margin: 10px 0 0; padding: 6px calc(var(--ng-pg) - 6px) 8px; border-top: 1px solid var(--ng-line); }
.post-actions .action-btn {
  height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
  border-radius: 999px; color: var(--ng-sub); font-size: 13px; font-weight: 600; line-height: 1; transition: background .15s, color .15s;
}
.post-actions .action-btn:hover { background: var(--ng-fill); color: var(--ng-ink); }
.post-actions .action-btn .reaction-btn { display: inline-flex; align-items: center; gap: 6px; }
/* [Action icons: one size] (owner, 2026-10-19): every icon in an action bar (React, Comment, Review, Tip, Reshare,
   Share; feeds, the post page, the photo viewer, blogs) is one glyph (--ng-pbar-ico) centred in one box
   (--ng-pbar-box), so every button is the same size and every icon sits on the same line. The templates' inline
   24px boxes give way; the react button's emoji, once you have reacted, is drawn at a line glyph's visual size
   (7/8 of the glyph: Hugeicons fill about 21 of their 24 units), on nothing: no pill, tint or ring behind it.
   The reels column sets the same tokens bigger (pages/reels.css). */
:root { --ng-pbar-ico: 21px; --ng-pbar-box: 24px; }
.post-actions .action-btn :is(.action-icon, .svg-container, .reaction-btn-icon) {
  display: inline-grid; place-items: center; flex: none; width: var(--ng-pbar-box) !important; height: var(--ng-pbar-box) !important;
  margin: 0 !important; padding: 0; background: none;
}
.post-actions .action-btn svg { display: block; width: var(--ng-pbar-ico) !important; height: var(--ng-pbar-ico) !important; }
.post-actions .action-btn .reaction-btn-icon > i { width: var(--ng-pbar-box) !important; height: var(--ng-pbar-box) !important; font-size: calc(var(--ng-pbar-ico) * .95); line-height: 1; }
.post-actions .action-btn .action-icon, .post-actions .action-btn .action-icon *, .post-actions .action-btn svg, .post-actions .action-btn svg * { color: var(--ng-sub) !important; fill: var(--ng-sub) !important; }
.post-actions .action-btn:hover svg, .post-actions .action-btn:hover svg * { color: var(--ng-ink) !important; fill: var(--ng-ink) !important; }
/* [Action icons: one size] the Like thumb (Lucide) fills a little more of its box than Hugeicons' glyphs: 5% smaller, it
   reads the same size */
.post-actions .action-btn i.action-icon { font-size: calc(var(--ng-pbar-ico) * .95); line-height: 1; text-align: center; }
@media (min-width: 421px) { .post-actions .action-btn span.d-none.d-xl-inline-block, .post-actions .action-btn .reaction-btn-name { display: inline !important; } }

/* the "more" menu on posts and comments: a soft sheet that fades in, icon tiles, two-line items */
/* compact: our brand-coloured icons on small soft tiles (28px), 36px rows, 14px labels, descriptions under the label */
.action-dropdown-menu { min-width: 232px; padding: 6px; border: 0; border-radius: 14px; background: var(--ng-card); box-shadow: var(--ng-shadow-lg); }
.action-dropdown-menu.show { animation: ng-menu-in .16s ease both; }
@keyframes ng-menu-in { from { opacity: 0; translate: 0 -6px; scale: .98; } to { opacity: 1; translate: none; scale: none; } }
@media (prefers-reduced-motion: reduce) { .action-dropdown-menu.show { animation: none; } }
.action-dropdown-menu .dropdown-item { min-height: 36px; padding: 4px 8px; border-radius: 10px; white-space: normal; transition: background .12s; }
.action-dropdown-menu .dropdown-item:hover, .action-dropdown-menu .dropdown-item:focus { background: var(--ng-fill); color: var(--ng-ink-strong); }
.action-dropdown-menu .dropdown-item .action { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ng-ink-strong); }
.action-dropdown-menu .dropdown-item .main-icon, .action-dropdown-menu > a.dropdown-item > svg {
  width: 16px !important; height: 16px !important; margin: 0 !important; padding: 6px; box-sizing: content-box; flex: none; border-radius: 8px; background: var(--ng-tile);
}
/* one line per option: Sngine's second line mostly repeats the label ("Share" / "Share this profile"), so it's hidden everywhere (user, 2026-10-17) */
.dropdown-menu .action-desc { display: none !important; }
.action-dropdown-menu > a.dropdown-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ng-ink-strong); }
.action-dropdown-menu .dropdown-divider { margin: 6px 10px; border-top-color: var(--ng-line); opacity: 1; }

/* comments: soft bubbles */
.post-footer { padding: 0 var(--ng-pg, 16px); border-top: 1px solid var(--ng-line); border-radius: 0 0 var(--ng-r) var(--ng-r); background: transparent; /* [Card radius] */ }
/* [pickers] the last thing in a card's comments (the comment box, the last comment, "View previous comments",
   the "turned off" note) keeps clear of the card's foot (user, 2026-10-18); the sheets and viewers don't use it */
.post > .post-footer { padding-bottom: 14px; }
.post > .post-footer .post-comments > .js_comment-disabled-msg { padding-bottom: 0 !important; }
/* compact, like the big apps (user, 2026-10-17): 32px avatars, 24px on replies (sizes in "Comment threads"
   below), semibold names, the text, the actions and time muted; one even rhythm: 12px between
   comments, 8px before each reply. Shared classes: the feed, its phone sheet, single posts, blogs, the photo
   viewer and its sheet, reels. */
/* niguro [Comment type] (owner, 2026-10-19): the comment sizes as one set of tokens, a step smaller everywhere
   comments render (was 13px names, 14px text, 12px actions, 13px "N Replies"): names 12.5px, text 13px,
   the actions and time 11.5px (the time was 10.5px), the thread links 12px. Avatars stay (32px, 24px on replies). */
:root { --ng-cmt-name: 12.5px; --ng-cmt-text: 13px; --ng-cmt-meta: 11.5px; --ng-cmt-more: 12px; }
.comment { padding-bottom: 0; }
.post-comments .comment, .post-footer .comment { padding-top: 12px; }
.post-comments .comment.reply, .post-footer .comment.reply { padding-top: var(--ng-rpt, 8px); }
.comment-avatar { width: var(--ng-cav, 32px); }
.comment-avatar-picture { width: var(--ng-cav, 32px); height: var(--ng-cav, 32px); min-width: 0; min-height: 0; padding-top: 0; border-radius: 50% !important; }
.comment-data, .comment-edit { margin-inline-start: var(--ng-cind, 40px); }
/* the comment box's avatar sits level with its 46px field */
.js_comment-form > .comment-avatar { margin-top: 7px; }
.comment-inner-wrapper { margin-bottom: 0; }
.comment-inner { padding: 6px 12px 7px; border-radius: 16px; background: var(--ng-fill); }
.comment-author { line-height: 17px; }
.comment-author a, .comment-author .name { font-size: var(--ng-cmt-name); font-weight: 600; color: var(--ng-ink-strong); }
.comment-author .verified-badge svg, .comment-author .pro-badge svg { width: 14px; height: 14px; }
.comment-text { margin-bottom: 0; font-size: var(--ng-cmt-text); line-height: 1.42; color: var(--ng-ink); }
.comment-actions { margin: 3px 0 0; padding: 0; padding-inline-start: 12px; font-size: var(--ng-cmt-meta); line-height: 18px; color: var(--ng-sub); }
/* [Comment type] the time is the row's size (Sngine's <small> made it 10.5px) */
.comment-actions small.js_moment { font-size: var(--ng-cmt-meta); }
.comment-actions a, .comment-actions .text-link { color: var(--ng-sub); font-weight: 600; }
.comment-form textarea, .x-form.comment-form textarea { border-radius: 20px; background: var(--ng-fill); }

/* ------------------------------- */
/* Comment threads (Facebook's): a line runs down from under a comment's avatar, and each reply, the
   "N Replies" and "View previous replies" links and the reply box branch off it with a rounded elbow
   into their avatar (or their text); the line stops at the last one. Sngine nests one level (a reply to
   a reply joins the same thread). __feeds_comment.tpl keeps the menu, bubble and actions in
   .ng-cmt__main, so the line can start under the avatar and stop where the thread begins; deleted
   (hidden) replies drop out. Logical properties, so it mirrors in RTL. Wherever Sngine's comments
   render: the feed and its phone sheet, single posts, blogs, the photo viewer, reels. */
/* ------------------------------- */
.comment {
  --ng-cav: 32px;                       /* a comment's avatar */
  --ng-cind: 40px;                      /* where .comment-data starts (avatar + 8px) */
  --ng-rav: 24px;                       /* a reply's avatar */
  --ng-rind: 32px;                      /* a reply's .comment-data (avatar + 8px) */
  --ng-rpt: 8px;                        /* the space above a reply */
  --ng-tw: 2px;                         /* the line */
  --ng-tr: 12px;                        /* the elbow's corner */
  --ng-tc: var(--ng-line);
  /* the line's start edge, measured from the start of .comment-data (under the avatar's middle) */
  --ng-tx: calc(var(--ng-cav) / 2 - var(--ng-cind) - var(--ng-tw) / 2);
}
.comment.reply { --ng-cav: var(--ng-rav); --ng-cind: var(--ng-rind); }
/* night: --ng-line is close to the card; a step lighter so the thread reads */
body.night-mode .comment { --ng-tc: hsl(143 28% 24%); }
.ng-cmt__main { position: relative; display: flow-root; }
.comment-replies { padding-top: 0; }
.comment-data > .js_replies-toggle, .comment-replies > .js_see-more, .js_replies > li, .comment-replies > .js_reply-form { position: relative; }
/* "N Replies" / "View previous replies": quiet links on the thread */
.ng-cmt__more { display: block; padding: 6px 0; font-size: var(--ng-cmt-more); line-height: 20px; text-align: start; cursor: pointer; }
.ng-cmt__more .text-link { color: var(--ng-sub); font-weight: 700; }
.ng-cmt__more:hover .text-link { color: var(--ng-ink-strong); text-decoration: underline; }
.ng-cmt__more:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; border-radius: 6px; }
.ng-cmt__more .loader { margin: 0; }
/* the reply box sits on the thread too, a little apart from the last reply */
.comment-replies > .js_reply-form { padding: 4px 0 6px; }
/* where each item's elbow ends: the middle of the reply's avatar, of the link's line, of the reply box */
.js_replies > li { --ng-ty: calc(var(--ng-rpt) + var(--ng-rav) / 2); --ng-tgap: 2px; }
.ng-cmt__more { --ng-ty: 16px; --ng-tgap: 6px; }
.comment-replies > .js_reply-form { --ng-ty: 27px; --ng-tgap: 4px; }
/* the line from under the avatar, down past the bubble and actions, when a thread follows */
.comment-data:has(> .js_replies-toggle) > .ng-cmt__main::before,
.comment-data:has(> .comment-replies:is(:not(.x-hidden), [style*="block"]):not([style*="none"]) > :is(.js_see-more, .js_reply-form[style*="block"])) > .ng-cmt__main::before,
.comment-data:has(> .comment-replies:is(:not(.x-hidden), [style*="block"]):not([style*="none"]) > .js_replies > li > .comment:not([style*="none"])) > .ng-cmt__main::before {
  content: ""; position: absolute; top: calc(var(--ng-cav) + 4px); bottom: 0; inset-inline-start: var(--ng-tx);
  border-inline-start: var(--ng-tw) solid var(--ng-tc); pointer-events: none;
}
/* the elbow: from the line, round the corner, into the item */
.comment-data > .js_replies-toggle::before, .comment-replies > .js_see-more::before, .js_replies > li::before, .comment-replies > .js_reply-form::before {
  content: ""; position: absolute; top: 0; inset-inline-start: var(--ng-tx);
  width: calc(-1 * var(--ng-tx) - var(--ng-tgap)); height: calc(var(--ng-ty) + var(--ng-tw) / 2);
  border: 0 solid var(--ng-tc); border-inline-start-width: var(--ng-tw); border-block-end-width: var(--ng-tw);
  border-end-start-radius: var(--ng-tr); pointer-events: none;
}
/* the line carries on past an item while something follows it on the thread */
.comment-replies > .js_see-more::after,
.js_replies > li:has(~ li > .comment:not([style*="none"]))::after,
.comment-replies:has(> .js_reply-form[style*="block"]) > .js_replies > li::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--ng-tx);
  border-inline-start: var(--ng-tw) solid var(--ng-tc); pointer-events: none;
}
/* a deleted reply (Sngine hides it) leaves the thread */
.js_replies > li:has(> .comment[style*="none"])::before, .js_replies > li:has(> .comment[style*="none"])::after { content: none; }

/* ------------------------------- */
/* Comments sheet (__ng_comments_sheet.tpl; niguro.js "Comments sheet"). Phones and tablets (under 1024px):
   Comment under a post in a list (feed, timelines, saved, search) opens that post's comments as a bottom
   sheet with the popups' look ("Bottom sheets": handle, 24px corners, the same slide and backdrop, a phone's
   width on tablets): the title and count, Sngine's sort menu, the comments and their threads scrolling
   inside, and the comment box pinned at the foot (above the keyboard, clear of the home bar). Drag down,
   the close button, a tap on the dim, Escape or Back closes it. Single posts and 1024px up: inline. */
/* ------------------------------- */
.ng-csheet { display: none; }
@media (max-width: 1023.98px) {
  html.ng-csheet-open, html.ng-csheet-open body { overflow: hidden; }
  .ng-csheet { position: fixed; inset: 0; z-index: 1045; display: block; visibility: hidden; pointer-events: none; }
  .ng-csheet.is-open { visibility: visible; pointer-events: auto; }
  .ng-csheet__scrim { position: absolute; inset: 0; background: hsl(0 0% 0% / .5); opacity: 0; transition: opacity .26s linear; touch-action: none; }
  .ng-csheet.is-open .ng-csheet__scrim { opacity: 1; }
  .ng-csheet.is-open.is-closing .ng-csheet__scrim { opacity: 0; }
  .ng-csheet__panel {
    position: absolute; left: 0; right: 0; bottom: var(--ng-kb, 0px); display: flex; flex-direction: column;
    height: 82vh; height: min(82dvh, calc(var(--ng-vh, 100dvh) - 24px));
    border-radius: 24px 24px 0 0; background: var(--ng-card); color: var(--ng-ink); box-shadow: 0 -8px 32px hsl(30 20% 10% / .14);
    padding-left: max(0px, calc(50% - 320px)); padding-right: max(0px, calc(50% - 320px));
    transform: translateY(105%); transition: transform .26s cubic-bezier(.4, 0, .6, 1);
  }
  .ng-csheet.is-open .ng-csheet__panel { transform: none; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .ng-csheet.is-open.is-closing .ng-csheet__panel { transform: translateY(105%); transition: transform .26s cubic-bezier(.4, 0, .6, 1); }
  /* the handle, then the head: "Comments 16" and close */
  .ng-csheet__panel::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--ng-line); }
  .ng-csheet__head { display: flex; align-items: center; gap: 8px; flex: none; padding-block: 6px 10px; padding-inline: 18px 12px; border-bottom: 1px solid var(--ng-line); }
  .ng-csheet__title { flex: 1; min-width: 0; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--ng-ink-strong); outline: 0; }
  .ng-csheet__title span { font-weight: 600; color: var(--ng-sub); }
  .ng-csheet__x .ng-ico { width: 18px; height: 18px; }
  /* the post's own comments (moved in): the list scrolls, the comment box is the scroller's last, sticky child.
     The two wrappers step aside (display: contents); Sngine's scripts still find everything in .post-comments */
  .ng-csheet__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .ng-csheet__body > .post-footer, .ng-csheet__body .post-comments { display: contents !important; }
  .ng-csheet__body .post-comments > .comments-filter { flex: none; margin: 0; padding: 10px 16px 0; }
  .ng-csheet__body .post-comments > .js_comments { flex: none; margin: 0; padding: 0 16px 12px !important; }
  .ng-csheet__body .post-comments > .js_see-more { flex: none; padding: 0 16px 14px; }
  .ng-csheet__body .post-comments > .js_comments-filter-loader { flex: none; padding: 16px 0; }
  .ng-csheet__body .post-comments > :is(.js_comment-form, .js_comment-disabled-msg) {
    order: 9; position: sticky; z-index: 2; bottom: 0; flex: none; margin-top: auto !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ng-line); background: var(--ng-card);
  }
  .ng-csheet__body .post-comments > .js_comment-disabled-msg { color: var(--ng-sub); font-size: 14px; }
  /* no comments yet */
  .ng-csheet__empty { display: none; order: 1; margin: 0; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--ng-sub); }
  .ng-csheet__body:not(:has(.js_comments > li)):not(:has(.js_comments-filter-loader[style*="block"])) > .ng-csheet__empty { display: block; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .ng-csheet__scrim, .ng-csheet .ng-csheet__panel, .ng-csheet.is-open .ng-csheet__panel, .ng-csheet.is-open.is-closing .ng-csheet__panel { transition-duration: .01s; }
}

/* ---- [Feed comments] (begin) — (owner, 2026-10-19) a post in a list shows its 3 newest comments, oldest first
   (__feeds_post.comments.tpl .ng-fcom__list), then "View all N comments" (the post's page, #comments), then the box,
   in reading order like the comments sheet. 1024px up the bar's comment button folds them in and out (niguro.js
   "[Feed comments]") and wears the active look while they're open. The sheet reads newest first, scrolls in more
   and has no "View all" (below). ---- */
.post > .post-footer .post-comments:has(> .ng-fcom__list) { display: flex; flex-direction: column; }
/* one rhythm, as when the box led: 22px from the bar to the first comment (the comments' 10px + a comment's 12px),
   8px to "View all", 12px to the box (its own padding) */
.post > .post-footer .post-comments:has(> .ng-fcom__list) > .ng-fcom__list { padding-top: 0 !important; }
.post > .post-footer .post-comments:has(> .ng-fcom__list) > :is(.js_comment-form, .js_comment-disabled-msg) { order: 9; }
.post > .post-footer .post-comments:has(> .ng-fcom__list:not(:empty)) > .js_comment-disabled-msg { margin-top: 12px; }
.ng-fcom__all { align-self: center; padding: 8px 0 0; text-align: center; text-decoration: none; } /* (owner) centred */
.ng-fcom__all:hover { text-decoration: none; }
@media (min-width: 1024px) {
  .post-actions.ng-pbar .action-btn:is(.js_comment, .js_comments-toggle)[aria-expanded="true"] { background: hsl(var(--primary) / .12); color: var(--ng-brand); }
  .post-actions.ng-pbar .action-btn:is(.js_comment, .js_comments-toggle)[aria-expanded="true"] :is(.action-icon, .action-icon *, svg, svg *) { color: var(--ng-brand) !important; fill: var(--ng-brand) !important; }
}
@media (max-width: 1023.98px) {
  .ng-csheet__body .post-comments > .ng-fcom__all { display: none; }
  /* the sort trigger: 10px above and below it to the divider, as in the card and on the post's page */
  .ng-csheet__body .post-comments > .comments-filter { padding-bottom: 10px; }
  /* a post with more than 2 comments prints them unfolded (__feeds_post.tpl .ng-fcom-auto): phones and tablets keep
     the card folded, the comment button opens the sheet as for any other post */
  .post > .post-footer.ng-fcom-auto { display: none; }
}
/* the comments sort (Sngine's Most Recent / Top / All, everywhere comments render: feed cards, the phone sheet,
   single posts, the photo viewer, blogs): the theme's compact menu, as a comment's ⋯ menu ([comment menu + edit]:
   the menu card, 12px corners, 4px inset, 32px rows, 13px labels) with the share menu's check on the chosen sort
   (.ng-reshare__row[aria-checked]); a 13px trigger, 10px above and below it to the divider */
body .comments-filter .btn-group > .btn { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 24px !important; /* the kit's 38px button minimum */ padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; font-weight: 600; line-height: 18px; }
body .comments-filter .dropdown-menu, body.night-mode .comments-filter .dropdown-menu { min-width: 168px; padding: 4px; border-radius: 12px; background: var(--ng-card); box-shadow: var(--ng-pop-shadow, var(--ng-shadow-lg)); }
body .comments-filter .dropdown-menu .dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ng-ink);
}
body .comments-filter .dropdown-menu .dropdown-item:is(:hover, :focus) { background: var(--ng-fill); color: var(--ng-ink-strong); }
body .comments-filter .dropdown-menu .dropdown-item:active { background: var(--ng-fill); color: var(--ng-ink-strong); }
body .comments-filter .dropdown-menu .dropdown-item[aria-checked="true"] { color: var(--ng-brand); font-weight: 700; }
body .comments-filter .dropdown-menu .dropdown-item[aria-checked="true"]::after { content: ""; flex: none; width: 14px; height: 8px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* the single post's comments ("View all N comments" lands here) clear the sticky header */
.post > .post-footer[id="comments"] { scroll-margin-top: calc(var(--ng-header-h, 60px) + 12px); }
/* ---- [Feed comments] (end) ---- */

/* one gap between the cards of a page column: 12px, 16px from 768px (niguroapp's lists) */
.sg-offcanvas-mainbar .card, .sg-offcanvas-mainbar .ng-postbox, .sg-offcanvas-mainbar .ng-ann { margin-bottom: 12px; }
@media (min-width: 768px) { .sg-offcanvas-mainbar .card, .sg-offcanvas-mainbar .ng-postbox, .sg-offcanvas-mainbar .ng-ann { margin-bottom: 16px; } }

/* ------------------------------- */
/* niguroapp's design system on Sngine's shared parts: flat surfaces, soft radii
   (cards 18, inner panels 14, tiles and fields 12, chips and pills 999), no hard borders */
/* ------------------------------- */

.alert { border: 0; border-radius: var(--ng-r-md); }
.ui-box { border: 0; border-radius: var(--ng-r-md); box-shadow: none; }
.x-image { border: 1.5px dashed var(--ng-line); border-radius: var(--ng-r-sm); }
.attachments li, .attachments li.add { border-radius: var(--ng-r-sm); overflow: hidden; }
.button-label { border-radius: var(--ng-r-sm); box-shadow: inset 0 0 0 1.5px var(--ng-line); }
.input-label:checked + .button-label { box-shadow: inset 0 0 0 2px var(--ng-brand); background: var(--ng-tint); color: var(--ng-brand); }
.list-group { border-radius: var(--ng-r-md); }
.list-group-item { border-color: var(--ng-line); background: transparent; }
.table-responsive { border-radius: var(--ng-r-md); }
.page-header { border-radius: var(--ng-r); }
.nav-tabs { border-bottom-color: var(--ng-line); }
.tooltip-inner { border-radius: 8px; }
.badge { border-radius: 999px; font-weight: 700; }
.data-avatar img { border-radius: 50%; }

/* ------------------------------- */
/* Page frame: niguroapp's margins and column widths
   Phones and tablets: 8px from the screen edge, cards keep their corners. Beside the rail
   (1024px and up): 12px. The home (.ng-frame--home): one centred column up to 680px from 768px;
   from 900px the services panel (264px) joins it; from 1280px panel 300px | feed up to 620px |
   side 320px, 18px apart, centred in 1280px. */
/* ------------------------------- */

@media (max-width: 1023.98px) { .sg-offcanvas, .sg-offcanvas .row { --bs-gutter-x: 16px; } }
/* Sngine's online-friends strip (right edge, from 1200px) takes 75px; it shows only from 1536px,
   where the three columns still get their full widths. Chat stays in the header's Messages. */
@media (min-width: 1200px) and (max-width: 1535.98px) {
  .chat-sidebar { display: none !important; }
  .main-wrapper { padding-right: 0 !important; }
}
/* ---- [Own-header pages: edge to edge] (2026-10-18) ----
   Pages with their own header instead of the site's (the standalone pages: /news, /watch, /radio, /maps, Bhotu;
   and the search results) have no chat rail, so they keep none of Sngine's 75px for it on the right of
   .main-wrapper (signed in, from 1536px): with it their header stopped 75px short of the screen's right edge
   and the actions sat 75px in. One rule for all of them (news.css and watch.css had their own copies). */
body:is(.ng-standalone, :has(.ng-serp)) .main-wrapper { padding-right: 0 !important; }
body:is(.ng-standalone, :has(.ng-serp)) .chat-sidebar { display: none !important; }
/* ---- [/Own-header pages: edge to edge] ---- */
.ng-frame { max-width: none; }
.ng-cols { margin-left: 0; margin-right: 0; }
.ng-cols > * { padding-left: 0; padding-right: 0; }

.ng-frame--home .ng-col-panel, .ng-frame--home .ng-col-side { display: none; }
/* [Layout: gutters] phones and small tablets keep the frame's 8px a side: the feed is capped at 680px only beside
   the panel, from 900px (user, 2026-10-18; it was centred from 768px, 44px a side on a 768px tablet) */
@media (min-width: 900px) { .ng-frame--home .ng-col-main { max-width: 680px; margin-left: auto; margin-right: auto; } }
@media (min-width: 900px) {
  .ng-frame--home .ng-cols { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; align-items: start; }
  .ng-frame--home .ng-cols > * { width: auto; max-width: none; margin: 0; }
  .ng-frame--home .ng-col-panel { display: block; }
}
/* [Feed width] (owner, 2026-10-19) --ng-feed-w: the home's middle (feed) column, one token per breakpoint; the
   desktop composer (the feed's dialog and the "Create post" #modal, "[Desktop popups]") is exactly this wide.
   On the home niguro-compose.js sets it to the column's measured width (scrollbars, the rail's state). */
@media (min-width: 1024px) { :root { --ng-feed-w: 600px; } }
@media (min-width: 1280px) { :root { --ng-feed-w: min(560px, calc(100vw - 740px)); } } /* 1280-1439 the column gives way: rail 84, gutters 40, sides 580 + gaps 36 */
@media (min-width: 1440px) { :root { --ng-feed-w: 580px; } }
@media (min-width: 1280px) {
  .ng-frame--home .ng-cols { grid-template-columns: 300px minmax(0, var(--ng-feed-w, 580px)) 320px; gap: 18px; max-width: 1320px; justify-content: center; } /* niguroapp's side columns (300 | 320) and 18px gap; the feed stays 580 (user, 2026-10-17) */
  .ng-frame--home .ng-col-side { display: block; }
}
/* the home's columns are a little narrower with a clear, equal margin on both sides (user, 2026-10-17):
   two columns (panel + feed up to 600px) at 900-1279; at 1280-1439 260 | 560 | 290 with 32px beside the
   rail; from 1440 280 | 580 | 300 (1200px), centred, so the margins grow with the screen */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .ng-frame--home .ng-cols { grid-template-columns: 264px minmax(0, var(--ng-feed-w, 600px)); justify-content: center; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .ng-frame--home .ng-cols { padding-left: 12px; padding-right: 12px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .ng-frame--home .ng-cols { grid-template-columns: 280px minmax(0, var(--ng-feed-w, 560px)) 300px; gap: 18px; padding-left: 8px; padding-right: 8px; } /* wider sides, the feed about the same (~540-560) */
}
/* Fields have no focus ring and no border anywhere (search forms, every form; user, 2026-10-17): focus
   only lightens the fill to the card colour. Checkboxes and radios keep their box. */
.form-control, .form-select, :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, [contenteditable="true"]):focus,
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, [contenteditable="true"]):focus-visible {
  outline: none !important; box-shadow: none !important; border-color: transparent !important;
}
.tagify, .tagify--focus, .tox-tinymce, .tox-tinymce:focus-within { border-color: transparent !important; box-shadow: none !important; }
/* No visible scrollbars anywhere; the page, sidebars, sheets, strips and fields all still scroll
   (wheel, touch, keyboard) (user, 2026-10-17) */
html, body, * { scrollbar-width: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
/* Side columns stick just under the header (its real height, --ng-header-h, set by niguro.js) and never
   slide under it: a column taller than the space scrolls inside itself (user, 2026-10-17). Replaces
   Sngine's theia sticky sidebar on the home and the single post. */
@media (min-width: 900px) {
  .ng-frame--home .ng-col-panel, .ng-frame--home .ng-col-side, .ng-frame--post .ng-col-side {
    position: sticky; top: calc(var(--ng-header-h, 56px) + 16px); align-self: start;
    max-height: calc(100dvh - var(--ng-header-h, 56px) - 32px); overflow-y: auto; overscroll-behavior: contain;
  }
  /* the services panel, as niguroapp's .na-panel__card: the card itself scrolls (max 800px), so its rounded
     corners always show and the gradient moves with the items (user, 2026-10-17) */
  .ng-frame--home .ng-col-panel { top: calc(var(--ng-header-h, 56px) + 20px); max-height: none; overflow: visible; }
  .ng-frame--home .ng-col-panel > .ng-panel {
    max-height: min(800px, calc(100dvh - var(--ng-header-h, 56px) - 40px)); overflow-y: auto; overscroll-behavior: contain;
    background-attachment: local, local, local;
  }
}
/* A single post (post.tpl): no services panel; the post centred up to 680px, the right sidebar beside it
   from 1280px only when ads or widgets fill it — otherwise the post stays in the middle (user, 2026-10-17) */
.ng-frame--post .ng-col-side { display: none; }
/* [Layout: gutters] full width (8px a side) on phones and tablets, centred from 1024px (user, 2026-10-18) */
@media (min-width: 1024px) { .ng-frame--post .ng-col-main { max-width: 680px; margin-left: auto; margin-right: auto; } }
@media (min-width: 1280px) {
  /* [perf: :has] ng-cols--side / has-items / has-adslot are set by post.tpl (were :has(> .ng-col-side > *),
     :has(> *) and :has(> .ng-adslot), which restyled the whole page on any DOM change on every page) */
  .ng-frame--post .ng-cols.ng-cols--side { display: grid; grid-template-columns: minmax(0, 680px) 320px; gap: 18px; max-width: 1280px; margin: 0 auto; justify-content: center; align-items: start; }
  .ng-frame--post .ng-cols.ng-cols--side > * { width: auto; max-width: none; margin: 0; }
  .ng-frame--post .ng-col-side:where(.has-items) { display: block; }
}
/* The "Single post — right sidebar" ad slot (post.tpl) is printed once, in the right column: below 1280px that
   column shows under the post with only the slot in it, so the ad shows on phones and tablets too, once */
@media (max-width: 1279.98px) {
  .ng-frame--post .ng-col-side.has-adslot { display: block; position: static; max-height: none; overflow: visible; }
  .ng-frame--post .ng-col-side.has-adslot > :not(.ng-adslot) { display: none; }
}
@media (min-width: 768px) and (max-width: 1279.98px) { .ng-frame--post .ng-col-side { max-width: 680px; margin-left: auto; margin-right: auto; } }
/* Ad slots (__ng_adslot.tpl; Admin › Ads › System Ads, the niguro places): a neutral box with the admin's code
   as pasted (AdSense responsive sizes itself: no fixed height) under a small "Advertisement" kicker; centred,
   never wider than its column. In the news story body see .nwa-content .ng-adslot (pages/news.css). */
.ng-adslot { display: block; min-width: 0; max-width: 100%; margin: 0 auto 16px; text-align: center; font-size: 14px; line-height: 1.5; }
.ng-adslot__label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-faint); }
.ng-adslot__unit { max-width: 100%; }
.ng-adslot__unit + .ng-adslot__unit { margin-top: 12px; }


/* ------------------------------- */
/* Single pages (.ng-frame--single: the profile now; pages, groups and events next):
   one centred column, no services panel. 760px, niguroapp's profile / community column (user, 2026-10-17;
   it was 680px for a while); events 800px. The widths are tokens on .ng-single,
   shared by the profile, pages, groups and events. */
/* ------------------------------- */

.ng-frame--single .sg-offcanvas-sidebar { display: none !important; }
/* the content width (the column's own side padding comes on top) */
.ng-single {
  --ng-single-max: 760px; --ng-single-side: 260px; --ng-single-gap: 16px;
  --ng-single-main: calc(var(--ng-single-max) - var(--ng-single-side) - var(--ng-single-gap));
  max-width: calc(var(--ng-single-max) + var(--bs-gutter-x, 24px)); margin-left: auto; margin-right: auto;
}
/* events: a little wider (user, 2026-10-17), as the date tile and four actions share the name's row;
   the name keeps at least 340px, so the actions drop below it before a long name is squeezed */
.ng-single--event { --ng-single-max: 800px; }
.ng-single--event .ng-ent__id { min-width: min(340px, 100%); }

/* the profile card (niguroapp's profile and community head) */
.ng-ent { position: relative; overflow: hidden; margin-bottom: 12px; border-radius: 22px; }
@media (min-width: 768px) { .ng-ent { margin-bottom: 16px; } }
/* [Profile header] (owner, 2026-10-19): niguroapp's profile head, measured on niguro.com — the cover 190px tall on
   phones, 260px from 640px (the image covers it); a 96px picture (112px from 640px) with a 5px card ring, 60px over the
   cover's bottom-left on phones and beside the name from 640px; the name 26px / 800 on its own line under the picture
   on phones; one "Change Cover" pill and a camera badge for the owner (__ng_cover_tools.tpl, __ng_avatar_tools.tpl);
   22px side padding. Shared by the profile, pages, groups and events. */
.ng-ent .profile-cover-wrapper {
  height: 190px; aspect-ratio: auto; border-radius: 0;
  /* niguro: the default cover (no cover uploaded): Niguro's tint with rings and the fern (images/blank_cover*.png) */
  background: hsl(143 42% 84%) url(../images/blank_cover.png?v=ng1) center / cover no-repeat;
}
body.night-mode .ng-ent .profile-cover-wrapper { background: hsl(143 42% 8%) url(../images/blank_cover_night.png?v=ng1) center / cover no-repeat; }
@media (min-width: 640px) { .ng-ent .profile-cover-wrapper { height: 260px; } }
/* the owner's cover tools: one pill at the bottom-right (Sngine's three 40%-opacity icons at the top-left before);
   while repositioning, Cancel and Save pills in its place (user.js shows .profile-cover-position-buttons) */
.ng-ent .profile-cover-buttons.ng-cover-tools {
  top: auto; left: auto; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; opacity: 1; color: inherit; font-size: inherit;
}
.ng-ent .ng-cover-tools > div { float: none; margin: 0; padding: 0; border-radius: 0; background: none; }
.ng-ent .ng-cover-tools > div.profile-cover-position-buttons { display: none; padding: 0; }
.ng-cover-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px;
  background: hsl(var(--card) / .92); color: var(--ng-ink-strong); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 3px hsl(0 0% 0% / .14); cursor: pointer; transition: background .15s;
}
@media (min-width: 640px) { .ng-cover-pill { font-size: 12px; } }
.ng-cover-pill:hover, .ng-cover-pill[aria-expanded="true"] { background: var(--ng-card); }
.ng-cover-pill .ng-ico { width: 14px; height: 14px; }
.ng-cover-pill--save, .ng-cover-pill--save:hover { background: var(--ng-brand); color: hsl(var(--primary-foreground)); }
.ng-ent__body { padding: 0 22px 22px; }
.ng-ent__top { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; }
.ng-ent .profile-avatar-wrapper.ng-ent__avatar {
  position: relative; inset: auto; transform: none; flex: none; order: 0; margin-top: -60px; padding: 0;
  border-radius: 50%; background: var(--ng-card); box-shadow: 0 0 0 5px var(--ng-card), var(--ng-shadow-lg);
}
.ng-ent__avatar > img { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
/* the owner's picture tools: a 26px brand camera badge on the picture's right edge, opening the action menu.
   Sngine styles .profile-avatar-change / -crop / -delete as loose white icons at 40% opacity around the
   picture (made for a dark cover); on the card they showed as ghost icons, so all three are reset here. */
.ng-ent .profile-avatar-change.ng-avatar-cam {
  position: absolute; inset: 50% -6px auto auto; transform: translateY(-50%); z-index: 2; display: block;
  padding: 0; opacity: 1; border-radius: 50%; background: none; color: inherit; font-size: inherit;
}
.ng-avatar-cam__btn {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ng-brand); color: hsl(var(--primary-foreground)); font-size: 12px; line-height: 1;
  box-shadow: 0 2px 6px hsl(0 0% 0% / .18); cursor: pointer; transition: filter .15s;
}
.ng-avatar-cam__btn:hover, .ng-avatar-cam__btn[aria-expanded="true"] { filter: brightness(1.08); }
.ng-ent .action-dropdown-menu .dropdown-item:is(.profile-avatar-crop, .profile-avatar-delete, .profile-cover-position, .profile-cover-delete) {
  position: static; inset: auto; float: none; opacity: 1; padding: 4px 8px; border-radius: 10px; background: transparent;
  color: var(--ng-ink-strong); font-size: inherit; text-align: left;
}
.ng-ent .action-dropdown-menu .dropdown-item:is(.profile-avatar-crop, .profile-avatar-delete, .profile-cover-position, .profile-cover-delete):hover { background: var(--ng-fill); }
.ng-ent .action-dropdown-menu .x-hidden { display: none !important; }
/* phones (owner, 2026-10-19): only niguroapp's two controls — the badge and the pill change the photo (Upload /
   Select); Reposition, Crop and Delete are desktop-only (from 640px, in the same menus) */
@media (max-width: 639.98px) {
  .ng-ent :is(.ng-cover-menu, .ng-avatar-menu) .dropdown-item:is(.profile-cover-position, .profile-cover-delete, .profile-avatar-crop, .profile-avatar-delete) { display: none !important; }
}
.ng-ent__id { flex: 1; min-width: 0; padding-top: 12px; }
.ng-ent__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ng-ent__name > a { color: var(--ng-ink-strong); text-decoration: none; }
.ng-ent__name svg { width: 20px; height: 20px; }
.ng-ent__handle { margin-top: 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub); }
.ng-ent__role {
  display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 999px;
  background: var(--ng-tint); color: var(--ng-brand); font-size: 14px; font-weight: 500;
}
/* Sngine's buttons. Phones: at the right of the picture, 8px under the cover (they wrap there when there are
   many); the name, handle and role take the next row, full width. From 640px: niguroapp's row — the picture, the
   name block beside it and the buttons at the right, all on the row's bottom edge. */
.ng-ent .profile-buttons-wrapper.ng-ent__actions {
  position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
  order: 1; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 0 0; margin: 0;
  background: transparent !important; text-align: left; border-radius: 0;
}
.ng-ent__top > :is(.ng-ent__id) { order: 2; flex: 1 0 100%; padding-top: 0; margin-top: 15px; }
@media (min-width: 640px) {
  .ng-ent__top { align-items: flex-end; column-gap: 16px; padding-top: 8px; }
  .ng-ent .profile-avatar-wrapper.ng-ent__avatar { margin-top: -25px; }
  .ng-ent__avatar > img { width: 112px; height: 112px; }
  .ng-ent__top > :is(.ng-ent__id) { order: 1; flex: 1 1 auto; margin-top: 0; padding-bottom: 8px; }
  .ng-ent .profile-buttons-wrapper.ng-ent__actions { order: 2; flex: 0 1 auto; min-height: 0; margin-left: auto; padding: 0 0 8px; }
  .ng-ent__role { font-size: 12px; }
}
/* the owner's Edit Profile (the profile): niguroapp's 40px pill with a gear */
.ng-ent__actions .btn.ng-ent__edit { height: 40px; min-height: 40px !important; gap: 8px; padding: 0 18px; border-radius: 999px; font-size: 14px !important; font-weight: 600; }
.ng-ent__actions .btn.ng-ent__edit .ng-ico { width: 16px; height: 16px; }
/* the card's actions (Add friend, Follow, Message, Join, Like…): 34px, a little smaller than the kit's 38px
   (user, 2026-10-17), so the card reads lighter; icons 16px */
.ng-ent__actions .btn { height: 34px; min-height: 34px !important; /* the kit gives every .btn a 38px minimum */ display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 12px; border: 0; border-radius: 10px; font-size: 13.5px !important; font-weight: 700; line-height: 1; box-shadow: none; }
.ng-ent__actions .btn-icon { width: 34px; padding: 0; justify-content: center; }
.ng-ent__actions > .dropdown { margin-left: 0 !important; } /* the row's 6px gap only (page, group and event set .ml5 on the ⋯) */
.ng-ent__actions .btn :is(svg, .main-icon) { width: 16px !important; height: 16px !important; }
.ng-ent__actions .btn i { font-size: 14px; }
.ng-ent__actions .btn .ml5 { margin-left: 0 !important; }
.ng-ent__actions .btn-success, .ng-ent__actions .btn-primary { background: var(--ng-brand); color: #fff; }
.ng-ent__actions .btn-light { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-ent__actions .btn-light:hover { background: var(--ng-fill-2); }
.ng-ent__actions .btn-danger { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.ng-ent__actions .main-icon, .ng-ent__actions .main-icon * { fill: currentColor !important; color: currentColor !important; }
/* the card's foot (niguroapp's profile and community strip, __ng_ent_foot.tpl): a line across the card, Report
   (a flag, quiet, red on hover) on the left with its flag on the card's text edge, Share (a 34px pill, as the
   actions) on the right, on the card's padding */
.ng-ent__foot { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-top: 1px solid var(--ng-line); }
.ng-ent__report, .ng-ent__sharebtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.ng-ent__report { margin-left: -10px; padding: 0 10px; background: transparent; color: var(--ng-sub); }
.ng-ent__report:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.ng-ent__share { margin-left: auto; }
.ng-ent__sharebtn { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-ent__sharebtn:hover, .ng-ent__sharebtn[aria-expanded="true"] { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
:is(.ng-ent__report, .ng-ent__sharebtn) .ng-ico { width: 16px; height: 16px; }
/* the share menu: the theme's action menu; the networks keep their logos, on a soft tile (X turns white at night) */
.ng-share { min-width: 220px; }
.ng-share .dropdown-item { display: block; width: 100%; border: 0; background: transparent; text-align: left; text-decoration: none; }
.ng-share .ng-share__logo { flex: none; width: 16px !important; height: 16px !important; padding: 6px; box-sizing: content-box; border-radius: 8px; background: var(--ng-fill); }
.ng-share .ng-share__logo svg { display: block; width: 100%; height: 100%; }
body.night-mode .ng-share .ng-share__logo--x [fill="black"] { fill: #fff; }
/* bio, chips, stat tiles */
.ng-ent__bio { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ng-ink); overflow-wrap: anywhere; }
.ng-ent__chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 16px; }
.ng-ent__chips:empty { display: none; }
.ng-chip {
  display: inline-block; height: var(--ng-chip-h); padding: var(--ng-chip-pad); border-radius: var(--ng-chip-r); background: var(--ng-fill); color: var(--ng-ink); font-size: var(--ng-chip-fs); font-weight: var(--ng-chip-fw); text-decoration: none; line-height: var(--ng-chip-h); /* [Chips: one size] */
}
a.ng-chip:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-chip .ng-ico, .ng-chip svg { width: var(--ng-chip-ico); height: var(--ng-chip-ico); flex: none; color: var(--ng-sub); /* [Chips: one size] */ }
.ng-chip--link { color: var(--ng-brand); }
.ng-ent__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
@media (min-width: 576px) { .ng-ent__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* [Stat tints] (owner, 2026-10-19): niguroapp's tiles, each its own soft tint — blue, amber, violet, then the brand
   — in the page kit's tint formula (--h: day hsl(h 80% 94%) / ink hsl(h 68% 37%), night hsl(h 30% 18%) / hsl(h 75% 66%)),
   so day and night both hold; the fourth (and any tile past it) keeps the brand tile. Icon tile 30px, number
   22px / 700, label 14px / 600; 10px from the icon to the number, 4px to the label. */
.ng-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 12px;
  background: var(--ng-tile); color: var(--ng-ink-strong); text-decoration: none; transition: background .15s, filter .15s;
}
.ng-ent__stats > .ng-stat:nth-child(1) { --h: 205; }
.ng-ent__stats > .ng-stat:nth-child(2) { --h: 38; }
.ng-ent__stats > .ng-stat:nth-child(3) { --h: 265; }
.ng-ent__stats > .ng-stat:nth-child(-n+3) { background: hsl(var(--h) 80% 94%); }
.ng-ent__stats > .ng-stat:nth-child(-n+3) .ng-stat__ico { color: hsl(var(--h) 68% 37%); }
body.night-mode .ng-ent__stats > .ng-stat:nth-child(-n+3) { background: hsl(var(--h) 30% 18%); }
body.night-mode .ng-ent__stats > .ng-stat:nth-child(-n+3) .ng-stat__ico { color: hsl(var(--h) 75% 66%); }
.ng-stat:hover { color: var(--ng-ink-strong); filter: brightness(.97); }
body.night-mode .ng-stat:hover { filter: brightness(1.12); }
/* a stat hidden by the member's privacy (the profile's Photos): no link, no count */
.ng-stat--off, .ng-stat--off:hover { color: var(--ng-sub); cursor: default; filter: none; }
.ng-ent__stats > .ng-stat.ng-stat--off .ng-stat__ico { color: var(--ng-sub); }
.ng-stat__ico { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 10px; background: var(--ng-card); color: var(--ng-brand); }
.ng-stat__ico .ng-ico { width: 16px; height: 16px; }
.ng-stat b { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ng-stat small { font-size: 14px; font-weight: 600; line-height: 16px; color: var(--ng-sub); }

/* the tabs pill (scrolls sideways when there are many) */
.ng-ent__tabs { display: flex; gap: var(--ng-seg-gap); width: 100%; margin: 0 0 12px; padding: var(--ng-seg-pad); overflow-x: auto; scrollbar-width: none; border-radius: var(--ng-seg-r); /* [Segments: one style] */ }
@media (min-width: 768px) { .ng-ent__tabs { margin-bottom: 16px; } }
.ng-ent__tabs::-webkit-scrollbar { display: none; }
.ng-ent__tabs a { flex: 1 0 auto; padding: 0 14px; }
.ng-ent__tabs a.active { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); /* [Segments: one style] */ }
/* [Segments: one style] Sngine's night .profile-tabs-wrapper card fill would hide the track; it keeps the segment track */
body.night-mode .ng-ent__tabs { background: var(--ng-seg-bg); }

/* content under the tabs: Posts or About on the timeline */
.ng-ent__content { margin-left: 0; margin-right: 0; }
.ng-ent__content > * { padding-left: 0; padding-right: 0; }
.ng-ent__content:not(.is-about) > .ng-ent__about, .ng-ent__content.is-about > .ng-ent__posts { display: none; }
.ng-ent__about.is-in, .ng-ent__posts.is-in { animation: ng-pub-more .22s cubic-bezier(.2, .8, .2, 1) both; }

/* single pages start below the header's cloud edge, like the home (20px) */
.ng-frame--single { margin-top: 20px; }

/* ------------------------------- */
/* Reactions: the tray (a white pill whose emojis pop in) and the "who reacted" popup */
/* ------------------------------- */

.reactions-container {
  z-index: 1030; width: auto; padding: 4px 6px; border-radius: 999px; background: var(--ng-card);
  box-shadow: 0 8px 28px hsl(30 20% 10% / .16), 0 0 0 1px hsl(var(--primary) / .06);
  animation: ng-rx-tray .18s cubic-bezier(.2, .8, .2, 1) both;
}
.reactions-container:not([style*="block"]) { animation: none; }
body.night-mode .reactions-container { background: var(--ng-card); box-shadow: 0 8px 28px hsl(0 0% 0% / .45); }
/* one row of reactions, like Facebook: never the 3-per-row box Sngine makes on phones (user, 2026-10-17) */
.reactions-container { width: max-content !important; white-space: nowrap; }
.reactions-container .reactions_item { width: 46px; height: 46px; display: inline-grid; place-items: center; float: none; vertical-align: middle; }
@media (max-width: 767.98px) {
  /* [tray fix] placed by niguro.js: its left edge on the Like button's left edge, kept inside the screen (user,
     2026-10-18); it used to be centred on the screen here */
  .reactions-container { padding: 5px 6px; border-radius: 999px; }
  .reactions-container .reactions_item { width: 44px; height: 44px; }
}
.reactions-container .reactions_item:hover { transform: scale(1.3) translateY(-4px); }
/* Sngine draws emojis at 120px and scales them down; here they are simply sized */
.reactions-container .reactions_item .emoji { width: 38px; height: 38px; transform: none; top: auto; right: auto; display: block; }
.reactions-container .reactions_item .emoji img { display: block; width: 100%; height: 100%; }
@keyframes ng-rx-tray { from { opacity: 0; translate: 0 8px; scale: .94; } to { opacity: 1; translate: none; scale: none; } }
/* no callout or text selection on a long press */
.reactions-wrapper { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* ---- [Reaction fly] (owner, 2026-10-18): the picked emoji's copy flying from the tray into the react button, for
   every tray (niguro.js "[Reaction fly]" moves it with transform / opacity only); the button's own emoji waits
   unseen until it lands. Above modals, the lightbox and the reels viewer; never takes a pointer. ---- */
.ng-rfly { position: fixed; z-index: 2147483000; margin: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.ng-rfly > img, .ng-rfly > .emoji { display: block; width: 100%; height: 100%; margin: 0; transform: none; position: static; }
.reaction-btn .ng-rfly-wait { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ng-rfly { display: none; } .reaction-btn .ng-rfly-wait { opacity: 1; } }
/* ---- /[Reaction fly] ---- */

/* who reacted */
.ng-rx__head { padding: 14px 12px 6px 18px; border: 0; }
.ng-rx__head .modal-title { font-size: 19px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-rx__tabs { display: flex; gap: 6px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ng-line); }
.ng-rx__tabs::-webkit-scrollbar { display: none; }
.ng-rx__tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s;
}
.ng-rx__tab:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-rx__tab.is-on { background: var(--ng-tint); color: var(--ng-brand); box-shadow: inset 0 0 0 1.5px hsl(var(--primary) / .5); }
.ng-rx__emoji { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.ng-rx__emoji .emoji { width: 26px; height: 26px; transform: none; top: auto; right: auto; display: block; }
.ng-rx__emoji .emoji img { display: block; width: 100%; height: 100%; }
.ng-rx__body { padding: 6px 16px 16px; }
.ng-rx__body .feeds-item { border: 0; }
.ng-rx__body .data-container { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ng-rx__body .data-avatar { position: relative; flex: none; float: none; }
.ng-rx__body .data-avatar img { width: 44px; height: 44px; border-radius: 50%; }
.ng-rx__body .data-reaction { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ng-rx__body .data-reaction .inline-emoji { width: 20px; height: 20px; }
.ng-rx__body .data-reaction .emoji { width: 20px; height: 20px; transform: none; top: auto; right: auto; display: block; box-shadow: none; }
.ng-rx__body .data-reaction .emoji img { display: block; width: 100%; height: 100%; }
.ng-rx__body .data-content { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; }
.ng-rx__body .data-content > .float-end { order: 2; float: none !important; margin-top: 6px; }
.ng-rx__body .data-content .name a { font-size: 15px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-rx__body .data-content .btn { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* the online dot: on the avatar's top-right edge, half in, half out */
.post-avatar .online-dot { top: -2px; right: -3px; margin: 0; width: 12px; height: 12px; font-size: 0; border: 2px solid var(--ng-card); border-radius: 50%; background: hsl(142 70% 42%); color: transparent; }
.post-avatar .online-dot::before { display: none; }

/* Pages, groups and events on the same card (page.tpl, group.tpl, event.tpl) */
.ng-ent__chips:not(:has(*)) { display: none; }
.ng-ent__name .privacy-badge { font-size: 15px; color: var(--ng-sub); }
.ng-ent__name .translate-icon { display: inline-flex; color: var(--ng-sub); cursor: pointer; }
.ng-ent--group .profile-avatar-wrapper.ng-ent__avatar, .ng-ent--group .ng-ent__avatar > img { border-radius: 24px; }
/* an event: its date in place of the picture */
.ng-ent__date {
  /* half over the cover, half below it (user, 2026-10-17); positioned, so the cover no longer paints over it */
  position: relative; z-index: 2;
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; margin-top: -42px;
  border-radius: 20px; background: var(--ng-card); box-shadow: 0 0 0 4px var(--ng-card), 0 2px 10px hsl(220 30% 20% / .1); line-height: 1;
}
.ng-ent__date small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--destructive)); }
.ng-ent__date b { margin-top: 4px; font-size: 32px; font-weight: 800; color: var(--ng-ink-strong); }
@media (min-width: 640px) { .ng-ent__date { width: 96px; height: 96px; margin-top: -48px; } .ng-ent__date b { font-size: 36px; } }
/* the description in the card (Sngine's read-more and translate) */
.ng-ent__bio.about-bio { padding: 0; border: 0; text-align: left; }
.ng-ent__bio .about-bio-header, .ng-ent__bio .js_readmore { text-align: left; }
.ng-ent__bio .about-bio-header { display: flex; align-items: flex-start; gap: 8px; }
.ng-ent__bio .js_readmore { flex: 1; min-width: 0; }
.ng-ent__chips .ng-chip a { color: var(--ng-brand); font-weight: 700; text-decoration: none; }
/* the place on a map (About) */
.ng-ent__map { overflow: hidden; }
.ng-ent__map iframe { display: block; width: 100%; }
/* One 680px column at every width (user, 2026-10-17): no left sidebar beside the posts; About is a tab
   (Posts · About …) everywhere, and Sngine's two/three-column views (settings, members…) stack in the column. */
.ng-single > .row > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }

/* ------------------------------- */
/* Settings (settings.tpl, and the settings views of pages, groups and events later):
   niguroapp's settings. From 1024px: the menu panel (280px) beside a centred section column
   (up to 720px). Phones and tablets: /settings?show_categories is the menu as a list; every
   section has a back link to it. */
/* ------------------------------- */

.ng-frame--settings .ng-cols { margin: 0 auto; }
.ng-frame--settings .sg-offcanvas-sidebar { position: static !important; left: auto !important; width: auto !important; transition: none; }
.ng-frame--settings .sg-offcanvas-mainbar { left: auto !important; }
.ng-set__main { max-width: 720px; margin: 0 auto; }
/* phones and tablets: the menu or a section, never both */
@media (max-width: 1023.98px) {
  .ng-frame--settings .ng-set__nav { display: none; }
  .ng-frame--settings.js_show_categories .ng-set__nav { display: block; max-width: 720px; margin: 0 auto; }
  .ng-frame--settings.js_show_categories .ng-set__main { display: none; }
}
/* [Layout: gutters] phones and tablets: the frame's 8px a side, no 720px cap (user, 2026-10-18) */
@media (max-width: 1023.98px) { .ng-set__main, .ng-frame--settings.js_show_categories .ng-set__nav { max-width: none; } }
@media (min-width: 1024px) {
  .ng-frame--settings .ng-cols { display: grid; grid-template-columns: 280px minmax(0, 720px); gap: 24px; justify-content: center; align-items: start; }
  .ng-frame--settings .ng-cols > * { width: auto; max-width: none; margin: 0; }
  .ng-frame--settings .ng-set__nav { position: sticky !important; top: 76px; }
  .ng-set__back { display: none !important; }
}

/* the menu: the services panel's look */
.ng-set__nav > .card {
  padding: 10px; border-radius: var(--ng-r);
  background:
    radial-gradient(120% 180px at 100% 0%, hsl(190 80% 60% / .10), transparent 70%),
    linear-gradient(180deg, hsl(var(--primary) / .10) 0%, hsl(var(--primary) / .04) 160px, transparent 320px),
    var(--ng-card);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / .08);
}
body.night-mode .ng-set__nav > .card {
  background: linear-gradient(180deg, hsl(var(--primary) / .16) 0%, hsl(var(--primary) / .05) 160px, transparent 320px), var(--ng-card);
}
.ng-set__navhead { padding: 10px 12px 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong); }
.ng-set__nav .card-body { padding: 0; }
.ng-set__nav .side-nav { margin: 0; padding: 0; list-style: none; }
.ng-set__nav .side-nav > li + li { margin-top: 2px; }
.ng-set__nav .side-nav > li > a, .ng-set__nav .side-nav > li > .static {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--ng-ink); text-decoration: none; transition: background .15s;
}
.ng-set__nav .side-nav > li > a:hover { background: hsl(var(--primary) / .06); color: var(--ng-ink-strong); }
body.night-mode .ng-set__nav .side-nav > li > a:hover { background: hsl(var(--primary) / .09); }
.ng-set__nav .side-nav > li > a .main-icon {
  width: 18px !important; height: 18px !important; margin: 0 !important; padding: 8px; box-sizing: content-box; flex: none;
  border-radius: 11px; background: var(--ng-tile);
}
.ng-set__nav .side-nav > li.active > a { background: hsl(var(--primary) / .10); color: var(--ng-brand); font-weight: 600; }
.ng-set__nav .side-nav > li.active > a .main-icon { background: var(--ng-card); }
.ng-set__nav .side-nav a[data-bs-toggle="collapse"]::after { right: 14px; color: var(--ng-faint); }
.ng-set__nav .side-nav ul { margin: 2px 0 6px 46px; padding: 0; list-style: none; }
.ng-set__nav .side-nav ul a { display: block; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--ng-sub); text-decoration: none; }
.ng-set__nav .side-nav ul a:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-set__nav .side-nav ul > li.active > a { color: var(--ng-brand); font-weight: 600; background: hsl(var(--primary) / .08); }

/* the back link (phones and tablets) */
.ng-set__back { display: inline-flex; align-items: center; gap: 4px; height: 36px; margin: 0 0 10px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--ng-card); color: var(--ng-ink-strong); font-size: 14px; font-weight: 700; text-decoration: none; }
.ng-set__back .ng-ico { width: 18px; height: 18px; }

/* a section: a big title, then hairline-separated rows (label above a filled field), switch
   rows, and a big save pill (it sticks above the bottom bar on phones) */
.ng-set__card { overflow: visible; }
.ng-set__card .card-header.with-icon {
  display: flex; align-items: center; gap: 12px; padding: 20px 20px 8px; border: 0; background: transparent;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong);
}
.ng-set__card .card-header.with-icon .main-icon {
  width: 20px !important; height: 20px !important; margin: 0 !important; padding: 9px; box-sizing: content-box; flex: none; border-radius: 12px; background: var(--ng-tile);
}
.ng-set__card .card-header.with-icon ~ .card-header.with-icon { margin-top: 12px; border-top: 1px solid var(--ng-line); padding-top: 22px; font-size: 18px; }
.ng-set__card .card-body { padding: 4px 20px 16px; }
.ng-set__card .card-body > .row.form-group, .ng-set__card .card-body > .form-group, .ng-set__card .card-body > form > .row.form-group {
  margin: 0; padding: 14px 0; border-top: 1px solid var(--ng-line);
}
.ng-set__card .card-body > .row.form-group:first-child, .ng-set__card .card-body > .form-group:first-child { border-top: 0; }
.ng-set__card .row.form-group > [class*="col-md-3"], .ng-set__card .row.form-group > [class*="col-md-9"],
.ng-set__card .row.form-group > [class*="col-sm-3"], .ng-set__card .row.form-group > [class*="col-sm-9"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding-left: 0; padding-right: 0; }
.ng-set__card .row.form-group { --bs-gutter-x: 0; }
.ng-set__card .form-label, .ng-set__card .row.form-group > label { margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ng-sub); text-align: left; }
.ng-set__card .form-control, .ng-set__card .form-select { font-size: 15px; }
.ng-set__card .form-text { margin-top: 6px; font-size: 12.5px; color: var(--ng-sub); }
.ng-set__card .form-table-row { align-items: center; gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid var(--ng-line); }
.ng-set__card .card-body > .form-table-row:first-child { border-top: 0; }
.ng-set__card .form-table-row > div:last-child { margin-left: 0; }
.ng-set__card .form-table-row > div.avatar { margin: 0; }
.ng-set__card .form-table-row > div.avatar .main-icon { width: 20px !important; height: 20px !important; padding: 9px; box-sizing: content-box; border-radius: 12px; background: var(--ng-tile); }
.ng-set__card .form-table-row .form-label { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ng-ink-strong); }
.ng-set__card .form-table-row .form-text { margin-top: 2px; }
.ng-set__card .divider { margin: 8px 0; border-top: 1px solid var(--ng-line); }
.ng-set__card .card-footer { padding: 4px 20px 20px; border: 0; background: transparent; }
.ng-set__card .card-footer .btn-primary, .ng-set__card .card-body .btn-primary[type="submit"] {
  min-height: 38px; padding: 0 20px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: none;
}
@media (max-width: 767.98px) {
  .ng-set__card .card-footer { position: sticky; bottom: var(--ng-bnav-clear); z-index: 5; } /* [Bottom bar gap] */
  .ng-set__card .card-footer .btn-primary { width: 100%; }
}

/* ------------------------------- */
/* Messages (messages.tpl, ajax.chat.conversation.tpl): a standalone, full-screen chat app at every
   size, without the site header, rail or bottom bar (the home button in the chats' head goes back).
   From 1024px: chats (340px) | the conversation | (from 1280px) its details (300px), like Messenger.
   Phones and tablets: the conversation fills the screen and the chats slide in from the left
   (the prototype's Messages). */
/* ------------------------------- */

body.ng-chatapp .main-header, body.ng-chatapp .ng-pillnav, body.ng-chatapp .ng-fab, body.ng-chatapp .ng-rail,
body.ng-chatapp .chat-widget, body.ng-chatapp .chat-sidebar { display: none !important; }
.ng-frame--msgr { margin: 0 !important; padding: 0 !important; }
.ng-msgr { position: fixed; inset: 0; z-index: 1035; margin: 0; --bs-gutter-x: 0; background: var(--ng-card); }
.ng-msgr > * { padding: 0; }
.ng-msgr__list > .card, .ng-msgr__main > .card { margin: 0; }

/* chats */
.ng-msgr__listhead { display: flex; align-items: center; gap: 2px; padding: 12px 8px 6px 16px; }
.ng-msgr__title { flex: 1; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong); }
.ng-msgr__listhead .ng-iconbtn { width: 40px; height: 40px; }
.ng-msgr__listhead .ng-ico { width: 20px; height: 20px; }
/* the site icon (Admin > Design favicon) goes back to the site */
.ng-msgr__home img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; }
.ng-msgr__search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 12px 8px; padding: 0 14px; border-radius: 999px; background: var(--ng-fill); color: var(--ng-sub); }
.ng-msgr__search .ng-ico { width: 16px; height: 16px; flex: none; }
.ng-msgr__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ng-ink); }
.ng-msgr__list .card-body { flex: 1; min-height: 0; padding: 0 8px 8px !important; overflow-y: auto; overscroll-behavior: contain; }
.ng-msgr .slimScrollDiv { height: auto !important; overflow: visible !important; }
.ng-msgr .slimScrollBar, .ng-msgr .slimScrollRail { display: none !important; }
.ng-msgr__list .js_scroller { height: auto !important; overflow: visible !important; }
.ng-msgr__list .feeds-item { border: 0; }
.ng-msgr__list .feeds-item[hidden] { display: none; }
.ng-msgr__list .data-container { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--ng-ink); text-decoration: none; transition: background .15s; }
.ng-msgr__list .data-container:hover { background: var(--ng-fill); }
.ng-msgr__list .feeds-item.is-active > .data-container { background: hsl(var(--primary) / .10); }
.ng-msgr__list .data-avatar { position: relative; float: none; flex: none; width: 52px; height: 52px; }
.ng-msgr__list .data-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ng-msgr__list .data-avatar .left-avatar, .ng-msgr__list .data-avatar .right-avatar { height: 52px; }
.ng-msgr__list .data-content { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; }
.ng-msgr__list .data-content > .float-end { display: none; }
.ng-msgr__list .data-content .name { font-size: 15px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-msgr__list .data-content .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ng-sub); }
.ng-msgr__list .data-content .time { font-size: 12px; color: var(--ng-faint); }
.ng-msgr__list .feeds-item.unread .name, .ng-msgr__list .feeds-item.unread .text { font-weight: 700; color: var(--ng-ink-strong); }
.ng-msgr__list .feeds-item.unread > .data-container::after { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ng-brand); }

/* the conversation */
.ng-msgr__main .panel-messages { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); margin: 0; overflow: hidden; }
.ng-msgr__main .panel-messages > .card-header, .ng-msgr__main .panel-messages > .card-body { grid-column: 1; }
.ng-msgr__main .panel-messages > .card-body { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.ng-msgr__main .panel-messages > .card-body > .slimScrollDiv { flex: 1; min-height: 0; overflow: hidden !important; }
.ng-msgr__main .chat-conversations { height: 100% !important; overflow-y: auto !important; padding: 16px 16px 8px; overscroll-behavior: contain; }
.ng-msgr__main .panel-messages.fresh .chat-conversations { min-height: 120px; }
.ng-chat__head { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; border-bottom: 1px solid var(--ng-line); background: var(--ng-card); }
.ng-chat__chats { display: none; width: 40px; height: 40px; }
.ng-chat__ava { position: relative; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; }
.ng-chat__ava img { width: 100%; height: 100%; object-fit: cover; }
.ng-chat__ava .left-avatar, .ng-chat__ava .right-avatar { position: absolute; top: 0; bottom: 0; width: 50%; background-size: cover; background-position: center; }
.ng-chat__ava .left-avatar { left: 0; } .ng-chat__ava .right-avatar { right: 0; }
.ng-chat__head > .row { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; margin: 0; }
.ng-chat__name { flex: 1; min-width: 0; width: auto; margin: 0 !important; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-chat__name a { color: var(--ng-ink-strong); }
.ng-chat__acts { flex: none; width: auto; padding: 0; display: flex; gap: 2px; }
.ng-chat__acts .btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; }
.ng-chat__acts .btn:hover { background: var(--ng-fill); }
.ng-chat__acts .btn svg { width: 20px; height: 20px; }
/* bubbles */
.ng-msgr .conversation { margin-bottom: 6px; padding-top: 4px; }
.ng-msgr .conversation-user, .ng-msgr .conversation-user img { width: 28px; height: 28px; }
.ng-msgr .conversation-user { margin-right: 8px; margin-top: auto; }
.ng-msgr .conversation-body .text { padding: 9px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--ng-fill); color: var(--ng-ink-strong); font-size: 15px; line-height: 1.4; }
.ng-msgr .conversation.right .conversation-body .text { border-radius: 18px; border-bottom-right-radius: 6px; background-color: var(--ng-brand); color: #fff; }
.ng-msgr .conversation .time { margin-top: 2px; font-size: 11px; color: var(--ng-faint); }
.ng-msgr .chat-message-media img, .ng-msgr .chat-message-media video { border-radius: 16px; }
/* the composer */
.ng-msgr .chat-form { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ng-line); border-radius: 0; background: var(--ng-card); }
.ng-msgr .chat-form-message { flex: 1; min-width: 0; max-height: 120px; padding: 9px 16px; border-radius: 22px; background: var(--ng-fill); }
.ng-msgr .chat-form-message textarea { font-size: 15px; line-height: 24px; color: var(--ng-ink); }
.ng-msgr .chat-form .x-form-tools { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; float: none; }
.ng-msgr .chat-form .x-form-tools > li { float: none; width: 38px; height: 38px; display: grid; place-items: center; margin: 0; border-radius: 50%; color: var(--ng-brand); cursor: pointer; }
.ng-msgr .chat-form .x-form-tools > li:hover { background: var(--ng-fill); }
.ng-msgr .chat-form .x-form-tools > li .fa-lg { font-size: 18px; }
/* the empty state */
.ng-msgr__empty { height: 100%; display: grid; place-items: center; margin: 0; }

/* details (from 1280px) */
.ng-chat__info { display: none; padding: 20px 16px; border-left: 1px solid var(--ng-line); overflow-y: auto; }
.ng-chat__infohead { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 16px; text-align: center; }
.ng-chat__infoava { position: relative; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; }
.ng-chat__infoava img { width: 100%; height: 100%; object-fit: cover; }
.ng-chat__infoava .left-avatar, .ng-chat__infoava .right-avatar { position: absolute; top: 0; bottom: 0; width: 50%; background-size: cover; background-position: center; }
.ng-chat__infoava .left-avatar { left: 0; } .ng-chat__infoava .right-avatar { right: 0; }
.ng-chat__infohead b { font-size: 17px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-chat__find { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 16px; padding: 0 14px; border-radius: 999px; background: var(--ng-fill); color: var(--ng-sub); cursor: text; }
.ng-chat__find .ng-ico { width: 16px; height: 16px; flex: none; }
.ng-chat__find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ng-ink); }
.ng-chat__sec { margin: 4px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-sub); }
.ng-chat__swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 18px; }
.ng-chat__swatch { width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; transition: transform .15s; }
.ng-chat__swatch:hover { transform: scale(1.1); }
.ng-chat__swatch.is-on { box-shadow: 0 0 0 2px var(--ng-card), 0 0 0 4px var(--c); }
.ng-chat__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ng-chat__photos p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ng-sub); }
.ng-chat__photos span { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; cursor: pointer; }
.ng-chat__photos img { width: 100%; height: 100%; object-fit: cover; }
.ng-msgr .conversation[hidden], .ng-msgr .chat-conversations li[hidden] { display: none; }

@media (min-width: 1024px) {
  .ng-msgr { display: grid; grid-template-columns: 340px minmax(0, 1fr); overflow: hidden; }
  .ng-msgr > .ng-msgr__list, .ng-msgr > .ng-msgr__main { width: auto; max-width: none; height: 100%; min-height: 0; }
  .ng-msgr__list { border-right: 1px solid var(--ng-line); }
  .ng-msgr__list > .card, .ng-msgr__main > .card, .ng-msgr__main .panel-messages { height: 100%; border-radius: 0; box-shadow: none; }
  .ng-msgr__list > .card { display: flex; flex-direction: column; }
  .ng-msgr__x, .ng-msgr__scrim { display: none !important; }
}
@media (min-width: 1280px) {
  .ng-msgr__main .panel-messages:not(.fresh) { grid-template-columns: minmax(0, 1fr) 300px; }
  .ng-msgr__main .panel-messages .ng-chat__info { display: block; grid-column: 2; grid-row: 1 / 3; }
}

/* phones and tablets: a chat app */
@media (max-width: 1023.98px) {
  .ng-msgr { display: block; }
  .ng-msgr__main, .ng-msgr__main > .card, .ng-msgr__main .panel-messages { height: 100vh; height: 100dvh; border-radius: 0; }
  .ng-chat__chats { display: grid; }
  .ng-msgr .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ng-frame--msgr .ng-msgr__list.sg-offcanvas-sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 0 !important; z-index: 3; width: min(88vw, 360px) !important;
    transform: translateX(-102%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 8px 28px hsl(30 20% 10% / .18);
  }
  .ng-msgr__list > .card { height: 100%; display: flex; flex-direction: column; border-radius: 0 var(--ng-r) var(--ng-r) 0; }
  .ng-msgr.is-drawer .ng-msgr__list, .ng-msgr.is-empty .ng-msgr__list { transform: none; }
  /* no chat open: the chats are the page */
  .ng-msgr.is-empty .ng-msgr__list.sg-offcanvas-sidebar { width: 100% !important; box-shadow: none; }
  .ng-msgr.is-empty .ng-msgr__list > .card { border-radius: 0; }
  .ng-msgr.is-empty .ng-msgr__x { display: none; }
  .ng-frame--msgr .sg-offcanvas-mainbar { left: auto !important; }
  .ng-msgr__scrim { position: fixed; inset: 0; z-index: 2; background: rgb(8 12 18 / .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .ng-msgr.is-drawer .ng-msgr__scrim { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .ng-frame--msgr .ng-msgr__list.sg-offcanvas-sidebar { transition: none; } }

/* ------------------------------- */
/* The post bar (__feeds_post.tpl; Facebook's structure, our colours): icon + count for react,
   comment, share and review on the left (a count shows from 1 and opens its list), the three
   most used reactions on the right (who reacted) */
/* ------------------------------- */

.post-actions.ng-pbar { display: flex; align-items: center; gap: 2px; margin: 10px 0 0; padding: 4px calc(var(--ng-pg, 16px) - 8px) 6px; border-top: 1px solid var(--ng-line); }
.ng-pbar__item { display: inline-flex; align-items: center; }
.ng-pbar__item.x-hidden { display: none; }
.post-actions.ng-pbar .action-btn { flex: none; width: auto; height: 36px; padding: 0 8px; gap: 0; }
.post-actions.ng-pbar .action-btn { cursor: pointer; }
.post-actions.ng-pbar .action-btn.is-static { cursor: default; }
.post-actions.ng-pbar .action-btn.is-static:hover { background: transparent; }
.post-actions.ng-pbar .action-btn .reaction-btn-name { display: none !important; }
/* Sngine puts a smile back after an unreact; the bar's react icon stays a thumb */
.post-actions.ng-pbar .reaction-btn-icon .fa-smile::before { content: "\f164"; }
/* [Action icons: one size] the chosen reaction in the icon's place: the same box, the emoji at a glyph's visual size */
.post-actions .reaction-btn-icon .inline-emoji { display: grid; place-items: center; width: var(--ng-pbar-box); height: var(--ng-pbar-box); background: none; }
.post-actions .reaction-btn-icon .inline-emoji .emoji { position: static; width: calc(var(--ng-pbar-ico) * .875); height: calc(var(--ng-pbar-ico) * .875); transform: none; top: auto; right: auto; display: block; background: none; }
.post-actions .reaction-btn-icon .inline-emoji .emoji img { display: block; width: 100%; height: 100%; }
.ng-pbar__n {
  display: inline-flex; align-items: center; height: 36px; margin-left: -4px; padding: 0 10px 0 2px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ng-sub); cursor: pointer;
}
.ng-pbar__n:hover { color: var(--ng-ink); }
.ng-pbar__n.x-hidden { display: none; }
/* the post bar's Like: the classic rounded thumbs-up niguroapp uses (Lucide, ISC) instead of Hugeicons' (user, 2026-10-17) */
body .post-actions.ng-pbar .action-btn :is(.fa-thumbs-up, .fa-smile), body .reel-container .action-btn :is(.fa-thumbs-up, .fa-smile) { --ng-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E"); }
/* the like count is plain text (the reaction icons on the right open who reacted) */
.ng-pbar__n--static, .ng-pbar__n--static:hover { cursor: default; color: var(--ng-sub); }
/* comment / review: icon + count are one button, so one hover pill covers both (user, 2026-10-17) */
.post-actions.ng-pbar .action-btn:has(> .ng-pbar__n:not(.x-hidden)) { gap: 6px; padding: 0 12px 0 8px; }
.post-actions.ng-pbar .action-btn > .ng-pbar__n { height: auto; margin: 0; padding: 0; border-radius: 0; color: inherit; cursor: inherit; }
.post-actions.ng-pbar .action-btn > .ng-pbar__n:hover { color: inherit; }
.ng-pbar__rx { margin-left: auto; }
/* Reshare (inside Niguro, with its count) and Share (outside: icon only, the last item, as niguroapp's cards) */
.post-actions.ng-pbar button.action-btn { border: 0; background: transparent; font: inherit; }
.post-actions.ng-pbar button.action-btn:hover, .post-actions.ng-pbar button.action-btn[aria-expanded="true"] { background: var(--ng-fill); }
.post-actions.ng-pbar button.action-btn:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 1px; }
.ng-pbar__share { flex: none; }
/* Sngine's lightbox bars (__feeds_post_photo / _live.tpl): Share fills its share of the row as the other actions */
.post-actions > .ng-lbshare { flex: 1; display: flex; }
.post-actions > .ng-lbshare > .action-btn { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; }
.post-actions > .ng-lbshare > .action-btn:hover, .post-actions > .ng-lbshare > .action-btn[aria-expanded="true"] { background: var(--ng-fill); color: var(--ng-ink); }
.ng-rxstats { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 999px; cursor: pointer; transition: background .15s; }
.ng-rxstats:hover { background: var(--ng-fill); }
.ng-rxstats.x-hidden { display: none; }
/* [Action icons: one size] the top reactions: the react button's emoji size; the 2px ring in the surface's colour only
   parts the overlapping emojis */
.ng-rxstats__i { position: relative; width: calc(var(--ng-pbar-ico) * .875); height: calc(var(--ng-pbar-ico) * .875); margin-left: -4px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--ng-card); }
.ng-rxstats__i:first-child { margin-left: 0; z-index: 3; }
.ng-rxstats__i:nth-child(2) { z-index: 2; }
.ng-rxstats__i .emoji { width: 100%; height: 100%; transform: none; top: auto; right: auto; display: block; }
/* a comment's reactions (Sngine's .reactions-stats, __feeds_comment.tpl): the same emoji size and ring, none of
   Sngine's 3px white (night: its dark card) disc behind each */
.comment .reactions-stats { display: inline-flex; align-items: center; line-height: 1; }
.comment .reactions-stats > .reactions-stats-item { position: relative; float: none; margin: 0 0 0 -4px; padding: 0; border-radius: 50%; background: none; box-shadow: 0 0 0 2px var(--ng-card); }
.comment .reactions-stats > .reactions-stats-item:first-child { margin-left: 0; }
.comment .reactions-stats .inline-emoji { display: block; width: calc(var(--ng-pbar-ico) * .875); height: calc(var(--ng-pbar-ico) * .875); overflow: hidden; border-radius: 50%; }
.comment .reactions-stats .inline-emoji .emoji { position: static; width: 100%; height: 100%; transform: none; top: auto; right: auto; display: block; }
.comment .reactions-stats .inline-emoji .emoji img { display: block; width: 100%; height: 100%; }
.comment .reactions-stats > span { margin-left: 4px; }
.ng-rxstats__i .emoji img { display: block; width: 100%; height: 100%; }
.ng-rxstats__n { margin-left: 6px; font-size: 13px; color: var(--ng-sub); }
.ng-pbar .ng-rxstats__n { display: none; }
/* phones (to 420px): the fullest bar (react, comment, review, tip and reshare with their counts, the top
   reactions, Share) stays on one line at 375px: tighter pills and the two most used reactions */
@media (max-width: 420px) {
  .post-actions.ng-pbar .action-btn { padding: 0 6px; }
  .post-actions.ng-pbar .action-btn:has(> .ng-pbar__n:not(.x-hidden)) { gap: 4px; padding: 0 9px 0 6px; }
  .ng-pbar__n { padding-right: 8px; }
  .ng-pbar .ng-rxstats { padding: 4px 2px; }
  .ng-pbar .ng-rxstats__i:nth-child(n+3) { display: none; }
}

/* who reacted (Facebook's structure): one head row (tabs + close), people with their button on the right;
   centred on desktop, a bottom sheet on phones and tablets */
@media (min-width: 1024px) {
  #modal:has(.ng-rx__tabs) .modal-dialog { display: flex; align-items: center; max-width: 548px; min-height: calc(100% - 3.5rem); }
  #modal:has(.ng-rx__tabs) .modal-content { max-height: min(640px, calc(100vh - 80px)); }
}
#modal .ng-rx__head { display: flex; align-items: center; gap: 4px; padding: 8px 12px 0 8px; border-bottom: 1px solid var(--ng-line); }
#modal .ng-rx__tabs { flex: 1; min-width: 0; gap: 2px; padding: 0; border: 0; }
#modal .ng-rx__tab {
  position: relative; height: 48px; padding: 0 12px; border-radius: 10px 10px 0 0; background: transparent;
  color: var(--ng-sub); font-size: 14px; font-weight: 700;
}
#modal .ng-rx__tab:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
#modal .ng-rx__tab.is-on { background: transparent; box-shadow: none; color: var(--ng-brand); }
#modal .ng-rx__tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ng-brand); }
#modal .ng-rx__emoji { width: 22px; height: 22px; }
#modal .ng-rx__emoji .emoji { width: 22px; height: 22px; }
.ng-rx__x { flex: none; width: 36px; height: 36px; background: var(--ng-fill); }
.ng-rx__x .ng-ico { width: 18px; height: 18px; }
.ng-rx__body { overflow-y: auto; }
/* name, with mutual friends under it, on the left; the button on the right of the same row */
.ng-rx__body .data-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.ng-rx__body .data-content > .float-end { grid-column: 2; grid-row: 1; margin: 0; }
.ng-rx__body .data-content > div:not(.float-end) { grid-column: 1; min-width: 0; margin: 0 !important; }
.ng-rx__body .data-content > div:not(.float-end):not(:has(.name)) { font-size: 12px; color: var(--ng-sub); }
.ng-rx__body .data-content .btn { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ng-fill); color: var(--ng-ink-strong); font-size: 14px; font-weight: 600; }
.ng-rx__body .data-content .btn:hover { background: var(--ng-fill-2); }
.ng-rx__body .data-content .btn-success, .ng-rx__body .data-content .btn-primary { background: var(--ng-tint); color: var(--ng-brand); }
.ng-rx__body .data-content .btn .main-icon { width: 16px; height: 16px; }

/* ------------------------------- */
/* Toasts (niguroapp's): a card at the bottom centre, above the bottom bar on phones and tablets.
   Sngine's Noty notifications (#toast-notification) and the action toasts (niguro.js ng_toast) */
/* ------------------------------- */

.toast-container {
  position: fixed; top: auto !important; right: auto !important; bottom: 24px !important; left: 50% !important; z-index: 1090;
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px);
  padding: 0 !important; transform: translateX(-50%); pointer-events: none;
}
@media (max-width: 1023.98px) { .toast-container { bottom: var(--ng-bnav-clear) !important; } } /* [Bottom bar gap] */
body.ng-chatapp .toast-container { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
.toast-container > .toast {
  pointer-events: auto; width: auto; max-width: min(440px, calc(100vw - 32px)); margin: 0; border: 0 !important; border-radius: 14px;
  background: var(--ng-card) !important; color: var(--ng-ink) !important; box-shadow: var(--ng-shadow-lg);
  font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; animation: ng-toast-in .26s cubic-bezier(.2, .8, .2, 1);
}
.toast-container > .toast.hide { display: none; }
@keyframes ng-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ng-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
/* a Noty notification: the person's avatar, the message, close */
.toast-container > .toast .toast-body { padding: 10px 4px 10px 12px; }
.toast-container .toast-body .data-container { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0; }
.toast-container .toast-body .data-avatar { position: relative; flex: none; float: none; }
.toast-container .toast-body .data-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.toast-container .toast-body .data-content { margin: 0 !important; padding: 0; font-size: 14px; font-weight: 500; color: var(--ng-ink); }
.toast-container .btn-close-white { filter: none; opacity: .45; }
body.night-mode .toast-container .btn-close-white { filter: invert(1) grayscale(1); }
/* an action toast */
.ng-toast { display: flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 12px; }
.ng-toast.is-out { animation: ng-toast-out .28s ease forwards; }
.ng-toast__ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--primary) / .12); color: var(--ng-brand); }
.ng-toast__ico .ng-ico { width: 16px; height: 16px; }
/* [Editor required fields] a warning toast (ng_toast(message, 'warn')) */
.ng-toast--warn .ng-toast__ico { background: hsl(var(--destructive) / .12); color: var(--ng-red); }
body.night-mode .ng-toast--warn .ng-toast__ico { background: hsl(var(--destructive) / .24); }
@media (prefers-reduced-motion: reduce) { .toast-container > .toast, .ng-toast.is-out { animation-duration: .01s; } }

/* ------------------------------- */
/* Sidebar widgets (the home right column .ng-col-side and the single pages' About sidebar
   .ng-ent__about), as niguroapp's side rail: a 16px/700 title with a 13px "See all", rows with a soft
   hover, 40px avatars, 13.5px/600 names in the text colour (never the accent), 11.5px meta, 16-18px
   icons, and Sngine's coloured widgets (trending, promoted) on the plain card */
/* ------------------------------- */

:is(.ng-col-side, .ng-ent__about) .card { border: 0; border-radius: var(--ng-r); background: var(--ng-card) !important; color: var(--ng-ink); }
.ng-col-side > .card, .ng-col-side > * > .card { margin-bottom: 16px; }
:is(.ng-col-side, .ng-ent__about) .card .text-white { color: var(--ng-ink) !important; }
:is(.ng-col-side, .ng-ent__about) .card-header {
  display: flex; align-items: center; gap: 8px; min-height: 0; padding: 16px 16px 6px !important; border: 0 !important;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ng-ink-strong);
}
:is(.ng-col-side, .ng-ent__about) .card-header :is(h6, strong) {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit;
}
:is(.ng-col-side, .ng-ent__about) .card-header > .float-end { order: 2; float: none !important; margin-left: auto; line-height: 1; }
:is(.ng-col-side, .ng-ent__about) .card-header > .float-end :is(small, a) {
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ng-brand) !important; text-decoration: none;
}
:is(.ng-col-side, .ng-ent__about) .card-header > .float-end a:hover { text-decoration: underline; }
:is(.ng-col-side, .ng-ent__about) .card-header .svg-container {
  width: 18px !important; height: 18px !important; flex: none; margin: 0 !important; color: var(--ng-brand); fill: var(--ng-brand) !important;
}
:is(.ng-col-side, .ng-ent__about) .card-header .svg-container svg { width: 100%; height: 100%; }

/* the lists */
:is(.ng-col-side, .ng-ent__about) .card-body.with-list { padding: 2px 10px 10px !important; }
:is(.ng-col-side, .ng-ent__about) .with-list > ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
:is(.ng-col-side, .ng-ent__about) .with-list .feeds-item { margin: 0; padding: 0; border: 0; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-container {
  display: flex; align-items: center; gap: 10px; min-height: 0; margin: 0; padding: 8px 6px; border-radius: 12px; transition: background .15s;
}
:is(.ng-col-side, .ng-ent__about) .with-list .data-container:hover { background: var(--ng-fill); }
:is(.ng-col-side, .ng-ent__about) .with-list .data-avatar { position: relative; flex: none; float: none; width: 40px; height: 40px; margin: 0; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 1px;
  margin: 0; padding: 0; font-size: 11.5px; line-height: 1.35; color: var(--ng-faint, var(--ng-sub));
}
:is(.ng-col-side, .ng-ent__about) .with-list .data-content > * { grid-column: 1; min-width: 0; margin: 0 !important; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content > .float-end {
  grid-column: 2; grid-row: 1; float: none !important; display: flex; align-items: center; gap: 6px;
}
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .name,
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .name a {
  font-size: 13.5px; font-weight: 600; color: var(--ng-ink-strong) !important; text-decoration: none;
}
:is(.ng-col-side, .ng-ent__about) .with-list .data-content > div:has(> .name) { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content > div:has(> .name) > div { flex-basis: 100%; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .text-underline { text-decoration: none !important; cursor: pointer; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content :is(.verified-badge, .pro-badge) .svg-container { width: 14px !important; height: 14px !important; }
/* the row's button: a small round one */
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-width: 32px; margin: 0 !important; padding: 0 8px;
  border: 0; border-radius: 999px; background: var(--ng-fill); color: var(--ng-brand); font-size: 12.5px; font-weight: 700; box-shadow: none;
}
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn:hover { background: var(--ng-fill-2); }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn:has(> .svg-container:only-child) { width: 32px; padding: 0; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn .svg-container { width: 16px !important; height: 16px !important; margin: 0 !important; color: currentColor; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn :is(.svg-container, .svg-container *) { fill: currentColor !important; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn i { margin: 0 !important; font-size: 13px; }
:is(.ng-col-side, .ng-ent__about) .with-list .data-content .btn-primary { background: var(--ng-brand); color: #fff; }

/* trending: niguroapp's "Surging now" rows */
.ng-col-side .card.bg-red .card-header .svg-container { color: #f45d22; fill: #f45d22 !important; }
.ng-col-side .card .trending-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 6px; border-radius: 12px;
  color: var(--ng-ink-strong); text-decoration: none; transition: background .15s;
}
.ng-col-side .card .trending-item:hover { background: var(--ng-fill); }
.ng-col-side .card .trending-item .hash { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-col-side .card .trending-item .frequency { flex: none; font-size: 11.5px; color: var(--ng-sub); }
.ng-col-side .card.bg-red .card-body { padding: 2px 10px 10px; }

/* merits balance */
.ng-col-side .card-body.text-center { padding: 16px; font-size: 13.5px; color: var(--ng-sub); }
.ng-col-side .card-body.text-center .badge { padding: 3px 8px; border-radius: 999px; background: var(--ng-tint) !important; color: var(--ng-brand) !important; font-size: 12px; }
.ng-col-side .card-body.text-center .btn { height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }

/* Follow from a post: a text link after the author line */
.ng-follow { color: var(--ng-sub); white-space: nowrap; font-size: .9em; } /* (owner, 2026-10-18) a little smaller than the header line */
.ng-follow__btn { padding: 0; border: 0; background: none; color: var(--ng-brand); font: inherit; font-weight: 700; cursor: pointer; }
.ng-follow__btn:hover:not(:disabled) { text-decoration: underline; }
.ng-follow__btn.is-done { color: var(--ng-sub); font-weight: 600; cursor: default; }

/* ------------------------------- */
/* Feed strips (Reels, group suggestions): a card with a title, a row that starts at the left and
   scrolls sideways (touch: swipe, no arrows; mouse: arrows on hover, only towards the side with more) */
/* ------------------------------- */

.ng-strip-li { list-style: none; }
.ng-strip { margin-bottom: 12px; padding: 14px 0 16px; overflow: hidden; border-radius: var(--ng-r-md); }
@media (min-width: 768px) { .ng-strip { margin-bottom: 16px; } }
.ng-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--ng-pg, 16px) 12px; }
.ng-strip__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-strip__title .ng-ico { width: 20px; height: 20px; color: var(--ng-brand); }
.ng-strip__more { font-size: 13px; font-weight: 500; color: var(--ng-brand); text-decoration: none; }
.ng-strip__more:hover { text-decoration: underline; }
.ng-strip__wrap { position: relative; }
.ng-strip__track {
  --ng-strip-gap: 8px; --ng-strip-n: 3.25;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--ng-strip-gap)) / var(--ng-strip-n)); gap: var(--ng-strip-gap);
  padding: 0 var(--ng-pg, 16px); scroll-padding: 0 var(--ng-pg, 16px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ng-strip__track::-webkit-scrollbar { display: none; }
.ng-strip__track > * { scroll-snap-align: start; min-width: 0; }
/* the arrows (.ng-strip__nav): the shared "[Scroll arrows]" block at the end of this file */
.ng-strip__foot {
  display: block; margin: 14px var(--ng-pg, 16px) 0; padding-top: 12px; border-top: 1px solid var(--ng-line);
  text-align: center; font-size: 14px; font-weight: 600; color: var(--ng-brand); text-decoration: none;
}
.ng-strip__foot:hover { text-decoration: underline; }

/* a reel: 9:16 with the author at the bottom and its views at the top */
.ng-reelcard { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--ng-fill); color: #fff; text-decoration: none; isolation: isolate; }
.ng-reelcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.ng-reelcard:hover .ng-reelcard__img { scale: 1.04; }
.ng-reelcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(0 0% 0% / .28) 0%, transparent 26%, transparent 58%, hsl(0 0% 0% / .62) 100%); }
.ng-reelcard__views { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px hsl(0 0% 0% / .4); }
.ng-reelcard__views .ng-ico { width: 15px; height: 15px; }
.ng-reelcard__by { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ng-reelcard__by img { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff; }
.ng-reelcard__by b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 2px hsl(0 0% 0% / .45); }


/* ------------------------------- */
/* Reels viewer (reels.tpl, __ng_reels.tpl, __feeds_reel.tpl): css/pages/reels.css, loaded on the reels pages
   and a reel's own post page (_head.tpl). */
/* ------------------------------- */

/* a reel in the feed: a vertical card that opens the reels viewer */
.ng-reelpost { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; overflow: hidden; background: #000; color: #fff; isolation: isolate; }
.ng-reelpost__bg { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(22px) brightness(.55); }
.ng-reelpost__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ng-reelpost__play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
  background: hsl(0 0% 0% / .38); box-shadow: 0 0 0 2px hsl(0 0% 100% / .85); transition: scale .2s, background .2s;
}
.ng-reelpost__play .ng-ico { width: 30px; height: 30px; }
.ng-reelpost:hover .ng-reelpost__play { scale: 1.06; background: hsl(0 0% 0% / .5); }
.ng-reelpost__tag {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: hsl(0 0% 0% / .45); font-size: 12.5px; font-weight: 700;
}
.ng-reelpost__tag .ng-ico { width: 15px; height: 15px; }

/* ------------------------------- */
/* Suggestion cards (__ng_scard.tpl) in the feed strips (__ng_feed_cards.tpl): people, pages, groups,
   events, blogs, merits winners — each with its own action; the sidebar keeps no suggestions */
/* ------------------------------- */
.ng-strip--cards .ng-strip__track { --ng-strip-n: 2.2; grid-auto-columns: calc((100% - 2 * var(--ng-strip-gap)) / var(--ng-strip-n)); }
.ng-strip--people .ng-strip__track, .ng-strip--merits .ng-strip__track { --ng-strip-n: 2.7; }
@media (max-width: 479.98px) {
  .ng-strip--cards .ng-strip__track { --ng-strip-n: 1.35; grid-auto-columns: calc((100% - var(--ng-strip-gap)) / var(--ng-strip-n)); }
  .ng-strip--people .ng-strip__track, .ng-strip--merits .ng-strip__track { --ng-strip-n: 1.7; }
}
.ng-scard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card); /* [Card radius] */ }
.ng-scard__media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  /* niguro: the default cover when a page/group has none (an uploaded cover comes inline and wins) */
  background: hsl(143 42% 84%) url(../images/blank_cover.png?v=ng1) center / cover no-repeat;
}
body.night-mode .ng-scard__media { background-color: hsl(143 42% 8%); background-image: url(../images/blank_cover_night.png?v=ng1); }
.ng-scard__media:not([style*="background-image"]) { background-position: 88% center; } /* the default's rings and fern sit right */
.ng-scard--person .ng-scard__media { aspect-ratio: 4 / 3; }
.ng-scard--person .ng-scard__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.ng-scard--person .ng-scard__media:hover img { scale: 1.03; }
.ng-scard__pic { position: absolute; left: 10px; bottom: -18px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--ng-card); background: var(--ng-card); }
.ng-scard--group .ng-scard__pic { border-radius: 12px; }
.ng-scard__media:has(.ng-scard__pic) { overflow: visible; }
.ng-scard__date {
  position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 48px; border-radius: 10px; background: var(--ng-card); box-shadow: 0 2px 8px hsl(220 30% 10% / .18); line-height: 1;
}
.ng-scard__date small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--destructive)); }
.ng-scard__date b { margin-top: 3px; font-size: 19px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-scard__chip {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: hsl(0 0% 0% / .5); color: #fff; font-size: 11.5px; font-weight: 700;
}
.ng-scard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 10px 12px 12px; }
.ng-scard__body.has-pic { padding-top: 26px; }
.ng-scard__name {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong) !important; text-decoration: none;
}
.ng-scard__name:hover { text-decoration: underline; }
.ng-scard__name .svg-container { flex: none; }
.ng-scard__name--2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.ng-scard__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.35; color: var(--ng-sub); }
.ng-scard__merit { display: flex; align-items: center; gap: 6px; }
.ng-scard__merit img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.ng-scard__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: auto; padding-top: 12px; }
.ng-scard__acts--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ng-scard__acts--one { grid-template-columns: minmax(0, 1fr); }
.ng-scard__acts .btn {
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin: 0 !important; padding: 0 12px;
  border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: none;
}
.ng-scard__acts .btn .ng-ico, .ng-scard__acts .btn i { width: 16px; height: 16px; font-size: 14px; flex: none; margin: 0 !important; }
.ng-scard__acts .btn-primary, .ng-scard__acts .btn-success { background: var(--ng-brand); color: #fff; }
.ng-scard__acts .btn-light,
.ng-scard__acts .btn:is(.js_unlike-page, .js_leave-group, .js_ungo-event, .js_uninterest-event, .js_friend-cancel, .js_unfollow) {
  background: var(--ng-fill); color: var(--ng-ink-strong);
}
.ng-scard__acts .btn-light:hover { background: var(--ng-fill-2); }
/* Bootstrap's danger button in our destructive red, not its pinkish one (delete account, unsubscribe…) */
.btn-danger { --bs-btn-bg: hsl(var(--destructive)); --bs-btn-border-color: hsl(var(--destructive)); --bs-btn-color: #fff;
  --bs-btn-hover-bg: hsl(var(--destructive) / .88); --bs-btn-hover-border-color: hsl(var(--destructive) / .88); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: hsl(var(--destructive) / .8); --bs-btn-active-border-color: hsl(var(--destructive) / .8); }
/* the header's Notifications/Requests sheet: Confirm, Delete, Add Friend… as the feed packs' small pills (user, 2026-10-17) */
.main-header .ng-sheet .feeds-item .btn:not(.btn-icon):not(.rounded-circle):not(.btn-close) {
  height: 30px; min-height: 30px; padding: 0 12px; gap: 5px; border-radius: 999px !important; font-size: 12.5px; font-weight: 600; line-height: 1;
}
.main-header .ng-sheet .feeds-item .btn i, .main-header .ng-sheet .feeds-item .btn .ng-ico { width: 14px; height: 14px; font-size: 12px; }
/* feed packs (people, pages, groups, events…): small pill buttons (user, 2026-10-17); beats the global .btn scale */
.ng-scard .ng-scard__acts .btn:not(.btn-icon):not(.rounded-circle):not(.btn-close) {
  height: 30px; min-height: 30px; padding: 0 12px; gap: 5px; border-radius: 999px !important; font-size: 12.5px; font-weight: 600; line-height: 1;
}
.ng-scard .ng-scard__acts .btn .ng-ico, .ng-scard .ng-scard__acts .btn i { width: 14px; height: 14px; font-size: 12px; }
.ng-scard.is-out { opacity: 0; scale: .96; transition: opacity .2s, scale .2s; }
/* niguro [side promoted] (owner, 2026-10-18): the same cards in the right column (__ng_side_promo.tpl: promoted
   users, pages, groups, events). The column is 300-320px, so fewer cards per view, and taller: square pictures
   for people, 4:3 covers for pages, groups and events. The card's own 16px gap below comes from .ng-col-side > .card. */
.ng-strip--side .ng-strip__track { --ng-strip-n: 1.5; grid-auto-columns: calc((100% - var(--ng-strip-gap)) / var(--ng-strip-n)); }
.ng-strip--side.ng-strip--people .ng-strip__track { --ng-strip-n: 1.85; }
.ng-strip--side .ng-scard--person .ng-scard__media { aspect-ratio: 1 / 1; }
.ng-strip--side .ng-scard:not(.ng-scard--person) .ng-scard__media { aspect-ratio: 4 / 3; }
.ng-strip--side .ng-strip__nav { width: 34px; height: 34px; }
.ng-strip--side .ng-strip__nav--prev { left: 6px; }
.ng-strip--side .ng-strip__nav--next { right: 6px; }
/* [/side promoted] */


/* ------------------------------- */
/* Sidebar cards with a tinted head (__ng_side_merits.tpl): Merits (your balance this cycle, Send
   Merit) and "Put your ads here". The accent tints the tile and the wash, as on every icon tile */
/* ------------------------------- */
.ng-col-side .card.ng-wcard, .ng-wcard {
  padding: 16px; border: 0; border-radius: var(--ng-r);
  background: radial-gradient(120% 90% at 0% 0%, hsl(var(--primary) / .12), transparent 62%), var(--ng-card) !important;
}
.ng-wcard__head { display: flex; align-items: center; gap: 12px; }
.ng-wcard__tile {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px;
  background: var(--ng-tile); color: var(--ng-brand);
}
.ng-wcard__tile .ng-ico { width: 22px; height: 22px; }
.ng-wcard__tile--lg { width: 52px; height: 52px; border-radius: 16px; }
.ng-wcard__tile--lg .ng-ico { width: 26px; height: 26px; }
.ng-wcard__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-wcard__titles b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-wcard__titles small { font-size: 12.5px; line-height: 1.35; color: var(--ng-sub); }
.ng-wcard__panel { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--ng-fill); }
.ng-wmerit__left { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ng-wmerit__left small { font-size: 12.5px; color: var(--ng-sub); }
.ng-wmerit__left b { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ng-ink-strong); }
.ng-wmerit__left b span { font-size: 14px; font-weight: 600; color: var(--ng-sub); }
.ng-wmerit__spark { position: absolute; right: 0; bottom: 4px; width: 20px; height: 20px; color: var(--ng-brand); }
.ng-wmerit__bar { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: hsl(var(--primary) / .15); }
body.night-mode .ng-wmerit__bar { background: hsl(var(--primary) / .2); }
.ng-wmerit__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / .7)); }
.ng-wmerit__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--ng-sub); }
.ng-wmerit__stats span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ng-wmerit__stats .is-received { padding-left: 10px; border-left: 1px solid var(--ng-line); }
.ng-wmerit__stats b { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-wmerit__stats .ng-ico { width: 15px; height: 15px; flex: none; }
.ng-wmerit__stats .is-sent .ng-ico { color: hsl(20 85% 50%); }
.ng-wmerit__stats .is-received .ng-ico { color: hsl(140 60% 38%); }
.ng-wcard__promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ng-wcard__cta {
  width: 100%; height: 38px; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: none;
}
.ng-wcard__cta .ng-ico { width: 18px; height: 18px; }
.ng-wcard__cta.btn-primary { background: var(--ng-brand); color: #fff; }
.ng-wcard__cta.btn-light { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-wcard__cta.btn-light:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }

/* =============================== */
/* PAGE KIT — the hub pages (forums, blogs, games, movies, watch, market, jobs, offers, courses,
   funding, wallet, merits, packages, ads, directories…): one centred frame, a hero, underline tabs,
   list cards with stat boxes, chips, a side nav, media grids, form cards, breadcrumbs and tags.
   Structure from the Sngine v5 references, look from the niguroapp design system (tokens, one-accent
   tinted tiles, 18px cards, 44px filled fields). Documented in dev/niguro-kit.md. */
/* =============================== */

/* Colour that means something: tinted parts (tags, list icons, tint buttons, the hero art) are the
   accent unless they or a parent set --h (2 declined/danger, 38 pending/warning, 140 done/success,
   210 info, a package's own colour). The --_h* helpers hold var(--h), so with no --h they are invalid
   and var(--_hbg, …) falls back to the accent. Never set --h just for variety. */
:is(.ng-tag, .ng-pbtn--tint, .ng-lrow__icon, .ng-hero__art) { --_hbg: hsl(var(--h) 80% 94%); --_hink: hsl(var(--h) 68% 37%); --_hc: var(--h) 85% 60%; }
body.night-mode :is(.ng-tag, .ng-pbtn--tint, .ng-lrow__icon, .ng-hero__art) { --_hbg: hsl(var(--h) 30% 18%); --_hink: hsl(var(--h) 75% 66%); }

/* the frame: centred, no services panel; 8px gutter under 1024px (cards keep their corners) */
.ng-frame--hub { margin-top: 20px; }
.ng-frame--hub .sg-offcanvas-sidebar { display: none !important; }
.ng-hubwrap { width: 100%; max-width: calc(var(--ng-hub-max, 1180px) + var(--bs-gutter-x, 24px)); margin: 0 auto; }
.ng-notifs .ng-hubwrap { --ng-hub-max: 960px; } /* the notifications page: one 960px column, centred (user, 2026-10-17) */
/* 16px between stacked items; `:not(template)` lifts it just above one-class card rules (.ng-lcard, .ng-fcard,
   .ng-hero… set margin: 0) while page rules with two classes can still override it */
.ng-hubwrap > * + :not(template) { margin-top: 16px; }
.ng-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .ng-hub--side { grid-template-columns: minmax(0, 1fr) var(--ng-hub-side, 320px); gap: 18px; }
  .ng-hub--nav { grid-template-columns: var(--ng-hub-nav, 240px) minmax(0, 1fr); gap: 18px; }
  .ng-hub__side { position: sticky; top: calc(var(--ng-top, 56px) + 20px); }
}
.ng-hub__main, .ng-hub__side, .ng-hub__nav { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ng-hub__main > .card, .ng-hub__side > .card, .ng-hub__nav > .card { margin: 0; }

/* the hero: title, line, and art (an accent tile with soft shapes) on the right, on an accent wash */
.ng-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 132px; margin: 0; padding: 24px 20px; border-radius: 22px; color: var(--ng-ink-strong);
  background:
    radial-gradient(90% 140% at 100% 0%, hsl(var(--primary) / .18), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, hsl(var(--primary) / .07), transparent 60%),
    var(--ng-card);
}
@media (min-width: 768px) { .ng-hero { min-height: 168px; padding: 32px 36px; } }
.ng-hero__text { position: relative; z-index: 1; min-width: 0; }
.ng-hero__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ng-ink-strong); }
@media (min-width: 768px) { .ng-hero__title { font-size: 34px; } }
.ng-hero__sub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ng-sub); }
@media (min-width: 768px) { .ng-hero__sub { font-size: 16px; } }
.ng-hero__art { position: relative; flex: none; width: 88px; height: 88px; }
@media (min-width: 768px) { .ng-hero__art { width: 124px; height: 124px; margin-right: 8px; } }
.ng-hero__tile {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 30%; rotate: -6deg;
  background: var(--_hbg, linear-gradient(var(--ng-tile), var(--ng-tile)) var(--ng-card));
  color: var(--_hink, var(--ng-brand)); box-shadow: 0 14px 30px -12px hsl(var(--_hc, var(--primary)) / .45);
}
.ng-hero__tile .ng-ico { width: 44%; height: 44%; stroke-width: 1.8; }
.ng-hero__art i { position: absolute; border-radius: 50%; background: hsl(var(--_hc, var(--primary)) / .3); }
.ng-hero__art i:nth-of-type(1) { width: 30%; height: 30%; left: -18%; top: 4%; }
.ng-hero__art i:nth-of-type(2) { width: 20%; height: 20%; right: -12%; bottom: -6%; background: hsl(var(--_hc, var(--primary)) / .2); }
.ng-hero__art i:nth-of-type(3) { width: 14%; height: 14%; right: 6%; top: -10%; background: hsl(var(--_hc, var(--primary)) / .4); }
.ng-hero__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* [Layout: flush hero] A hub's top hero attached under the header (user, 2026-10-18), the /trends and /football
   approach as one modifier the templates add (.ng-hero--flush, on .ng-hero or a page's own hero card): no top
   border or corners; it runs up behind the header (its cloud edge sits on the hero) and edge to edge: the window
   on phones and tablets, between the rail and the window's right edge from 1024px. The side padding gives back
   what the margins take, so the text and the art keep to the page's own width, in line with the cards below.
   --ng-flush-gap is the frame's top margin it also climbs over (.ng-frame--hub and /surging: 20px; /shopping sets
   its 12px). The hub wraps, /shopping's .ng-shop and /surging's .ngs are centred, so 50% - 50vw reaches the edges. */
/* [Flush hero phones] (2026-10-18): until niguro.js has measured the header (--ng-header-h), the height falls back
   to the bar's own CSS height --ng-top (96px on phones with the links row, 56px without it and from 768px), not a
   fixed 56px, so the hero sits under the 96px phone header from the first paint too. Every flush hero (the page
   CSS for /cinema, /cricket, /football, /trends too) uses this same var(--ng-header-h, var(--ng-top)). /weather's card
   was one until 2026-10-19 ([Weather top gap], weather.css: now the page's first card under the 20px gap). */
/* [Flush hero: one rule] (2026-10-18): /cinema, /cricket, /football, /trends and /radio kept five copies of this
   rule in their page CSS; their heroes now take .ng-hero--flush too and differ only by these settings, set on the
   page's frame or wrap (inherited by the hero), never by a copy of the margins:
     --ng-flush-top    the bar the hero hangs under (default the site header, --ng-header-h → --ng-top → 56px;
                       /radio: 0px, it hangs under its own bar in the page flow)
     --ng-flush-gap    the frame's top margin it also climbs over (default 20px; /cricket, /football, /trends,
                       /radio: 0px; /cinema 16px, 24px from 768px; /shopping its 12px)
     --ng-flush-strip  the transparent top border that keeps the content under the bar (default = the bar's height;
                       /cinema 0px: its picture is absolutely placed in the padding box, so its strip is top padding)
     --ng-flush-inset  extra side padding inside the page's width (default 0px; /cricket its card padding --ck-pad)
     --ng-flush-pad    the side padding outright; 0px where the hero's inner blocks pad themselves (/trends, /cinema)
     --ng-flush-rail   what the rail takes on the left from 1024px (default 42px; /trends hides the rail: 0px)
     --ng-flush-shadow the hero's shadow (default none; /radio keeps the card shadow, --ng-card-shadow, as its edge
                       against the station list, since it does not run up behind a header)
   The parents are centred in the page's column, so 50vw - 50% is how far each window edge is beyond it. */
:is(.ng-hubwrap, .ng-shop, .ngs, .ngc-page, .ngt, .ng-rd__content) > .ng-hero--flush {
  --_ng-flush-x: calc(50vw - 50%);
  --_ng-flush-h: var(--ng-flush-top, var(--ng-header-h, var(--ng-top, 56px)));
  margin: calc((var(--_ng-flush-h) + var(--ng-flush-gap, 20px)) * -1) calc(var(--_ng-flush-x) * -1) 0;
  padding-left: var(--ng-flush-pad, calc(var(--_ng-flush-x) + var(--ng-flush-inset, 0px)));
  padding-right: var(--ng-flush-pad, calc(var(--_ng-flush-x) + var(--ng-flush-inset, 0px)));
  border: 0; border-top: var(--ng-flush-strip, var(--_ng-flush-h)) solid transparent; border-radius: 0; background-origin: border-box; box-shadow: var(--ng-flush-shadow, none);
}
/* [/Flush hero: one rule] */
/* [/Flush hero phones] */
@media (min-width: 1024px) {
  body.ng-has-rail :is(.ng-hubwrap, .ng-shop, .ngs, .ngc-page, .ngt, .ng-rd__content) > .ng-hero--flush { --_ng-flush-x: calc(50vw - 50% - var(--ng-flush-rail, 42px)); }
}
/* [Flush hero: phones' frame clip] (owner, 2026-10-18): below 768px Sngine's own CSS makes the page frame
   (.sg-offcanvas) position: relative; overflow: hidden (for its off-canvas sidebar), and that clipped every flush
   hero at the frame's top edge (96px, or 116px with the hub's 20px margin): behind the header and the cloud edge the
   canvas showed, and the hero began under the cloud as a separate band (/pages, /groups night, 494px). The frame's
   clip box is lifted to above the window's top instead, with no change to the layout: it is padded by the lift
   and drawn that much higher (top), and its bottom margin gives the height back, so the content, the page below
   and the footer stay exactly where they were. The overflow and its scroll container stay as they are, so the
   in-page sticky bars (/cricket's tabs, /football's track) keep today's behaviour on phones. Every page whose
   frame holds a flush hero takes it. */
@media (max-width: 767.98px) {
  .sg-offcanvas:has(.ng-hero--flush) {
    --_ng-frame-lift: calc(var(--ng-header-h, var(--ng-top, 56px)) + 40px);
    top: calc(var(--_ng-frame-lift) * -1); padding-top: var(--_ng-frame-lift); margin-bottom: calc(var(--_ng-frame-lift) * -1);
  }
}
/* [/Flush hero: phones' frame clip] */
/* [Flush hero: room under the cloud] (owner, 2026-10-18): the header's cloud edge hangs 13px below the bar onto the
   hero, so the shared hero card (.ng-hero) adds that much to its top padding when flush: its title keeps its own
   24px (32px from 768px) of air below the cloud, as /trends' and /cricket's titles do, instead of 11px. */
:is(.ng-hubwrap, .ng-shop, .ngs) > .ng-hero.ng-hero--flush { padding-top: calc(24px + 13px); }
@media (min-width: 768px) { :is(.ng-hubwrap, .ng-shop, .ngs) > .ng-hero.ng-hero--flush { padding-top: calc(32px + 13px); } }
/* [/Flush hero: room under the cloud] */
/* [/Layout: flush hero] */

/* underline tabs with icons, and the page's actions on the right */
.ng-ptabs { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ng-line); }
.ng-ptabs__list { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ng-ptabs__list::-webkit-scrollbar { display: none; }
.ng-ptabs__list a {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 10px;
  color: var(--ng-sub); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ng-ptabs__list a .ng-ico { width: 18px; height: 18px; }
.ng-ptabs__list a:hover { color: var(--ng-ink-strong); }
.ng-ptabs__list a.active { color: var(--ng-brand); }
.ng-ptabs__list a.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ng-brand); }
.ng-ptabs__acts { display: flex; flex: none; gap: 8px; padding-bottom: 6px; }

/* buttons for page actions (pill, icon + label) */
.ng-pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--ng-fill); color: var(--ng-ink-strong); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ng-pbtn:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-pbtn .ng-ico { width: 18px; height: 18px; }
.ng-pbtn--primary { background: var(--ng-brand); color: #fff; }
.ng-pbtn--primary:hover { background: var(--ng-brand); color: #fff; filter: brightness(1.06); }
.ng-pbtn--tint { background: var(--_hbg, var(--ng-tile)); color: var(--_hink, var(--ng-brand)); }
.ng-pbtn--tint:hover { background: var(--_hbg, hsl(var(--primary) / .16)); color: var(--_hink, var(--ng-brand)); filter: brightness(.98); }
.ng-pbtn--block { width: 100%; height: 38px; }

/* list card: a header strip and rows (forums, threads, rankings, transactions…) */
.ng-lcard { overflow: hidden; margin: 0; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-lcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px;
  border-bottom: 1px solid var(--ng-line); font-size: 15px; font-weight: 700; color: var(--ng-ink-strong);
}
.ng-lcard__head .ng-ico { width: 20px; height: 20px; color: var(--ng-brand); }
.ng-lcard__title { display: flex; align-items: center; gap: 8px; margin: 0; font: inherit; color: inherit; }
.ng-lcard__more { font-size: 13px; font-weight: 500; color: var(--ng-brand); text-decoration: none; }
.ng-lrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px;
  color: var(--ng-ink); text-decoration: none; transition: background .15s;
}
.ng-lrow + .ng-lrow { border-top: 1px solid var(--ng-line); }
a.ng-lrow:hover, .ng-lrow.is-link:hover { background: var(--ng-fill); color: var(--ng-ink); }
@media (min-width: 768px) { .ng-lrow--stats { grid-template-columns: auto minmax(0, 1fr) auto; } .ng-lrow--last { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 240px); } }
.ng-lrow__lead { flex: none; }
.ng-lrow__ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ng-lrow__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--_hbg, var(--ng-tile)); color: var(--_hink, var(--ng-brand)); }
.ng-lrow__icon .ng-ico { width: 22px; height: 22px; }
.ng-lrow__rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--ng-fill); font-size: 13.5px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-lrow__main { min-width: 0; }
.ng-lrow__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; color: var(--ng-ink-strong); text-decoration: none; }
a.ng-lrow__title:hover { text-decoration: underline; color: var(--ng-ink-strong); }
.ng-lrow__sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ng-sub); }
.ng-lrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: var(--ng-sub); }
.ng-lrow__stats { display: none; gap: 8px; }
@media (min-width: 768px) { .ng-lrow__stats { display: flex; } }
.ng-lrow__last { display: none; min-width: 0; padding-left: 14px; border-left: 2px solid hsl(var(--primary) / .5); font-size: 13px; line-height: 1.4; color: var(--ng-ink); }
@media (min-width: 1024px) { .ng-lrow__last { display: block; } }
.ng-lrow__last small { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; color: var(--ng-sub); }
.ng-lrow__last small img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ng-lrow__last span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ng-lrow__end { justify-self: end; }

/* a stat box: number over label */
.ng-sbox { min-width: 66px; padding: 8px 10px; border-radius: 12px; background: var(--ng-fill); text-align: center; line-height: 1.15; }
.ng-sbox b { display: block; font-size: 16px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-sbox small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ng-sub); }

/* tags: categories, prices… in the accent; statuses (pending, approved, declined, locked) set --h */
.ng-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--_hbg, var(--ng-tile)); color: var(--_hink, var(--ng-brand)); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.ng-tag .ng-ico { width: 13px; height: 13px; }
a.ng-tag:hover { filter: brightness(.97); }
.ng-tag--plain { background: var(--ng-fill); color: var(--ng-ink-strong); }

/* chips (filters, genres): a sideways row, the active one in brand */
.ng-chiprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ng-chiprow::-webkit-scrollbar { display: none; }
.ng-chiprow > a, .ng-chiprow > button {
  flex: none; display: inline-block; height: var(--ng-chip-h); padding: var(--ng-chip-pad); border: 0; border-radius: var(--ng-chip-r); background: var(--ng-card); box-shadow: inset 0 0 0 1px var(--ng-line); color: var(--ng-ink-strong); font-size: var(--ng-chip-fs); font-weight: var(--ng-chip-fw); text-decoration: none; line-height: var(--ng-chip-h); /* [Chips: one size] */
}
.ng-chiprow > a:hover, .ng-chiprow > button:hover { background: var(--ng-fill); }
.ng-chiprow > .active { background: var(--ng-brand); box-shadow: none; color: #fff; }

/* side nav (games, movies, blogs…): icon + label, the active one tinted */
.ng-snav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-snav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ng-ink); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.ng-snav a .ng-ico { width: 20px; height: 20px; color: var(--ng-sub); }
.ng-snav a:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-snav a.active { background: hsl(var(--primary) / .12); color: var(--ng-brand); }
.ng-snav a.active .ng-ico { color: var(--ng-brand); }
.ng-snav__title { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; font-size: 13px; font-weight: 700; color: var(--ng-sub); }

/* section head inside a page (Recommended, Trending…) */
.ng-sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.ng-sechead h2, .ng-sechead h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-sechead .ng-ico { width: 20px; height: 20px; color: var(--ng-brand); }
.ng-sechead a { font-size: 13.5px; font-weight: 600; color: var(--ng-brand); text-decoration: none; }

/* media grid and cards (movies, games, products, courses, blogs) */
.ng-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ng-mcard-min, 160px), 1fr)); gap: 16px 14px; }
.ng-mcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ng-ink); text-decoration: none; }
.ng-mcard__img { position: relative; overflow: hidden; aspect-ratio: var(--ng-mcard-ratio, 16 / 10); border-radius: 14px; background: var(--ng-fill) center / cover no-repeat; }
.ng-mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.ng-mcard:hover .ng-mcard__img img { scale: 1.04; }
.ng-mcard__badge { position: absolute; top: 8px; left: 8px; }
.ng-mcard__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-mcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ng-sub); }
.ng-mcard__meta .ng-ico { width: 14px; height: 14px; }

/* page head for inner pages and forms: title, line, and an action on the right */
.ng-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ng-phead h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong); }
.ng-phead p { margin: 4px 0 0; font-size: 14.5px; color: var(--ng-sub); }
/* The hero card above a personal feed list (/memories, /saved, /scheduled; __ng_feed_hero.tpl): the /trends
   hero's accent wash and rings, an icon tile, kicker, title and one line; on the feed's own gaps */
.ng-fhero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px;
  margin: 0 0 12px; padding: 20px 18px; border-radius: var(--ng-r, 18px); color: var(--ng-ink-strong);
  background:
    radial-gradient(120% 140% at 100% 0%, hsl(var(--primary) / .18) 0%, hsl(var(--primary) / .06) 38%, transparent 62%),
    radial-gradient(90% 120% at 0% 100%, hsl(var(--primary) / .07) 0%, transparent 55%),
    var(--ng-card);
}
.ng-fhero::before {
  content: ""; position: absolute; z-index: -1; right: -110px; top: -130px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, transparent 46%, hsl(var(--primary) / .14) 46.5%, hsl(var(--primary) / .14) 47.5%, transparent 48%),
    radial-gradient(circle, transparent 62%, hsl(var(--primary) / .10) 62.5%, hsl(var(--primary) / .10) 63.5%, transparent 64%),
    radial-gradient(circle, transparent 78%, hsl(var(--primary) / .07) 78.5%, hsl(var(--primary) / .07) 79.5%, transparent 80%);
}
.ng-fhero__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: hsl(var(--primary) / .14); color: var(--ng-brand); }
.ng-fhero__ico .ng-ico { width: 26px; height: 26px; }
.ng-fhero__txt { min-width: 0; }
.ng-fhero__kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-brand); }
.ng-fhero h1 { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ng-ink-strong); }
.ng-fhero p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ng-sub); }
/* the home's invite card (__ng_home_invite.tpl): the same card with a smaller title and the button at its end;
   on a narrow phone the button drops under the text */
.ng-fhero h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--ng-ink-strong); }
.ng-invite { flex-wrap: wrap; }
.ng-invite .ng-fhero__txt { flex: 1 1 200px; }
.ng-invite__go { flex: none; margin-left: auto; }
@media (max-width: 479.98px) { .ng-invite__go { width: 100%; justify-content: center; } }
@media (min-width: 768px) {
  .ng-fhero { margin-bottom: 16px; padding: 26px 24px; gap: 16px; }
  .ng-fhero h1 { font-size: 26px; }
  .ng-fhero p { font-size: 14.5px; }
}

/* form card: a head with an icon tile, the fields, and actions on the right at the foot */
.ng-fcard { overflow: hidden; margin: 0; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-fcard__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.ng-fcard__head .ng-lrow__icon { width: 40px; height: 40px; border-radius: 12px; }
.ng-fcard__head b { display: block; font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-fcard__head small { display: block; font-size: 13px; color: var(--ng-sub); }
.ng-fcard__body { padding: 14px 20px 20px; }
.ng-fcard__body .form-label, .ng-fcard__body label:not(.form-check-label) { font-size: 13.5px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-fcard__body .form-text { font-size: 12.5px; color: var(--ng-sub); }
.ng-fcard__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ng-line); }

/* breadcrumbs */
.ng-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ng-sub); }
.ng-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--ng-sub); text-decoration: none; }
.ng-crumbs a:hover { color: var(--ng-ink-strong); }
.ng-crumbs .ng-ico { width: 15px; height: 15px; }
.ng-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ng-faint, var(--ng-sub)); }
.ng-crumbs li:last-child { font-weight: 600; color: var(--ng-ink-strong); }

/* key/value rows (Current cycle, statistics) */
.ng-kv { display: flex; flex-direction: column; gap: 8px; }
.ng-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ng-fill); font-size: 14px; color: var(--ng-sub); }
.ng-kv > div b { font-weight: 700; color: var(--ng-ink-strong); }
.ng-kv > div .ng-lrow__icon { width: 32px; height: 32px; border-radius: 10px; }
.ng-kv > div .ng-lrow__icon .ng-ico { width: 17px; height: 17px; }
.ng-kv__label { display: flex; align-items: center; gap: 10px; }

/* empty state */
.ng-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--ng-sub); }
.ng-empty .ng-lrow__icon { width: 56px; height: 56px; border-radius: 18px; }
.ng-empty .ng-lrow__icon .ng-ico { width: 26px; height: 26px; }
.ng-empty b { font-size: 16px; color: var(--ng-ink-strong); }

/* a filter bar: fields in a row on one card (stacks on phones) */
.ng-filterbar { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 12px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
@media (min-width: 768px) { .ng-filterbar { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; } }
.ng-filterbar__field { position: relative; display: flex; align-items: center; margin: 0; min-width: 0; }
.ng-filterbar__field .form-select, .ng-filterbar__field .form-control { width: 100%; }
.ng-filterbar__date > span { position: absolute; left: 14px; z-index: 1; font-size: 13px; font-weight: 600; color: var(--ng-sub); pointer-events: none; }
.ng-filterbar__date .form-control { padding-left: 56px; }
.ng-filterbar .ng-pbtn { height: var(--ng-field-h); } /* matches the fields beside it */

/* ranked rows: the rank chip beside the avatar */
.ng-lrow--rank { grid-template-columns: auto minmax(0, 1fr) auto; }
.ng-lrow__rankwrap { display: flex; align-items: center; gap: 12px; }
.ng-lrow--rank .ng-lrow__ava { width: 42px; height: 42px; }

/* the podium: the top three, first in the middle and raised */
.ng-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
@media (min-width: 768px) { .ng-podium { gap: 16px; } }
.ng-podium__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 18px 10px 16px;
  border-radius: var(--ng-r); text-align: center; text-decoration: none;
  background: linear-gradient(180deg, hsl(var(--h) 70% 55% / .2), transparent 75%), var(--ng-card);
}
.ng-podium__item.is-1 { --h: 45; order: 2; padding-top: 30px; padding-bottom: 22px; }
.ng-podium__item.is-2 { --h: 215; order: 1; }
.ng-podium__item.is-3 { --h: 25; order: 3; }
.ng-podium__item:hover { filter: brightness(.98); }
.ng-podium__crown { position: absolute; top: 8px; color: hsl(45 90% 45%); }
.ng-podium__crown .ng-ico { width: 20px; height: 20px; }
.ng-podium__ava { position: relative; display: block; padding: 3px; border-radius: 50%; background: hsl(var(--h) 75% 55%); }
.ng-podium__ava img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--ng-card); }
.ng-podium__item.is-1 .ng-podium__ava img { width: 80px; height: 80px; }
@media (min-width: 768px) { .ng-podium__ava img { width: 84px; height: 84px; } .ng-podium__item.is-1 .ng-podium__ava img { width: 104px; height: 104px; } }
.ng-podium__ava b {
  position: absolute; left: 50%; bottom: -8px; translate: -50% 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: hsl(var(--h) 80% 50%); box-shadow: 0 0 0 3px var(--ng-card); color: #fff; font-size: 12.5px; font-weight: 800;
}
.ng-podium__name { max-width: 100%; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-podium__count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ng-sub); }
.ng-podium__count b { color: var(--ng-ink-strong); }
.ng-podium__count .ng-ico { width: 14px; height: 14px; color: hsl(var(--h) 75% 45%); }

/* ------------------------------- */
/* Sngine's common pieces, site-wide in our tokens: alerts (info, success, warning, danger…), stat
   panels (points, affiliates, monetization, wallet…), money balance panels, section titles, and the
   copy-link field. Sngine's "See more" loaders (alert + see-more) keep their own look. */
/* ------------------------------- */
:where(.alert) { --h: 210; } /* the fallback hue; .alert-danger/-success/-warning set their own */
.alert:not(.see-more):not(.alert-post) {
  margin-bottom: 16px; padding: 14px 16px; border: 0; border-radius: 14px;
  background: hsl(var(--h) 80% 95%); color: hsl(var(--h) 40% 24%); font-size: 14px; line-height: 1.55;
}
body.night-mode .alert:not(.see-more):not(.alert-post) { background: hsl(var(--h) 30% 16%); color: hsl(var(--h) 70% 84%); }
.alert-success:not(.see-more) { --h: 140; }
.alert-warning:not(.see-more) { --h: 38; }
.alert-danger:not(.see-more) { --h: 2; }
.alert-primary:not(.see-more) { --h: 135; }
.alert-light:not(.see-more):not(.alert-post), .alert-secondary:not(.see-more), .alert-dark:not(.see-more) { background: var(--ng-fill) !important; color: var(--ng-ink) !important; }
.alert:not(.see-more) .alert-link, .alert:not(.see-more) a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.alert:not(.see-more) strong, .alert:not(.see-more) b { color: inherit; }
.alert:not(.see-more) .btn-close { opacity: .5; }
.alert:not(.see-more) > .icon { float: left; margin: 2px 12px 0 0; color: hsl(var(--h) 60% 42%); }
.alert:not(.see-more) .badge { border-radius: 999px; font-weight: 700; }

/* stat panels: a compact card, the icon in a tinted tile on the right */
.stat-panel {
  position: relative; overflow: hidden; margin-bottom: 12px; padding: 16px; border: 1px solid var(--ng-line) !important; border-radius: var(--ng-r); /* [Card radius] */
  background: var(--ng-card); color: var(--ng-ink);
}
.stat-panel .stat-cell { position: relative; display: block; padding: 0 52px 0 0; font-size: 13px; line-height: 1.45; color: var(--ng-sub); }
.stat-panel .stat-cell .icon, .stat-panel .stat-cell .bg-icon {
  position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: grid; place-items: center; margin: 0; border-radius: 12px;
  background: hsl(var(--primary) / .12) !important; color: var(--ng-brand) !important; font-size: 18px; opacity: 1 !important;
}
.stat-panel .text-xxlg { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--ng-ink-strong); }
.stat-panel .text-lg { font-size: 13.5px; font-weight: 700; color: var(--ng-ink); }
/* money balance: the brand panel */
.stat-panel.bg-primary, .stat-panel.bg-success, .stat-panel.bg-info {
  border: 0 !important; background: linear-gradient(135deg, hsl(var(--primary)), hsl(calc(143 + 25) 75% 28%)) !important; color: #fff;
}
.stat-panel:is(.bg-primary, .bg-success, .bg-info) .stat-cell, .stat-panel:is(.bg-primary, .bg-success, .bg-info) .h3 { color: #fff; }
.stat-panel:is(.bg-primary, .bg-success, .bg-info) .h3 { margin: 6px 0 !important; font-size: 26px; font-weight: 800; }
.stat-panel:is(.bg-primary, .bg-success, .bg-info) .stat-cell .bg-icon { background: hsl(0 0% 100% / .18) !important; color: #fff; }
.section-title { font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); }

/* the copy-link field (affiliates, invitations…): full width in the card */
.ng-set__card div[style*="width: 60%"] { width: auto !important; margin: 16px 0 !important; }
.ng-set__card .input-group:has(.js_clipboard) .form-control { border-radius: 12px 0 0 12px; }
.ng-set__card .input-group .js_clipboard { min-width: 52px; border: 0; border-radius: 0 12px 12px 0; background: var(--ng-fill-2); color: var(--ng-brand); }

/* ------------------------------- */
/* Posts (user, 2026-10-17): media edge to edge with square corners (photos, videos, live streams,
   link cards; reels keep their own card), a small gap under the caption, and a blog's category as a
   pill on its cover */
/* ------------------------------- */
.post-body > .mt10.plr15:has(> .post-media) { padding-left: 0 !important; padding-right: 0 !important; }
.post-body .post-media-meta { padding: 12px var(--ng-pg, 16px) 14px; }
.post .youtube-player, .post .youtube-player img, .post .plyr, .post .plyr__video-wrapper,
.post-body .post-media .post-media-image, .post-body .post-media .post-media-image > div { border-radius: 0 !important; }
.post .youtube-player { margin-left: 0; margin-right: 0; }
.post-body > .post-replace + :not(.post-actions) { margin-top: 12px !important; }
/* edge-to-edge media that ends the post (blog/link cards, photos, videos, lives) sits right on the action
   bar's line, no gap (user, 2026-10-17); reels keep theirs, they're a rounded card */
.post-body > div:has(> :is(.post-media, .pg_wrapper, .plyr, video, .youtube-player)) + .post-actions,
.post-body > .youtube-player + .post-actions { margin-top: 0; }
/* [video embeds flush] (owner, 2026-10-18): shared YouTube/video links, thumbnail and playing player alike, run edge
   to edge with square corners and sit right on the action bar's line (__feeds_post.body.tpl .ng-media--video) */
.post-body > .ng-media--video { padding-left: 0 !important; padding-right: 0 !important; }
.post-body > .ng-media--video + .post-actions { margin-top: 0; }
.post .ng-media--video :is(.youtube-player, .youtube-player iframe, .post-media, .ratio, .ratio > iframe, .plyr, .plyr__video-embed, iframe) { border-radius: 0 !important; }
/* ---- [Link preview image] (owner, 2026-10-18): a link preview's picture (the OG image) is square-cornered everywhere;
   only the card around it keeps the theme's shape. The ONE rule for: feed / single-post / shared link cards and
   photo-link cards (__feeds_post.body.tpl .ng-linkprev; edge to edge in posts, "Posts" above), and the composer's
   live preview (Sngine's #scraper-link / #scraper-photo / #scraper-player in .publisher-scraper), a contained card
   with the inner card radius (--ng-r-sm) that clips its content. Sngine's style.css gives the <img> 16px. /embed/post
   (embed.post.tpl, standalone) draws its own: a square .link img inside a rounded card. ---- */
:is(.ng-linkprev, .publisher-scraper) .post-media-image,
:is(.ng-linkprev, .publisher-scraper) .post-media-image > :is(img, div, .image),
.publisher-scraper .ratio, .publisher-scraper .ratio > iframe { border-radius: 0 !important; }
.publisher-scraper > .post-media, .publisher-scraper > div:has(> .ratio) { border-radius: var(--ng-r-sm); overflow: hidden; }
/* ---- /[Link preview image] ---- */
.ng-blogcover { position: relative; display: block; }
.ng-blogcover__cat {
  position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: hsl(0 0% 0% / .55); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.5;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ng-blogcover__cat--plain { position: static; display: inline-block; margin: 10px var(--ng-pg, 16px) 0; background: var(--ng-tint); color: var(--ng-brand); text-decoration: none; }

/* ------------------------------- */
/* Buttons (user, 2026-10-17): one scale everywhere — popups' submit/post, product, enroll, join,
   save… 38px with 10px corners; small 32px; large 42px. Round icon buttons stay round. */
/* ------------------------------- */
/* sizes come from padding + line height, so each button keeps Sngine's own display (some are hidden
   until needed, e.g. "View N New Posts") */
.btn:not(.btn-icon):not(.rounded-circle):not(.btn-close):not(.dropdown-toggle-split) {
  --bs-btn-padding-y: 8px; --bs-btn-padding-x: 16px;
  min-height: 38px; padding: 8px 16px; border-radius: 10px !important; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.btn.btn-sm:not(.btn-icon):not(.rounded-circle):not(.btn-close) { min-height: 32px; padding: 5px 12px; border-radius: 8px !important; font-size: 13px; }
.btn.btn-lg:not(.btn-icon):not(.rounded-circle):not(.btn-close) { min-height: 42px; padding: 9px 18px; font-size: 15px; }
.btn > i.mr5, .btn > i.mr10, .btn > .svg-container.mr5, .btn > .svg-container.mr10 { margin-right: 0 !important; }
.modal-footer .btn { min-width: 96px; }
/* Bootstrap's "success" buttons (Enroll, Join, Going…) are the brand button */
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  border-color: var(--ng-brand) !important; background-color: var(--ng-brand) !important; color: hsl(var(--primary-foreground)) !important;
}
.btn-success:hover { filter: brightness(1.06); }
/* Bootstrap's coloured badges (product New/Used, Digital…) as our tinted tags */
.badge.bg-info { background: hsl(210 80% 94%) !important; color: hsl(210 60% 35%) !important; }
.badge.bg-primary { background: hsl(var(--primary) / .14) !important; color: var(--ng-brand) !important; }
body.night-mode .badge.bg-info { background: hsl(210 30% 18%) !important; color: hsl(210 70% 75%) !important; }

/* ------------------------------- */
/* Day / night switch: the moon sweeps the page (niguroapp's #niriv-theme-cover, niguro custom.css).
   niguro.js grows a disc in the incoming mode's colours out of the pressed .js_theme-mode control,
   lets Sngine flip body.night-mode under it, then dissolves it. The lit patch and terminator make
   the disc read as a moon. Fallback colours are the tokens above (night 143 45% 6%, day canvas
   214 24% 94.3%); niguro.js sets the exact ones inline once it has seen a mode. */
/* ------------------------------- */
#ng-theme-cover {
  position: fixed; inset: 0; z-index: 99999; overflow: hidden; pointer-events: none;
  opacity: 1; transition: opacity 240ms ease;
}
#ng-theme-cover[hidden] { display: none; }
#ng-theme-cover.is-out { opacity: 0; }
#ng-theme-cover[data-dir="night"] { --tc-fill: hsl(143 45% 6%); --tc-glow: 143 99% 30%; }
#ng-theme-cover[data-dir="day"] { --tc-fill: hsl(214 24% 94.3%); --tc-glow: 143 99% 30%; }
/* a 100vmax radius always reaches every corner, from any point */
#ng-theme-cover .ng-tc-disc {
  position: absolute; left: var(--tc-x, 100%); top: var(--tc-y, 0px);
  width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; border-radius: 50%;
  background:
    radial-gradient(closest-side circle at 78% 20%, hsl(var(--tc-glow) / .26) 0%, hsl(var(--tc-glow) / .06) 46%, transparent 74%),
    radial-gradient(closest-side circle at 20% 80%, hsl(0 0% 0% / .28) 0%, transparent 62%),
    var(--tc-fill);
  transform: scale(0);
  transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
#ng-theme-cover.is-in .ng-tc-disc { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { #ng-theme-cover, #ng-theme-cover .ng-tc-disc { transition: none; } }

/* ------------------------------- */
/* Cookie notice (cookieconsent "bar inline", _js_files.tpl): one thin row across the bottom - a short line
   with the Privacy link, then Accept and Decline as small pills; our tokens in day and night (user, 2026-10-17) */
/* ------------------------------- */
html #cc-main, html.cc--darkmode #cc-main {
  --cc-font-family: inherit; --cc-bg: var(--ng-card); --cc-primary-color: var(--ng-ink-strong); --cc-secondary-color: var(--ng-sub);
  --cc-link-color: var(--ng-brand); --cc-separator-border-color: var(--ng-line); --cc-modal-border-radius: 0; --cc-btn-border-radius: 999px;
  --cc-btn-primary-bg: var(--ng-brand); --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: transparent;
  --cc-btn-primary-hover-bg: var(--ng-brand); --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: transparent;
  --cc-btn-secondary-bg: var(--ng-fill); --cc-btn-secondary-color: var(--ng-ink); --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: var(--ng-fill-2); --cc-btn-secondary-hover-color: var(--ng-ink-strong); --cc-btn-secondary-hover-border-color: transparent;
  --cc-overlay-bg: transparent;
}
#cc-main .cm.cm--bar { max-width: none; border: 0; border-top: 1px solid var(--ng-line); box-shadow: 0 -6px 20px hsl(0 0% 0% / .06); }
#cc-main .cm--bar .cm__body {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
}
#cc-main .cm--bar .cm__texts { flex: 1; min-width: 0; padding: 0; }
#cc-main .cm--bar .cm__title { display: none; }
#cc-main .cm--bar .cm__desc { margin: 0; padding: 0; max-height: none; font-size: 12.5px; line-height: 1.4; color: var(--ng-sub); }
#cc-main .cm--bar .cm__desc a { margin-left: 4px; color: var(--ng-sub); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#cc-main .cm--bar .cm__btns { flex: none; flex-direction: row; gap: 6px; padding: 0; border: 0; }
#cc-main .cm--bar .cm__btn-group { flex-direction: row; gap: 6px; margin: 0; }
#cc-main .cm--bar .cm__btn {
  min-height: 30px; height: 30px; margin: 0; padding: 0 14px; border-width: 0; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
#cc-main .cm--bar .cm__btn:hover { filter: brightness(1.06); }
#cc-main .cm--bar .cm__footer, #cc-main .cm--bar .cm__links { display: none; }
/* the library's own bar rules are more specific (and stack on phones): keep it one row everywhere */
#cc-main .cm.cm--bar .cm__body { flex-direction: row !important; align-items: center !important; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important; }
#cc-main .cm.cm--bar .cm__btns, #cc-main .cm.cm--bar .cm__btn-group { flex-direction: row !important; align-items: center !important; width: auto !important; }
#cc-main .cm.cm--bar .cm__btn-group + .cm__btn-group { display: none !important; }
#cc-main .cm.cm--bar .cm__btn { flex: none !important; width: auto !important; min-width: 0 !important; }
#cc-main .cm.cm--bar :is(.cm__texts, .cm__desc, .cm__btns, .cm__btn-group) { padding: 0 !important; margin: 0 !important; }
/* one line: the sentence shortens with … and the Privacy link always shows */
#cc-main .cm.cm--bar .cm__desc { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
#cc-main .cm.cm--bar .cm__desc .ng-cc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#cc-main .cm.cm--bar .cm__desc a { flex: none; }
#cc-main .cm.cm--bar .ng-cc-t--short { display: none; }
@media (max-width: 575.98px) { #cc-main .cm.cm--bar .ng-cc-t--long { display: none; } #cc-main .cm.cm--bar .ng-cc-t--short { display: inline; } }
@media (max-width: 575.98px) {
  #cc-main .cm--bar .cm__body { gap: 10px; }
  #cc-main .cm--bar .cm__desc { font-size: 12px; }
  #cc-main .cm--bar .cm__btn { padding: 0 12px; }
}

/* Popups never move the page (user, 2026-10-17): Sngine pads the header 17px / 74px while a popup is open to stand
   in for a scrollbar, and Bootstrap pads <body> by the scrollbar's width; the theme hides scrollbars, so both only
   made the header and the page jump sideways on open and back on close */
body.modal-open .main-header, body.modal-open .top-bar,
body.modal-open:not(.n_chat) .main-header, body.modal-open:not(.n_chat) .top-bar { padding-right: 0 !important; }
body.modal-open { padding-right: 0 !important; }
body.modal-open :is(.ng-rail, .ng-pillnav, .ng-fab, .ng-totop, .chat-sidebar) { padding-right: 0 !important; margin-right: 0 !important; }

/* ---- [Niguro live pill] (begin) — niguro (live blog): the red LIVE pill with a pulsing dot (the cricket
   board's .ng-ck-live), used by a news story that is a live blog: the story, news lists (__ng_news_row.tpl)
   and the home's Latest (__ng_home_news.tpl) ---- */
.ng-live-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--ng-red); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.ng-live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ng-live-pulse 1.4s ease-in-out infinite; }
.ng-live-pill--sm { height: 18px; padding: 0 7px; font-size: 9.5px; gap: 4px; }
.ng-live-pill--sm::before { width: 5px; height: 5px; }
@keyframes ng-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ng-live-pill::before { animation: none; } }
/* ---- [Niguro live pill] (end) ---- */

/* ---- [Soft surfaces] (begin) — (user, 2026-10-18) cards read as soft white surfaces lifted off the grey page,
   like m.naver.com's feed cards on desktop: pure white, no border, generous corners and a faint layered shadow
   (a hairline edge, a tight contact shadow and a wide soft one); at night the card keeps its colour and gets a faint
   light top edge and a deeper shadow. Popups on desktop (1024px+): larger corners, a deeper soft shadow, a lighter
   scrim (no blur: it cost frames in testing), and one light fade + lift (opacity and transform only; Bootstrap's backdrop no longer
   waits before the popup, so both move together). Phones and tablets keep their bottom sheets. The page colour
   stays (214 24% 94.3% is the reference's own #edf0f4). Tokens first, then the surfaces that use them. ---- */
/* [Flat cards] (owner, 2026-10-19): cards sit flat on the page like niguro.com (niguroapp app.css: --na-shadow: none,
   "Cards sit flat (no shadow)"): pure white (night: the card colour), no border, no edge, no shadow; the page colour
   alone separates them. Only things that float (menus, popovers, sheets, modals) keep a shadow (--ng-pop-shadow,
   --ng-modal-shadow, --ng-shadow-lg). */
:root, body {
  --ng-card-shadow: none;
  --ng-pop-shadow: 0 0 0 1px hsl(214 30% 30% / .05), 0 4px 10px hsl(214 30% 20% / .05), 0 16px 40px -6px hsl(214 30% 15% / .16);
  --ng-modal-shadow: 0 0 0 1px hsl(214 30% 30% / .04), 0 6px 16px hsl(214 30% 20% / .06), 0 28px 64px -12px hsl(214 30% 12% / .28);
  --ng-shadow-lg: var(--ng-pop-shadow);
  --ng-r-pop: 22px;
  --ng-scrim: hsl(214 30% 14%);
  --ng-scrim-a: .3;
  --ng-scrim-veil: hsl(214 30% 14% / .3);
}
body.night-mode {
  --ng-card-shadow: none; /* [Flat cards] niguroapp night: --na-shadow: none */
  --ng-pop-shadow: inset 0 1px 0 hsl(0 0% 100% / .06), 0 0 0 1px hsl(0 0% 100% / .07), 0 4px 12px hsl(0 0% 0% / .3), 0 18px 44px -6px hsl(0 0% 0% / .5);
  --ng-modal-shadow: inset 0 1px 0 hsl(0 0% 100% / .06), 0 0 0 1px hsl(0 0% 100% / .08), 0 8px 20px hsl(0 0% 0% / .35), 0 32px 72px -12px hsl(0 0% 0% / .65);
  --ng-shadow-lg: var(--ng-pop-shadow);
  --ng-scrim: hsl(150 40% 2%);
  --ng-scrim-a: .55;
  --ng-scrim-veil: hsl(150 40% 2% / .55);
}

/* cards on the page: the theme's .card and post, and the pages' own card classes */
.card, .post, .ng-panel, body.night-mode .ng-panel, .ng-ann__item, .ng-hero, .ng-fhero, .ng-dtile, .ng-scard, .ng-pcard, .ng-snav,
.ng-auth__card, .ngg-hero, .nw-card, .nwa-card, .nwa-status, .nwa-keep, .nwx-list, .nwx-empty, .na-nx-card, .sd-card, .wx-box,
.ngc-sec, .ng-ck-sec, .ng-ck-npl, .ng-fbcard, .ng-horo-panel, .ng-horo-names, .ng-horo-card, .ng-horo-overview, .ng-rd__hero,
.ng-rd__card, .ngm-bar, .ng-shop-card, .ng-see__card, .ngt-group, .ngt-services, .ngt-intro, .upd-card, .ng-miti__mtile, .ng-miti__times {
  box-shadow: var(--ng-card-shadow);
}
.ng-auth__card { border-color: transparent; }
.post { border-radius: var(--ng-r); }
/* a card inside a card or a popup stays flat */
.card .card, .card .post, .card .ng-scard, .card .ng-snav, .post .card, .modal .card, .modal .post, .dropdown-menu .card { box-shadow: none; }

/* menus, popovers and the header sheets (their --ng-shadow-lg is the soft pop shadow above) */
@media (min-width: 1024px) {
  .dropdown-menu, :is(.ng-top__actions, .ng-serp-head__acts) .dropdown-menu.ng-sheet,
  body.night-mode .dropdown-menu, body.night-mode :is(.ng-top__actions, .ng-serp-head__acts) .dropdown-menu.ng-sheet { box-shadow: var(--ng-pop-shadow); }
  .dropdown-menu, .action-dropdown-menu { border-radius: 16px; }
  .ng-top__actions .dropdown-menu.ng-sheet { border-radius: var(--ng-r-pop); }
}

/* popups (1024px+): Sngine's #modal and every Bootstrap modal, and the composer when it opens as a dialog */
@media (min-width: 1024px) {
  .modal-content, #modal.ng-msheet .modal-content, #modal.ng-cmodal .modal-content {
    border: 0; border-radius: var(--ng-r-pop); background: var(--ng-card); box-shadow: var(--ng-modal-shadow);
  }
  .modal-header, body.night-mode .modal-header { border-bottom-color: hsl(var(--border) / .65); }
  .modal-footer, body.night-mode .modal-footer { border-top-color: hsl(var(--border) / .65); }
  /* one motion: the popup fades as its card lifts 8px into place (open .2s ease-out, close .14s ease-in) */
  .modal.fade { transition: opacity .2s cubic-bezier(.2, .8, .2, 1); }
  .modal.fade:not(.show) { transition: opacity .14s cubic-bezier(.4, 0, 1, 1); }
  .modal.fade .modal-dialog, #modal.ng-msheet.fade .modal-dialog, #modal.ng-cmodal.fade .modal-dialog {
    transform: translateY(8px) scale(.98); transition: transform .14s cubic-bezier(.4, 0, 1, 1);
  }
  .modal.show .modal-dialog, #modal.ng-msheet.show .modal-dialog, #modal.ng-cmodal.show .modal-dialog {
    transform: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1);
  }
  .modal.show.modal-static .modal-dialog, #modal.ng-msheet.show.modal-static .modal-dialog, #modal.ng-cmodal.show.modal-static .modal-dialog { transform: scale(1.01); }
  /* [Final check] (2026-10-18): the composer popup (Create › posts/publisher.php, Sngine's publisher in modal mode)
     sits flush in the popup, but Sngine's modal mode writes border-radius: 8px on it, which squared the popup's
     22px corners. Everywhere (was /watch only, watch.css "[Watch]"): the popup's radius on the publisher too, so the
     card, its corners and the popup's soft shadow (--ng-modal-shadow) line up. */
  #modal .modal-content > .modal-body > [id^="publisher-wapper"] > .publisher[data-modal-mode] { border-radius: var(--ng-r-pop, 22px) !important; }
  /* [/Final check] */
  /* the scrim: lighter and tinted, faded by an animation (no transition, so Bootstrap shows the popup at once
     instead of after the scrim) and out together with the popup (the popup has lost .show, the scrim not yet) */
  .modal-backdrop { --bs-backdrop-bg: var(--ng-scrim); --bs-backdrop-opacity: var(--ng-scrim-a); }
  .modal-backdrop.fade { transition: none; }
  .modal-backdrop.show { animation: ng-scrim-in .2s cubic-bezier(.2, .8, .2, 1); }
  .modal.fade:not(.show)[aria-modal="true"] ~ .modal-backdrop.show { opacity: 0; transition: opacity .14s cubic-bezier(.4, 0, 1, 1); }
  [id="publisher-wapper"] > .publisher-overlay { background: var(--ng-scrim-veil); }
  [id="publisher-wapper"] > .ng-pub { box-shadow: var(--ng-modal-shadow); }
}
@keyframes ng-scrim-in { from { opacity: 0; } }
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog, .modal.show .modal-dialog, #modal.ng-msheet.fade .modal-dialog, #modal.ng-cmodal.fade .modal-dialog,
  #modal.ng-msheet.show .modal-dialog, #modal.ng-cmodal.show .modal-dialog { transform: none; transition: none; }
  .modal-backdrop.show { animation-duration: .01s; }
}
/* popups sit in the middle of the screen (Bootstrap's centred dialog, for every popup: the loading state too) */
@media (min-width: 1024px) {
  .modal .modal-dialog { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2); }
}
/* "Opening…" while a popup loads: niguro.js marks #modal .ng-opening while its content is only Sngine's spinner
   (#modal-loading, or the .loader it resets to) and adds the label; the spinner and label sit centred in a
   popup of a comfortable size instead of a thin empty strip. The label waits a moment so quick loads don't flash it. */
#modal.ng-opening .modal-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 180px; padding: 36px 24px; text-align: center;
}
#modal.ng-opening .modal-body .spinner-border { width: 30px; height: 30px; border-width: 3px; }
#modal.ng-opening .modal-body .loader { margin: 0; }
#modal.ng-opening .ng-opening__label { font-size: 14px; font-weight: 600; color: var(--ng-sub); animation: ng-opening-in .2s ease .3s both; }
@keyframes ng-opening-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #modal.ng-opening .ng-opening__label { animation: none; } }
/* ---- [Soft surfaces] (end) ---- */

/* ------------------------------- */
/* [Chat rail] Sngine's online-friends column (.chat-sidebar: _js_templates.tpl, refreshed from
   ajax.chat.master.sidebar.tpl), desktop from 1536px (hidden 1200–1535px, see the page frame).
   Collapsed: a 75px strip on the right edge under the header with the left icon rail's surface and hairline
   (frosted at night), running up under the header (its cloud edge shows over it; the content starts below
   the header's real height, --ng-header-h), 44px avatars (the online dot when online) and the foot's New Message / settings as 40px
   brand circles. Mouse over it (after 80ms) or keyboard focus in it slides it out to 250px over the page;
   it slides back 250ms after the mouse leaves (niguro-chat.js "[Chat rail]" sets .is-open, adds the names,
   "Active now" / last seen, the "Contacts" label and the foot's labels). The panel is always 250px wide and
   only moves (transform), so nothing on the page reflows. Expanded, the foot buttons are rows: New Message on
   the brand tint, Settings plain (the tint on hover); every hover fill open is a 12px-radius row. The go-to-top sits left of the foot buttons, bottoms aligned
   (body.ng-crail-on), and the docked chat boxes keep clear of both. Reduced motion: no slide. */
/* ------------------------------- */
@media (min-width: 1536px) {
  :root { --ng-crail-w: 75px; --ng-crail-open: 250px; }
  .chat-sidebar {
    top: 0; right: 0; bottom: 0; width: var(--ng-crail-open); z-index: 990;
    display: flex; flex-direction: column; padding: calc(var(--ng-header-h, var(--ng-top, 56px)) + 12px) 0 16px;
    background: var(--ng-card); box-shadow: -1px 0 0 var(--ng-line);
    transform: translateX(calc(var(--ng-crail-open) - var(--ng-crail-w)));
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  }
  body.night-mode .chat-sidebar {
    background: hsl(var(--card) / .72);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  }
  body.n_activated .chat-sidebar, body.n_live .chat-sidebar { top: 0; }
  /* open: over the docked chat boxes (999 here), under the header (1001, its cloud edge shows over the panel)
     and under the page dim's scrim and sheets */
  .chat-sidebar.is-open { z-index: 1000; transform: none; box-shadow: -1px 0 0 var(--ng-line), var(--ng-shadow-lg); }
  body.ng-crail-on .chat-widget { z-index: 999; }
  body.ng-dimmed .chat-sidebar { z-index: 990; }
  [dir="RTL"] .chat-sidebar { right: auto; left: 0; box-shadow: 1px 0 0 var(--ng-line); transform: translateX(calc(var(--ng-crail-w) - var(--ng-crail-open))); }
  [dir="RTL"] .chat-sidebar.is-open { transform: none; box-shadow: 1px 0 0 var(--ng-line), var(--ng-shadow-lg); }

  /* the "Contacts" label (shown open) */
  .ng-crail__head { flex: none; padding: 4px 20px 8px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ng-sub); visibility: hidden; }
  .chat-sidebar.is-open .ng-crail__head { visibility: visible; }

  /* the list: fills the height between the label and the foot, a thin scrollbar when long */
  .chat-sidebar .chat-sidebar-content { position: relative; top: auto; bottom: auto; flex: 1 1 auto; min-height: 0; width: 100%; }
  .chat-sidebar .js_scroller { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ng-line) transparent; }

  /* a contact: 44px avatar, then name and status (the avatar sits centred in the collapsed strip) */
  .chat-sidebar .chat-avatar-wrapper {
    display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 8px 2px; padding: 6px 8px 6px 7px;
    border-radius: 12px; outline: 0; transition: background-color .15s ease;
  }
  .chat-sidebar .chat-avatar-wrapper:hover { background: var(--ng-fill); }
  .chat-sidebar .chat-avatar-wrapper:focus-visible { background: var(--ng-fill); box-shadow: inset 0 0 0 2px var(--ng-brand); }
  .chat-sidebar .chat-avatar-wrapper > .pb10, .chat-sidebar .chat-avatar-wrapper > .last-seen { display: none; }
  .chat-sidebar .chat-avatar { flex: none; width: 44px; height: 44px; margin: 0; }
  .chat-sidebar .chat-avatar img { object-fit: cover; }
  /* the online dot: the docked chat boxes' dot (css/pages/chat.css), on the rail's surface */
  .chat-sidebar .chat-avatar .online-status {
    right: -1px; bottom: -1px; width: 14px; height: 14px; border: 2px solid var(--ng-card); border-radius: 50%;
    font-size: 0; background: hsl(143 70% 40%);
  }
  .chat-sidebar .chat-avatar .online-status.offline { display: none; }
  /* names show open only (collapsed, their first letters would peek in at the screen edge) */
  .ng-crail__meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; visibility: hidden; }
  .chat-sidebar.is-open .ng-crail__meta { visibility: visible; }
  .ng-crail__name, .ng-crail__status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ng-crail__name { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--ng-ink); }
  .ng-crail__status { font-size: 13px; line-height: 18px; color: var(--ng-sub); }
  .ng-crail__status:empty { display: none; }

  /* the foot: New Message and settings, 40px brand circles (the go-to-top's look) */
  .chat-sidebar .chat-sidebar-footer {
    position: relative; bottom: auto; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: auto; margin: 8px 8px 0; padding: 12px 0 0 9px; border-top: 1px solid transparent; text-align: start;
  }
  .chat-sidebar-footer .btn-chat, body.night-mode .chat-sidebar-footer .btn-chat {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; width: 40px; height: 40px; margin: 0 !important; padding: 0;
    border: 0; border-radius: 50%; background: var(--ng-brand); color: hsl(var(--primary-foreground)); box-shadow: var(--ng-shadow-lg);
    font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: filter .15s ease, background-color .15s ease;
  }
  .chat-sidebar-footer .btn-chat:hover, body.night-mode .chat-sidebar-footer .btn-chat:hover { background: var(--ng-brand); filter: brightness(1.06); }
  .chat-sidebar-footer .btn-chat .svg-container { flex: none; width: 18px !important; height: 18px !important; }
  /* the stroke icons are recoloured brand green site-wide (!important), which vanishes on the green circle: white here */
  .chat-sidebar-footer .btn-chat .svg-container.main-icon, .chat-sidebar-footer .btn-chat .svg-container.main-icon * { color: hsl(var(--primary-foreground)) !important; stroke: hsl(var(--primary-foreground)) !important; }
  .ng-crail__lbl { display: none; }

  /* open: the foot's buttons as rows with their labels, a hairline above */
  .chat-sidebar.is-open .chat-sidebar-footer { gap: 4px; padding-left: 0; border-top-color: var(--ng-line); }
  .chat-sidebar.is-open .chat-sidebar-footer .btn-chat {
    justify-content: flex-start; width: 100%; height: 48px; padding: 0 16px 0 19px; border-radius: 12px !important; box-shadow: none; filter: none;
  } /* !important: over Sngine's .rounded-circle on these buttons */
  .chat-sidebar.is-open .ng-crail__lbl { display: inline; }
  .chat-sidebar.is-open .chat-sidebar-footer .btn-chat.js_chat-new { background: var(--ng-tint); color: var(--ng-brand); }
  .chat-sidebar.is-open .chat-sidebar-footer .btn-chat.js_chat-new:hover { background: hsl(var(--primary) / .16); }
  .chat-sidebar.is-open .chat-sidebar-footer button.btn-chat { background: transparent; color: var(--ng-ink); }
  .chat-sidebar.is-open .chat-sidebar-footer button.btn-chat:hover, .chat-sidebar.is-open .chat-sidebar-footer button.btn-chat.show { background: var(--ng-tint); }
  .chat-sidebar.is-open .chat-sidebar-footer .btn-chat.js_chat-new .svg-container.main-icon,
  .chat-sidebar.is-open .chat-sidebar-footer .btn-chat.js_chat-new .svg-container.main-icon * { color: var(--ng-brand) !important; stroke: var(--ng-brand) !important; }
  .chat-sidebar.is-open .chat-sidebar-footer button.btn-chat .svg-container.main-icon,
  .chat-sidebar.is-open .chat-sidebar-footer button.btn-chat .svg-container.main-icon * { color: var(--ng-ink) !important; stroke: var(--ng-ink) !important; }
  .chat-sidebar-footer .btn-chat:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

  /* the go-to-top: left of the foot buttons, same size, bottoms aligned; the docked chat boxes keep clear of it */
  body.ng-crail-on .ng-totop { right: calc(var(--ng-crail-w) + 12px); bottom: 16px; width: 40px; height: 40px; }
  body.ng-crail-on .ng-totop .ng-ico { width: 20px; height: 20px; }
  /* the open panel covers its place: it fades out meanwhile (it showed through the frosted panel at night) */
  body.ng-crail-open .ng-totop.is-on { opacity: 0; pointer-events: none; }
  [dir="RTL"] body.ng-crail-on .ng-totop { right: auto; left: calc(var(--ng-crail-w) + 12px); }
  body.ng-crail-on .chat-widget { margin-right: 52px; }
  [dir="RTL"] body.ng-crail-on .chat-widget { margin-right: 0; margin-left: 52px; }
}
@media (min-width: 1536px) and (prefers-reduced-motion: reduce) {
  .chat-sidebar { transition: none; }
}
/* ---- [Chat rail] (end) ---- */

/* ------------------------------- */
/* niguro (admin forms, 2026-10-18): on/off switches and date fields.
   A switch's hit area reaches 8px past its 40x24 track (label.switch::before; the knob is .slider:before), the row
   text beside a lone switch toggles it too (includes/assets/js/core/admin.js) and shows a pointer, and the native
   date / time pickers (Admin › Announcements, Events…) keep a visible calendar icon in night mode. */
/* ------------------------------- */
.switch { cursor: pointer; }
.switch::before { content: ""; position: absolute; inset: -8px -10px; }
.form-table-row:has(> .text-end > .switch) > div:not(.avatar):not(.text-end) { cursor: pointer; }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { cursor: pointer; }
body.night-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.night-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.night-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.night-mode input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.85); }

/* ---- niguro [sports last-saved]: "Updated 2 h ago" / "Live data unavailable, showing the last update" under the
   football and cricket hubs' heroes and the home's sports cards (ng_sports_freshness(), includes/niguro/sports) ---- */
.ng-spfresh { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--ng-sub); }
.ng-spfresh .ng-ico { width: 14px; height: 14px; flex: none; }
.ng-spfresh.is-off { color: hsl(38 85% 32%); }
body.night-mode .ng-spfresh.is-off { color: hsl(38 85% 62%); }
.ng-hsp > .ng-spfresh { margin: -6px 0 12px; }
.ng-hsp > .ng-hsp__sub + .ng-spfresh { margin-top: -8px; }
.ng-fbnow > .ng-spfresh { margin: 0; }
.ng-spfresh-inline.is-off { color: hsl(38 85% 32%); }
body.night-mode .ng-spfresh-inline.is-off { color: hsl(38 85% 62%); }
/* ---- niguro [sports last-saved] end ---- */

/* ---- niguro [comment menu + edit] (begin) — (user, 2026-10-18) a comment's ⋯ menu (Edit / Delete / Report,
   __feeds_comment.tpl .ng-cmt-menu) is smaller than the post menu: 32px rows, 13px labels, bare 16px icons (no
   tile), the theme's menu card and soft pop shadow. Editing a comment (Sngine's #edit-comment template, post.js):
   8px between the field and Cancel / Save, small theme buttons, and 12px under them (the comment's own top
   padding), so the box never sits flush on the card's or sheet's bottom edge. Everywhere comments render: the feed,
   its phone sheet, single posts, the photo viewer, reels, blogs. ---- */
body .action-dropdown-menu.ng-cmt-menu, body.night-mode .action-dropdown-menu.ng-cmt-menu { min-width: 168px; padding: 4px; border-radius: 12px; box-shadow: var(--ng-pop-shadow, var(--ng-shadow-lg)); }
.ng-cmt-menu .dropdown-item { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; }
.ng-cmt-menu .dropdown-item .action { gap: 8px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ng-ink); }
.ng-cmt-menu .dropdown-item:hover .action, .ng-cmt-menu .dropdown-item:focus .action { color: var(--ng-ink-strong); }
.action-dropdown-menu.ng-cmt-menu .dropdown-item .main-icon { width: 16px !important; height: 16px !important; padding: 0; border-radius: 0; background: none; }
.ng-cmt-menu .dropdown-item .main-icon svg { display: block; width: 16px !important; height: 16px !important; }
.comment-edit { padding-bottom: 12px; }
.comment-edit > .text-end { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px !important; }
.comment .comment-edit > .text-end > .btn.btn-sm.rounded-pill { margin: 0 !important; min-height: 30px; padding: 4px 14px !important; border-radius: 999px !important; font-size: 13px; font-weight: 600; box-shadow: none; }
.comment-edit .js_unedit-comment { border: 0; background: var(--ng-fill); color: var(--ng-ink); }
.comment-edit .js_unedit-comment:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.comment-edit .js_update-comment { border: 0; background: var(--ng-brand); color: hsl(var(--primary-foreground)); }
.comment-edit .js_update-comment:hover { background: var(--ng-brand); color: hsl(var(--primary-foreground)); filter: brightness(1.06); }
/* [Final check] (2026-10-18): Sngine shows a comment's ⋯ (.comment-btn) only on :hover, so on touch screens it never
   showed until the comment was tapped (the reels comments sheet, the feed's comments sheet, posts): there it is
   always shown. Live-video comments keep Sngine's no-menu rule. */
@media (hover: none) {
  .comment .comment-btn { display: block; }
  .live-comments .comment .comment-btn { display: none; }
}
/* [/Final check] */
/* ---- niguro [comment menu + edit] (end) ---- */

/* ---- niguro [url-prefix fields] (begin) — (user, 2026-10-18) usernames typed after the site's address
   ("https://…/pages/" + the page's username): the page and group settings and their create forms, Edit profile ›
   Account (settings.account.tpl), the admin's user / page / group editors, a game's slug. Sngine marks the prefix
   d-none d-sm-block, and display:block put its text at the top of the box; it is a centred flex box again (from
   576px, where it shows), in the muted 13px of a hint, on the field's own fill, never squeezed; the field keeps 15px
   and the help under it is 12px. ---- */
@media (min-width: 576px) { .input-group > .input-group-text.d-sm-block { display: flex !important; } }
.input-group > .input-group-text:is(.d-sm-block, .ng-urlprefix) {
  flex: none; align-items: center; max-width: 60%; padding: 0 10px 0 14px; border: 0; background: var(--ng-fill-2); color: var(--ng-sub);
  font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.input-group:has(> .input-group-text:is(.d-sm-block, .ng-urlprefix)) > .form-control { min-width: 0; font-size: 15px; }
.form-group:has(> .input-group > .input-group-text:is(.d-sm-block, .ng-urlprefix)) .form-text,
.input-group:has(> .input-group-text:is(.d-sm-block, .ng-urlprefix)) + .form-text { margin-top: 6px; font-size: 12px; line-height: 1.45; }
/* ---- niguro [url-prefix fields] (end) ---- */

/* ---- [Desktop popups] (begin) — (user, 2026-10-18) one compact look for every popup on desktop (1024px+; phones and
   tablets keep their bottom sheets): Sngine's shared #modal (share, report, who reacted, the create forms, tips,
   payments, sign-in, ngConfirm…) and every other Bootstrap modal. Card, corners, shadow and motion stay those of
   "[Soft surfaces]". Header: a 17px title with an 18px icon and a small round close button (32px, the theme's
   filled icon button). Body: 14px text, 38px filled fields (--ng-field-h), 12px between fields, 20px from the
   edges. Footer: 36px buttons, right-aligned, 8px apart. Icons inside 18px; people / option lists are compact 40px
   rows. The "Create post" composer (niguro.js tags #modal .ng-mcompose; the feed's own dialog is
   [id="publisher-wapper"] > .ng-pub) is wider (660px) with a taller text area. Sngine's emoji / sticker popover and
   the chat's colour menu get the theme's card, a compact grid and segmented tabs. Only shared rules here; ids,
   classes and Sngine's JS are untouched. :is(.modal, #modal) lifts these over the older #modal.ng-msheet rules. ---- */
@media (min-width: 1024px) {
  .modal { --ng-field-h: 38px; --ng-pop-px: 20px; --bs-modal-footer-gap: 8px; --bs-modal-header-padding: 12px 12px 12px 20px; }

  /* header: title, icon, close */
  :is(.modal, #modal) .modal-content > .modal-header,
  :is(.modal, #modal) .modal-content > form > .modal-header {
    display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 12px 12px var(--ng-pop-px);
    border-bottom: 1px solid hsl(var(--border) / .65);
  }
  :is(.modal, #modal) .modal-header .modal-title {
    display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--ng-ink-strong);
  }
  :is(.modal, #modal) .modal-header .modal-title :is(.svg-container, .ng-reshare__ico, .ng-ico, i.fa) {
    flex: none; width: 18px !important; height: 18px !important; margin: 0 !important; font-size: 16px; line-height: 18px; color: var(--ng-brand);
  }
  :is(.modal, #modal) .modal-header .modal-title .svg-container svg, :is(.modal, #modal) .modal-header .modal-title .ng-reshare__ico .ng-ico { width: 18px !important; height: 18px !important; }
  /* the close button: a 32px round filled button with the theme's ink-coloured ✕ (Bootstrap's ✕ as a mask) */
  :is(.modal, #modal) .modal-header .btn-close, :is(.modal, #modal) .modal-header .ng-rx__x, :is(.modal, #modal) .modal-header .na-nx-dlg__x {
    position: relative; flex: none; box-sizing: border-box; width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%;
    background: var(--ng-fill); color: var(--ng-ink); opacity: 1; box-shadow: none; filter: none; transition: background-color .15s ease;
  }
  :is(.modal, #modal) .modal-header .btn-close::before {
    content: ""; position: absolute; inset: 0; background: currentColor;
    -webkit-mask: var(--bs-btn-close-bg) center / 10px 10px no-repeat; mask: var(--bs-btn-close-bg) center / 10px 10px no-repeat;
  }
  :is(.modal, #modal) .modal-header :is(.btn-close, .ng-rx__x, .na-nx-dlg__x):hover { background-color: var(--ng-fill-2); color: var(--ng-ink-strong); }
  :is(.modal, #modal) .modal-header :is(.btn-close, .ng-rx__x, .na-nx-dlg__x):focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; box-shadow: none; }
  :is(.modal, #modal) .modal-header :is(.ng-rx__x, .na-nx-dlg__x) .ng-ico { width: 16px; height: 16px; }

  /* body: 14px, 20px from the edges, fields 38px (the token) and 12px apart */
  :is(.modal, #modal) .modal-content .modal-body { padding: 16px var(--ng-pop-px); font-size: 14px; line-height: 1.5; }
  :is(.modal, #modal) .modal-body :is(.form-control, .form-select) { font-size: 14px; }
  :is(.modal, #modal) .modal-body textarea.form-control { padding: 9px 14px; }
  :is(.modal, #modal) .modal-body :is(.form-label, .form-group > label:not(.switch):not(.form-check-label)) { margin-bottom: 6px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ng-ink); }
  :is(.modal, #modal) .modal-body :is(.form-group, .mb-3, .mb20, .mb15, .form-table-row) { margin-bottom: 12px; }
  :is(.modal, #modal) .modal-body :is(.form-group, .mb-3, .mb20, .mb15, .form-table-row):last-child,
  :is(.modal, #modal) .modal-body .row:last-child > [class*="col"] > .form-group:last-child { margin-bottom: 0; }
  :is(.modal, #modal) .modal-body .row { --bs-gutter-x: 12px; }
  :is(.modal, #modal) .modal-body .form-text { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--ng-sub); }
  :is(.modal, #modal) .modal-body .alert { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; }
  :is(.modal, #modal) .modal-body .alert:last-child { margin-bottom: 0; }
  /* Sngine's big amount field (tips, wallet, donations): the theme's field, the currency as its hint */
  :is(.modal, #modal) .modal-body .input-money > span {
    top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: var(--ng-field-h); font-size: 14px; font-weight: 600; color: var(--ng-sub);
  }
  :is(.modal, #modal) .modal-body .input-money > input.form-control { height: var(--ng-field-h); padding: 0 14px 0 44px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 20px; }
  :is(.modal, #modal) .modal-body .input-money.right > input.form-control { padding: 0 44px 0 14px; }

  /* Sngine's message popups (success, error, info, payment alert: an icon, a title, a line, maybe buttons, with an
     inline 50px padding): 28px around, the icon an 18px glyph in a 44px tinted disc, a 17px title, 14px text */
  :is(.modal, #modal) .modal-content .modal-body.text-center[style*="padding"] { padding: 28px 24px 24px !important; }
  :is(.modal, #modal) .modal-body.text-center > .svg-container.main-icon:first-child {
    display: inline-grid !important; place-items: center; box-sizing: border-box; width: 44px !important; height: 44px !important; margin: 0 0 12px !important; padding: 13px;
    border-radius: 50%; background: var(--ng-tint);
  }
  :is(.modal, #modal) .modal-body.text-center > :is(h4, h5) { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--ng-ink-strong); }
  :is(.modal, #modal) .modal-body.text-center > p { margin: 6px 0 0 !important; font-size: 14px; color: var(--ng-sub); }
  :is(.modal, #modal) .modal-body.text-center > .mt30 { display: flex; justify-content: center; gap: 8px; margin-top: 20px !important; }
  :is(.modal, #modal) .modal-body.text-center > .mt30 > .btn { min-width: 88px; min-height: 36px; margin: 0 !important; padding: 7px 16px; line-height: 20px; }
  /* a confirm's message (Sngine writes it as an h6) reads as body text */
  :is(.modal, #modal) .modal-body > h6:first-child { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ng-ink); }

  /* footer: 36px buttons on the right, 8px apart, no divider */
  :is(.modal, #modal) .modal-content .modal-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px var(--ng-pop-px) 16px; border-top: 0;
  }
  :is(.modal, #modal) .modal-content .modal-footer > * { margin: 0; }
  :is(.modal, #modal) .modal-footer .btn:not(.btn-close):not(.btn-icon) {
    min-width: 88px; min-height: 36px; padding: 7px 16px; border-radius: 10px !important; font-size: 14px; font-weight: 600; line-height: 20px;
  }
  /* a footer's own text or link (e.g. "Remember me", a price) stays on the left */
  :is(.modal, #modal) .modal-footer > :is(.float-start, .me-auto, .text-start) { margin-right: auto; }

  /* icons inside popups: 18px (Sngine draws 24–40px); brand logos and pictures keep their size */
  :is(.modal, #modal) .modal-body .svg-container.main-icon:not(.ng-pop-keep) { width: 18px !important; height: 18px !important; }
  :is(.modal, #modal) .modal-body .svg-container.main-icon:not(.ng-pop-keep) svg { width: 18px !important; height: 18px !important; }

  /* people and option lists (who reacted, voted, shared, members…): 40px rows, 32px avatars */
  :is(.modal, #modal) .modal-body .feeds-item .data-container { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; }
  :is(.modal, #modal) .modal-body .feeds-item .data-avatar { flex: none; width: 32px; height: 32px; margin: 0; }
  :is(.modal, #modal) .modal-body .feeds-item .data-avatar > img { width: 32px; height: 32px; }
  :is(.modal, #modal) .modal-body .feeds-item .data-avatar .data-reaction { width: 16px; height: 16px; right: -3px; bottom: -3px; }
  :is(.modal, #modal) .modal-body .feeds-item .data-content { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 14px; }
  :is(.modal, #modal) .modal-body .feeds-item .data-content .btn { min-height: 30px; padding: 4px 12px; font-size: 13px; }
  :is(.modal, #modal) .modal-body .feeds-item + .feeds-item { margin-top: 2px; }
  :is(.modal, #modal) .modal-body .dropdown-item { min-height: 40px; display: flex; align-items: center; gap: 10px; font-size: 14px; }

  /* the theme's own dialogs on the custom pages follow the same card, title and close button: the live-news update
     sheet (news-live.css), the writer's dialogs (writer.css), the festival and Studio details (serp.css,
     studio.css <dialog>s), the markets dialogs (markets.css, in #modal) and Bhotu's settings dialog (bhotu.css) */
  html .nwl-sheet__panel, html .ng-wr-dlg__panel, html .ng-serp-festsheet, html .ng-studio-sheet, html body.page-template-bhotu #bhotu-keys-modal .bhotu-modal-card,
  html #modal.ng-nxdlg .modal-content {
    border-radius: var(--ng-r-pop); box-shadow: var(--ng-modal-shadow);
  }
  html .nwl-sheet__bar b, html .ng-wr-dlg__head b, html .ng-studio-sheet__title, html #modal .na-nx-dlg__title, html body.page-template-bhotu #bhotu-keys-modal .bhotu-modal-title {
    font-size: 17px; font-weight: 700; line-height: 24px; letter-spacing: 0;
  }
  html .nwl-sheet__x, html .ng-wr-dlg__x, html .ng-studio-sheet__bar > .ng-iconbtn, html .ng-serp-festsheet__close, html #modal .na-nx-dlg__x, html body.page-template-bhotu #bhotu-keys-close {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--ng-fill); color: var(--ng-ink);
  }
  html :is(.nwl-sheet__x, .ng-wr-dlg__x, .ng-studio-sheet__bar > .ng-iconbtn, .ng-serp-festsheet__close, #modal .na-nx-dlg__x, body.page-template-bhotu #bhotu-keys-close):hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
  html :is(.nwl-sheet__x, .ng-wr-dlg__x, .ng-studio-sheet__bar > .ng-iconbtn, .ng-serp-festsheet__close, #modal .na-nx-dlg__x, body.page-template-bhotu #bhotu-keys-close) :is(.ng-ico, svg) { width: 16px; height: 16px; }

  /* the "Create post" composer: wider and taller; the popup's corners (the publisher's own radius is
     "[Final check]" in "[Soft surfaces]") */
  /* [Feed width] exactly the home's feed column (--ng-feed-w), wherever it opens (was 660px) */
  #modal.ng-mcompose .modal-dialog { max-width: min(var(--ng-feed-w, 580px), calc(100vw - 48px)); }
  [id="publisher-wapper"] > .ng-pub { width: min(var(--ng-feed-w, 580px), calc(100vw - 48px)); border-radius: var(--ng-r-pop) !important; }
  [id^="publisher-wapper"] > .ng-pub .publisher-message:not(.colored) { min-height: 188px; }
  [id^="publisher-wapper"] > .ng-pub .publisher-message:not(.colored) .ql-editor { min-height: 168px; font-size: 17px; }

  /* the composer's feelings / activity picker (Sngine's #feelings-menu, #feelings-types dropdowns) opens in the
     dialog's flow instead of hanging below it: a compact 2-across list of 40px rows that scrolls after 5 rows */
  [id^="publisher-wapper"] > .ng-pub :is(#feelings-menu, #feelings-types).dropdown-menu {
    position: static !important; inset: auto !important; float: none; width: 100%; max-height: 216px; margin: 8px 0 0; padding: 4px;
    overflow-y: auto; overscroll-behavior: contain; transform: none !important; border: 0; border-radius: 12px; background: var(--ng-fill); box-shadow: none;
  }
  [id^="publisher-wapper"] > .ng-pub :is(#feelings-menu, #feelings-types) .feelings-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; }
  [id^="publisher-wapper"] > .ng-pub :is(#feelings-menu, #feelings-types) .feeling-item { min-height: 40px; padding: 0 10px; cursor: pointer; }
  [id^="publisher-wapper"] > .ng-pub :is(#feelings-menu, #feelings-types) .feeling-item:hover { background: var(--ng-card); }
  [id^="publisher-wapper"] > .ng-pub :is(#feelings-menu, #feelings-types) .feeling-item .icon .twa { width: 20px; height: 20px; background-size: 20px 20px; }

  /* Sngine's emoji / sticker popover (#emoji-menu): the theme's card, an 8-across grid of 36px emojis, 4-across
     stickers, and its tabs as one segmented row */
  body .emoji-menu, body.night-mode .emoji-menu {
    width: 320px; min-width: 0; padding: 8px; border: 0; border-radius: 16px; background: var(--ng-card); box-shadow: var(--ng-pop-shadow);
  }
  body .emoji-menu::before, body .emoji-menu::after { display: none !important; }
  body .emoji-menu .tab-pane .js_scroller { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; gap: 2px; }
  body .emoji-menu .tab-pane[id^="tab-stickers"] .js_scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  body .emoji-menu .item { float: none; display: grid; place-items: center; height: 36px; margin: 0; padding: 0; border-radius: 9px; }
  body .emoji-menu .item[js-hidden][style*="none"] { display: none; }
  body .emoji-menu .item .twa { width: 24px; height: 24px; margin: 0; background-size: 24px 24px; }
  body .emoji-menu .tab-pane[id^="tab-stickers"] .item { height: 68px; }
  body .emoji-menu .item > img { width: 60px; height: 60px; object-fit: contain; }
  body .emoji-menu .item:hover, body.night-mode .emoji-menu .item:hover { background: var(--ng-fill); }
  body .emoji-menu .nav-tabs, body.night-mode .emoji-menu .nav-tabs { display: flex; gap: var(--ng-seg-gap); margin: 8px 0 0; padding: var(--ng-seg-pad); border: 0; border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); /* [Segments: one style] */ }
  body .emoji-menu .nav-tabs > li { flex: 1 1 0; }
  body .emoji-menu .nav-tabs > li > .nav-link, body.night-mode .emoji-menu .nav-tabs > li > .nav-link {
    display: flex; align-items: center; justify-content: center; height: var(--ng-seg-h); margin: 0; padding: 0 10px; border: 0; border-radius: var(--ng-seg-r); color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; /* [Segments: one style] */
  }
  body .emoji-menu .nav-tabs > li > .nav-link .fa { font-size: 13px; }
  body .emoji-menu .nav-tabs > li > .nav-link:hover { color: var(--ng-seg-hover-ink); background: var(--ng-seg-hover-bg); /* [Segments: one style] */ }
  body .emoji-menu .nav-tabs > li > .nav-link.active, body .emoji-menu .nav-tabs > li > .nav-link.active:hover,
  body.night-mode .emoji-menu .nav-tabs > li > .nav-link.active { margin: 0; border: 0; background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); /* [Segments: one style] */ }
  /* Sngine's chat colour menu (#chat-colors-menu): the same card, five 32px swatches across */
  body .chat-colors-menu, body.night-mode .chat-colors-menu {
    width: auto; padding: 8px; border: 0; border-radius: 16px; background: var(--ng-card); box-shadow: var(--ng-pop-shadow);
  }
  body .chat-colors-menu .js_scroller { display: grid !important; grid-template-columns: repeat(5, 32px); gap: 4px; height: auto !important; }
  body .chat-colors-menu .slimScrollDiv { height: auto !important; }
  body .chat-colors-menu .item { float: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 9px; }
  body .chat-colors-menu .item .fa { font-size: 20px; }
  body .chat-colors-menu .item:hover, body.night-mode .chat-colors-menu .item:hover { background: var(--ng-fill); }
  /* the GIF popover (pickers.css): the same card and shadow */
  .ng-pk.is-pop .ng-pk__panel { border: 0; border-radius: 16px; box-shadow: var(--ng-pop-shadow); }
  .ng-pk.is-pop .ng-pk__find { height: 38px; font-size: 14px; }
  .ng-pk.is-pop .ng-pk__find input { font-size: 14px; }
}
/* ---- [Desktop popups] (end) ---- */

/* ---- [Sheet heights] (begin) — (user, 2026-10-18) phones and tablets (under 1024px): every bottom sheet opens at
   least half the screen tall (--ng-sheet-min, 50dvh) even with two items, grows with what is in it up to 95%
   (--ng-sheet-max, 95dvh) and then scrolls inside; the handle and head stay put, the content starts at the top.
   One rule for every sheet, wherever its own look lives: Bootstrap / Sngine popups (#modal and the rest: share,
   who reacted, report, confirm…), the header's notifications / messages / You sheets and the bottom bar's create
   menu, the ☰ menu, the comments sheet (niguro.css), the chat sheets (chat.css .ng-bs), the GIF and photo preview
   sheets (pickers.css), the photo viewer's and the reels' comments, forums menus, Customize home, the search /
   shopping pane, maps' Layers and categories, the live-news update sheet, the festival (serp.css) and Studio
   dialogs, the writer's side panel and dialogs, Bhotu's sheets. Sheets that sit above the keyboard also stop short
   of it (--ng-vh, niguro.js). Kept as they are: the composer (60–95%, "[Niguro composer]"), the chat / comment
   emoji dock (a keyboard's height, so the message box above it stays in view) and the maps place panel (a peek
   over the map with drag stops). !important: the sheets' own heights are in page stylesheets loaded after this. ---- */
:root { --ng-sheet-min: 50vh; --ng-sheet-max: 95vh; }
@supports (height: 1dvh) { :root { --ng-sheet-min: 50dvh; --ng-sheet-max: 95dvh; } }
/* [Messages v2] the same rule as ratios, for a sheet that rises inside a box instead of the screen (the chat boxes'
   "+" panel, chat.css): at least --ng-sheet-min-r of the box's height, at most --ng-sheet-max-r */
:root { --ng-sheet-min-r: .5; --ng-sheet-max-r: .95; }
@media (max-width: 1023.98px) {
  /* sheets that scroll themselves */
  .modal .modal-content,
  .ng-pillnav__create .dropdown-menu.ng-sheet,
  .ng-top__actions .dropdown-menu.ng-sheet,
  .ng-forums .dropdown-menu.ng-fsheet,
  .ng-hcz__panel,
  .ng-pane.is-open,
  .ngm-layers, .ngm-cats,
  .nwl-sheet__panel,
  .ng-serp-festsheet, .ng-studio-sheet,
  .ng-wr__side,
  body.page-template-bhotu .nab-pop,
  html body.page-template-bhotu #bhotu-keys-modal .bhotu-modal-card {
    height: auto !important; min-height: var(--ng-sheet-min) !important; max-height: var(--ng-sheet-max) !important;
  }
  /* the ☰ menu: from the bottom, as tall as it needs up to 95% (was pinned 72px under the top) */
  .ng-fmenu { top: auto !important; min-height: var(--ng-sheet-min); max-height: var(--ng-sheet-max); }
  /* sheets with a head, a scrolling body and a foot (comments, chat, GIFs, photos): as tall as their content within
     the same range, and above the keyboard while it is open */
  .ng-csheet__panel,
  .ng-bs__panel, .ng-nm .ng-bs__panel,
  .ng-pv__panel,
  .ng-pk.is-sheet .ng-pk__panel,
  .ng-lb.is-sheet .lightbox-data,
  .ng-reels .reel-comments-wrapper.ng-reel__comments,
  .ng-reels .reel-container.comments-shown .reel-comments-wrapper.ng-reel__comments {
    height: auto !important;
    min-height: min(var(--ng-sheet-min), calc(var(--ng-vh, 100dvh) - var(--ng-kb, 0px) - 24px)) !important;
    max-height: min(var(--ng-sheet-max), calc(var(--ng-vh, 100dvh) - 24px)) !important;
  }
  /* a chat sheet lifted above the emoji dock keeps to the room left above it */
  html.ng-pk-dock--sheet .ng-bs.is-open .ng-bs__panel {
    min-height: 0 !important; max-height: min(var(--ng-sheet-max), calc(var(--ng-vh, 100dvh) - var(--ng-pk-h, 0px) - 24px)) !important;
  }
}
/* phones only: Bhotu's popups and the writer's dialogs are sheets under 640px / 768px (centred cards above) */
@media (max-width: 640px) {
  body.page-template-bhotu .bhotu-modal-card { height: auto !important; min-height: var(--ng-sheet-min) !important; max-height: var(--ng-sheet-max) !important; }
}
@media (max-width: 767.98px) {
  .ng-wr-dlg__panel, body:not(.tox-force-desktop) .tox.tox-silver-sink .tox-dialog {
    height: auto !important; min-height: var(--ng-sheet-min) !important; max-height: var(--ng-sheet-max) !important;
  }
}
/* ---- [Sheet heights] (end) ---- */


/* ---- [load more] (owner, 2026-10-18): every list's "See More" / "Load more" is one button, at most 420px wide
   and centred: Sngine's .see-more loaders under lists (pages, groups, events, people, market, blogs, forums…) and
   the search results' .ng-serp-more, which takes the people list's look (card fill, 10px radius, 38px).
   Buttons that are a card's foot (.ng-lcard), comments' "View more" and the feed's infinite loader keep theirs. ---- */
.see-more.ng-dmore:not(.ng-lcard .see-more),
.alert-info.see-more.js_see-more,
.ng-serp .ng-serp-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 420px; min-width: 0; min-height: 38px; height: auto; margin-left: auto !important; margin-right: auto !important; padding: 0 16px;
  border: 0; border-radius: 10px; background: var(--ng-card); box-shadow: none; color: var(--ng-ink-strong);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.see-more.ng-dmore:not(.ng-lcard .see-more):hover, .alert-info.see-more.js_see-more:hover, .ng-serp .ng-serp-more:hover { background: var(--ng-fill); color: var(--ng-ink-strong); text-decoration: none; }
.ng-serp .ng-serp-none--card .ng-serp-more { background: var(--ng-fill); }
.ng-serp .ng-serp-morewrap { display: block; }
/* ---- [load more] (end) ---- */

/* ---- [List end] (owner, 2026-10-19): where a list runs out (Sngine's "There is no more data to show"), niguro.js
   turns the see-more into the theme's end state: Bhotu with his tea, "You're all caught up" and a muted line,
   centred in the load-more width (420px). No fill, no button look; the same gaps as .ng-empty. ---- */
.js_see-more.ng-end {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; max-width: 420px; min-width: 0; min-height: 0; height: auto;
  margin: 8px auto 16px !important; padding: 16px 16px 20px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--ng-sub); text-align: center; cursor: default;
}
.js_see-more.ng-end:hover { background: none; }
.js_see-more.ng-end .ng-end__bhotu { display: block; width: 80px; height: 80px; margin: 0 0 8px; object-fit: contain; }
.js_see-more.ng-end .ng-end__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong); }
.js_see-more.ng-end .ng-end__sub { display: block; font-size: 13px; line-height: 1.4; color: var(--ng-sub); }
@media (max-width: 767px) { .js_see-more.ng-end .ng-end__bhotu { width: 72px; height: 72px; } }
/* ---- [List end] (end) ---- */


/* ---- [Scroll arrows] (owner, 2026-10-18): ONE look for the prev / next of every sideways scroller (niguro.js
   "[Scroll arrows]": a scroller is [data-ng-scroll], a feed strip's [data-ng-strip-track], .ng-ptabs__list,
   .ng-chiprow or .ng-ent__tabs; its buttons are the
   strip's own .ng-strip__nav or two the script adds). Round 40px buttons over the scroller's edges, vertically
   centred on it (--ng-sa-y / -x0 / -x1, measured by the script); hidden until the script marks one .is-on, which
   it does only while the pointer is over the scroller and only towards a side with more. They fade and grow in
   (opacity and transform only); only on a mouse that hovers, so touch screens never show them. The side with an
   arrow fades its edge softly (a mask on the scroller, --ng-sa-fl / -fr). Pages size or nudge them with their own
   .ng-strip__nav rules (football.css, media.css, games.css, directories.css…). ---- */
.ng-sa-host { position: relative; }
.ng-strip__nav {
  position: absolute; z-index: 3; top: var(--ng-sa-y, 50%); width: 40px; height: 40px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--ng-card); color: var(--ng-ink-strong); box-shadow: 0 2px 10px hsl(220 30% 10% / .18); cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) scale(.9);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ng-strip__nav .ng-ico { width: 20px; height: 20px; }
.ng-strip__nav--prev { left: calc(var(--ng-sa-x0, 0px) + 10px); }
.ng-strip__nav--next { right: calc(var(--ng-sa-x1, 0px) + 10px); }
.ng-strip__nav:hover { background: var(--ng-fill); }
.ng-strip__nav:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
body.night-mode .ng-strip__nav { background: var(--ng-fill-2); box-shadow: 0 2px 10px hsl(0 0% 0% / .4); }
body.night-mode .ng-strip__nav:hover { background: var(--ng-fill); }
/* the buttons the script adds sit in the scroller's own box, whose "> *" rules must not pull them into the flow;
   a little smaller over chip and tab rows (under 52px tall) */
.ng-strip__nav.ng-sa-btn { position: absolute; z-index: 3; flex: none; }
.ng-sa-btn.is-sm { width: 32px; height: 32px; }
.ng-sa-btn.is-sm .ng-ico { width: 18px; height: 18px; }
@property --ng-sa-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ng-sa-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (hover: hover) and (pointer: fine) {
  .ng-strip__nav.is-on {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  /* the soft edge: only on a scroller that has been hovered (.ng-sa--warm), so the others take no mask */
  .ng-sa { transition: --ng-sa-fl .2s ease, --ng-sa-fr .2s ease; }
  .ng-sa.ng-sa--warm {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ng-sa-fl), #000 calc(100% - var(--ng-sa-fr)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--ng-sa-fl), #000 calc(100% - var(--ng-sa-fr)), transparent 100%);
  }
  .ng-sa.ng-sa--l { --ng-sa-fl: 48px; }
  .ng-sa.ng-sa--r { --ng-sa-fr: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-strip__nav, .ng-strip__nav.is-on, .ng-sa { transition: none; }
}
/* the inset: a row inside a card (data-ng-scroll="inset") runs to the card's edges, and its first item starts
   (and its last ends) at the card's inner padding, --ng-pg (16px unless the card sets its own), so the first
   item lines up with the card's title; scroll-padding keeps that gap when the row snaps. The feed strips'
   .ng-strip__track does the same inside their wraps. A full-bleed row keeps its page gutter (no inset). */
[data-ng-scroll~="inset"] {
  margin-inline: calc(var(--ng-pg, 16px) * -1); padding-inline: var(--ng-pg, 16px); scroll-padding-inline: var(--ng-pg, 16px);
}
/* ---- [Scroll arrows] (end) ---- */

/* [link preview hint] (owner, 2026-10-18): the composer asks for a secure link instead of previewing http:// or www. */
.ng-scrape-hint { margin: 8px 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--ng-fill); color: var(--ng-sub); font-size: 13px; line-height: 1.4; }

/* ---- [Tables] (owner, 2026-10-18): ONE look for the tables in rich text (news and live updates .nwa-content, blogs
   .ng-blog__prose, forum posts .ng-fpost__text). niguro.js "[Tables]" wraps each table in a .ng-table scroller
   (data-ng-scroll: the shared [Scroll arrows] on desktop; a swipe on touch) and marks its cells: .ng-td--num
   (figures) and .ng-td--short stay on one line, .ng-td--long keeps a sensible width. The table lays out by its
   content (auto layout, at least the column's width) and scrolls sideways inside the wrapper when wider, never
   squashing its columns or breaking words. A full grid: 1px --ng-line between every column and row, the closed
   outer border on the wrapper with its 18px corners (the corner cells round with it: separate borders, no
   spacing), the header row filled, 12px cells. Day and night through the tokens. ---- */
.ng-table {
  position: relative; max-width: 100%; margin: 1.2em 0; overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r, 18px); background: var(--ng-card);
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.ng-table:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-table > table {
  width: auto; min-width: 100%; margin: 0; table-layout: auto; border: 0; border-collapse: separate; border-spacing: 0;
  background: none; font-size: .88em; line-height: 1.5; color: var(--ng-ink);
}
.ng-table > table > caption { caption-side: top; padding: 10px 12px; border-bottom: 1px solid var(--ng-line); color: var(--ng-sub); font-size: .92em; text-align: start; }
.ng-table :is(th, td) {
  width: auto; height: auto; padding: 12px; border: 0; border-right: 1px solid var(--ng-line); border-bottom: 1px solid var(--ng-line);
  background: none; color: inherit; text-align: start; vertical-align: top;
  white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.ng-table tr > :last-child { border-right: 0; }
.ng-table > table > :last-child > tr:last-child > *, .ng-table > table > tr:last-child > * { border-bottom: 0; }
/* the header row (a thead, or a first row of th) and row headers */
.ng-table thead :is(th, td), .ng-table > table > tbody:first-child > tr:first-child > th,
.ng-table > table > caption + tbody > tr:first-child > th { background: var(--ng-fill); color: var(--ng-ink-strong); font-weight: 700; }
.ng-table tbody th { font-weight: 700; color: var(--ng-ink-strong); }
/* the corner cells follow the wrapper's corners */
.ng-table > table > :first-child > tr:first-child > :first-child { border-top-left-radius: calc(var(--ng-r, 18px) - 1px); }
.ng-table > table > :first-child > tr:first-child > :last-child { border-top-right-radius: calc(var(--ng-r, 18px) - 1px); }
.ng-table > table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--ng-r, 18px) - 1px); }
.ng-table > table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--ng-r, 18px) - 1px); }
/* the cells' content: paragraphs and lists on the cell's rhythm */
.ng-table :is(th, td) > :is(p, ul, ol):first-child { margin-top: 0; }
.ng-table :is(th, td) > :is(p, ul, ol):last-child { margin-bottom: 0; }
.ng-table :is(th, td) p { margin: 0 0 .5em; }
.ng-table :is(th, td) img { max-width: none; border-radius: 6px; }
.ng-table .ng-td--num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ng-table .ng-td--short { white-space: nowrap; }
.ng-table .ng-td--long { min-width: min(20em, 72vw); }
/* ---- [Tables] (end) ---- */

/* ---- [User popover] (owner, 2026-10-18): Sngine's hover card of a user or a page (ajax.popover.tpl in this theme;
   user.js puts it in a fixed .user-popover-wrapper under the name from 751px) as a theme card, 300px: a cover strip,
   the picture over it, the name with the verified badge, @username, a short bio, a stats line and the actions in the
   page-button look (.ng-pbtn): the next step in the accent (Follow, Like, Confirm), Add Friend tinted, what is done
   (Following, Sent, Friends) and Message plain. The look follows the JS hooks, so it stays right after user.js swaps
   them. The popup's radius and shadow (--ng-r-pop, --ng-pop-shadow); day and night through the tokens. ---- */
.user-popover-wrapper { z-index: 99999; width: 300px; min-height: 0; }
.user-popover-wrapper > .user-popover-content {
  position: absolute; top: 6px; left: 0; z-index: 999999; width: 300px; padding: 0; overflow: hidden;
  border-radius: var(--ng-r-pop, 22px); background: var(--ng-card); color: var(--ng-ink); box-shadow: var(--ng-pop-shadow, var(--ng-shadow-lg));
}
.user-popover-wrapper > .user-popover-content:not(.ng-upop) { min-height: 72px; padding: 26px 0 !important; }
.ng-upop .ng-upop__head { position: relative; }
.ng-upop .ng-upop__cover { width: 100%; height: 84px; border-radius: 0; background-color: var(--ng-tile); background-size: cover; background-position: center; }
.ng-upop .ng-upop__ava {
  position: absolute; left: 16px; bottom: -32px; display: block; padding: 0; border-radius: 50%; background: var(--ng-card);
  box-shadow: 0 0 0 3px var(--ng-card);
}
.ng-upop .ng-upop__ava img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.ng-upop .ng-upop__info { position: static; padding: 40px 16px 0; color: var(--ng-ink); }
.ng-upop .ng-upop__info a { color: inherit; text-shadow: none; }
.ng-upop .ng-upop__name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ng-upop .ng-upop__name a.name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong); }
.ng-upop .ng-upop__name a.name:hover { text-decoration: underline; }
.ng-upop .ng-upop__name .verified-badge { display: inline-flex; flex: none; line-height: 0; }
.ng-upop .ng-upop__name .verified-badge .svg-container, .ng-upop .ng-upop__name .verified-badge svg { display: block; width: 15px; height: 15px; }
.ng-upop .ng-upop__user { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ng-sub); }
.ng-upop .ng-upop__bio {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ng-ink); overflow-wrap: anywhere;
}
.ng-upop .ng-upop__stats {
  display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ng-sub); text-shadow: none;
}
.ng-upop .ng-upop__stats b { font-weight: 700; color: var(--ng-ink-strong); }
.ng-upop .ng-upop__stats a, .ng-upop .ng-upop__stats .text-underline { color: var(--ng-sub); text-decoration: none; cursor: pointer; }
.ng-upop .ng-upop__stats a:hover, .ng-upop .ng-upop__stats .text-underline:hover { color: var(--ng-ink); text-decoration: underline; }
.ng-upop .ng-upop__acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; border-radius: 0; text-align: start; }
.ng-upop .ng-upop__acts .btn {
  display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 0; margin: 0; padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--ng-fill); color: var(--ng-ink-strong); box-shadow: none;
  font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.ng-upop .ng-upop__acts .btn:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-upop .ng-upop__acts .btn:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-upop .ng-upop__acts .btn i { margin: 0 !important; font-size: 12px; }
.ng-upop .ng-upop__acts :is(.js_follow, .js_like-page, .js_friend-accept) { background: var(--ng-brand); color: #fff; }
.ng-upop .ng-upop__acts :is(.js_follow, .js_like-page, .js_friend-accept):hover { background: var(--ng-brand); color: #fff; filter: brightness(1.06); }
.ng-upop .ng-upop__acts .js_friend-add { background: var(--ng-tile); color: var(--ng-brand); }
.ng-upop .ng-upop__acts .js_friend-add:hover { background: hsl(var(--primary) / .16); color: var(--ng-brand); }
.ng-upop .ng-upop__acts .ng-upop__msg { flex: none; width: 36px; padding: 0; }
.ng-upop .ng-upop__acts .ng-upop__msg .svg-container, .ng-upop .ng-upop__acts .ng-upop__msg svg { display: block; width: 18px; height: 18px; }
.ng-upop .ng-upop__acts .ng-upop__msg:has(small) { width: auto; padding: 0 12px; }
/* ---- [User popover] (end) ---- */

/* ---- [Story popup] (begin) — (owner, 2026-10-19) Sngine 4.4's "Add story" popup (ajax.story.publisher.tpl in this
   theme), structured after Sngine v5's create-story chooser. Step 1 (form[data-step="choose"]): one large option card
   per kind of story 4.4 can make (only "Photo or video": 4.4 has no text stories), an 18px rounded row of a 48px
   gradient icon tile, title, subtitle and chevron, on the popup's fill. Step 2 ("make"): a filled upload area (photos,
   and videos when allowed) that becomes a grid of 3:4 previews with 12px corners as files arrive (Sngine's own
   .attachments lists: the ul is display: contents so the add tile and the previews share one grid), the caption, the
   admin's "Ads story" row and Back / Publish (the shared 36px footer). A normal-width popup on desktop (niguro.js
   tags it .ng-cmodal, the wide two-column create forms, so it is narrowed here like the reshare popup); a bottom sheet
   on phones ("[Sheet heights]"). Header, close, fields, buttons and motion come from "[Desktop popups]". ---- */
@media (min-width: 1024px) {
  #modal.ng-cmodal:has(form.ng-story-pub) .modal-dialog { max-width: 480px; }
  #modal.ng-cmodal .ng-story-pub .modal-body { columns: auto; }
}
.ng-story-pub[data-step="choose"] .ng-story-pub__make,
.ng-story-pub[data-step="choose"] > .modal-footer,
.ng-story-pub[data-step="make"] .ng-story-pub__choose { display: none !important; }
/* step 1: the option cards */
.ng-story-pub__choose { display: flex; flex-direction: column; gap: 12px; }
.ng-story-pub__opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 0; padding: 14px 16px; border: 0; border-radius: 18px;
  background: var(--ng-fill); color: var(--ng-ink-strong); text-align: start; cursor: pointer; transition: background-color .15s ease;
}
.ng-story-pub__opt:hover { background: var(--ng-fill-2); }
.ng-story-pub__opt:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-story-pub__tile {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(150 80% 28%) 100%); box-shadow: 0 4px 12px hsl(var(--primary) / .28);
}
.ng-story-pub__tile .ng-ico { width: 22px; height: 22px; }
.ng-story-pub__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-story-pub__txt b { font-size: 15px; font-weight: 700; line-height: 20px; color: var(--ng-ink-strong); }
.ng-story-pub__txt small { font-size: 13px; line-height: 18px; color: var(--ng-sub); }
.ng-story-pub__chev { flex: none; display: grid; color: var(--ng-sub); }
.ng-story-pub__chev .ng-ico { width: 18px; height: 18px; }
.ng-story-pub__note { margin: 0; font-size: 12.5px; line-height: 18px; text-align: center; color: var(--ng-sub); }
/* step 2: the upload area and the previews: the photo and video lists (Sngine's .attachments, and their ul) are
   display: contents, so every add tile and preview sits in one grid */
.ng-story-pub__drops { display: grid; grid-template-columns: repeat(var(--ng-sp-n, 1), minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.ng-story-pub__drops:has(> .ng-story-pub__drop + .ng-story-pub__drop) { --ng-sp-n: 2; }
.ng-story-pub .ng-story-pub__drops:has(li.item, li.loading) { --ng-sp-n: 4; }
.ng-story-pub .attachments.ng-story-pub__drop, .ng-story-pub .ng-story-pub__drop > ul { display: contents; }
/* Sngine's .clearfix ::before / ::after would be grid cells too */
.ng-story-pub .attachments.ng-story-pub__drop::before, .ng-story-pub .attachments.ng-story-pub__drop::after { content: none; display: none; }
.ng-story-pub .ng-story-pub__drop li {
  float: none; position: relative; width: auto; height: auto; aspect-ratio: 3 / 4; margin: 0; padding: 0; overflow: hidden; list-style: none;
  border: 0; border-radius: 12px; background: var(--ng-fill);
}
.ng-story-pub .ng-story-pub__drop li.add { display: grid; place-items: center; color: var(--ng-ink-strong); font-size: 13.5px; cursor: pointer; transition: background-color .15s ease; }
.ng-story-pub .ng-story-pub__drop li.add:hover { background: var(--ng-fill-2); }
.ng-story-pub .ng-story-pub__drop li.add:focus-within { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
/* before any file: one wide filled area per kind */
.ng-story-pub__drops:not(:has(li.item, li.loading)) .ng-story-pub__drop li.add { aspect-ratio: auto; height: 148px; border-radius: 14px; }
.ng-story-pub .ng-story-pub__drop .x-uploader { position: static; display: contents; }
.ng-story-pub__add { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; text-align: center; }
.ng-story-pub__add b { font-size: 13.5px; font-weight: 600; line-height: 18px; }
.ng-story-pub__addico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ng-card); color: var(--ng-brand); }
.ng-story-pub__addico .ng-ico { width: 20px; height: 20px; }
/* with files: the add tiles are grid cells too, their icon only */
.ng-story-pub__drops:has(li.item, li.loading) .ng-story-pub__add b { display: none; }
.ng-story-pub__drops:has(li.item, li.loading) .ng-story-pub__addico { width: 36px; height: 36px; }
.ng-story-pub .ng-story-pub__drop li.item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ng-story-pub .ng-story-pub__drop li.item .name {
  display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 10px; background: var(--ng-fill);
  color: var(--ng-sub); font-size: 11.5px; line-height: 1.35; word-break: break-all;
}
.ng-story-pub .ng-story-pub__drop li.item .btn-close {
  position: absolute; top: 6px; right: 6px; z-index: 1; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: rgb(0 0 0 / .55); color: #fff; opacity: 1; filter: none; text-shadow: none; box-shadow: none;
}
.ng-story-pub .ng-story-pub__drop li.item .btn-close::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--bs-btn-close-bg) center / 9px 9px no-repeat; mask: var(--bs-btn-close-bg) center / 9px 9px no-repeat;
}
.ng-story-pub .ng-story-pub__drop li.item .btn-close:hover { background-color: rgb(0 0 0 / .75); }
.ng-story-pub .ng-story-pub__drop li.loading { padding: 0 12px; border: 0; }
.ng-story-pub .ng-story-pub__drop li.loading .progress { position: relative; top: 50%; height: 6px; margin: -3px 0 0; border-radius: 999px; background: var(--ng-card); }
/* the admin's "Ads story" switch: one filled row */
.ng-story-pub .form-table-row.ng-story-pub__ads { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--ng-fill); }
.ng-story-pub__ads .ng-ctile { background: var(--ng-card); }
.ng-story-pub__ads > div:not(.text-end) { flex: 1 1 auto; min-width: 0; }
.ng-story-pub__ads .form-label { margin: 0 !important; font-size: 14px !important; font-weight: 600; color: var(--ng-ink-strong) !important; }
.ng-story-pub__ads .form-text { margin-top: 2px !important; }
.ng-story-pub .ng-story-pub__make > .alert:not(.x-hidden) { margin: 0 0 4px; }
/* ---- [Story popup] (end) ---- */

/* ---- [Skeletons] (begin) — (user, 2026-10-19) the theme's one skeleton kit: placeholders in the shape of the real
   components while their content loads (instead of Sngine's spinner or blank space). Shapes: __ng_skeleton.tpl
   (server side, and <template id="ng-sk-kit"> for niguro.js NgSk). The cards reuse the real components' layout
   classes, so sizes, gaps and breakpoints are the real ones; inside them .ng-sk blocks stand for text and pictures.
   - .ng-sk: a muted block (--ng-sk-fill, day and night); --line: one line of text (its height is the parent's line
     box, 1lh, so a text line keeps its exact height), --bar: a bar with no line box, --circle, --btn, --pill,
     widths --w25…--w90;
   - .ng-sk-item: each placeholder card; its ::after is the ONE shimmer of the card: a gradient moved by transform
     only (composited, no paint), paused unless niguro.js sees the card on screen (.is-live); with reduced motion
     there is no shimmer, only the still fill. No :has(), no layout-dependent animation. ---- */
:root { --ng-sk-fill: hsl(var(--muted)); --ng-sk-shine: hsl(0 0% 100% / .6); --ng-sk-speed: 1.6s; }
body.night-mode { --ng-sk-fill: hsl(var(--muted)); --ng-sk-shine: hsl(0 0% 100% / .045); }
.ng-sk { display: block; flex: none; background: var(--ng-sk-fill); border-radius: 6px; }
.ng-sk--line { width: 100%; height: .7em; margin-block: .4em; margin-block: calc((1lh - .7em) / 2); border-radius: 999px; }
.ng-sk--bar { width: 100%; height: 12px; border-radius: 999px; }
.ng-sk--sm { height: 10px; }
.ng-sk--circle { width: 40px; height: 40px; border-radius: 50%; }
.ng-sk--ava { width: var(--sk-ava, 48px); height: var(--sk-ava, 48px); }
.ng-sk--btn { width: 100%; height: 38px; border-radius: 10px; }
.ng-sk--pill { border-radius: 999px; }
.ng-sk--w25 { width: 25%; } .ng-sk--w40 { width: 40%; } .ng-sk--w60 { width: 60%; } .ng-sk--w75 { width: 75%; } .ng-sk--w90 { width: 90%; }
.ng-sk-item { position: relative; overflow: hidden; pointer-events: none; user-select: none; }
/* consecutive lines stack in a flex column, so their line-box margins add up instead of collapsing */
.ng-sk-post__text, .ng-sk-serp, .ng-sk-item .nw-row__title { display: flex; flex-direction: column; }
.ng-sk-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, var(--ng-sk-shine) 50%, transparent 75%);
  transform: translateX(-100%); animation: ng-sk-sweep var(--ng-sk-speed) ease-in-out infinite paused;
}
.ng-sk-item.is-live::after { animation-play-state: running; will-change: transform; }
@keyframes ng-sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ng-sk-item::after { display: none; } }
/* the real components' pictures and avatars, empty: the skeleton fill (no default cover art) */
.ng-sk-item .ng-scard__media, .ng-sk-item .ng-pcard__photo, .ng-sk-item .ng-dcard__ava, .ng-sk-item .ngw-thumb,
.ng-sk-item .ngw-card__ava, .ng-sk-item .nw-row__media { background: var(--ng-sk-fill); background-image: none; }
.ng-sk-item .ngw-card__ava { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; }
.ng-sk-item .ng-scard__media { display: block; }
.ng-sk-item .ng-nrow__ava { --sk-ava: 52px; }
/* a busy see-more: Sngine's spinner and the pill give way to the skeleton above it (its place is kept) */
.js_see-more.ng-sk-busy { visibility: hidden; }
/* nothing more came: the placeholders fade out where they are, the end marker glides up into their place (niguro.js) */
.ng-sk-item.ng-sk-fade { opacity: 0; transition: opacity .2s ease; }
.ng-sk-item.ng-sk-fade::after { display: none; }
.js_see-more.ng-sk-lift { position: relative; z-index: 1; transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .ng-sk-item.ng-sk-fade, .js_see-more.ng-sk-lift { transition: none; } }

/* post card (.post, .post-header, .post-text, .ng-pbar): 56 head + 10 + 3 lines of 15px/1.55 + 12 + 16:9 + 47 bar */
.ng-sk-post { --ng-pg: 16px; margin-bottom: 12px; border-radius: var(--ng-r); background: var(--ng-card); box-shadow: var(--ng-card-shadow, none); list-style: none; }
@media (min-width: 768px) { .ng-sk-post { --ng-pg: 20px; margin-bottom: 16px; } }
.ng-sk-post__head { display: flex; align-items: center; gap: 10px; padding: 14px var(--ng-pg) 0; }
.ng-sk-post__meta { display: flex; flex-direction: column; justify-content: center; gap: 9px; flex: 1; min-width: 0; height: 42px; }
.ng-sk-post__text { margin: 10px 0 0; padding: 0 var(--ng-pg); font-size: 15px; line-height: 1.55; }
.ng-sk-post__media { margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 0; }
.ng-sk-post__bar { display: flex; align-items: center; gap: 2px; height: 47px; padding: 4px calc(var(--ng-pg) - 8px) 6px; border-top: 1px solid var(--ng-line); }
.ng-sk-post__bar .ng-sk { width: 24px; height: 20px; margin: 0 8px; border-radius: 999px; }
.ng-sk-post__bar .ng-sk-post__end { margin-left: auto; }
.ng-sk-post:only-child, .js_posts_loader > .ng-sk-post:last-child { margin-bottom: 0; }

/* comment row (.comment: 12 + the 48px bubble + 3 + the 18px actions; avatar 32, text 40px in; [Comment type] sizes) */
.ng-sk-cmt { display: flex; gap: 8px; padding-top: 12px; list-style: none; }
.ng-sk-cmt > .ng-sk--circle { width: 32px; height: 32px; }
.ng-sk-cmt__body { flex: 1; min-width: 0; }
.ng-sk-cmt__bubble { width: min(60%, 280px); height: 48px; border-radius: 16px; }
.ng-sk-cmt__acts { display: flex; align-items: center; gap: 12px; height: 18px; margin-top: 3px; padding-left: 12px; }
.ng-sk-cmt__acts .ng-sk { width: 32px; }

/* people / list row (.data-container: avatar --sk-ava, read from the list's own rows by niguro.js) */
.ng-sk-row { list-style: none; }
.ng-sk-row .data-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1; min-width: 0; }
.ng-sk-row .data-container { display: flex; align-items: center; gap: 12px; }

/* football fixture (.ng-fbfx) */
.ng-sk-item.ng-fbfx .ng-sk-fx__crest { width: 22px; height: 22px; }
.ng-sk-item.ng-fbfx em { flex: 1; min-width: 0; }

/* generic section card (popups, the lightbox panel) */
.ng-sk-sec { display: flex; flex-direction: column; gap: 0; padding: 16px; font-size: 15px; line-height: 1.55; }
.ng-sk-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ng-sk-sec__block { height: 120px; margin-top: 12px; border-radius: var(--ng-r-sm); }

/* a search result (the results page while a tab swaps) */
.ng-sk-serp { padding: 4px 0 22px; font-size: 14px; line-height: 1.58; }
.ng-sk-serp__site { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ng-sk-serp__site .ng-sk--circle { width: 26px; height: 26px; }
.ng-sk-serp__title { height: 16px; margin-bottom: 8px; }

/* the results page's tab swap shows the placeholders at full strength (serp.css dims the old results) */
.ng-serp.is-swapping .ng-serp__main.ng-sk-swap { opacity: 1; }
/* /watch: the next row of video cards while "load more" runs (one row: as many cards as the grid has columns) */
.ngw-loader.ng-sk-wgrid { display: grid; padding: 24px 0 0; }
.ngw-loader.ng-sk-wgrid[hidden] { display: none; }
.ng-sk-wgrid > .ng-sk-item:nth-child(n+2) { display: none; }
@media (min-width: 600px) { .ngw-loader.ng-sk-wgrid { padding-top: 32px; } .ng-sk-wgrid > .ng-sk-item:nth-child(2) { display: block; } }
@media (min-width: 1024px) { .ngw-loader.ng-sk-wgrid { padding-top: 40px; } .ng-sk-wgrid > .ng-sk-item:nth-child(3) { display: block; } }
@media (min-width: 1280px) { .ngw-loader.ng-sk-wgrid { padding-top: 44px; } .ng-sk-wgrid > .ng-sk-item:nth-child(4) { display: block; } }

/* popups: while #modal is "Opening…" (niguro.js [Soft surfaces]), a section skeleton instead of the spinner */
#modal.ng-opening .modal-body > .ng-sk-item { align-self: stretch; padding: 0; text-align: start; }
#modal.ng-opening .modal-body > .ng-sk-item ~ .loader, #modal.ng-opening .modal-body > .ng-sk-item ~ .spinner-border { display: none; }
#modal.ng-opening .modal-body > .ng-sk-item ~ .ng-opening__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ---- [Skeletons] (end) ---- */

/* ---- [Popup audit] (begin) — (owner, 2026-10-19) small targeted fixes from the audit of every popup and sheet
   (desktop 1280 / 1440 and the phone sheet at 375, day and night), where a popup still showed Sngine's default
   internals under the shared "[Desktop popups]" / "[Sheet heights]" rules. Only looks; ids, classes and JS untouched. ---- */
/* Payment (#payment): Sngine's extra 20px side padding inside the body (.plr20) put the promo field and the summary
   40px in from the edges; they line up with the title now */
:is(.modal, #modal) .modal-body #payment-summry > .plr20 { padding-left: 0 !important; padding-right: 0 !important; }
/* Payment methods: the kit takes the icons' mr5 off inside buttons (".btn > .svg-container.mr5"), so a method's icon
   sat against its name; every method button (Sngine's and the Nepal ones, __ng_npay.tpl) centres icon + name with a gap */
:is(.modal, #modal) #payment-methods .btn-payment { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* People who shared this: the empty state sat on the list's grey fill, flush to the popup's foot; plain text now */
:is(.modal, #modal) .modal-body.who-shares:has(> p.text-muted:only-child) { background: transparent; }
:is(.modal, #modal) .modal-body.who-shares > p.text-muted:only-child { margin: 4px 0; color: var(--ng-sub); }
/* AI popups (ajax.ai.post / blog / image): Sngine's black buttons (Generate, Buy Credits) in the theme's filled
   accent button */
:is(.modal, #modal) .btn-dark, body.night-mode :is(.modal, #modal) .btn-dark { border-color: transparent; background: var(--ng-brand); color: #fff; }
:is(.modal, #modal) .btn-dark:hover, :is(.modal, #modal) .btn-dark:focus-visible, body.night-mode :is(.modal, #modal) .btn-dark:hover { border-color: transparent; background: var(--ng-brand); color: #fff; filter: brightness(1.06); }
/* the photo pickers of the product, offer and review popups (form.publisher-mini .attachments li.add): Sngine's dashed
   box with a grey camera becomes the theme's filled 12px tile; previews keep the same corners */
:is(.modal, #modal) form.publisher-mini:not(.ng-story-pub) .attachments li.add {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--ng-fill); color: var(--ng-sub); font-size: 18px;
  transition: background-color .15s ease;
}
:is(.modal, #modal) form.publisher-mini:not(.ng-story-pub) .attachments li.add:hover { background: var(--ng-fill-2); color: var(--ng-ink); }
:is(.modal, #modal) form.publisher-mini:not(.ng-story-pub) .attachments li.item img { border-radius: 12px; object-fit: cover; }
body.night-mode :is(.modal, #modal) form.publisher-mini:not(.ng-story-pub) .attachments li.add { border: 0; background: var(--ng-fill); color: var(--ng-sub); }
/* Gifts (#gifts) with no gifts set up in the admin: Sngine's scroller kept its fixed 440px (an inline height), an empty white block */
:is(.modal, #modal) .modal-body .slimScrollDiv:has(> .js_scroller > .d-flex):not(:has(> .js_scroller > .d-flex > *)),
:is(.modal, #modal) .modal-body .js_scroller:has(> .d-flex):not(:has(> .d-flex > *)) { height: auto !important; min-height: 0; }
/* the people pickers in popups (Sngine's Tagify: Send Merit's Recipients, and the like): with its border removed
   theme-wide it showed nothing at all; the theme's filled field now, the chosen people as small pills */
:is(.modal, #modal) .modal-body .tagify {
  --tags-border-color: transparent; --tags-hover-border-color: transparent; --tags-focus-border-color: transparent; --tag-bg: var(--ng-card); --tag-hover: var(--ng-fill-2); --tag-text-color: var(--ng-ink-strong);
  display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: var(--ng-field-h); padding: 3px 6px; border-radius: var(--ng-r-sm); background: var(--ng-fill); color: var(--ng-ink); font-size: 14px;
}
:is(.modal, #modal) .modal-body .tagify:hover { background: var(--ng-fill-2); }
:is(.modal, #modal) .modal-body .tagify.tagify--focus { background: var(--ng-card); box-shadow: inset 0 0 0 1.5px var(--ng-line) !important; }
:is(.modal, #modal) .modal-body .tagify__input { margin: 0; padding: 4px 8px; color: var(--ng-ink); }
:is(.modal, #modal) .modal-body .tagify__input::before { color: var(--ng-sub); }
:is(.modal, #modal) .modal-body .tagify__tag { margin: 2px; }
:is(.modal, #modal) .modal-body .tagify__tag > div { border-radius: 999px; }
:is(.modal, #modal) .modal-body .tagify__tag > div::before { border-radius: 999px; }
/* Keyboard shortcuts: Sngine's .text-xlg body (19.5px) in the popups' 14px */
:is(.modal, #modal) .modal-body.text-xlg { font-size: 14px; }
:is(.modal, #modal) .modal-body.text-xlg kbd { margin-right: 6px; padding: 2px 7px; border-radius: 6px; background: var(--ng-fill-2); color: var(--ng-ink-strong); font-size: 12px; font-weight: 700; box-shadow: none; }
/* phone and tablet sheets (under 1024px): one header for every sheet, as on desktop. Before, the popups niguro.js
   tags (#modal.ng-msheet / .ng-cmodal: share, the create forms, story) had a 19px / 800 title and the others
   (report, payment, tip, error, theme, keys…) a 16px one, both with a bare ✕. Now: a 17px / 700 title with an 18px
   icon and the 32px round filled close button; Sngine's message popups (success, payment alert) get the 44px tinted
   icon disc; the money fields (tip, add funds, send money, withdraw, funding) the theme's field instead of Sngine's
   large figure. */
@media (max-width: 1023.98px) {
  :is(.modal, #modal) .modal-content > .modal-header,
  :is(.modal, #modal) .modal-content > form > .modal-header { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 10px 16px; }
  :is(.modal, #modal) .modal-header .modal-title {
    display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--ng-ink-strong);
  }
  :is(.modal, #modal) .modal-header .modal-title :is(.svg-container, .ng-reshare__ico, .ng-ico, i.fa) {
    flex: none; width: 18px !important; height: 18px !important; margin: 0 !important; font-size: 16px; line-height: 18px; color: var(--ng-brand);
  }
  :is(.modal, #modal) .modal-header .modal-title .svg-container svg, :is(.modal, #modal) .modal-header .modal-title .ng-reshare__ico .ng-ico { width: 18px !important; height: 18px !important; }
  :is(.modal, #modal) .modal-header .btn-close {
    position: relative; flex: none; box-sizing: border-box; width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%;
    background: var(--ng-fill); color: var(--ng-ink); opacity: 1; box-shadow: none; filter: none;
  }
  :is(.modal, #modal) .modal-header .btn-close::before {
    content: ""; position: absolute; inset: 0; background: currentColor;
    -webkit-mask: var(--bs-btn-close-bg) center / 10px 10px no-repeat; mask: var(--bs-btn-close-bg) center / 10px 10px no-repeat;
  }
  :is(.modal, #modal) .modal-body.text-center > .svg-container.main-icon:first-child {
    display: inline-grid !important; place-items: center; box-sizing: border-box; width: 44px !important; height: 44px !important; margin: 0 0 12px !important; padding: 13px;
    border-radius: 50%; background: var(--ng-tint);
  }
  :is(.modal, #modal) .modal-body.text-center > .svg-container.main-icon:first-child svg { width: 18px !important; height: 18px !important; }
  :is(.modal, #modal) .modal-body.text-center > :is(h4, h5) { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--ng-ink-strong); }
  :is(.modal, #modal) .modal-body.text-center > p { margin: 6px 0 0 !important; font-size: 14px; color: var(--ng-sub); }
  :is(.modal, #modal) .modal-body .input-money > span {
    top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: var(--ng-field-h); font-size: 14px; font-weight: 600; color: var(--ng-sub);
  }
  :is(.modal, #modal) .modal-body .input-money > input.form-control { height: var(--ng-field-h); padding: 0 14px 0 44px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 20px; }
  :is(.modal, #modal) .modal-body .input-money.right > input.form-control { padding: 0 44px 0 14px; }
}
/* ---- [Popup audit] (end) ---- */

/* [Composer sheet height] (owner, 2026-10-19): the composer opens at 60% of the screen on phones and tablets, not the
   sheets' shared 50% ("[Sheet heights]" sets every popup's minimum with !important; this is its one exception) */
@media (max-width: 1023.98px) {
  #modal.ng-mcompose .modal-content { min-height: 60vh !important; }
  @supports (height: 1dvh) { #modal.ng-mcompose .modal-content { min-height: 60dvh !important; } }
}

/* ---- niguro [Username check] (begin) — the live availability line under a username field (niguro-username-check.js,
   includes/ajax/niguro/username-check.php): sign up, Settings › Account, the page and group create / settings forms.
   One 13px line 6px under the field: a 14px spinner while checking, then a check in the accent green (--ng-verified)
   or a cross in --ng-red with the reason; a taken name adds up to 3 free ones as the theme's chips (.ng-chip), on
   their own row. Day and night come from the tokens; on phones the chips wrap. ---- */
.ng-uchk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ng-sub); }
.ng-uchk[hidden] { display: none; }
.ng-uchk__ico { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; }
.ng-uchk__ico:empty { display: none; }
.ng-uchk__ico svg { width: 16px; height: 16px; }
.ng-uchk__msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ng-uchk__chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.ng-uchk__chips:empty { display: none; }
.ng-uchk__chip { border: 0; cursor: pointer; color: var(--ng-brand); font-family: inherit; }
.ng-uchk__chip:hover, .ng-uchk__chip:focus-visible { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-uchk[data-state="ok"] { color: var(--ng-verified); font-weight: 500; }
.ng-uchk[data-state="bad"] { color: var(--ng-red); }
.ng-uchk[data-state="busy"] .ng-uchk__ico { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ng-line); border-top-color: var(--ng-brand); border-radius: 50%; animation: ng-uchk-spin .7s linear infinite; }
@keyframes ng-uchk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ng-uchk[data-state="busy"] .ng-uchk__ico { animation-duration: 2s; } }
.form-control[aria-invalid="true"]:focus { border-color: var(--ng-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-red) 18%, transparent); }
/* ---- niguro [Username check] (end) ---- */

/* [Comment menu weight] (owner, 2026-10-19): the comment options (Edit, Delete, Report…) read at weight 500 wherever the
   menu opens: in a card, the comments sheet, the photo viewer, reels or moved into a phone sheet */
.ng-cmt-menu .dropdown-item, .ng-cmt-menu .dropdown-item .action, .ng-cmt-menu .dropdown-item span { font-weight: 500 !important; }

/* [Profile social icons] (owner, 2026-10-19): a profile's social links as round icon-only buttons, the icon centred in
   its circle, in the network's own colours (the name is the tooltip and the screen-reader label) */
.ng-ent__soc { gap: 8px; align-items: center; }
.ng-soc-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; background: var(--ng-fill); color: var(--ng-ink); line-height: 0; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.ng-soc-ico:hover { background: var(--ng-fill-2); color: var(--ng-brand); }
.ng-soc-ico:active { transform: scale(.94); }
.ng-soc-ico:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-soc-ico > *, .ng-soc-ico svg { display: block; width: 16px !important; height: 16px !important; margin: 0 !important; line-height: 0; }

/* ---- [Feed: full bleed] (owner, 2026-10-19; posts only, owner 2026-10-19) ----
   Phones (under 768px): the post cards of a posts list run to the screen's edges. One rule for every posts list
   (_posts.tpl's .js_posts_stream: the home feed, For you, Popular, the newsfeed tabs, saved, profile/page/group/event
   timelines and their pinned post; the search and hashtag results' .ng-dposts) and their post skeletons, so the
   loading state matches. Nothing else bleeds: the composer, stories, the suggestion strips between posts, the home
   column's cards (announcements, the greeting, Today, the home sections, "Make Niguro yours", Sngine's daytime
   message) keep the 8px gutter and their round corners (--ng-r).
   Each post gives up the frame's side gutter (--ng-bleed: half the frame's --bs-gutter-x, the 8px a side under 1024px)
   with a negative margin, loses its side corners, and adds the same --ng-bleed to its inner inset (--ng-pg), so text,
   header, action bar and comments stay exactly where they were while the background, and media already flush with
   the card, reach the screen's edges. Posts keep their vertical gap (the page background between them).
   768px and up unchanged. */
@media (max-width: 767.98px) {
  .sg-offcanvas { --ng-bleed: calc(var(--bs-gutter-x, 16px) * .5); }
  .sg-offcanvas :is(.js_posts_stream, .js_posts_loader, .ng-dposts, .ng-ent__posts) :is(.post, .ng-sk-post) {
    margin-inline: calc(var(--ng-bleed, 0px) * -1); border-radius: 0;
    --ng-pg: calc(16px + var(--ng-bleed, 0px));
  }
  .sg-offcanvas :is(.js_posts_stream, .js_posts_loader, .ng-dposts, .ng-ent__posts) .post > .post-footer { border-radius: 0; }
  /* the parts Sngine insets by a fixed amount (not --ng-pg) move in by the gutter too: "Read more", the inset blocks
     (.plr15 that isn't flush media), and a shared post's box, whose own insides keep the 16px */
  .sg-offcanvas :is(.js_posts_stream, .js_posts_loader, .ng-dposts, .ng-ent__posts) .post-replace > a[data-readmore-toggle] { margin-left: var(--ng-pg); }
  .sg-offcanvas :is(.js_posts_stream, .js_posts_loader, .ng-dposts, .ng-ent__posts) .post-body > .plr15:not(.ng-media--video):not(:has(> .post-media)) { padding-inline: calc(15px + var(--ng-bleed, 0px)) !important; }
  .sg-offcanvas :is(.js_posts_stream, .js_posts_loader, .ng-dposts, .ng-ent__posts) .post-snippet { --ng-pg: 16px; margin-inline: calc(16px + var(--ng-bleed, 0px)); }
}
/* ---- [/Feed: full bleed] ---- */

/* ---- niguro [Save states] (begin) — one saving state for every save / submit button (owner, 2026-10-19;
   niguro.js "[Save states]"): inside the button at its idle width (min-width locked by the script), a 14px ring in
   currentColor + "Saving…" / "Posting…" / "Publishing…" while it saves, then the theme's check + "Saved" / "Posted" /
   "Published" for 1.3s with a soft green halo (the label green on light buttons), then the label again. With no
   room for the words: the ring / the check alone (the words stay for screen readers). Reduced motion: no spin;
   the words alone, or a static "…". Day and night come from the tokens. ---- */
.ng-save { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.ng-save:disabled, .ng-save.disabled { opacity: 1; }
.ng-save--busy { cursor: progress; }
.ng-save__txt { min-width: 0; }
.ng-save__spin { flex: none; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ng-save-spin .7s linear infinite; }
.ng-save__dots { display: none; line-height: 1; }
.ng-save__ico { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; }
.ng-save__ico .ng-ico { width: 16px; height: 16px; stroke-width: 2.5; }
.ng-save--icon { gap: 0; }
.ng-save--icon .ng-save__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ng-save--done { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-verified) 22%, transparent); transition: box-shadow .2s ease; }
.ng-save--done:not(.btn-primary):not(.ng-pbtn--primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-dark) { color: var(--ng-verified); }
@keyframes ng-save-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ng-save__spin { display: none; }
  .ng-save--icon .ng-save__dots { display: inline; }
  .ng-save--done { transition: none; }
}
/* ---- niguro [Save states] (end) ---- */