/*! Neon Nocturne (Modern) - JavCMS theme stylesheet | original work (MIT) | 2026-10-10
 * "2 a.m. in a rain-soaked city": wet blue-black glass, tube-lit signs (Tilt Neon), shop-window cards, a mint LED ticker
 * and a split-flap departures board. Dark "Wet asphalt" is the default; light "Dawn after the rain" is fully designed.
 * Fonts: Tilt Neon (OFL, signs + wordmark only), Chakra Petch (OFL, text/UI); ru -> Unbounded/Manrope, ar -> Rubik. */

/* ------------------------------------------------------------------ fonts (signs) */
@font-face { font-family: 'Tilt Neon'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-vietnamese-full-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tilt Neon'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-latin-ext-full-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Tilt Neon'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-latin-full-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* phones: the same files with font-display: optional, so the 162 KB sign face never causes a late LCP or a swap (concept 2.6) */
@font-face { font-family: 'Tilt Neon Opt'; font-style: normal; font-weight: 400; font-display: optional; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-vietnamese-full-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tilt Neon Opt'; font-style: normal; font-weight: 400; font-display: optional; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-latin-ext-full-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Tilt Neon Opt'; font-style: normal; font-weight: 400; font-display: optional; src: url(../../../../static/vendor/fx/fonts/tilt-neon@5.3.0/tilt-neon-latin-full-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ------------------------------------------------------------------ tokens */
:root, html[data-color-mode="dark"] {
  color-scheme: dark;
  --bg: #07060c; --bg-2: #0b0915; --surface: #110e1b; --surface-2: #191526;
  --glass: rgba(25, 21, 38, .62); --glass-2: rgba(17, 14, 27, .78); --glass-line: rgba(162, 131, 255, .18); --glass-hi: rgba(255, 255, 255, .06);
  --line: #2c2542; --text: #f5f1ff; --muted: #b9afd6; --dim: #9d93bd;
  --pink: #ff4d94; --pink-hover: #ff6fa8; --violet: #a283ff; --mint: #5df2c6; --sodium: #ffb347;
  --pink-g: rgba(255, 77, 148, .8); --violet-g: rgba(162, 131, 255, .8); --mint-g: rgba(93, 242, 198, .7);
  --pink-core: #ffe3ee; --violet-core: #efe9ff; --mint-core: #e6fff7;
  --pink-off: #c4517f; --violet-off: #8f7bd0; --mint-off: #54b89c;
  --on-pink: #16030c; --on-mint: #03140e; --focus: #5df2c6;
  --header: rgba(7, 6, 12, .62); --drawer: rgba(10, 8, 18, .86); --pop: rgba(17, 14, 27, .94);
  --scrim: rgba(7, 6, 12, .6); --shadow: 0 14px 36px rgba(0, 0, 0, .5);
  --chip: rgba(10, 8, 18, .72); --led-bg: #06050b; --led: #5df2c6;
  --nn-ph: url(../brand/ph-dark.webp);
  --fx-accent: #ff4d94; --fx-accent-2: #a283ff; --fx-accent-3: #5df2c6; --fx-ink: #f5f1ff; --fx-muted: #b9afd6; --fx-bg: #07060c; --fx-surface: #191526;
  --fx-skel-bg: rgba(162, 131, 255, .07); --fx-skel-hl: rgba(255, 77, 148, .12);
  --fx-cursor-color: rgba(255, 77, 148, .3); --fx-cursor-size: 460px;
}
html[data-color-mode="light"] {
  color-scheme: light;
  --bg: #f5f2fa; --bg-2: #efeaf7; --surface: #ffffff; --surface-2: #ebe5f5;
  --glass: rgba(255, 255, 255, .74); --glass-2: rgba(255, 255, 255, .9); --glass-line: rgba(90, 53, 214, .18); --glass-hi: rgba(255, 255, 255, .5);
  --line: #d6cde6; --text: #150e24; --muted: #54487a; --dim: #5f5385;
  --pink: #c2185b; --pink-hover: #a31450; --violet: #5a35d6; --mint: #00694c; --sodium: #b35f00;
  --pink-g: rgba(194, 24, 91, .35); --violet-g: rgba(90, 53, 214, .35); --mint-g: rgba(0, 105, 76, .3);
  --pink-core: #c2185b; --violet-core: #5a35d6; --mint-core: #00694c;
  --pink-off: #b87896; --violet-off: #9483c9; --mint-off: #5f9a88;
  --on-pink: #ffffff; --on-mint: #ffffff; --focus: #5a35d6;
  --header: rgba(245, 242, 250, .78); --drawer: rgba(250, 248, 253, .92); --pop: rgba(255, 255, 255, .97);
  --scrim: rgba(21, 14, 36, .42); --shadow: 0 14px 34px rgba(40, 20, 80, .14);
  --chip: rgba(255, 255, 255, .88); --led-bg: #150e24; --led: #5df2c6;
  --nn-ph: url(../brand/ph-light.webp);
  --fx-accent: #c2185b; --fx-accent-2: #5a35d6; --fx-accent-3: #00694c; --fx-ink: #150e24; --fx-muted: #54487a; --fx-bg: #f5f2fa; --fx-surface: #ffffff;
  --fx-skel-bg: rgba(90, 53, 214, .07); --fx-skel-hl: rgba(255, 255, 255, .8);
  --fx-cursor-color: rgba(194, 24, 91, .12);
}
:root {
  --f-sign: 'Tilt Neon', var(--fx-font-scripts), var(--fx-font-system);
  --f-text: 'Chakra Petch', var(--fx-font-scripts), var(--fx-font-system);
  --wrap: 1440px; --gut: clamp(12px, 3vw, 32px); --r: 12px; --r-s: 8px; --hh: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fx-spot-color: rgba(255, 77, 148, .16);
}
html.nn-save { --f-sign: 'Chakra Petch', var(--fx-font-scripts), var(--fx-font-system); }
@media (max-width: 767px) { :root { --f-sign: 'Tilt Neon Opt', var(--fx-font-scripts), var(--fx-font-system); --hh: 56px; } html.nn-save { --f-sign: 'Chakra Petch', var(--fx-font-scripts), var(--fx-font-system); } }
:lang(ru) { --f-sign: 'Unbounded', var(--fx-font-scripts), var(--fx-font-system); --f-text: 'Manrope', var(--fx-font-scripts), var(--fx-font-system); }
:lang(ar) { --f-sign: 'Rubik', var(--fx-font-scripts), var(--fx-font-system); --f-text: 'Rubik', var(--fx-font-scripts), var(--fx-font-system); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 12px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.nn-lock, html.nn-lock body { overflow: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--pink); color: var(--on-pink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.nn-sr, .nn-sr-focus:not(:focus) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nn-ltr { direction: ltr; unicode-bidi: isolate; }
.nn-ico, .nn-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; --fx-icon-stroke: 1.75; }
.nn-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.nn-main { display: block; min-height: 50vh; padding-bottom: 56px; }
.nn-skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--mint); color: var(--on-mint); font-weight: 700; transform: translateY(-160%); }
.nn-skip:focus { transform: none; }
.gallery-status { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 120; pointer-events: none; }
html { scrollbar-color: var(--line) var(--bg); }

/* ------------------------------------------------------------------ tube light (signs) */
.nn-tube { --t: var(--pink); --tg: var(--pink-g); --tc: var(--pink-core); color: var(--tc); text-shadow: 0 0 4px var(--tg), 0 0 12px var(--tg), 0 0 28px var(--tg); }
.nn-tube--violet { --t: var(--violet); --tg: var(--violet-g); --tc: var(--violet-core); }
.nn-tube--mint { --t: var(--mint); --tg: var(--mint-g); --tc: var(--mint-core); }
html[data-color-mode="light"] .nn-tube { color: var(--t); text-shadow: 1px 1px 0 rgba(90, 53, 214, .34); }
.nn-sign { font-family: var(--f-sign); font-weight: 400; letter-spacing: .02em; line-height: 1.05; font-variation-settings: "XROT" 0, "YROT" 0; }
html.nn-save .nn-sign { font-weight: 700; letter-spacing: .01em; }
/* unlit tube (before a sign flickers on); still >= 3:1 */
.nn-unlit, html.nn-js .nn-vsign:not(.is-lit), html.nn-js .nn-hsign:not(.is-lit) { color: var(--t-off, var(--pink-off)); text-shadow: none; }
.nn-tube--violet.nn-vsign, .nn-tube--violet.nn-hsign { --t-off: var(--violet-off); }
.nn-tube--mint.nn-vsign, .nn-tube--mint.nn-hsign { --t-off: var(--mint-off); }
@keyframes nn-flick-on {
  0% { color: var(--t-off, var(--pink-off)); text-shadow: none; }
  8% { color: var(--tc); text-shadow: 0 0 4px var(--tg), 0 0 12px var(--tg), 0 0 28px var(--tg); }
  16% { color: var(--t-off, var(--pink-off)); text-shadow: none; }
  30% { color: var(--tc); text-shadow: 0 0 4px var(--tg), 0 0 12px var(--tg); }
  38% { color: var(--t-off, var(--pink-off)); text-shadow: none; }
  52%, 100% { color: var(--tc); text-shadow: 0 0 4px var(--tg), 0 0 12px var(--tg), 0 0 28px var(--tg); }
}
@keyframes nn-flick-on-light { 0%, 16%, 38% { opacity: .35; } 8%, 30%, 52%, 100% { opacity: 1; } }
@keyframes nn-buzz { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .5; } 95% { opacity: 1; } 96.5% { opacity: .62; } 97.5% { opacity: 1; } }
@keyframes nn-flicker-box { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .15; } 40% { opacity: 1; } 55% { opacity: .45; } 70%, 100% { opacity: 1; } }
@keyframes nn-breathe { from { opacity: .4; } to { opacity: .72; } }
@keyframes nn-spark { 0% { opacity: 1; transform: scale(.4); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes nn-rain-drift { from { transform: translate3d(0, -48px, 0); } to { transform: translate3d(0, 0, 0); } }
html.nn-ignite .nn-flick { animation: nn-flick-on .9s steps(1, end) .15s both; }
html.nn-ignite[data-color-mode="light"] .nn-flick { animation-name: nn-flick-on-light; }
.nn-vsign.is-lit, .nn-hsign.is-lit { animation: nn-flick-on .42s steps(1, end) both; }
html[data-color-mode="light"] .nn-vsign.is-lit, html[data-color-mode="light"] .nn-hsign.is-lit { animation-name: nn-flick-on-light; }

/* ------------------------------------------------------------------ buttons, chips, inputs */
.nn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); font: 600 14px/1 var(--f-text); letter-spacing: .02em; white-space: nowrap; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.nn-btn .nn-ico { width: 18px; height: 18px; }
.nn-btn-primary, .nn-submit { background: var(--pink); border-color: var(--pink); color: var(--on-pink); box-shadow: 0 0 0 1px var(--pink), 0 0 18px var(--pink-g); }
html[data-color-mode="light"] .nn-btn-primary, html[data-color-mode="light"] .nn-submit { box-shadow: 0 6px 16px rgba(194, 24, 91, .22); }
.nn-btn-outline { background: transparent; border-color: var(--pink); color: var(--pink); }
html[data-color-mode="dark"] .nn-btn-outline { color: var(--pink-core); box-shadow: inset 0 0 10px rgba(255, 77, 148, .25), 0 0 10px rgba(255, 77, 148, .25); }
.nn-btn-mint { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.nn-btn[disabled], .nn-btn.is-off { opacity: .5; pointer-events: none; }
.nn-submit { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--pink); font: 700 15px/1 var(--f-text); letter-spacing: .03em; }
.nn-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); transition: color .2s, border-color .2s, background-color .2s; }
.nn-iconbtn > svg, .nn-iconbtn .nn-ico { width: 22px; height: 22px; }
.nn-iconbtn svg:not(.nn-ico) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nn-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); font: 500 13px/1.2 var(--f-text); white-space: nowrap; transition: border-color .2s, color .2s, box-shadow .2s, background-color .2s; }
a.nn-chip { cursor: pointer; }
.nn-chip.is-on, .nn-chip[aria-current="page"] { border-color: var(--pink); background: var(--pink); color: var(--on-pink); box-shadow: 0 0 14px var(--pink-g); }
.nn-chip-code { border-color: rgba(162, 131, 255, .4); color: var(--violet); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html[data-color-mode="dark"] .nn-chip-code { color: #c9b9ff; }
.nn-input, .nn-select, .nn-textarea { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-2); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.nn-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.nn-input::placeholder, .nn-textarea::placeholder { color: var(--dim); opacity: 1; }
.nn-input:focus-visible, .nn-select:focus-visible, .nn-textarea:focus-visible, .nn-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); box-shadow: 0 0 0 4px rgba(93, 242, 198, .14); }
html[data-color-mode="light"] .nn-input:focus-visible, html[data-color-mode="light"] .nn-textarea:focus-visible { box-shadow: 0 0 0 4px rgba(90, 53, 214, .12); }

/* ------------------------------------------------------------------ header */
.nn-header { position: sticky; top: 0; z-index: 60; view-transition-name: site-header; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.nn-bar { position: relative; height: var(--hh); background: var(--header); }
.nn-bar::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pink) 18%, var(--violet) 82%, transparent); box-shadow: 0 0 10px var(--pink-g), 0 0 22px rgba(162, 131, 255, .35); opacity: .9; }
html[data-color-mode="light"] .nn-bar::after { box-shadow: none; opacity: .55; }
.nn-bar-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .9; }
.nn-bar-rain::before { content: ""; position: absolute; inset: -48px 0 0; background: repeating-linear-gradient(104deg, transparent 0 21px, rgba(255, 255, 255, .045) 21px 22px, transparent 22px 47px, rgba(185, 175, 214, .035) 47px 48px); }
html[data-color-mode="light"] .nn-bar-rain::before { background: repeating-linear-gradient(104deg, transparent 0 21px, rgba(90, 53, 214, .05) 21px 22px, transparent 22px 47px); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { html:not(.nn-low) .nn-bar-rain::before { animation: nn-rain-drift 2.8s linear infinite; } }
.nn-bar-in { position: relative; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); height: 100%; }
.nn-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; flex: none; border-radius: 10px; }
.nn-logo-img { display: block; max-height: 40px; width: auto; object-fit: contain; }
.nn-mark { display: block; width: 38px; height: 38px; flex: none; overflow: visible; }
.nn-mark rect, .nn-mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nn-mark .g1 { stroke: var(--pink); stroke-width: 8; opacity: .18; }
.nn-mark .t1 { stroke: var(--pink); stroke-width: 3; }
.nn-mark .c1 { stroke: var(--pink-core); stroke-width: 1; opacity: .85; }
.nn-mark .g2 { stroke: var(--violet); stroke-width: 7; opacity: .22; }
.nn-mark .t2 { stroke: var(--violet); stroke-width: 2.6; }
.nn-mark .c2 { stroke: var(--violet-core); stroke-width: .9; opacity: .8; }
.nn-mark .led { fill: var(--mint); }
.nn-mark .ledg { fill: var(--mint); opacity: .22; }
html[data-color-mode="light"] .nn-mark .g1, html[data-color-mode="light"] .nn-mark .g2 { opacity: .08; }
html[data-color-mode="light"] .nn-mark .c1, html[data-color-mode="light"] .nn-mark .c2, html[data-color-mode="light"] .nn-mark .ledg { opacity: 0; }
.nn-wordmark { display: block; min-width: 0; max-width: 34vw; overflow: hidden; font: 400 28px/1.15 var(--f-sign); letter-spacing: .03em; text-transform: lowercase; white-space: nowrap; text-overflow: ellipsis; }
html.nn-save .nn-wordmark { font-weight: 700; }
.nn-header .nn-wordmark { padding-block: 4px; }
html.nn-ignite .nn-header .nn-logo .nn-mark, html.nn-ignite .nn-header .nn-wordmark { animation: nn-flick-on-light .9s steps(1, end) .1s both; }
.nn-nav { flex: 1 1 auto; min-width: 0; }
.nn-nav > ul { display: flex; align-items: center; gap: 4px; }
.nn-nav a, .nn-nav-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 15px/1 var(--f-text); letter-spacing: .02em; white-space: nowrap; transition: color .16s, text-shadow .16s; }
.nn-nav-btn .nn-ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nn-nav-btn[aria-expanded="true"] .nn-ico { transform: rotate(180deg); }
.nn-nav a::after, .nn-nav-btn::after { content: ""; position: absolute; inset-inline: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pink); box-shadow: 0 0 6px var(--pink-g), 0 0 14px var(--pink-g); opacity: 0; transform: scaleX(.4); transition: opacity .16s, transform .2s var(--ease); }
.nn-nav a[aria-current="page"], .nn-nav-btn.is-current { color: var(--text); }
.nn-nav a[aria-current="page"]::after, .nn-nav-btn.is-current::after { opacity: 1; transform: none; }
html[data-color-mode="light"] .nn-nav a::after, html[data-color-mode="light"] .nn-nav-btn::after { box-shadow: none; }
.nn-tools { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: none; }
.nn-menu-btn, .nn-search-btn { display: none; }
/* search (one form: inline pill on desktop, drop panel on phones / compact headers) */
.nn-search { position: relative; display: flex; align-items: center; width: clamp(170px, 18vw, 290px); height: 42px; margin-inline-end: 6px; padding-inline: 12px 4px; border: 1px solid rgba(255, 77, 148, .55); border-radius: 999px; background: rgba(7, 6, 12, .45); box-shadow: inset 0 0 8px rgba(255, 77, 148, .18), 0 0 10px rgba(255, 77, 148, .14); transition: border-color .2s, box-shadow .2s; }
html[data-color-mode="light"] .nn-search { background: rgba(255, 255, 255, .8); border-color: rgba(194, 24, 91, .45); box-shadow: none; }
.nn-search > .nn-ico { width: 18px; height: 18px; color: var(--pink); flex: none; }
.nn-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--text); font: 500 14px/1 var(--f-text); }
.nn-search input::placeholder { color: var(--dim); opacity: 1; }
.nn-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nn-search input:focus-visible { outline: none; }
.nn-search:focus-within { border-color: var(--mint); box-shadow: 0 0 0 2px var(--mint), 0 0 16px rgba(93, 242, 198, .28); }
html[data-color-mode="light"] .nn-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.nn-search-go { flex: none; display: inline-grid; place-items: center; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--pink); color: var(--on-pink); font: 600 13px/1 var(--f-text); }
.nn-suggest { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 70; max-height: min(420px, 70vh); overflow-y: auto; padding: 6px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--pop); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); min-width: 280px; }
.nn-suggest a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; min-height: 48px; padding: 6px; border-radius: 10px; color: var(--text); font: 500 13px/1.35 var(--f-text); }
.nn-suggest a img { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.nn-suggest a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nn-suggest a.is-focus, .nn-suggest a:focus-visible { background: rgba(255, 77, 148, .14); outline: 2px solid var(--focus); outline-offset: -2px; }
/* popovers: language, categories, account */
.nn-pop { position: relative; }
.nn-pop > summary { list-style: none; }
.nn-pop > summary::-webkit-details-marker { display: none; }
.nn-lang-code { position: absolute; bottom: 3px; inset-inline-end: 2px; min-width: 18px; padding: 1px 3px; border-radius: 5px; background: var(--violet); color: #fff; font: 700 9px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .03em; }
html[data-color-mode="dark"] .nn-lang-code { background: #5b3fc9; }
.nn-panel-pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70; padding: 8px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--pop); box-shadow: var(--shadow), 0 0 0 1px rgba(255, 77, 148, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nn-lang-menu { display: grid; grid-template-columns: repeat(2, minmax(124px, 1fr)); gap: 2px; width: max-content; max-width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto; }
.nn-lang-menu a, .nn-user-menu a, .nn-user-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 14px/1.2 var(--f-text); text-align: start; width: 100%; }
.nn-lang-menu a[aria-current="true"] { color: var(--pink); background: rgba(255, 77, 148, .1); font-weight: 700; }
html[data-color-mode="dark"] .nn-lang-menu a[aria-current="true"] { color: var(--pink-core); }
.nn-user-menu { width: 260px; }
.nn-user-head { padding: 8px 12px 6px; color: var(--mint); font: 600 13px/1.3 var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-color-mode="dark"] .nn-user-head { color: var(--mint); }
.nn-user-menu .nn-ico { width: 18px; height: 18px; color: var(--violet); }
.nn-history-h { margin: 6px 12px 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--dim); font: 600 11px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .1em; }
.nn-history-list a { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; min-height: 40px; padding: 4px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.nn-history-list img { width: 56px; height: 32px; border-radius: 5px; object-fit: cover; background: var(--surface-2); }
.nn-history-list span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nn-history-empty { padding: 6px 12px 8px; color: var(--dim); font-size: 13px; }
.nn-cats { width: min(560px, calc(100vw - 32px)); inset-inline-end: auto; inset-inline-start: 0; padding: 14px; }
.nn-cats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nn-cat-sign { --t: var(--pink); --tg: var(--pink-g); --tc: var(--pink-core); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--t); border-radius: 12px; color: var(--tc); font: 400 19px/1.1 var(--f-sign); letter-spacing: .02em; box-shadow: inset 0 0 10px var(--tg), 0 0 8px var(--tg); text-shadow: 0 0 6px var(--tg); transition: box-shadow .16s, background-color .16s; }
.nn-cats-list li:nth-child(3n+2) .nn-cat-sign, .nn-signs li:nth-child(3n+2) > a { --t: var(--violet); --tg: var(--violet-g); --tc: var(--violet-core); }
.nn-cats-list li:nth-child(3n+3) .nn-cat-sign, .nn-signs li:nth-child(3n+3) > a { --t: var(--mint); --tg: var(--mint-g); --tc: var(--mint-core); }
.nn-cat-sign small { flex: none; color: var(--muted); font: 500 12px/1 var(--f-text); text-shadow: none; font-variant-numeric: tabular-nums; }
.nn-cat-sign[aria-current="page"] { background: rgba(255, 77, 148, .12); }
html[data-color-mode="light"] .nn-cat-sign { color: var(--t); box-shadow: none; text-shadow: none; background: rgba(255, 255, 255, .7); }
html.nn-save .nn-cat-sign { font-weight: 700; }
.nn-cats-all { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 40px; margin-top: 10px; padding: 0 6px; color: var(--mint); font: 600 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .08em; }
html[data-color-mode="dark"] .nn-cats-all { color: var(--mint); }
[dir="rtl"] .nn-cats-all .nn-ico, [dir="rtl"] .nn-more .nn-ico, [dir="rtl"] .nn-back .nn-ico, [dir="rtl"] .nn-chev-flip { transform: scaleX(-1); }
.nn-account { position: relative; }
.nn-account .nn-user-menu { top: calc(100% + 10px); }
.nn-account .nn-iconbtn.is-user::after { content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint-g); }
/* compact desktop (fit script) and phones */
.nn-header.is-compact .nn-search { display: none; }
.nn-header.is-compact .nn-search-btn { display: inline-grid; }
.nn-header.is-compact.is-search .nn-search, .nn-header.is-collapsed.is-search .nn-search { display: flex; position: absolute; top: calc(100% + 8px); inset-inline: var(--gut); width: auto; height: 50px; margin: 0; background: var(--pop); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow), 0 0 0 2px var(--mint); }
.nn-header.is-collapsed .nn-nav { display: none; }
.nn-header.is-collapsed .nn-menu-btn, .nn-header.is-collapsed .nn-search-btn { display: inline-grid; }
.nn-header.is-collapsed .nn-search { display: none; }
@media (max-width: 1023px) {
  .nn-nav, .nn-search { display: none; }
  .nn-menu-btn, .nn-search-btn { display: inline-grid; }
  .nn-header.is-search .nn-search { display: flex; position: absolute; top: calc(100% + 8px); inset-inline: var(--gut); width: auto; height: 50px; margin: 0; background: var(--pop); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow), 0 0 0 2px var(--mint); }
  html[data-color-mode="light"] .nn-header.is-search .nn-search { box-shadow: var(--shadow), 0 0 0 2px var(--focus); }
  .nn-header.is-search .nn-suggest { top: calc(100% + 6px); }
}
@media (max-width: 767px) {
  .nn-header { -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
  .nn-bar-in { gap: 6px; }
  .nn-mark { width: 32px; height: 32px; }
  .nn-logo { gap: 8px; }
  .nn-logo-img { max-height: 32px; }
  .nn-wordmark { font-size: 23px; max-width: 46vw; }
  .nn-tools { gap: 0; }
  .nn-tools .nn-lang, .nn-tools .nn-account { display: none; }
  .nn-tools .nn-iconbtn { width: 42px; height: 44px; }
}
@media (max-width: 359px) { .nn-header .nn-wordmark { display: none; } }

/* ------------------------------------------------------------------ drawer ("a glass door with droplets") */
.nn-drawer { position: fixed; inset: 0; z-index: 90; }
.nn-drawer-shade { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
.nn-drawer-door { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(85vw, 360px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 24px; border-inline-start: 1px solid rgba(255, 77, 148, .35); background: var(--drawer); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: -18px 0 40px rgba(0, 0, 0, .45), inset 1px 0 0 rgba(255, 255, 255, .04); transform: translateX(104%); transition: transform .36s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .nn-drawer-door { transform: translateX(-104%); box-shadow: 18px 0 40px rgba(0, 0, 0, .45); }
.nn-drawer.is-open .nn-drawer-shade { opacity: 1; }
.nn-drawer.is-open .nn-drawer-door { transform: none; }
.nn-drawer-drops { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .22) 0 1.4px, rgba(255, 255, 255, .05) 2.2px, transparent 3.2px) 0 0 / 41px 47px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .16) 0 2px, rgba(255, 255, 255, .04) 3px, transparent 4.4px) 11px 17px / 67px 59px,
    radial-gradient(ellipse 2px 3px at 50% 50%, rgba(255, 255, 255, .14), transparent) 29px 5px / 89px 101px; }
html[data-color-mode="light"] .nn-drawer-drops { opacity: .4; filter: invert(.4); }
.nn-drawer-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-bottom: 14px; }
.nn-drawer-sub { position: relative; margin: 20px 4px 10px; color: var(--dim); font: 600 12px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .14em; }
.nn-signs { position: relative; display: grid; gap: 10px; }
.nn-signs > li > a { --t: var(--pink); --tg: var(--pink-g); --tc: var(--pink-core); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 16px; border: 1.5px solid var(--t); border-radius: 14px; color: var(--tc); font: 400 26px/1.1 var(--f-sign); letter-spacing: .02em; text-shadow: 0 0 5px var(--tg), 0 0 14px var(--tg); box-shadow: inset 0 0 12px var(--tg), 0 0 10px var(--tg); }
.nn-signs > li > a small { color: var(--muted); font: 500 12px/1 var(--f-text); text-shadow: none; font-variant-numeric: tabular-nums; }
.nn-signs > li > a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
html[data-color-mode="light"] .nn-signs > li > a { color: var(--t); text-shadow: none; box-shadow: none; background: rgba(255, 255, 255, .75); }
html.nn-save .nn-signs > li > a { font-weight: 700; font-size: 21px; }
.nn-signs--cats > li > a { min-height: 46px; font-size: 21px; }
.nn-drawer.is-open .nn-signs > li { animation: nn-flicker-box .5s steps(1, end) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.nn-drawer-tools { position: relative; display: grid; gap: 10px; margin-top: 22px; }
.nn-drawer-tools .nn-btn { width: 100%; justify-content: flex-start; padding-inline: 16px; border-radius: 14px; min-height: 48px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nn-drawer-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nn-drawer-langs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border: 1px solid var(--glass-line); border-radius: 10px; background: var(--glass); font: 500 13px/1.15 var(--f-text); text-align: center; }
.nn-drawer-langs a[aria-current="true"] { border-color: var(--pink); color: var(--pink); }
html[data-color-mode="dark"] .nn-drawer-langs a[aria-current="true"] { color: var(--pink-core); box-shadow: 0 0 10px var(--pink-g); }
.nn-mode .nn-sun-i, html[data-color-mode="light"] .nn-mode-btn .nn-sun-i { display: none; }
html[data-color-mode="light"] .nn-mode-btn .nn-moon-i { display: none; }
html[data-color-mode="dark"] .nn-mode-btn .nn-sun-i { display: inline; }
html[data-color-mode="dark"] .nn-mode-btn .nn-moon-i { display: none; }

/* ------------------------------------------------------------------ section signs (vertical on desktop, horizontal on phones) */
.nn-section { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.nn-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nn-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 44px; }
.nn-hsign, .nn-vsign { font-size: clamp(24px, 3.2vw, 30px); }
.nn-hsign a, .nn-vsign a { display: inline-block; border-radius: 8px; }
.nn-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--mint); font: 600 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.nn-more .nn-ico { width: 16px; height: 16px; }
html[data-color-mode="light"] .nn-more { color: var(--mint); }
.nn-vsign-col { display: none; }
@media (min-width: 1024px) {
  .nn-sec--signed { grid-template-columns: 52px minmax(0, 1fr); column-gap: 22px; }
  .nn-sec--signed .nn-vsign-col { display: block; position: relative; }
  .nn-sec--signed .nn-vsign { position: sticky; top: calc(var(--hh) + 24px); margin: 0; writing-mode: vertical-rl; text-orientation: mixed; font-size: 26px; letter-spacing: .08em; line-height: 1; white-space: nowrap; max-height: 70vh; overflow: hidden; }
  [dir="rtl"] .nn-sec--signed .nn-vsign { writing-mode: vertical-lr; }
  .nn-sec--signed .nn-vsign::before { content: ""; position: absolute; inset-inline-start: 50%; top: -18px; width: 1px; height: 12px; background: linear-gradient(var(--line), transparent); }
  .nn-sec--signed .nn-sec-head .nn-hsign { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nn-sec--signed .nn-sec-head { justify-content: flex-end; min-height: 0; margin-top: -6px; }
}
@media (prefers-reduced-motion: no-preference) { .nn-vsign.is-lit.is-buzz, .nn-hsign.is-lit.is-buzz { animation: nn-flick-on .42s steps(1, end) both, nn-buzz 7.5s steps(1, end) 1.2s infinite; } }

/* ------------------------------------------------------------------ cards ("shop windows") */
.nn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
@media (min-width: 768px) { .nn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; } }
@media (min-width: 1024px) { .nn-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; } }
.nn-card { position: relative; min-width: 0; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 var(--glass-hi) inset; }
.nn-card::after { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--pink); box-shadow: 0 0 8px var(--pink-g), 0 0 22px rgba(255, 77, 148, .35), inset 0 0 12px rgba(255, 77, 148, .22); opacity: 0; transition: opacity .2s; }
html[data-color-mode="light"] .nn-card::after { box-shadow: 0 6px 18px rgba(194, 24, 91, .18); }
.nn-card-link { display: flex; flex-direction: column; height: 100%; border-radius: inherit; color: var(--text); }
.nn-card-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r); }
.nn-card:focus-within::after, .nn-card.is-tap::after { opacity: 1; }
.nn-shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r) var(--r) 0 0; background: var(--surface-2) var(--nn-ph) center / cover no-repeat; isolation: isolate; }
.nn-shot > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nn-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0 22%, transparent 22.2% 100%), linear-gradient(180deg, transparent 55%, rgba(7, 6, 12, .5)); }
html[data-color-mode="light"] .nn-shot::after { background: linear-gradient(118deg, rgba(255, 255, 255, .22) 0 22%, transparent 22.2% 100%), linear-gradient(180deg, transparent 62%, rgba(21, 14, 36, .28)); }
.nn-ghost { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nn-ghost::before, .nn-ghost::after { content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background-position: center; background-size: cover; transition: opacity .4s ease, translate .4s cubic-bezier(.2, .8, .2, 1); }
.nn-dur, .nn-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 6px; background: var(--chip); border: 1px solid rgba(255, 77, 148, .35); color: var(--pink); font: 600 12px/1 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
html[data-color-mode="dark"] .nn-dur { color: #ff8ab8; }
.nn-dur { bottom: 8px; inset-inline-end: 8px; direction: ltr; }
.nn-tag { top: 8px; inset-inline-start: 8px; border-color: rgba(162, 131, 255, .45); color: var(--violet); letter-spacing: .05em; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
html[data-color-mode="dark"] .nn-tag { color: #cdbfff; }
.nn-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.nn-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; font: 600 14px/20px var(--f-text); color: var(--text); overflow-wrap: anywhere; }
.nn-card-meta { display: flex; align-items: center; gap: 12px; min-height: 18px; color: var(--muted); font: 500 12px/1.2 var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.nn-card-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.nn-card-meta .nn-ico { width: 14px; height: 14px; color: var(--violet); }
.nn-card-meta .nn-star { color: var(--sodium); }
html[data-color-mode="dark"] .nn-card-meta .nn-star { color: var(--sodium); }
@media (max-width: 767px) { .nn-card-body { padding: 8px 10px 10px; gap: 4px; } .nn-card-title { font-size: 13px; line-height: 18px; min-height: 36px; } .nn-tag { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .nn-card:hover::after { opacity: 1; animation: nn-flicker-box .36s steps(1, end) both; }
  .nn-card:hover .nn-ghost::before { opacity: .3; background-image: var(--img), var(--nn-ph); translate: var(--gx, 0) var(--gy, 0); }
  .nn-card:hover .nn-ghost::after { opacity: .15; background-image: var(--img), var(--nn-ph); translate: calc(var(--gx, 0px) * 2) calc(var(--gy, 0px) * 2); }
  html[data-color-mode="light"] .nn-card:hover .nn-ghost::before, html[data-color-mode="light"] .nn-card:hover .nn-ghost::after { mix-blend-mode: multiply; }
  .nn-card:hover .nn-card-title { color: var(--text); }
}
html[data-fx-motion="reduce"] .nn-ghost, html.nn-low .nn-ghost { display: none; }

/* rails ("After hours") */
.nn-rail { --fx-rail-gap: 14px; --fx-rail-btn-size: 44px; }
.nn-rail [data-fx-rail-track] { padding-block: 6px 10px; margin-block: -6px -10px; padding-inline: 4px; }
@media (min-width: 1024px) { .nn-rail { --fx-rail-cols: 4.3; } }
.nn-rail .fx-rail-btn { background: var(--pop); color: var(--text); border: 1px solid rgba(255, 77, 148, .45); box-shadow: 0 0 12px rgba(255, 77, 148, .25); }
.fx-rail-btn:hover { scale: none; }
@media (hover: hover) and (pointer: fine) { .nn-rail .fx-rail-btn:hover { scale: 1.06; border-color: var(--pink); } }
.nn-rail .fx-rail-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ footer ("Wet asphalt") */
.nn-footer { position: relative; margin-top: 72px; padding: 56px 0 28px; background: linear-gradient(180deg, transparent, var(--bg-2) 30%, #050409); overflow: hidden; }
html[data-color-mode="light"] .nn-footer { background: linear-gradient(180deg, transparent, #ece6f6 30%, #e6dff2); }
.nn-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; pointer-events: none; background: radial-gradient(40% 70% at 22% 0, rgba(255, 77, 148, .22), transparent 70%), radial-gradient(36% 60% at 74% 0, rgba(162, 131, 255, .2), transparent 70%), radial-gradient(20% 40% at 52% 0, rgba(93, 242, 198, .1), transparent 70%); filter: blur(6px); }
html[data-color-mode="light"] .nn-footer::before { opacity: .55; }
.nn-footer::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 77, 148, .5), rgba(162, 131, 255, .5), transparent); }
.nn-footer-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.nn-fbrand .nn-logo { margin-bottom: 4px; }
.nn-fbrand .nn-wordmark { font-size: 30px; max-width: 100%; }
.nn-fpuddle { height: 26px; margin: -2px 0 10px 48px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); mask: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); }
[dir="rtl"] .nn-fpuddle { margin: -2px 48px 10px 0; }
.nn-fpuddle span { display: block; transform: scaleY(-1) skewX(-8deg); transform-origin: 0 0; font: 400 30px/1.1 var(--f-sign); letter-spacing: .03em; text-transform: lowercase; white-space: nowrap; filter: blur(1.2px); opacity: .5; translate: 0 -2px; }
.nn-ftag { max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.nn-fhead { margin-bottom: 12px; font: 400 18px/1.2 var(--f-sign); letter-spacing: .04em; }
.nn-fcol ul { display: grid; gap: 2px; }
.nn-fcol a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0; color: var(--muted); font-size: 14px; transition: color .16s, text-shadow .16s; }
.nn-fcol a .nn-ico { width: 16px; height: 16px; color: var(--violet); }
.nn-fbottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.nn-18 { display: inline-flex; align-items: center; gap: 8px; }
.nn-18 b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border: 1.5px solid var(--pink); border-radius: 6px; color: var(--pink); font: 700 12px/1 var(--f-text); }
html[data-color-mode="dark"] .nn-18 b { color: var(--pink-core); box-shadow: 0 0 8px var(--pink-g); }
@media (max-width: 1023px) { .nn-footer-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nn-fbrand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .nn-footer { padding-top: 40px; } .nn-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .nn-fcol--site { grid-column: 1 / -1; } }
.nn-gotop { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 50; display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--pink); border-radius: 14px; background: var(--pop); color: var(--pink); box-shadow: 0 0 14px var(--pink-g); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
html[data-color-mode="dark"] .nn-gotop { color: var(--pink-core); }
.nn-gotop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.nn-gotop .nn-ico { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .nn-nav a:hover, .nn-nav-btn:hover { color: var(--text); text-shadow: 0 0 6px var(--pink-g), 0 0 14px var(--pink-g); animation: nn-buzz-quick .12s steps(1, end); }
  html[data-color-mode="light"] .nn-nav a:hover, html[data-color-mode="light"] .nn-nav-btn:hover { text-shadow: none; color: var(--pink); }
  .nn-nav a:hover::after, .nn-nav-btn:hover::after { opacity: .7; transform: none; }
  .nn-iconbtn:hover { color: var(--pink-core); border-color: rgba(255, 77, 148, .45); background: rgba(255, 77, 148, .08); }
  .nn-iconbtn:hover > svg, .nn-iconbtn:hover .nn-ico { filter: drop-shadow(0 0 6px currentColor); }
  html[data-color-mode="light"] .nn-iconbtn:hover { color: var(--pink); }
  html[data-color-mode="light"] .nn-iconbtn:hover > svg, html[data-color-mode="light"] .nn-iconbtn:hover .nn-ico { filter: none; }
  .nn-btn:hover { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 16px var(--pink-g); }
  .nn-btn-primary:hover, .nn-submit:hover { background: var(--pink-hover); border-color: var(--pink-hover); color: var(--on-pink); box-shadow: 0 0 0 1px var(--pink-hover), 0 0 24px var(--pink-g); }
  .nn-btn-outline:hover { background: rgba(255, 77, 148, .12); }
  .nn-chip:hover { border-color: var(--pink); }
  a.nn-chip:hover:not(.is-on):not([aria-current="page"]) { color: var(--text); box-shadow: 0 0 10px rgba(255, 77, 148, .3); }
  .nn-lang-menu a:hover, .nn-user-menu a:hover, .nn-user-menu button:hover { background: rgba(255, 77, 148, .1); color: var(--text); }
  .nn-cat-sign:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 14px var(--tg), 0 0 16px var(--tg); }
  html[data-color-mode="light"] .nn-cat-sign:hover { background: #fff; box-shadow: 0 4px 14px rgba(90, 53, 214, .14); }
  .nn-signs > li > a:hover { background: rgba(255, 255, 255, .06); }
  .nn-more:hover { text-shadow: 0 0 8px var(--mint-g); }
  html[data-color-mode="light"] .nn-more:hover { text-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
  .nn-fcol a:hover { color: var(--text); text-shadow: 0 0 8px var(--pink-g); }
  html[data-color-mode="light"] .nn-fcol a:hover { text-shadow: none; color: var(--pink); }
  .nn-gotop:hover { background: var(--pink); color: var(--on-pink); }
  .nn-suggest a:hover { background: rgba(255, 77, 148, .1); }
  .nn-history-list a:hover { color: var(--text); background: rgba(255, 77, 148, .08); }
  .nn-drawer-langs a:hover { border-color: var(--pink); }
}
@keyframes nn-buzz-quick { 0% { opacity: .55; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------ reduced motion / low power */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .nn-vsign.is-lit, .nn-hsign.is-lit, html.nn-ignite .nn-flick { animation: none !important; }
}
html.nn-low .nn-bar-rain::before { animation: none; }
@media (max-width: 767px) { html.nn-low .nn-header, html.nn-low .nn-drawer-door { -webkit-backdrop-filter: none; backdrop-filter: none; } html.nn-low .nn-bar { background: var(--bg); } }

/* ------------------------------------------------------------------ script overrides (concept 2.7) */
:lang(ja) .nn-sign, :lang(zh) .nn-sign, :lang(ko) .nn-sign, :lang(th) .nn-sign, :lang(ar) .nn-sign, :lang(hi) .nn-sign,
:lang(ja) .nn-more, :lang(zh) .nn-more, :lang(ko) .nn-more, :lang(th) .nn-more, :lang(ar) .nn-more, :lang(hi) .nn-more,
:lang(ja) .nn-drawer-sub, :lang(zh) .nn-drawer-sub, :lang(ko) .nn-drawer-sub, :lang(th) .nn-drawer-sub, :lang(ar) .nn-drawer-sub, :lang(hi) .nn-drawer-sub,
:lang(ja) .nn-cats-all, :lang(zh) .nn-cats-all, :lang(ko) .nn-cats-all, :lang(th) .nn-cats-all, :lang(ar) .nn-cats-all, :lang(hi) .nn-cats-all,
:lang(ja) .nn-history-h, :lang(zh) .nn-history-h, :lang(ko) .nn-history-h, :lang(th) .nn-history-h, :lang(ar) .nn-history-h, :lang(hi) .nn-history-h { letter-spacing: normal; text-transform: none; }
:lang(ja) .nn-sec--signed .nn-vsign, :lang(zh) .nn-sec--signed .nn-vsign, :lang(ko) .nn-sec--signed .nn-vsign { text-orientation: upright; letter-spacing: .04em; }
:lang(ja) .nn-sign, :lang(zh) .nn-sign, :lang(ko) .nn-sign, :lang(th) .nn-sign, :lang(hi) .nn-sign { font-variation-settings: normal; }

/* ================================================================== home: night window (hero, N1 rain shader + fallback) */
.nn-hero { position: relative; isolation: isolate; min-height: min(72vh, 760px); padding: clamp(28px, 5vh, 56px) 0 clamp(26px, 4vh, 44px); overflow: hidden; background: var(--bg);
  --fx-fallback-opacity: 1;
  --fx-fallback:
    radial-gradient(22% 30% at 14% 24%, rgba(255, 77, 148, .34), transparent 70%),
    radial-gradient(18% 26% at 82% 18%, rgba(162, 131, 255, .34), transparent 70%),
    radial-gradient(14% 20% at 64% 70%, rgba(93, 242, 198, .2), transparent 70%),
    radial-gradient(10% 14% at 36% 78%, rgba(255, 179, 71, .16), transparent 70%),
    radial-gradient(8% 12% at 48% 30%, rgba(255, 77, 148, .22), transparent 70%),
    radial-gradient(12% 16% at 90% 62%, rgba(162, 131, 255, .22), transparent 70%),
    linear-gradient(180deg, #0a0814, #07060c); }
html[data-color-mode="light"] .nn-hero { background: var(--bg);
  --fx-fallback:
    radial-gradient(24% 32% at 14% 24%, rgba(255, 196, 222, .7), transparent 70%),
    radial-gradient(20% 28% at 82% 18%, rgba(205, 190, 255, .7), transparent 70%),
    radial-gradient(14% 20% at 64% 70%, rgba(178, 240, 220, .55), transparent 70%),
    radial-gradient(10% 14% at 36% 78%, rgba(255, 220, 180, .55), transparent 70%),
    linear-gradient(180deg, #efe9f8, #f5f2fa); }
.nn-hero > .fx-canvas { z-index: 0; }
.nn-hero-drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .22) 0 1.6px, rgba(255, 255, 255, .05) 2.6px, transparent 3.8px) 0 0 / 53px 61px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .17) 0 2.2px, rgba(255, 255, 255, .04) 3.4px, transparent 4.8px) 17px 23px / 83px 71px,
    radial-gradient(ellipse 2px 4px at 50% 50%, rgba(255, 255, 255, .15), transparent) 37px 7px / 109px 131px; }
html[data-color-mode="light"] .nn-hero-drops { opacity: .35; filter: invert(.5); }
html[data-fx-gl="on"] .nn-hero-drops, .nn-hero[data-fx-gl="on"] .nn-hero-drops { opacity: .2; }
.nn-hero-haze { position: absolute; inset: auto 0 0; z-index: 1; height: 42%; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }
.nn-hero-in { position: relative; z-index: 2; display: grid; gap: clamp(18px, 3vh, 34px); }
.nn-hero-in > * { min-width: 0; }
.nn-hero-sign-wrap { position: relative; display: grid; justify-items: center; text-align: center; min-height: calc(clamp(32px, 6vw, 92px) * 1.05 * 2 + 40px); align-content: center; }
.nn-hero-sign { margin: 0; max-width: 18ch; font-size: clamp(32px, 6vw, 92px); line-height: 1.05; letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere; }
html.nn-save .nn-hero-sign { font-size: clamp(28px, 5vw, 76px); }
.nn-hero-tag { position: relative; z-index: 2; margin-top: 10px; max-width: 48ch; color: var(--muted); font: 500 clamp(14px, 1.2vw, 16px)/1.5 var(--f-text); letter-spacing: .04em; text-transform: uppercase; }
html[data-color-mode="dark"] .nn-hero-tag { color: #cfc6ea; }
/* puddle reflection (N5): desktop fine pointers animate the SVG turbulence; everyone else gets a static blurred mirror */
.nn-puddle { position: relative; display: none; width: 100%; max-width: 18ch; height: 1.15em; margin-top: -2px; overflow: hidden; pointer-events: none; font-size: clamp(32px, 6vw, 92px); line-height: 1.05;
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 95%); mask: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 95%); }
.nn-puddle span { display: block; transform: scaleY(-1) skewX(-4deg); transform-origin: 50% 50%; letter-spacing: .01em; text-wrap: balance; filter: blur(1.6px); opacity: .5; }
@media (min-width: 1024px) { .nn-puddle { display: block; } }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { html:not(.nn-low) .nn-puddle span { filter: url(#nn-ripple) blur(1.4px); } }
.nn-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* shop windows (N11) */
.nn-windows { position: relative; }
.nn-embla { position: relative; overflow-x: auto; overflow-y: hidden; padding: 14px 0 18px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 16px; }
.nn-embla::-webkit-scrollbar { display: none; }
.nn-embla:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.nn-windows.is-embla .nn-embla { overflow: hidden; scroll-snap-type: none; cursor: grab; }
.nn-windows.is-embla .nn-embla:active { cursor: grabbing; }
.nn-embla-c { display: flex; gap: 16px; }
.nn-win { position: relative; flex: 0 0 min(78vw, 300px); min-width: 0; scroll-snap-align: center; border-radius: var(--r); border: 1px solid var(--glass-line); background: var(--glass); --glow: 0; }
@media (min-width: 768px) { .nn-win { flex-basis: calc((100% - 32px) / 2.6); } }
@media (min-width: 1024px) { .nn-win { flex-basis: calc((100% - 48px) / 4); } }
@media (min-width: 1280px) { .nn-win { flex-basis: calc((100% - 64px) / 5); } }
.nn-win::after { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--pink); box-shadow: 0 0 10px var(--pink-g), 0 0 26px rgba(255, 77, 148, .4), inset 0 0 14px rgba(255, 77, 148, .22); opacity: var(--glow); transition: opacity .3s; }
html[data-color-mode="light"] .nn-win::after { box-shadow: 0 8px 22px rgba(194, 24, 91, .2); }
.nn-win.is-centre { --glow: 1; }
html.nn-ignite .nn-win::after { animation: nn-flicker-box .5s steps(1, end) backwards; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
.nn-win-link { display: flex; flex-direction: column; border-radius: inherit; color: var(--text); }
.nn-win-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r); }
.nn-win-shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r) var(--r) 0 0; background: var(--surface-2) var(--nn-ph) center / cover no-repeat; isolation: isolate; }
.nn-win-shot > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.nn-win-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .08) 0 22%, transparent 22.2%), linear-gradient(180deg, transparent 55%, rgba(7, 6, 12, .55)); }
.nn-win-body { display: grid; gap: 4px; padding: 10px 12px 8px; }
.nn-win-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; font: 600 14px/20px var(--f-text); overflow-wrap: anywhere; }
.nn-win-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font: 500 12px/1.2 var(--f-text); font-variant-numeric: tabular-nums; }
.nn-win-meta .nn-ico { width: 14px; height: 14px; color: var(--violet); }
.nn-win-ctas { display: flex; gap: 8px; padding: 0 12px 12px; }
.nn-win-ctas .nn-btn { flex: 1 1 0; min-height: 40px; padding-inline: 10px; font-size: 13px; }
.nn-win-ctas .nn-ico { width: 16px; height: 16px; }
.nn-win-nav { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
.nn-win-btn { width: 44px; height: 44px; border-color: rgba(255, 77, 148, .4); background: var(--glass); color: var(--text); border-radius: 50%; }
.nn-win-btn svg:not(.nn-ico) { width: 20px; height: 20px; }
.nn-win-pause.is-paused { color: var(--mint); border-color: rgba(93, 242, 198, .5); }
html[data-color-mode="light"] .nn-win-btn { border-color: rgba(194, 24, 91, .35); }
.nn-windows.is-static .nn-win-nav { display: none; }
@media (max-width: 767px) {
  .nn-hero { min-height: min(70vh, 560px); padding-top: 22px; }
  .nn-hero-sign { font-size: clamp(30px, 9.5vw, 44px); max-width: 100%; }
  .nn-hero-sign-wrap { min-height: 0; }
  .nn-hero-tag { font-size: 12px; max-width: 34ch; }
  .nn-win-ctas { padding-top: 0; }
  .nn-win-nav .nn-win-btn { width: 44px; height: 44px; }
}
/* breathing underglow (N8) on CTAs and the player frame */
.nn-breathe { position: relative; }
.nn-breathe::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--violet)); filter: blur(12px); opacity: .45; animation: nn-breathe 6s ease-in-out infinite alternate; pointer-events: none; }
html[data-color-mode="light"] .nn-breathe::before { opacity: .22; animation: none; }
html.nn-low .nn-breathe::before, .nn-anim.is-off .nn-breathe::before { animation: none; }

/* ================================================================== mint LED ticker (N10) */
.nn-ticker { position: relative; z-index: 2; display: flex; align-items: center; gap: 0; min-height: 42px; margin-top: -1px; border-block: 1px solid rgba(93, 242, 198, .25); background: var(--led-bg); color: var(--led); overflow: hidden; }
.nn-ticker-led { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 var(--gut); border-inline-end: 1px solid rgba(93, 242, 198, .3); font: 600 11px/1 var(--f-text); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; background: var(--led-bg); z-index: 2; }
.nn-ticker-led .nn-ico { width: 14px; height: 14px; filter: drop-shadow(0 0 4px var(--mint-g)); }
.nn-ticker-track { flex: 1 1 auto; min-width: 0; --fx-mq-gap: 36px; --fx-mq-fade: 4%; }
.nn-ticker-list { display: flex; gap: 36px; padding: 0 16px; width: max-content; }
.nn-ticker-list li { flex: none; }
.nn-ticker-list a { display: inline-flex; align-items: center; min-height: 42px; color: var(--led); font: 500 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; text-shadow: 0 0 6px rgba(93, 242, 198, .55);
  -webkit-mask: radial-gradient(circle at center, #000 52%, transparent 66%) 0 0 / 2px 2px; mask: radial-gradient(circle at center, #000 52%, transparent 66%) 0 0 / 2px 2px; }
.nn-ticker-list a:focus-visible { -webkit-mask: none; mask: none; outline-offset: -2px; }
.nn-ticker-track:not([data-fx-mq]) { overflow-x: auto; scrollbar-width: none; }
.nn-ticker-track:not([data-fx-mq])::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .nn-ticker-led span { display: none; } .nn-ticker-led { padding-inline: var(--gut) 10px; } }

/* ================================================================== departures board (N7 split-flap) */
.nn-board-sec .nn-sec-head { align-items: flex-end; }
.nn-board-titles { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.nn-board-titles .nn-hsign { display: inline-flex; align-items: center; gap: 10px; }
.nn-board-titles .nn-hsign .nn-ico { width: .9em; height: .9em; filter: drop-shadow(0 0 6px var(--mint-g)); }
.nn-board-sub { color: var(--dim); font: 500 12px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .14em; }
.nn-board { margin-top: 14px; padding: 6px 6px 8px; border: 1px solid rgba(93, 242, 198, .22); border-radius: 14px; background: linear-gradient(180deg, rgba(11, 9, 21, .9), rgba(6, 5, 11, .96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .35); }
html[data-color-mode="light"] .nn-board { background: #1a1230; border-color: rgba(93, 242, 198, .3); }
.nn-board-cols, .nn-board-row > a { display: grid; grid-template-columns: 52px 96px 156px minmax(0, 1fr) 118px 90px; align-items: center; gap: 12px; }
.nn-board-cols { padding: 6px 12px 8px; color: #8fd9c2; font: 600 10.5px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px dashed rgba(93, 242, 198, .25); }
.nn-board-cols span:nth-child(5), .nn-board-cols span:nth-child(6), .nn-board-views, .nn-board-dur { text-align: end; }
.nn-board-list { display: grid; }
.nn-board-row { --rt: #5df2c6; --rtg: rgba(93, 242, 198, .55); position: relative; border-bottom: 1px dashed rgba(185, 175, 214, .14); }
.nn-board-row:last-child { border-bottom: 0; }
.nn-board-row > a { min-height: 66px; padding: 6px 12px; border-radius: 10px; color: #f5f1ff; transition: background-color .16s; }
.nn-board-row > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nn-board-rank { font: 400 30px/1 var(--f-sign); color: var(--rt); text-shadow: 0 0 6px var(--rtg), 0 0 16px var(--rtg); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html.nn-save .nn-board-rank { font-weight: 700; }
.nn-board-thumb { position: relative; display: block; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--surface-2) var(--nn-ph) center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .08); }
.nn-board-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nn-board-code { font: 600 13px/1.2 var(--f-text); color: #7ff5d4; text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nn-board-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 14px/20px var(--f-text); color: #f5f1ff; overflow-wrap: anywhere; }
.nn-board-views, .nn-board-dur { display: inline-flex; justify-content: flex-end; align-items: center; gap: 5px; color: #b9afd6; font: 500 13px/1 var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nn-board-dur { color: #7ff5d4; text-transform: uppercase; letter-spacing: .04em; }
.nn-board-views .nn-ico { width: 14px; height: 14px; color: var(--violet); }
.nn-board-row.is-top-1 { --rt: #ff6fa8; --rtg: rgba(255, 77, 148, .6); }
.nn-board-row.is-top-2 { --rt: #b9a3ff; --rtg: rgba(162, 131, 255, .6); }
.nn-board-row.is-top-3 { --rt: #5df2c6; --rtg: rgba(93, 242, 198, .6); }
.nn-board-row.is-top > a::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--rt); box-shadow: 0 0 8px var(--rtg); }
/* split-flap tiles */
.nn-flap-w { display: inline-flex; }
.nn-flap-c { display: inline-block; min-width: .55em; text-align: center; transform-origin: 50% 50%; }
.is-flip .nn-flap-c { animation: nn-flap .56s steps(7, end) both; animation-delay: calc(var(--row, 0) * 40ms + var(--c, 0) * 55ms); }
@keyframes nn-flap { 0% { transform: rotateX(-88deg); opacity: .2; } 45% { transform: rotateX(28deg); opacity: 1; } 70% { transform: rotateX(-12deg); } 100% { transform: none; opacity: 1; } }
@media (max-width: 1023px) {
  .nn-board-cols, .nn-board-row > a { grid-template-columns: 40px 96px minmax(0, 1fr) 96px; gap: 10px; }
  .nn-board-cols span:nth-child(3), .nn-board-cols span:nth-child(6), .nn-board-code, .nn-board-dur { display: none; }
  .nn-board-cols span:nth-child(4) { grid-column: 3; }
  .nn-board-rank { font-size: 24px; }
}
@media (max-width: 767px) {
  .nn-board { padding: 2px 2px 4px; }
  .nn-board-cols { display: none; }
  .nn-board-cols, .nn-board-row > a { grid-template-columns: 34px 96px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
  .nn-board-row > a { min-height: 64px; }
  .nn-board-views { grid-column: 3; justify-content: flex-start; font-size: 12px; margin-top: 2px; }
  .nn-board-title { font-size: 13px; line-height: 18px; }
  .nn-board-rank { font-size: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .nn-board-row > a:hover { background: rgba(93, 242, 198, .07); }
  .nn-board-row > a:hover .nn-board-title { color: #fff; text-shadow: 0 0 10px rgba(93, 242, 198, .35); }
}

/* ================================================================== category signs row (home "all categories", label/sort, map) */
.nn-catsigns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nn-catsign { --t: var(--pink); --tg: var(--pink-g); --tc: var(--pink-core); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px; border: 1.5px solid var(--t); border-radius: 12px; color: var(--tc); font-size: 21px; line-height: 1.1; letter-spacing: .02em; box-shadow: inset 0 0 10px var(--tg), 0 0 10px var(--tg); text-shadow: 0 0 6px var(--tg); transition: box-shadow .16s, background-color .16s; }
.nn-catsign small { color: var(--muted); font: 500 12px/1 var(--f-text); text-shadow: none; font-variant-numeric: tabular-nums; }
.nn-catsign[aria-current="page"] { background: rgba(255, 255, 255, .06); }
html[data-color-mode="light"] .nn-catsign { color: var(--t); text-shadow: none; box-shadow: none; background: rgba(255, 255, 255, .75); }
html.nn-save .nn-catsign { font-weight: 700; font-size: 17px; }
@media (max-width: 767px) { .nn-catsign { min-height: 44px; font-size: 18px; padding-inline: 12px; gap: 8px; } }
@media (hover: hover) and (pointer: fine) {
  .nn-catsign:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 14px var(--tg), 0 0 16px var(--tg); }
  html[data-color-mode="light"] .nn-catsign:hover { background: #fff; box-shadow: 0 4px 14px rgba(90, 53, 214, .14); }
}
.nn-sec-body { min-width: 0; }
.nn-rail-track > .nn-card { height: 100%; }
.nn-allcats .nn-sec-head { margin-bottom: 0; }

/* ================================================================== page heads: neon sign H1 + count (category, search, labels, modules) */
.nn-pagehead { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-top: clamp(22px, 4vw, 44px); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.nn-pagehead::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 120px; height: 2px; background: linear-gradient(90deg, var(--pink), transparent); box-shadow: 0 0 8px var(--pink-g); }
html[data-color-mode="light"] .nn-pagehead::after { box-shadow: none; }
.nn-pagesign { margin: 0; max-width: 100%; font-size: clamp(36px, 6vw, 80px); line-height: 1.05; letter-spacing: .01em; overflow-wrap: anywhere; text-wrap: balance; }
.nn-pagesign--text { font-family: var(--f-text); font-weight: 700; font-size: clamp(22px, 3vw, 36px); line-height: 1.2; text-shadow: none; color: var(--text); font-variation-settings: normal; }
.nn-pagehead-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.nn-pagecount { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); font: 500 14px/1.3 var(--f-text); letter-spacing: .04em; text-transform: uppercase; }
.nn-pagecount b { color: var(--mint); font: 400 24px/1 var(--f-sign); text-shadow: 0 0 8px var(--mint-g); font-variant-numeric: tabular-nums; }
html[data-color-mode="light"] .nn-pagecount b { text-shadow: none; }
html.nn-save .nn-pagecount b { font-weight: 700; }
.nn-pagehead .nn-btn { min-height: 40px; }
.nn-pagequery { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 18px; border: 1.5px solid var(--pink); border-radius: 999px; color: var(--pink-core); font: 400 clamp(22px, 3vw, 34px)/1.1 var(--f-sign); text-shadow: 0 0 6px var(--pink-g), 0 0 14px var(--pink-g); box-shadow: inset 0 0 12px rgba(255, 77, 148, .22), 0 0 12px rgba(255, 77, 148, .22); overflow-wrap: anywhere; max-width: 100%; }
html[data-color-mode="light"] .nn-pagequery { color: var(--pink); text-shadow: none; box-shadow: none; background: #fff; }
@media (max-width: 767px) { .nn-pagehead { margin-top: 16px; padding-bottom: 12px; } .nn-pagesign { font-size: clamp(30px, 9vw, 40px); } .nn-pagequery { font-size: 20px; } }

/* label tabs (hot / new / sort / score / up): glass segmented strip with a mint underline */
.nn-tabs { display: flex; gap: 2px; margin-top: 16px; padding: 4px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; }
.nn-tabs::-webkit-scrollbar { display: none; }
.nn-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--muted); font: 600 13px/1 var(--f-text); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .16s, background-color .16s; }
.nn-tabs a[aria-current="page"] { color: var(--text); background: rgba(93, 242, 198, .1); box-shadow: inset 0 -2px 0 var(--mint); }
html[data-color-mode="light"] .nn-tabs a[aria-current="page"] { background: #fff; }
.nn-tabs a:focus-visible { outline-offset: -2px; }

/* filters: category chips, genre chips, glass segmented sort */
.nn-filter { display: grid; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass); }
.nn-frow { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-padding-inline: 12px; }
.nn-frow::-webkit-scrollbar { display: none; }
.nn-frow-label { flex: none; margin-inline-end: 6px; color: var(--dim); font: 600 11px/1 var(--f-text); text-transform: uppercase; letter-spacing: .14em; }
.nn-frow a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--glass-line); border-radius: 999px; color: var(--muted); font: 500 13px/1 var(--f-text); white-space: nowrap; transition: color .16s, border-color .16s, box-shadow .16s, background-color .16s; }
.nn-frow a[aria-current="page"], .nn-frow a.is-on { border-color: var(--pink); background: var(--pink); color: var(--on-pink); box-shadow: 0 0 12px var(--pink-g); }
.nn-frow--sort { gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass-2); width: max-content; max-width: 100%; }
.nn-frow--sort .nn-frow-label { padding-inline-start: 10px; }
.nn-frow--sort a { border: 0; border-radius: 999px; min-height: 36px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.nn-frow--sort a[aria-current="page"], .nn-frow--sort a.is-on { background: rgba(93, 242, 198, .12); color: var(--text); box-shadow: inset 0 -2px 0 var(--mint); }
html[data-color-mode="light"] .nn-frow--sort a[aria-current="page"], html[data-color-mode="light"] .nn-frow--sort a.is-on { background: #fff; }
.nn-filter + .nn-section, .nn-tabs + .nn-section, .nn-pagehead + .nn-section { margin-top: 18px; }
@media (max-width: 767px) { .nn-filter { margin-inline: calc(var(--gut) * -1); border-radius: 0; border-inline: 0; padding-inline: var(--gut); } .nn-frow { -webkit-mask: linear-gradient(90deg, #000 94%, transparent); mask: linear-gradient(90deg, #000 94%, transparent); } [dir="rtl"] .nn-frow { -webkit-mask: linear-gradient(270deg, #000 94%, transparent); mask: linear-gradient(270deg, #000 94%, transparent); } .nn-frow:focus-within { -webkit-mask: none; mask: none; } }

/* rank numerals (hot page 1), "New" tube tag, likes */
.nn-rank { position: absolute; top: 6px; inset-inline-start: 8px; z-index: 4; min-width: 34px; padding: 0 6px; color: var(--pink-core); font: 400 26px/1 var(--f-sign); text-align: center; text-shadow: 0 0 6px var(--pink-g), 0 0 16px var(--pink-g); font-variant-numeric: tabular-nums; }
.nn-card:nth-child(3n+2) .nn-rank { color: var(--violet-core); text-shadow: 0 0 6px var(--violet-g), 0 0 16px var(--violet-g); }
.nn-card:nth-child(3n+3) .nn-rank { color: var(--mint-core); text-shadow: 0 0 6px var(--mint-g), 0 0 16px var(--mint-g); }
html[data-color-mode="light"] .nn-rank { color: #fff; text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .8); }
html.nn-save .nn-rank { font-weight: 700; }
.nn-rank ~ .nn-tag { display: none; }
.nn-newtag { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 4; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1.5px solid var(--mint); border-radius: 6px; background: var(--chip); color: var(--mint); font: 400 13px/1 var(--f-sign); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 8px var(--mint-g); text-shadow: 0 0 6px var(--mint-g); }
html[data-color-mode="light"] .nn-newtag { color: #fff; background: var(--mint); box-shadow: none; text-shadow: none; }
html.nn-save .nn-newtag { font-weight: 700; }
.nn-card-meta .nn-likes .nn-ico { color: var(--pink); }
.nn-card-meta .nn-score-big { color: var(--sodium); font-weight: 700; }

/* pager: glass squares, the current one lit pink */
.nn-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; }
.nn-pager a, .nn-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass); color: var(--text); font: 600 14px/1 var(--f-text); font-variant-numeric: tabular-nums; direction: ltr; transition: border-color .16s, box-shadow .16s, color .16s; }
.nn-pager .is-on { border-color: var(--pink); background: var(--pink); color: var(--on-pink); box-shadow: 0 0 14px var(--pink-g); }
.nn-pager .is-off { opacity: .4; }
.nn-pager .nn-ico { width: 16px; height: 16px; }
.nn-pager .is-prev .nn-ico { transform: scaleX(-1); }
[dir="rtl"] .nn-pager .is-prev .nn-ico { transform: none; }
[dir="rtl"] .nn-pager .is-next .nn-ico { transform: scaleX(-1); }
.nn-pager-total { width: 100%; margin-top: 4px; color: var(--dim); font: 500 12px/1.2 var(--f-text); text-align: center; letter-spacing: .08em; }
.nn-end { margin-top: 18px; color: var(--dim); font: 500 13px/1.4 var(--f-text); text-align: center; letter-spacing: .06em; text-transform: uppercase; }

/* empty state: a hanging neon sign that buzzes */
.nn-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; padding: 44px 20px 36px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); text-align: center; position: relative; overflow: hidden; }
.nn-empty::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 36px; background: linear-gradient(var(--line), var(--muted)); }
.nn-empty-sign { position: relative; display: inline-block; margin-top: 10px; padding: 10px 22px; border: 2px solid var(--violet); border-radius: 14px; color: var(--violet-core); font-size: clamp(24px, 4vw, 40px); line-height: 1.1; text-shadow: 0 0 6px var(--violet-g), 0 0 16px var(--violet-g); box-shadow: inset 0 0 14px var(--violet-g), 0 0 14px var(--violet-g); }
html[data-color-mode="light"] .nn-empty-sign { color: var(--violet); text-shadow: none; box-shadow: none; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .nn-empty-sign { animation: nn-buzz 6s steps(1, end) 1s infinite; } }
.nn-empty p { max-width: 52ch; color: var(--muted); }
.nn-empty .nn-ico { width: 36px; height: 36px; color: var(--pink); }
.nn-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ================================================================== detail ("Cinema at night") */
.nn-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(16px, 3vw, 32px); }
@media (min-width: 1024px) { .nn-detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .nn-detail > .nn-ddesc { grid-column: 1 / -1; } }
.nn-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--surface-2) var(--nn-ph) center / cover no-repeat; isolation: isolate; }
.nn-cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.nn-cover::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .25) 0 1.6px, rgba(255, 255, 255, .05) 2.6px, transparent 3.8px) 0 0 / 61px 67px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .18) 0 2.2px, rgba(255, 255, 255, .04) 3.4px, transparent 4.8px) 17px 23px / 89px 79px,
    linear-gradient(118deg, rgba(255, 255, 255, .08) 0 22%, transparent 22.2%), linear-gradient(180deg, transparent 60%, rgba(7, 6, 12, .5)); }
.nn-cover-wrap { position: relative; }
.nn-cover-wrap::before { content: ""; position: absolute; inset: 6% -2% -4%; z-index: -1; border-radius: 24px; background: linear-gradient(90deg, var(--pink), var(--violet)); filter: blur(26px); opacity: .4; pointer-events: none; }
html[data-color-mode="light"] .nn-cover-wrap::before { opacity: .2; }
.nn-cover .nn-dur { bottom: 10px; inset-inline-end: 10px; }
.nn-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; border: 2px solid var(--pink); border-radius: 50%; background: rgba(7, 6, 12, .55); box-shadow: 0 0 14px var(--pink-g), inset 0 0 10px rgba(255, 77, 148, .3); transform: translate(-50%, -50%); transition: box-shadow .2s, transform .2s; }
.nn-play::after { content: ""; position: absolute; left: 53%; top: 50%; border: 11px solid transparent; border-left: 18px solid var(--pink-core); border-right: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 4px var(--pink-g)); }
html[data-color-mode="light"] .nn-play { background: rgba(255, 255, 255, .8); }
html[data-color-mode="light"] .nn-play::after { border-left-color: var(--pink); filter: none; }
.nn-dinfo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nn-dinfo h1 { font: 700 clamp(22px, 2.6vw, 36px)/1.2 var(--f-text); overflow-wrap: anywhere; }
.nn-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font: 500 13px/1.3 var(--f-text); font-variant-numeric: tabular-nums; }
.nn-stats > span, .nn-stats > a { display: inline-flex; align-items: center; gap: 5px; }
.nn-stats .nn-ico { width: 15px; height: 15px; color: var(--violet); }
.nn-stats .is-score { color: var(--sodium); font-weight: 700; }
.nn-stats .is-score .nn-ico { color: var(--sodium); }
.nn-stats-end { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.nn-mini { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--muted); font: 600 12px/1 var(--f-text); white-space: nowrap; }
.nn-mini .nn-ico { width: 14px; height: 14px; }
.nn-mini.is-warn .nn-ico { color: var(--sodium); }
.nn-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.nn-btn-cta { position: relative; flex: 1 1 220px; min-height: 50px; font-size: 15px; background: var(--pink); border-color: var(--pink); color: var(--on-pink); box-shadow: 0 0 0 1px var(--pink), 0 0 18px var(--pink-g); }
.nn-btn-cta .nn-ico { width: 20px; height: 20px; }
/* actions: glowing tube buttons; favourite heart flickers on + spark ring (N9) */
.nn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nn-acts > a, .nn-acts > button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--text); font: 600 13px/1 var(--f-text); cursor: pointer; transition: border-color .16s, box-shadow .16s, color .16s, background-color .16s; }
.nn-acts .nn-ico { width: 18px; height: 18px; color: var(--violet); transition: color .16s, filter .16s; }
.nn-acts .digg_link.digg_up_on, .nn-acts .digg_link.active { border-color: var(--pink); color: var(--text); }
.nn-acts .digg_link.active .nn-ico { color: var(--pink); }
.nn-acts .mac_ulog .nn-ico { color: var(--pink); }
.nn-acts .mac_ulog.is-on, .nn-acts .mac_ulog.disabled { border-color: var(--pink); color: var(--pink-core); box-shadow: 0 0 12px var(--pink-g); }
html[data-color-mode="light"] .nn-acts .mac_ulog.is-on, html[data-color-mode="light"] .nn-acts .mac_ulog.disabled { color: var(--pink); box-shadow: none; background: #fff; }
.nn-acts .mac_ulog.is-on .nn-ico, .nn-acts .mac_ulog.disabled .nn-ico { --fx-icon-fill: currentColor; color: var(--pink); filter: drop-shadow(0 0 6px var(--pink-g)); animation: nn-heart-flick .6s steps(1, end) both; }
.nn-acts .mac_ulog.is-burst::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--pink); border-radius: 50%; box-shadow: 0 0 10px var(--pink-g); pointer-events: none; animation: nn-spark .8s ease-out both; }
@keyframes nn-heart-flick { 0% { opacity: .3; } 15% { opacity: 1; } 30% { opacity: .4; } 45%, 100% { opacity: 1; } }
.nn-panel { padding: 16px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-hi); }
.nn-panel + .nn-panel { margin-top: 16px; }
.nn-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nn-cap-title { font: 400 22px/1.2 var(--f-sign); letter-spacing: .02em; }
.nn-cap-title a, .nn-cap-title span { display: inline-block; }
html.nn-save .nn-cap-title { font-weight: 700; }
.nn-cap-links { display: flex; align-items: center; gap: 8px; }
/* facts: icon rows (empty rows hidden by the template) */
.nn-meta { display: grid; gap: 8px; }
.nn-meta-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: start; }
.nn-meta dt { display: flex; align-items: center; gap: 6px; min-height: 32px; color: var(--dim); font: 600 12px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.nn-meta dt .nn-ico { width: 15px; height: 15px; color: var(--mint); }
.nn-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: 32px; color: var(--text); font-size: 14px; line-height: 1.5; }
@media (max-width: 767px) { .nn-meta-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .nn-meta dt { min-height: 20px; } }
.nn-desc { color: var(--muted); font-size: 15px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.nn-desc.is-clamped { position: relative; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nn-clamp-btn { margin-top: 8px; padding: 0 4px; border: 0; background: none; }
.nn-ddesc { margin-top: 0; }

/* ================================================================== watch */
.nn-watch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin-top: clamp(10px, 2vw, 24px); }
.nn-watch-main, .nn-side, .nn-watch-wide { min-width: 0; }
.nn-player-frame { position: relative; z-index: 2; }
.nn-player-frame::before { content: ""; position: absolute; inset: 4% -1.5% -3%; z-index: 0; border-radius: 28px; background: linear-gradient(90deg, var(--pink), var(--violet) 60%, var(--mint)); filter: blur(28px); opacity: .55; pointer-events: none; animation: nn-breathe 6s ease-in-out infinite alternate; }
html[data-color-mode="light"] .nn-player-frame::before { opacity: .22; animation: none; }
html.nn-low .nn-player-frame::before, .nn-player-frame.is-off::before { animation: none; }
.nn-player { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 77, 148, .35); background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
.nn-player .MacPlayer { width: 100% !important; height: 100% !important; min-height: 0 !important; }
.nn-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.nn-info { padding-top: 16px; }
.nn-info h1 { font: 700 clamp(22px, 2.6vw, 36px)/1.2 var(--f-text); }
.nn-info h1 .nn-tit { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nn-info .nn-stats { margin-top: 10px; }
.nn-info .nn-acts { margin-top: 14px; }
.nn-playlist { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); }
.nn-plhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.nn-plhead h2 { font: 400 20px/1.2 var(--f-sign); color: var(--text); }
.nn-plhead p { flex: 1 1 200px; min-width: 0; color: var(--dim); font-size: 12px; line-height: 1.4; }
.nn-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nn-sources a, .nn-sources span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--glass-line); border-radius: 999px; color: var(--muted); font: 600 12px/1 var(--f-text); text-transform: uppercase; letter-spacing: .06em; }
.nn-sources .is-on { border-color: var(--mint); color: var(--mint); box-shadow: inset 0 0 8px rgba(93, 242, 198, .18); }
.nn-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.nn-eps a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 10px; overflow: hidden; border: 1px solid var(--glass-line); border-radius: 10px; background: var(--glass-2); color: var(--muted); font: 600 13px/1.2 var(--f-text); white-space: nowrap; text-overflow: ellipsis; transition: border-color .16s, color .16s, box-shadow .16s; }
.nn-eps a[aria-current="page"] { border-color: var(--pink); background: var(--pink); color: var(--on-pink); box-shadow: 0 0 12px var(--pink-g); }
.nn-epnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nn-watch-main > .nn-panel { margin-top: 18px; }
.nn-side { margin-top: 24px; }
.nn-rlist { display: grid; gap: 10px; }
.nn-rcard { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass); color: var(--text); transition: border-color .16s, box-shadow .16s; }
.nn-rthumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--surface-2) var(--nn-ph) center / cover no-repeat; }
.nn-rthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nn-rthumb .nn-dur { bottom: 6px; inset-inline-end: 6px; min-height: 20px; font-size: 11px; }
.nn-rbody { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nn-rtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13.5px/19px var(--f-text); overflow-wrap: anywhere; }
.nn-rtags { display: flex; flex-wrap: wrap; gap: 4px; }
.nn-rtags span { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid rgba(162, 131, 255, .3); color: var(--violet); font: 500 11px/1 var(--f-text); }
html[data-color-mode="dark"] .nn-rtags span { color: #cdbfff; }
.nn-rmeta { display: flex; gap: 10px; color: var(--muted); font: 500 12px/1.2 var(--f-text); font-variant-numeric: tabular-nums; }
.nn-rmeta > span { display: inline-flex; align-items: center; gap: 4px; }
.nn-rmeta .nn-ico { width: 13px; height: 13px; color: var(--violet); }
.nn-watch-wide { margin-top: 10px; }
@media (min-width: 1024px) {
  .nn-watch { grid-template-columns: minmax(0, 1fr) 372px; align-items: start; }
  .nn-side { margin-top: 0; }
  .nn-watch-wide { grid-column: 1 / -1; }
  .nn-watch-main > .nn-player-frame { max-height: calc(100vh - var(--hh) - 140px); }
  .nn-watch-main > .nn-player-frame .nn-player { max-height: calc(100vh - var(--hh) - 140px); aspect-ratio: auto; height: min(calc((100vw - 2 * var(--gut) - 396px) * 9 / 16), calc(100vh - var(--hh) - 140px), 760px); }
}
@media (min-width: 1440px) { .nn-watch { grid-template-columns: minmax(0, 1fr) 400px; } .nn-watch-main > .nn-player-frame .nn-player { height: min(calc((min(100vw, 1504px) - 2 * var(--gut) - 424px) * 9 / 16), calc(100vh - var(--hh) - 140px), 760px); } }
@media (max-width: 767px) {
  .nn-watch { margin-top: 0; }
  .nn-watch-main > .nn-player-frame { margin: 0 calc(var(--gut) * -1); }
  .nn-watch-main > .nn-player-frame::before { inset: 10% 0 0; filter: blur(18px); opacity: .35; }
  .nn-player { border-radius: 0; border-inline: 0; }
  .nn-info h1 { font-size: 18px; line-height: 24px; }
  .nn-info h1 .nn-tit { -webkit-line-clamp: 2; }
  .nn-rcard { grid-template-columns: 128px minmax(0, 1fr); }
  .nn-acts > a, .nn-acts > button { padding-inline: 12px; }
}
@media (max-width: 767px) and (orientation: portrait) and (min-height: 560px) { .nn-watch-main > .nn-player-frame { position: sticky; top: var(--hh); } }
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023px) { .nn-header { position: relative; } .nn-watch-main > .nn-player-frame { position: relative; top: auto; margin: 6px auto 0; width: min(100%, calc((100svh - 14px) * 16 / 9)); } .nn-player { border-radius: 12px; } }

/* ================================================================== comments / guestbook: glass chat bubbles */
.nn-comments { margin-top: 28px; max-width: 980px; }
.nn-cform { padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); }
.nn-cform-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.nn-cform-row > img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--surface-2); }
.nn-cform-fields { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.nn-cform textarea { width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); color: var(--text); font: 400 14px/1.5 var(--f-text); resize: vertical; }
.nn-cform textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.nn-cform textarea::placeholder { color: var(--dim); opacity: 1; }
.nn-send { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--pink); border-radius: 999px; background: var(--pink); color: var(--on-pink); font: 700 13px/1 var(--f-text); letter-spacing: .03em; box-shadow: 0 0 14px var(--pink-g); margin-inline-start: auto; }
html[data-color-mode="light"] .nn-send { box-shadow: none; }
.nn-verify { display: flex; gap: 8px; align-items: center; width: 100%; }
.nn-verify input { flex: 1; min-width: 0; }
.nn-verify img, .mac_verify_img { flex: none; width: 100px; height: 40px; border-radius: 8px; background: #fff; cursor: pointer; border: 1px solid var(--line); }
.nn-verify img[data-src] { background: var(--surface-2); }
.nn-clist { display: grid; gap: 12px; margin-top: 16px; }
.nn-citem { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.nn-citem > img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--surface-2); }
.nn-cbody { position: relative; min-width: 0; padding: 12px 16px; border: 1px solid var(--glass-line); border-radius: 4px 16px 16px 16px; background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-hi); }
[dir="rtl"] .nn-cbody { border-radius: 16px 4px 16px 16px; }
.nn-chead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.nn-chead strong { color: var(--pink); font: 600 13px/1.3 var(--f-text); }
html[data-color-mode="dark"] .nn-chead strong { color: #ff8ab8; }
.nn-chead time { color: var(--dim); font: 500 12px/1.3 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.nn-cbody p { margin-top: 6px; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.nn-creply { margin-top: 10px; padding: 10px 12px; border-inline-start: 2px solid var(--mint); border-radius: 0 10px 10px 0; background: rgba(93, 242, 198, .06); }
[dir="rtl"] .nn-creply { border-radius: 10px 0 0 10px; }
.nn-creply strong { color: var(--mint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.nn-cacts { display: flex; gap: 6px; margin-top: 8px; }
.nn-cacts button { min-height: 32px; padding: 0 12px; border: 1px solid var(--glass-line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px/1 var(--f-text); }
.nn-cpages { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.comment_reply_form, .nn-reply-form { margin-top: 10px; }
.mac_comment > p { color: var(--dim); }
.nn-clist.nn-panel { padding: 12px; }

/* ================================================================== search landing: tube search box, history + hot chips */
.nn-sform { display: flex; align-items: center; gap: 10px; margin-top: clamp(18px, 3vw, 36px); }
.nn-sform .nn-back { display: none; }
.nn-sbox { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border: 1.5px solid rgba(255, 77, 148, .55); border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 10px rgba(255, 77, 148, .14), 0 0 12px rgba(255, 77, 148, .14); }
html[data-color-mode="light"] .nn-sbox { background: #fff; box-shadow: none; }
.nn-sbox > .nn-ico { width: 20px; height: 20px; color: var(--pink); }
.nn-sbox input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; color: var(--text); font: 500 16px/1 var(--f-text); }
.nn-sbox input::placeholder { color: var(--dim); opacity: 1; }
.nn-sbox input:focus-visible { outline: none; }
.nn-sbox:focus-within { border-color: var(--mint); box-shadow: 0 0 0 2px var(--mint), 0 0 16px rgba(93, 242, 198, .28); }
html[data-color-mode="light"] .nn-sbox:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.nn-sform > button { flex: none; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--pink); color: var(--on-pink); font: 700 14px/1 var(--f-text); letter-spacing: .04em; box-shadow: 0 0 14px var(--pink-g); }
.nn-hot { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); }
.nn-hot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.nn-hot-head h2 { font: 400 18px/1.2 var(--f-sign); color: var(--mint); text-shadow: 0 0 8px var(--mint-g); }
html[data-color-mode="light"] .nn-hot-head h2 { text-shadow: none; }
.nn-hot-head button { min-height: 32px; padding: 0 12px; border: 1px solid var(--glass-line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px/1 var(--f-text); }
.nn-hot ul { display: flex; flex-wrap: wrap; gap: 8px; }
.nn-hot li a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 77, 148, .45); border-radius: 999px; color: var(--text); font: 500 13px/1 var(--f-text); transition: border-color .16s, box-shadow .16s; }
.nn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nn-links { margin-top: 28px; }

/* ================================================================== user pages: glass card over a rainy window */
.nn-auth { position: relative; isolation: isolate; margin: clamp(16px, 3vw, 36px) auto 0; padding: clamp(28px, 5vw, 56px) var(--gut); overflow: hidden; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--glass-line);
  --fx-fallback-opacity: 1;
  --fx-fallback: radial-gradient(28% 36% at 16% 24%, rgba(255, 77, 148, .3), transparent 70%), radial-gradient(24% 32% at 84% 20%, rgba(162, 131, 255, .3), transparent 70%), radial-gradient(16% 22% at 66% 72%, rgba(93, 242, 198, .18), transparent 70%), radial-gradient(12% 16% at 34% 80%, rgba(255, 179, 71, .14), transparent 70%), linear-gradient(180deg, #0b0915, #07060c); }
html[data-color-mode="light"] .nn-auth { --fx-fallback: radial-gradient(28% 36% at 16% 24%, rgba(255, 196, 222, .7), transparent 70%), radial-gradient(24% 32% at 84% 20%, rgba(205, 190, 255, .7), transparent 70%), radial-gradient(16% 22% at 66% 72%, rgba(178, 240, 220, .55), transparent 70%), linear-gradient(180deg, #efe9f8, #f5f2fa); }
.nn-auth::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .45; background: radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .22) 0 1.6px, rgba(255, 255, 255, .05) 2.6px, transparent 3.8px) 0 0 / 53px 61px, radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .17) 0 2.2px, rgba(255, 255, 255, .04) 3.4px, transparent 4.8px) 17px 23px / 83px 71px; }
html[data-color-mode="light"] .nn-auth::after { opacity: .3; filter: invert(.5); }
.nn-auth > .fx-canvas { z-index: 0; }
.nn-auth-in { position: relative; z-index: 2; width: 100%; max-width: 440px; margin: 0 auto; padding: 26px 24px 28px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); }
.nn-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.nn-auth-brand .nn-logo { justify-content: center; }
.nn-auth-brand p { color: var(--muted); font-size: 13px; }
.nn-auth h1 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font: 400 clamp(26px, 4vw, 34px)/1.15 var(--f-sign); text-align: center; }
.nn-auth h1 .nn-ico { width: 24px; height: 24px; color: var(--mint); filter: drop-shadow(0 0 6px var(--mint-g)); }
.nn-auth-sub { margin-top: 6px; color: var(--muted); font-size: 13px; text-align: center; }
.nn-form { display: grid; gap: 12px; margin-top: 18px; }
.nn-field { position: relative; display: block; }
.nn-field > .nn-ico { position: absolute; inset-inline-start: 14px; top: 14px; width: 18px; height: 18px; color: var(--violet); pointer-events: none; }
.nn-field > .nn-ico + input { padding-inline-start: 42px; }
.nn-field-label { display: block; margin-bottom: 6px; color: var(--dim); font: 600 11px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .1em; }
.nn-form-links { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.nn-form-links a { color: var(--pink); font-weight: 600; }
html[data-color-mode="dark"] .nn-form-links a { color: #ff8ab8; }
.nn-form-note { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.nn-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.nn-check input, .nn-record input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pink); }
.nn-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); }
.nn-seg a, .nn-seg button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 12.5px/1.3 var(--f-text); text-align: center; }
.nn-seg .is-on { background: rgba(93, 242, 198, .12); color: var(--text); box-shadow: inset 0 -2px 0 var(--mint); }
html[data-color-mode="light"] .nn-seg .is-on { background: #fff; }
/* centre */
.nn-uhero { position: relative; margin-top: clamp(14px, 3vw, 28px); padding: 20px 22px; overflow: hidden; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); }
.nn-uhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 80% at 10% 0, rgba(255, 77, 148, .22), transparent 70%), radial-gradient(36% 70% at 90% 100%, rgba(162, 131, 255, .2), transparent 70%); }
.nn-uhero-in { position: relative; display: flex; align-items: center; gap: 16px; }
.nn-uhero img { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--pink); box-shadow: 0 0 12px var(--pink-g); object-fit: cover; background: var(--surface-2); }
.nn-uhero h1, .nn-uname { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text) !important; font: 400 22px/1.2 var(--f-sign) !important; }
.nn-uhero p { color: var(--muted); font-size: 13px; }
.nn-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border: 1px solid var(--mint); border-radius: 999px; color: var(--mint); font: 600 11px/1 var(--f-text); text-transform: uppercase; letter-spacing: .06em; }
.nn-badge .nn-ico { width: 12px; height: 12px; }
.nn-ustats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nn-ustats div { padding: 12px 8px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass); text-align: center; }
.nn-ustats strong { display: block; color: var(--pink-core); font: 400 24px/1.2 var(--f-sign); text-shadow: 0 0 8px var(--pink-g); direction: ltr; }
html[data-color-mode="light"] .nn-ustats strong { color: var(--pink); text-shadow: none; }
.nn-ustats span { color: var(--dim); font: 600 11px/1.3 var(--f-text); text-transform: uppercase; letter-spacing: .08em; }
.nn-upgrade { position: relative; display: block; margin-top: 12px; padding: 14px 18px; overflow: hidden; border: 1.5px solid var(--violet); border-radius: 16px; background: rgba(162, 131, 255, .08); color: var(--text); box-shadow: inset 0 0 14px rgba(162, 131, 255, .14); }
.nn-upgrade strong { display: block; color: var(--violet-core); font: 400 20px/1.2 var(--f-sign); text-shadow: 0 0 8px var(--violet-g); }
html[data-color-mode="light"] .nn-upgrade strong { color: var(--violet); text-shadow: none; }
.nn-upgrade span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.nn-ulayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.nn-ulayout > * { min-width: 0; }
.nn-umenu { display: flex; flex-wrap: wrap; gap: 8px; }
.nn-umenu a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--muted); font: 600 13px/1 var(--f-text); white-space: nowrap; transition: color .16s, border-color .16s, box-shadow .16s; }
.nn-umenu a .nn-ico { width: 16px; height: 16px; color: var(--violet); }
.nn-umenu a[aria-current="page"] { border-color: var(--pink); color: var(--text); box-shadow: inset 0 0 10px rgba(255, 77, 148, .18), 0 0 10px rgba(255, 77, 148, .22); }
.nn-umenu a[aria-current="page"] .nn-ico { color: var(--pink); }
@media (max-width: 1023px) { .nn-umenu.is-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .nn-umenu.is-strip::-webkit-scrollbar { display: none; } }
.nn-upanel { padding: 18px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-hi); }
.nn-upanel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nn-upanel-head h1, .nn-upanel-head h2 { font: 400 24px/1.2 var(--f-sign); color: var(--text); }
.nn-kv { display: grid; gap: 0; }
.nn-kv > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.nn-kv > div:last-child { border-bottom: 0; }
.nn-kv dt, .nn-kv .k { color: var(--dim); font: 600 12px/1.5 var(--f-text); text-transform: uppercase; letter-spacing: .08em; }
.nn-kv dd, .nn-kv .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.nn-table-wrap { overflow-x: auto; }
.nn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nn-table th, .nn-table td { padding: 10px 8px; border-bottom: 1px dashed var(--line); text-align: start; vertical-align: middle; }
.nn-table th { color: var(--dim); font: 600 11px/1.3 var(--f-text); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.nn-table td { color: var(--text); font-variant-numeric: tabular-nums; }
.nn-table td a { color: var(--pink); font-weight: 600; }
.nn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nn-toolbar .nn-btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.nn-records { display: grid; gap: 10px; }
.nn-record { display: flex; align-items: center; gap: 10px; }
.nn-record input[type="checkbox"] { flex: none; }
.nn-record .nn-rcard { flex: 1; }
.nn-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nn-plan { padding: 16px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass-2); }
.nn-plan h3 { color: var(--pink-core); font: 400 20px/1.2 var(--f-sign); text-shadow: 0 0 8px var(--pink-g); }
html[data-color-mode="light"] .nn-plan h3 { color: var(--pink); text-shadow: none; }
.nn-plan ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nn-avatar-row { display: flex; align-items: center; gap: 12px; }
.nn-avatar-row img { border: 2px solid var(--pink); box-shadow: 0 0 10px var(--pink-g); }
.nn-user-link { position: relative; }

/* ================================================================== state pages (404, jump, message, access) */
.nn-state { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; margin: clamp(24px, 5vw, 56px) auto 0; padding: 36px 22px 32px; border: 1px solid var(--glass-line); border-radius: 22px; background: var(--glass); text-align: center; box-shadow: inset 0 1px 0 var(--glass-hi); overflow: hidden; }
.nn-state::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 15% 0, rgba(255, 77, 148, .18), transparent 70%), radial-gradient(40% 50% at 85% 100%, rgba(162, 131, 255, .16), transparent 70%); }
.nn-state > * { position: relative; }
.nn-state h1 { font: 700 clamp(20px, 3vw, 26px)/1.3 var(--f-text); }
.nn-state p { color: var(--muted); max-width: 52ch; }
.nn-state .nn-msg { color: var(--text); font-size: 16px; }
.nn-state form { display: flex; width: 100%; max-width: 440px; gap: 8px; }
.nn-state form .nn-input { flex: 1; min-width: 0; }
.nn-state form .nn-btn { flex: none; }
.nn-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nn-state-ico { width: 68px; height: 68px; padding: 16px; border: 1.5px solid var(--pink); border-radius: 50%; color: var(--pink-core); box-shadow: 0 0 14px var(--pink-g), inset 0 0 12px rgba(255, 77, 148, .2); }
html[data-color-mode="light"] .nn-state-ico { color: var(--pink); box-shadow: none; background: #fff; }
.nn-state-code { display: inline-flex; gap: .04em; font: 400 clamp(84px, 16vw, 150px)/1 var(--f-sign); letter-spacing: .02em; }
.nn-state-code span { color: var(--pink-core); text-shadow: 0 0 6px var(--pink-g), 0 0 18px var(--pink-g), 0 0 40px var(--pink-g); }
.nn-state-code span.is-broken { color: var(--pink-off); text-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .nn-state-code span.is-broken { animation: nn-broken 4.2s steps(1, end) infinite; } }
@keyframes nn-broken { 0%, 100% { color: var(--pink-off); text-shadow: none; } 6% { color: var(--pink-core); text-shadow: 0 0 6px var(--pink-g), 0 0 18px var(--pink-g); } 9% { color: var(--pink-off); text-shadow: none; } 11% { color: var(--pink-core); text-shadow: 0 0 6px var(--pink-g), 0 0 18px var(--pink-g); } 14%, 51% { color: var(--pink-off); text-shadow: none; } 53% { color: var(--pink-core); text-shadow: 0 0 6px var(--pink-g), 0 0 18px var(--pink-g); } 57% { color: var(--pink-off); text-shadow: none; } }
html[data-color-mode="light"] .nn-state-code span { color: var(--pink); text-shadow: 1px 1px 0 rgba(90, 53, 214, .34); }
html[data-color-mode="light"] .nn-state-code span.is-broken { color: #d9a9bf; text-shadow: none; }
.nn-state-sub { color: var(--mint) !important; font: 400 clamp(18px, 2.5vw, 24px)/1.2 var(--f-sign) !important; text-shadow: 0 0 8px var(--mint-g); }
html[data-color-mode="light"] .nn-state-sub { text-shadow: none; }
.nn-jump-sign { font: 400 clamp(26px, 4vw, 38px)/1.1 var(--f-sign); color: var(--pink-core); text-shadow: 0 0 6px var(--pink-g), 0 0 16px var(--pink-g); }
html[data-color-mode="light"] .nn-jump-sign { color: var(--pink); text-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .nn-jump-sign { animation: nn-buzz 3s steps(1, end) infinite; } }
.nn-tube-bar { position: relative; width: 100%; max-width: 360px; height: 10px; border: 1px solid rgba(93, 242, 198, .45); border-radius: 999px; overflow: hidden; background: var(--glass-2); }
.nn-tube-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mint); box-shadow: 0 0 10px var(--mint-g); animation: nn-fill var(--wait, 3s) linear forwards; }
@keyframes nn-fill { to { width: 100%; } }
.nn-standalone { display: grid; min-height: 100vh; place-items: center; padding: 20px; }

/* ================================================================== modules: performers, collections, articles, map board */
.nn-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; margin-top: 18px; }
@media (min-width: 768px) { .nn-people { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nn-people { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.nn-person { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-align: center; border-radius: 12px; }
.nn-person-pic { position: relative; display: block; width: 84px; height: 84px; padding: 3px; border-radius: 50%; border: 1.5px solid var(--pink); box-shadow: 0 0 12px var(--pink-g), inset 0 0 8px rgba(255, 77, 148, .25); }
.nn-person-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.nn-person > span:last-child { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/1.3 var(--f-text); }
.nn-arts { display: grid; gap: 10px; margin-top: 18px; }
.nn-art { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass); color: var(--text); }
.nn-art img { flex: none; width: 120px; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: var(--surface-2) var(--nn-ph) center / cover no-repeat; }
.nn-art h2, .nn-art h3 { font: 600 15px/1.45 var(--f-text); }
.nn-art p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.nn-article { margin-top: 18px; padding: 22px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); color: var(--muted); line-height: 1.8; }
.nn-article h1 { color: var(--text); font: 700 clamp(22px, 3vw, 30px)/1.3 var(--f-text); }
.nn-article img { max-width: 100%; height: auto; border-radius: 10px; }
.nn-mapboard .nn-board-cols, .nn-mapboard .nn-board-row > a { grid-template-columns: 76px 156px minmax(0, 1fr); }
.nn-mapboard .nn-board-row > a { min-height: 50px; padding-block: 4px; }
.nn-mapboard .nn-board-time { color: #7ff5d4; font: 600 13px/1.2 var(--f-text); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nn-mapboard .nn-board-title { -webkit-line-clamp: 1; }
@media (max-width: 767px) { .nn-mapboard .nn-board-cols, .nn-mapboard .nn-board-row > a { grid-template-columns: 56px minmax(0, 1fr); } .nn-mapboard .nn-board-code { display: none; } .nn-mapboard .nn-board-title { -webkit-line-clamp: 2; } }
.nn-maplist { display: none; }

/* ================================================================== shared TemplateUI dialogs / toasts follow the theme */
.tui-dialog, .tui-notice { --tui-accent: var(--pink); --tui-accent-hover: var(--pink-hover); --tui-focus: var(--focus); }

/* ================================================================== hover (fine pointers only) for the page components */
@media (hover: hover) and (pointer: fine) {
  .nn-tabs a:hover, .nn-frow a:hover, .nn-umenu a:hover, .nn-sources a:hover, .nn-cacts button:hover, .nn-hot-head button:hover { color: var(--text); border-color: var(--pink); }
  .nn-frow--sort a:hover { border-color: transparent; background: rgba(255, 77, 148, .1); }
  .nn-pager a:hover { border-color: var(--pink); box-shadow: 0 0 10px var(--pink-g); }
  .nn-eps a:hover { border-color: var(--pink); color: var(--text); }
  .nn-rcard:hover { border-color: rgba(255, 77, 148, .6); box-shadow: 0 0 12px rgba(255, 77, 148, .25); }
  .nn-rcard:hover .nn-rtitle { color: var(--text); }
  .nn-acts > a:hover, .nn-acts > button:hover { border-color: var(--pink); box-shadow: 0 0 12px rgba(255, 77, 148, .3); }
  .nn-acts > a:hover .nn-ico, .nn-acts > button:hover .nn-ico { filter: drop-shadow(0 0 6px currentColor); }
  .nn-hot li a:hover { border-color: var(--pink); box-shadow: 0 0 10px rgba(255, 77, 148, .3); }
  .nn-person:hover .nn-person-pic { box-shadow: 0 0 18px var(--pink-g), inset 0 0 8px rgba(255, 77, 148, .3); }
  .nn-person:hover span:last-child { color: var(--pink); }
  html[data-color-mode="dark"] .nn-person:hover span:last-child { color: #ff8ab8; }
  .nn-art:hover { border-color: rgba(255, 77, 148, .6); }
  .nn-art:hover h2 { color: var(--pink); }
  html[data-color-mode="dark"] .nn-art:hover h2 { color: #ff8ab8; }
  .nn-cover:hover .nn-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 22px var(--pink-g), inset 0 0 12px rgba(255, 77, 148, .4); }
  .nn-mini:hover { color: var(--text); border-color: var(--pink); }
  .nn-sform > button:hover, .nn-send:hover, .nn-btn-cta:hover { background: var(--pink-hover); color: var(--on-pink); }
  .nn-table td a:hover { text-decoration: underline; }
  .nn-form-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ================================================================== 2026-10-12 verification fixes (phone overflow, focus rings, tap targets) */
.nn-filter > * { min-width: 0; }
.nn-frow { min-width: 0; max-width: 100%; }
.nn-frow:not(.nn-frow--sort) { padding: 6px; margin: -4px; }
.nn-frow--sort a:focus-visible { outline-offset: -2px; }
.nn-rail [data-fx-rail-track] { padding-inline: 6px; margin-inline: -6px; }
.nn-hsign a:focus-visible, .nn-vsign a:focus-visible { outline-offset: 0; }
.nn-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; border-radius: 999px; }
.nn-search:focus-within { border-color: var(--focus); box-shadow: 0 0 16px rgba(93, 242, 198, .28); }
.nn-sbox input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 999px; }
.nn-sbox:focus-within, html[data-color-mode="light"] .nn-sbox:focus-within { border-color: var(--focus); box-shadow: 0 0 16px rgba(93, 242, 198, .2); }
html[data-color-mode="light"] .nn-ticker, html[data-color-mode="light"] .nn-board { --focus: #5df2c6; }
@media (max-width: 767px) {
  .nn-frow a, .nn-frow--sort a, .nn-seg a, .nn-seg button, .nn-mini, a.nn-chip, button.nn-chip, .nn-tabs a { min-height: 40px; }
  .nn-form-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .nn-ticker-list a { min-width: 40px; justify-content: center; }
}
.nn-filter { grid-template-columns: minmax(0, 1fr); }
.nn-eps a[aria-current="page"]:hover, .nn-eps a[aria-current="page"]:active { color: var(--on-pink); }
html[data-color-mode="light"] .nn-rank { background: rgba(21, 14, 36, .8); border-radius: 10px; line-height: 36px; text-shadow: none; }
@media (max-width: 767px) { .nn-hsign a { display: inline-flex; align-items: center; min-height: 40px; } }
@media (max-width: 767px) { .nn-dinfo h1 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } }
.nn-sbox { min-width: 0; }
@media (max-width: 420px) { .nn-sform > button { padding: 0 16px; } .nn-sbox { padding: 0 12px; } }

/* ================================================================== 2026-10-12 repair round (REVIEW-neon-modern A4, C, E) */
/* A4: phones keep the breathing underglow static and unblurred (a 12-28 px blur re-rasterised while its opacity animated) */
@media (max-width: 767px) {
  .nn-breathe::before { filter: none; animation: none; opacity: .3; }
  .nn-player-frame::before { filter: none; animation: none; opacity: .45; inset: 6% 0 -5%; border-radius: 40px; background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--pink) 0%, var(--violet) 48%, transparent 100%); }
  .nn-watch-main > .nn-player-frame::before { filter: none; animation: none; opacity: .45; inset: 8% 0 -4%; border-radius: 40px; background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--pink) 0%, var(--violet) 48%, transparent 100%); }
  html[data-color-mode="light"] .nn-player-frame::before { opacity: .2; }
}
/* A5 (phones): the step-print ghosts are hover-only, so touch devices do not build their 2 x 68 blend-mode layers; the card glow ring exists only while it is lit (tap / focus) */
@media (hover: none) {
  .nn-ghost { display: none; }
  .nn-card::after { content: none; }
  .nn-card:focus-within::after, .nn-card.is-tap::after { content: ""; }
}
/* A5 (phones): card skeletons are static (the kit pauses off-screen shimmers, but 56 paused translate animations on ::before still hold compositor layers); the hero windows keep the shimmer */
@media (max-width: 767px) {
  .nn-shot[data-fx~="skeleton"]::before { animation: none; }
}
/* C: the lit filter chip keeps its on-pink ink on hover/active (the generic chip hover set color: var(--text)) */
@media (hover: hover) and (pointer: fine) {
  .nn-frow:not(.nn-frow--sort) a.is-on:hover, .nn-frow:not(.nn-frow--sort) a[aria-current="page"]:hover, .nn-frow:not(.nn-frow--sort) a.is-on:active, .nn-frow:not(.nn-frow--sort) a[aria-current="page"]:active { color: var(--on-pink); }
}
/* E: CTAs on the centred shop window only (concept 7.5); hover or keyboard focus reveals a window's own; phones keep them on every window of the swipe strip */
@media (min-width: 1024px) {
  .nn-windows.is-embla .nn-win-ctas { transition: opacity .16s; }
  .nn-windows.is-embla .nn-win:not(.is-centre):not(:focus-within):not(:hover) .nn-win-ctas { opacity: 0; pointer-events: none; }
}