/* =====================================================
   ASIA.COM.GE — premium streaming UI (2026)
   Visual layer loaded after the legacy stylesheets.
   Every new component is prefixed with .nx-
===================================================== */

:root {
    /* design tokens */
    --bg: #07070D;
    --bg-secondary: #090A12;
    --surface: #10111A;
    --surface-hover: #141522;
    --surface-2: #141522;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .13);
    --text: #F5F5F8;
    --text-2: #C4C6D4;
    --text-muted: #8E91A3;
    --text-faint: #666A7C;

    --accent: #B78CFF;
    --accent-2: #A678F5;
    --accent-light: #D1B5FF;
    --accent-dark: #6E4BC1;
    --accent-soft: rgba(183, 140, 255, .13);
    --accent-border: rgba(183, 140, 255, .42);
    --accent-glow: rgba(183, 140, 255, .20);
    --btn-grad: linear-gradient(135deg, #B28AF8 0%, #8660E0 100%);
    --gold: #F5B83D;

    --shadow: 0 14px 34px rgba(0, 0, 0, .5);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 220ms cubic-bezier(.22, 1, .36, 1);

    --header-bg: rgba(7, 7, 13, .86);
    --badge-bg: rgba(7, 7, 13, .74);
    --font: "NxSite", "Noto Sans Georgian", "Inter", "BPG Arial", "Sylfaen", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1460px;
    --pad: 28px;
    --header-h: 58px;
}

/* Light look (the legacy toggle adds .darken) */
.darken {
    --bg: #F4F3F9;
    --bg-secondary: #FFFFFF;
    --surface: #FFFFFF;
    --surface-hover: #F6F1FF;
    --surface-2: #FAF8FF;
    --border: rgba(20, 16, 40, .10);
    --border-strong: rgba(20, 16, 40, .17);
    --text: #15141D;
    --text-2: #3F4050;
    --text-muted: #696C7E;
    --text-faint: #8D90A0;
    --accent: #7E57D6;
    --accent-2: #7450CC;
    --accent-light: #6E4BC1;
    --accent-soft: rgba(126, 87, 214, .10);
    --accent-border: rgba(126, 87, 214, .40);
    --accent-glow: rgba(126, 87, 214, .16);
    --shadow: 0 14px 30px rgba(30, 24, 60, .12);
    --header-bg: rgba(255, 255, 255, .88);
}

/* ---------- base ---------- */

body {
    background: var(--bg) !important;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.nx, .nx *, .nx *::before, .nx *::after { box-sizing: border-box; }

.nx { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); }
.nx a { color: inherit; text-decoration: none; }
.nx img { display: block; max-width: 100%; border: 0; }
.nx ul, .nx ol { list-style: none; margin: 0; padding: 0; }
.nx h1, .nx h2, .nx h3 { margin: 0; font-family: var(--font); letter-spacing: 0; }
.nx button { font-family: inherit; cursor: pointer; }
.nx :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nx-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.nx-i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nx-i-fill { fill: currentColor; stroke: none; }
.nx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- buttons ---------- */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.nx-btn-primary {
    background: var(--btn-grad);
    color: #fff !important;
    box-shadow: 0 6px 22px rgba(134, 96, 224, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.nx-btn-primary:hover { filter: brightness(1.09); box-shadow: 0 8px 26px rgba(134, 96, 224, .46), inset 0 1px 0 rgba(255, 255, 255, .22); }
.nx-btn-primary:active { transform: translateY(1px); }

.nx-btn-ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #F5F5F8 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nx-btn-ghost:hover { border-color: var(--accent-border); background: rgba(183, 140, 255, .14); }

.nx-btn-sm { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; }

.nx-btn-line {
    height: 32px;
    padding: 0 14px;
    border-color: var(--border-strong);
    border-radius: 9px;
    background: transparent;
    color: var(--text-2) !important;
    font-size: 12.5px;
    font-weight: 500;
}

.nx-btn-line:hover { color: var(--accent-light) !important; border-color: var(--accent-border); background: var(--accent-soft); }

/* =====================================================
   HEADER
===================================================== */

.nx-header {
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
    height: var(--header-h);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nx-header-in { display: flex; align-items: center; gap: 26px; height: 100%; }

.nx-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--text) !important;
}

.nx-logo svg { width: 32px; height: 32px; flex: 0 0 auto; }
.nx-logo b { font-weight: 800; font-style: italic; color: var(--accent); }

.nx-nav > ul { display: flex; align-items: center; gap: 2px; }
.nx-nav > ul > li { position: relative; }

.nx-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    transition: color var(--transition), background-color var(--transition), text-shadow var(--transition);
}

.nx-nav > ul > li > a .nx-i { width: 13px; height: 13px; opacity: .7; transition: transform var(--transition); }
.nx-nav > ul > li:hover > a, .nx-nav > ul > li:focus-within > a { color: var(--accent-light); text-shadow: 0 0 18px var(--accent-glow); }
.nx-nav > ul > li:hover > a .nx-i, .nx-nav > ul > li:focus-within > a .nx-i { transform: rotate(180deg); }
.nx-nav > ul > li > a.is-active { color: var(--accent); }

.nx-sub {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    min-width: 210px;
    padding-top: 11px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nx-has-sub:hover > .nx-sub, .nx-has-sub:focus-within > .nx-sub { opacity: 1; visibility: visible; transform: none; }

.nx-sub > ul {
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.nx-sub-wide { min-width: 520px; }
.nx-sub-wide > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }

.nx-sub li ul { display: contents; }

.nx-sub a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-2) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition), background-color var(--transition);
}

.nx-sub a:hover, .nx-sub .cat-men-1 > a { color: var(--accent-light) !important; background: var(--accent-soft); }

.nx-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.nx-search {
    display: flex;
    align-items: center;
    width: 270px;
    height: 38px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.darken .nx-search { background: rgba(20, 16, 40, .04); }
.nx-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }

.nx-search button { display: grid; place-items: center; width: 40px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; background: none; color: var(--text-muted); }

.nx-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 14px 0 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
}

.nx-search input::placeholder { color: var(--text-muted); opacity: 1; }

/* ---------- form fields inside pill wrappers ----------
   The wrapper draws the border and the focus ring; the field itself stays invisible. */

.nx-search input,
.nx-newsbox input,
.nx-search input:focus,
.nx-newsbox input:focus,
.nx-search input:focus-visible,
.nx-newsbox input:focus-visible {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.nx-search input:-webkit-autofill,
.nx-newsbox input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 99999s ease-out 0s;
}

.nx-search button:focus-visible,
.nx-newsbox button:focus-visible { outline-offset: -2px; border-radius: 50%; }

.nx-iconbtn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2) !important;
    transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.nx-iconbtn:hover { color: var(--accent-light) !important; border-color: var(--accent-border); background: var(--accent-soft); }

.nx-auth {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--text) !important;
    font-size: 13px;
    font-weight: 600;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-auth:hover { border-color: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
.nx-auth .nx-i { width: 16px; height: 16px; color: var(--accent); }
.nx-auth-user { padding: 0 12px 0 3px; }
.nx-auth img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

.nx-burger, .nx-search-m { display: none; }

/* =====================================================
   HERO
===================================================== */

.nx-hero {
    position: relative;
    width: calc(100% - 2 * var(--pad));
    max-width: calc(var(--wrap) - 2 * var(--pad));
    height: 388px;
    margin: 16px auto 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #07070D;
    isolation: isolate;
}

.nx-slides { position: absolute; inset: 0; }

.nx-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms ease-out, visibility 0s linear 600ms;
}

.nx-slide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms ease-out, visibility 0s; }

.nx-slide-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.nx-slide::before, .nx-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.nx-slide::before {
    background:
        linear-gradient(90deg, #07070D 0%, #07070D 28%, rgba(7, 7, 13, .74) 42%, rgba(7, 7, 13, .12) 62%, rgba(7, 7, 13, .06) 84%, rgba(7, 7, 13, .5) 100%),
        radial-gradient(ellipse 46% 80% at 34% 60%, rgba(110, 75, 193, .30) 0%, transparent 70%);
}

.nx-slide::after { background: linear-gradient(0deg, #07070D 0%, rgba(7, 7, 13, .45) 20%, transparent 48%); }

.nx-slide-in { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }

.nx-slide-body { width: 100%; max-width: 520px; padding: 0 0 8px 36px; color: #F5F5F8; }

.nx-slide.is-active .nx-slide-body > * { animation: nx-rise 420ms ease-out both; }
.nx-slide.is-active .nx-slide-body > *:nth-child(2) { animation-delay: 50ms; }
.nx-slide.is-active .nx-slide-body > *:nth-child(3) { animation-delay: 100ms; }
.nx-slide.is-active .nx-slide-body > *:nth-child(4) { animation-delay: 150ms; }
.nx-slide.is-active .nx-slide-body > *:nth-child(5) { animation-delay: 200ms; }

@keyframes nx-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

.nx-hero-orig {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.nx-hero-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -.01em !important;
    color: #F5F5F8;
}

.nx-hero-title a { color: #F5F5F8 !important; }

.nx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }

.nx-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    font-size: 11.5px;
    font-weight: 500;
    color: #DCDDE8;
    white-space: nowrap;
}

.nx-hero-meta > span.nx-age { font-weight: 700; color: #fff; }

.nx-hero-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 440px;
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #BFC1D0;
}

.nx-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.nx-fav .favmod-unset { display: none; }
.nx-fav.active .favmod-add { display: none; }
.nx-fav.active .favmod-unset { display: inline-flex; }
.nx-fav .favmod-add, .nx-fav .favmod-unset { align-items: center; gap: 9px; }

.nx-hero-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(7, 7, 13, .62);
    color: #F5F5F8;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color var(--transition), border-color var(--transition);
}

.nx-hero-arrow:hover { background: var(--accent-dark); border-color: var(--accent); }
.nx-hero-prev { left: 12px; }
.nx-hero-next { right: 12px; }

.nx-hero-nav {
    position: absolute;
    z-index: 3;
    right: 64px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nx-hero-thumbs { display: flex; gap: 8px; }

.nx-hero-thumbs button {
    width: 78px;
    height: 46px;
    padding: 0;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: #10111A;
    opacity: .72;
    transition: border-color var(--transition), opacity var(--transition), box-shadow var(--transition);
}

.nx-hero-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.nx-hero-thumbs button:hover { opacity: 1; }
.nx-hero-thumbs button.is-active { border-color: var(--accent); opacity: 1; box-shadow: 0 0 16px var(--accent-glow); }

.nx-hero-count {
    min-width: 46px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: rgba(7, 7, 13, .7);
    color: #DCDDE8;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* =====================================================
   QUICK CATEGORY NAVIGATION
===================================================== */

.nx-main { width: 100%; padding-bottom: 8px; }

.nx-quick {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.nx-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 88px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    color: var(--text) !important;
    font-size: 13px;
    font-weight: 600;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.nx-quick .nx-i { width: 28px; height: 28px; color: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.nx-quick a:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 1px var(--accent-soft); }

/* =====================================================
   SECTIONS
===================================================== */

.nx-section { margin-top: 30px; }

.nx-section-head { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }

.nx-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--text);
}

.nx-section-title > .nx-i { width: 24px; height: 24px; color: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.nx-section-title a { color: inherit !important; }

.nx-pill-new {
    display: inline-grid;
    place-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--btn-grad);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
}

.nx-tabs { display: flex; align-items: center; gap: 4px; margin-left: 8%; }

.nx-tabs button {
    height: 28px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.nx-tabs button:hover { color: var(--text); }
.nx-tabs button.is-active { background: var(--btn-grad); color: #fff; box-shadow: 0 4px 14px rgba(134, 96, 224, .3); }

.nx-section-head .nx-btn-line { margin-left: auto; }
.nx-btn-line .nx-i { width: 14px; height: 14px; transition: transform var(--transition); }
.nx-btn-line:hover .nx-i { transform: translateX(3px); }

.nx-pane[hidden] { display: none; }

/* ---------- carousel ---------- */

.nx-carousel { position: relative; }

.nx-row {
    --cols: 7;
    --gap: 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    gap: var(--gap);
    padding: 6px 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.nx-row::-webkit-scrollbar { display: none; }
.nx-row > * { scroll-snap-align: start; min-width: 0; }
.nx-row-4 { --cols: 4; }
.nx-row-8 { --cols: 8; }

.nx-arrow {
    position: absolute;
    z-index: 5;
    top: 40%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    background: rgba(7, 7, 13, .84);
    color: #F5F5F8;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity var(--transition), visibility var(--transition), background-color var(--transition), border-color var(--transition);
}

.nx-arrow.is-on { opacity: 1; visibility: visible; }
.nx-arrow:hover { background: var(--accent-dark); border-color: var(--accent); }
.nx-arrow-prev { left: -14px; }
.nx-arrow-next { right: -14px; }

/* =====================================================
   MOVIE CARD
===================================================== */

.nx-card { position: relative; min-width: 0; }

.nx-card-media {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-card-link { position: absolute; inset: 0; display: block; }
.nx-card-link img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition); }

.nx-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 7, 13, .86) 0%, rgba(7, 7, 13, .1) 34%, transparent 55%);
    pointer-events: none;
}

.nx-card:hover .nx-card-media {
    transform: scale(1.035);
    border-color: var(--accent-border);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5), 0 0 22px var(--accent-glow);
}

.nx-card:hover .nx-card-link img { filter: brightness(1.1); }

.nx-badge {
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 7px;
    display: inline-grid;
    place-items: center;
    height: 19px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 5px;
    background: var(--badge-bg);
    color: #F5F5F8;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.nx-badge.is-new { border-color: transparent; background: var(--btn-grad); color: #fff; }

.nx-card-foot {
    position: absolute;
    z-index: 2;
    left: 9px;
    right: 9px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #F5F5F8;
    font-size: 11.5px;
    font-weight: 600;
    pointer-events: none;
}

.nx-card-foot .nx-i { width: 12px; height: 12px; color: var(--gold); }
.nx-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
.nx-card-foot span[hidden] { display: none; }
.nx-card-foot .nx-rate b { font-size: 12.5px; font-weight: 700; }
.nx-card-foot .nx-eps { margin-left: auto; font-size: 11px; font-weight: 600; color: #DCDDE8; }

.nx-card-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--btn-grad);
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -42%) scale(.9);
    box-shadow: 0 6px 20px rgba(134, 96, 224, .45);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}

.nx-card-play .nx-i { width: 17px; height: 17px; margin-left: 2px; }
.nx-card:hover .nx-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.nx-card-edit {
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 7px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--badge-bg);
    color: #fff !important;
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--transition);
}

.nx-card:hover .nx-card-edit { opacity: 1; }

.nx-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text) !important;
    transition: color var(--transition);
}

.nx-card:hover .nx-card-title { color: var(--accent-light) !important; }

.nx-card-sub {
    margin-top: 3px;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =====================================================
   CARD INFO POPOVER (never intercepts the pointer)
===================================================== */

.nx-tip {
    position: fixed;
    z-index: 880;
    top: 0;
    left: 0;
    width: 372px;
    border: 1px solid rgba(183, 140, 255, .26);
    border-radius: 16px;
    background: #131424;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .7), 0 0 44px rgba(183, 140, 255, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(.98);
    pointer-events: none;
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
}

.darken .nx-tip { background: #FFFFFF; box-shadow: 0 26px 60px rgba(30, 24, 60, .22), 0 0 44px rgba(126, 87, 214, .12); }
.nx-tip.is-left { transform: translateX(8px) scale(.98); }
.nx-tip.is-on { opacity: 1; visibility: visible; transform: none; }

.nx-tip::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--nx-tip-arrow, 50%);
    left: -7px;
    width: 12px;
    height: 12px;
    border-left: 1px solid rgba(183, 140, 255, .26);
    border-bottom: 1px solid rgba(183, 140, 255, .26);
    background: #131424;
    transform: translateY(-50%) rotate(45deg);
}

.darken .nx-tip::before { background: #FFFFFF; }
.nx-tip.is-left::before { left: auto; right: -7px; border: 0; border-top: 1px solid rgba(183, 140, 255, .26); border-right: 1px solid rgba(183, 140, 255, .26); }

/* artwork / trailer */
.nx-tip-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 15px 15px 0 0; background: #0B0B14; }
.nx-tip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: opacity 400ms ease-out; }
.nx-tip-media iframe { position: absolute; top: 50%; left: 50%; width: 134%; height: 134%; border: 0; opacity: 0; transform: translate(-50%, -50%); transition: opacity 500ms ease-out; }
.nx-tip-media.is-playing iframe { opacity: 1; }
.nx-tip-media.is-playing img { opacity: 0; }
.darken .nx-tip-media { border-bottom-color: rgba(20, 16, 40, .10); }

.nx-tip-tag {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 6px;
    background: rgba(7, 7, 13, .72);
    color: #F5F5F8;
    font-size: 10.5px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nx-tip-tag[hidden] { display: none; }
.nx-tip-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FF4D6D; box-shadow: 0 0 8px #FF4D6D; }

/* text */
.nx-tip-body { position: relative; padding: 14px 18px 18px; background: inherit; border-radius: 0 0 15px 15px; }
.nx-tip-head b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--text); }
.nx-tip-head i { display: block; margin-top: 2px; overflow: hidden; font-size: 12.5px; font-style: normal; font-weight: 500; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }

.nx-tip-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }

.nx-tip-facts > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}

.nx-tip-facts > span[hidden] { display: none; }
.nx-tip-facts > span.nx-tip-age { color: var(--text); }

.nx-tip-facts > span.nx-tip-imdb { padding: 0 9px 0 0; overflow: hidden; border-color: rgba(245, 197, 24, .5); background: rgba(245, 197, 24, .1); color: var(--text); }
.nx-tip-imdb em { align-self: stretch; display: inline-grid; place-items: center; margin-right: 2px; padding: 0 6px; background: #F5C518; color: #111; font-family: "Inter", Arial, sans-serif; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.nx-tip-imdb .nx-i { width: 12px; height: 12px; color: #F5C518; }
.nx-tip-imdb b { font-size: 13px; font-weight: 800; }
.nx-tip-imdb small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }

.nx-tip-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nx-tip-genres:empty { display: none; }
.nx-tip-genres span { height: 22px; padding: 0 9px; border: 1px solid var(--accent-border); border-radius: 11px; background: var(--accent-soft); font-size: 11px; font-weight: 600; line-height: 20px; color: var(--accent-light); white-space: nowrap; }

.nx-tip-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin: 14px 0 0 !important; padding: 13px 0 0 !important; border-top: 1px solid var(--border); }
.nx-tip-rows:empty { display: none; }
.nx-tip-rows div { min-width: 0; }
.nx-tip-rows dt { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.nx-tip-rows dd { margin: 2px 0 0; overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }

.nx-tip-body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 13px 0 0; padding-top: 13px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.nx-tip-body p:empty { display: none; }

/* =====================================================
   NEWS CARD
===================================================== */

.nx-news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-news-card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 14px 28px rgba(0, 0, 0, .45), 0 0 22px var(--accent-glow); }

.nx-news-media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: linear-gradient(135deg, #1B1530 0%, #10111A 100%); }
.nx-news-media:not(:has(img))::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 70% 30%, rgba(183, 140, 255, .28) 0%, transparent 70%); }
.nx-news-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.nx-news-media { border-bottom: 1px solid var(--border); }
.nx-news-media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(7, 7, 13, .5) 0%, transparent 100%); pointer-events: none; }

.nx-news-tag {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    height: 21px;
    padding: 0 9px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--btn-grad);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 21px;
    white-space: nowrap;
}

.nx-news-tag a { color: #fff !important; pointer-events: none; }
.nx-news-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 12px 14px 13px; }

.nx-news-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text) !important;
}

.nx-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }
.nx-news-meta span { display: inline-flex; align-items: center; gap: 6px; }
.nx-news-meta .nx-i { width: 13px; height: 13px; }

/* =====================================================
   PREMIUM CARDS
===================================================== */

.nx-premium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }

.nx-premium-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    padding: 16px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, var(--accent-soft) 0%, transparent 70%),
        linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.nx-premium-card:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }

.nx-premium-ico { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid var(--accent-border); border-radius: 16px; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 26px var(--accent-glow); }
.nx-premium-ico .nx-i { width: 30px; height: 30px; stroke-width: 1.6; }
.nx-premium-ico.is-gold { border-color: rgba(245, 184, 61, .4); background: rgba(245, 184, 61, .1); color: var(--gold); box-shadow: 0 0 26px rgba(245, 184, 61, .16); }
.nx-premium-card b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.nx-premium-card.is-vip b { color: var(--gold); }
.nx-premium-card p { margin: 3px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.nx-premium-card .nx-btn .nx-i { width: 14px; height: 14px; }

/* =====================================================
   GENRES / COLLECTIONS
===================================================== */

.nx-genres { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }

.nx-genre {
    position: relative;
    display: block;
    aspect-ratio: 16 / 12;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #1B1530 0%, #10111A 100%);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-genre img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 420ms ease-out, filter var(--transition); }
.nx-genre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 7, 13, .92) 0%, rgba(7, 7, 13, .25) 55%, rgba(7, 7, 13, .1) 100%); }

.nx-genre span {
    position: absolute;
    z-index: 1;
    left: 8px;
    right: 8px;
    bottom: 9px;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    color: #F5F5F8;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nx-genre:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), 0 0 22px var(--accent-glow); }
.nx-genre:hover img { transform: scale(1.06); filter: brightness(1.1); }

.nx-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.nx-collection {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 118px;
    padding: 18px 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #10111A;
    isolation: isolate;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-collection-bg { position: absolute; z-index: -2; inset: 0; }
.nx-collection-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 420ms ease-out; }
.nx-collection::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(7, 7, 13, .96) 0%, rgba(18, 13, 40, .84) 50%, rgba(7, 7, 13, .5) 100%); }
.nx-collection small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #D1B5FF; }
.nx-collection b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; line-height: 1.25; color: #F5F5F8; }
.nx-collection p { margin: 4px 0 0; font-size: 12.5px; color: #B9BBCB; }

.nx-collection-go { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(7, 7, 13, .5); color: #F5F5F8; transition: background-color var(--transition), border-color var(--transition); }
.nx-collection:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), 0 0 22px var(--accent-glow); }
.nx-collection:hover .nx-collection-bg img { transform: scale(1.05); }
.nx-collection:hover .nx-collection-go { background: var(--accent-dark); border-color: var(--accent); }

/* =====================================================
   FOOTER
===================================================== */

.nx-footer {
    clear: both;
    width: 100%;
    margin-top: 44px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    font-size: 13px;
    color: var(--text-muted);
}

.nx-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .85fr)) minmax(0, 1.35fr);
    gap: 36px;
    padding-top: 34px;
    padding-bottom: 28px;
}

.nx-footer .nx-logo { font-size: 23px; }
.nx-footer .nx-logo svg { width: 38px; height: 38px; }
.nx-footer-about p { max-width: 300px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--text-muted); }

.nx-social { display: flex; gap: 9px; margin-top: 16px; }

.nx-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2) !important;
    transition: border-color var(--transition), color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.nx-social a:hover { color: #fff !important; border-color: var(--accent); background: var(--accent-dark); box-shadow: 0 0 18px var(--accent-glow); }
.nx-social .nx-i { width: 16px; height: 16px; }

.nx-footer h3 { margin: 4px 0 12px; font-size: 14px !important; font-weight: 700 !important; color: var(--accent); }
.nx-footer-links li + li { margin-top: 8px; }
.nx-footer-links a { color: var(--text-muted) !important; transition: color var(--transition); }
.nx-footer-links a:hover, .nx-footer-links .is-active a { color: var(--accent-light) !important; }

.nx-newsbox { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); }
.nx-newsbox-head { display: flex; align-items: center; gap: 10px; }
.nx-newsbox-head .nx-i { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--btn-grad); color: #fff; }
.nx-newsbox-head b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.nx-newsbox p { margin: 9px 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

.nx-newsbox form { display: flex; gap: 6px; height: 40px; margin: 0; padding: 3px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); }
.nx-newsbox form:focus-within { border-color: var(--accent-border); }

.nx-newsbox input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text);
    font-family: var(--font);
    font-size: 12.5px;
}

.nx-newsbox input::placeholder { color: var(--text-faint); opacity: 1; }
.nx-newsbox button { display: grid; place-items: center; width: 34px; height: 32px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 8px; background: var(--btn-grad); color: #fff; }

.nx-partners { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--border); font-size: 12px; }
.nx-partners a { color: var(--text-faint) !important; transition: color var(--transition); }
.nx-partners a:hover { color: var(--text-2) !important; }

.nx-footer-bottom { border-top: 1px solid var(--border); background: var(--bg); }
.nx-footer-bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; font-size: 12px; color: var(--text-faint); }
.nx-footer-bottom ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.nx-footer-bottom a { color: var(--text-muted) !important; }
.nx-footer-bottom a:hover { color: var(--accent-light) !important; }

/* =====================================================
   LEGACY PAGES — keep working inside the new shell
===================================================== */

.center-top { margin-top: 24px !important; }
.header-3 { display: none !important; }

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1320px) {
    .nx-header-in { gap: 18px; }
    .nx-search { width: 220px; }
    .nx-nav > ul > li > a { padding: 0 9px; }
    .nx-row { --cols: 6; }
    .nx-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
    .nx-newsbox-wrap { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 1100px) {
    :root { --pad: 22px; }
    .nx-nav { display: none; }
    .nx-burger { display: grid; }
    .nx-row { --cols: 5; }
    .nx-row-4 { --cols: 3; }
    .nx-quick { display: flex; overflow-x: auto; scrollbar-width: none; }
    .nx-quick::-webkit-scrollbar { display: none; }
    .nx-quick a { flex: 0 0 132px; }
    .nx-genres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nx-premium { grid-template-columns: 1fr; }
    .nx-collections { grid-template-columns: 1fr; }
    .nx-tabs { margin-left: 0; }
    .nx-slide-body { padding-left: 0; }
    .nx-hero-arrow { display: none; }
    .nx-hero-nav { right: 20px; }
}

@media (max-width: 767px) {
    :root { --pad: 16px; --header-h: 56px; }

    .nx-header-in { gap: 10px; }
    .nx-logo { font-size: 17px; }
    .nx-logo svg { width: 27px; height: 27px; }
    .nx-search, .nx-hide-m { display: none; }
    .nx-search-m { display: grid; }
    .nx-auth span { display: none; }
    .nx-auth { width: 38px; padding: 0; justify-content: center; }
    .nx-auth-user { padding: 0; border: 0; background: none; }

    .nx-hero { width: 100%; max-width: none; height: 470px; margin-top: 0; border: 0; border-radius: 0; }
    .nx-slide-bg { width: 100%; height: 62%; object-position: center 18%; }
    .nx-slide::before { background: linear-gradient(0deg, #07070D 0%, #07070D 36%, rgba(7, 7, 13, .5) 58%, rgba(7, 7, 13, .08) 100%); }
    .nx-slide::after { display: none; }
    .nx-slide-in { align-items: flex-end; padding-bottom: 46px; }
    .nx-slide-body { max-width: none; }
    .nx-hero-title { font-size: 26px !important; }
    .nx-hero-desc { display: none; }
    .nx-hero-cta .nx-btn { flex: 1 1 0; padding: 0 12px; }
    .nx-hero-thumbs { display: none; }
    .nx-hero-nav { right: 50%; bottom: 12px; transform: translateX(50%); }

    .nx-section { margin-top: 26px; }
    .nx-section-head { flex-wrap: wrap; gap: 10px 12px; }
    .nx-section-title { font-size: 18px !important; }
    .nx-section-title > .nx-i { width: 20px; height: 20px; }
    .nx-tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nx-tabs::-webkit-scrollbar { display: none; }
    .nx-tabs button { flex: 0 0 auto; }

    .nx-row { --cols: 2.6; --gap: 12px; }
    .nx-row-4 { --cols: 1.25; }
    .nx-arrow { display: none; }

    .nx-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nx-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .nx-footer-about, .nx-newsbox-wrap { grid-column: 1 / -1; max-width: none; }
    .nx-footer-bottom-in { flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
}

@media (max-width: 420px) {
    .nx-row { --cols: 2.2; }
}

/* =====================================================
   3D ICON MODELS (gradient-shaded SVG, see sprite #m-*)
===================================================== */

.nx-3d {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    overflow: visible;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
    transform-origin: 50% 70%;
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1), filter 320ms cubic-bezier(.22, 1, .36, 1);
}

.nx-logo .nx-3d { width: 34px; height: 34px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.nx-logo:hover .nx-3d { transform: rotate(-18deg); }
.nx-footer .nx-logo .nx-3d { width: 42px; height: 42px; }

.nx-section-title > .nx-3d { width: 32px; height: 32px; margin: -4px 0; }

.nx-quick a { position: relative; height: 104px; gap: 6px; overflow: hidden; }

.nx-quick a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 76px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 68%);
    opacity: .7;
    transform: translateX(-50%);
    transition: opacity 320ms ease-out, transform 320ms ease-out;
    pointer-events: none;
}

.nx-quick .nx-3d { position: relative; width: 52px; height: 52px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.nx-quick a:hover .nx-3d { transform: translateY(-5px) rotate(-7deg) scale(1.1); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px var(--accent-glow)); }
.nx-quick a:hover::before { opacity: 1; transform: translateX(-50%) scale(1.25); }

.nx-premium-ico { width: 72px; height: 72px; border: 0; border-radius: 0; background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 68%); box-shadow: none; }
.nx-premium-card.is-vip .nx-premium-ico { background: radial-gradient(ellipse at center, rgba(245, 184, 61, .22) 0%, transparent 68%); }
.nx-premium-ico .nx-3d { width: 62px; height: 62px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.nx-premium-card:hover .nx-3d { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

@media (max-width: 1100px) { .nx-quick a { flex: 0 0 124px; height: 98px; } .nx-quick .nx-3d { width: 46px; height: 46px; } }
@media (max-width: 767px) { .nx-section-title > .nx-3d { width: 26px; height: 26px; } .nx-premium-ico { width: 60px; height: 60px; } .nx-premium-ico .nx-3d { width: 52px; height: 52px; } }

@media (prefers-reduced-motion: reduce) {
    .nx *, .nx *::before, .nx *::after { animation: none !important; transition: none !important; }
}

/* =====================================================
   WATCH PAGE (fullstory.tpl)
===================================================== */

.nx-watch {
    --watch-bg: var(--bg);
    --watch-surface: #0D0F18;
    --watch-surface-2: #11131E;
    --watch-surface-3: #151724;
    --watch-text: var(--text);
    --watch-muted: #9699AA;
    --watch-accent: var(--accent);
    --watch-accent-light: var(--accent-light);
    --watch-accent-secondary: var(--accent-2);
    --watch-accent-dark: var(--accent-dark);
    --watch-border: rgba(255, 255, 255, .07);
    --watch-radius-sm: 8px;
    --watch-radius-md: 10px;
    --watch-radius-lg: 14px;
    --watch-transition: 220ms ease;

    clear: both;
    width: 100%;
    padding: 16px 0 8px;
}

.darken .nx-watch {
    --watch-surface: #FFFFFF;
    --watch-surface-2: #FAF8FF;
    --watch-surface-3: #F3EEFF;
    --watch-muted: #696C7E;
    --watch-border: rgba(20, 16, 40, .10);
}

.nx-watch .nx-wrap { max-width: 1560px; padding: 0 27px; }
body:has(.nx-watch) .nx-header .nx-wrap { max-width: 1560px; padding: 0 27px; }
body:has(.nx-watch) .nx-search { width: clamp(240px, 24.4vw, 390px); }
/* sides only: the footer keeps its own top/bottom padding (with "padding: 0 27px" its border ran into the logo) */
body:has(.nx-watch) .nx-footer .nx-wrap { max-width: 1560px; padding-left: 27px; padding-right: 27px; }

.nx-w-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24.6%, 384px); gap: 27px; align-items: start; }
.nx-w-main { min-width: 0; }

/* the legacy page wrapper adds its own offsets around {content} */
.center-shida-1 { margin-top: 0 !important; }
.center-shida-1 > .center-1, .center-shida-1 .nohom, .center-shida-1 #content, .center-shida-1 .container-3 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; background: none !important; }

/* ---------- player ---------- */

.nx-w-player {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--watch-radius-sm);
    background: #000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.nx-w-player .shida-flei-no-1,
.nx-w-player .fullstory__tabs,
.nx-w-player .tab-content,
.nx-w-player .tab-pane { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

.nx-w-player .tab-content { background: #000 !important; }

.nx-w-player .fullstory__player,
.nx-w-player iframe.fullstory__player,
.nx-w-player .fullstory__player > iframe { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border: 0; }

.nx-w-player #playerjs1 { width: 100% !important; }

/* player switcher */
.nx-w-player .nav-pills {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--watch-border) !important;
    border-radius: 0 !important;
    background: var(--watch-surface) !important;
    list-style: none;
}

.nx-w-player .nav-pills .nav-item { margin: 0 !important; padding: 0 !important; float: none !important; }

.nx-w-player .nav-pills .nav-link {
    height: 32px;
    padding: 0 14px !important;
    border: 1px solid var(--watch-border) !important;
    border-radius: 8px !important;
    background: var(--watch-surface-3) !important;
    color: var(--watch-muted) !important;
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    text-transform: none !important;
    cursor: pointer;
    transition: color var(--watch-transition), border-color var(--watch-transition), background-color var(--watch-transition);
}

.nx-w-player .nav-pills .nav-link:hover { color: var(--watch-text) !important; border-color: var(--accent-border) !important; }
.nx-w-player .nav-pills .nav-link.active { border-color: transparent !important; background: var(--btn-grad) !important; color: #fff !important; box-shadow: 0 0 20px rgba(183, 140, 255, .18); }

.nx-w-player .shida-15 {
    order: 9;
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    background: none !important;
    color: var(--watch-muted) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
}

.nx-w-player .warning-box {
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--watch-border) !important;
    border-radius: 0 !important;
    background: var(--watch-surface) !important;
    color: var(--watch-muted) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

.nx-w-player > div[style*="text-align"] { padding: 10px 0; border-top: 1px solid var(--watch-border); background: var(--watch-surface); }
.nx-w-player > div[style*="text-align"] img { display: inline-block; max-width: 100%; height: auto; border-radius: 6px; }
.nx-w-admin { position: absolute; z-index: 30; top: 54px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.nx-w-admin:empty { display: none; }
.nx-w-admin a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(7, 7, 13, .7); color: #fff !important; font-size: 12px; }

/* ---------- title / meta / rating ---------- */

.nx-w-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: start; margin-top: 22px; }

.nx-w-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.nx-w-titlerow h1 { font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--watch-text); }

.nx-w-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-w-badges:empty { display: none; }

.nx-w-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 5px;
    background: var(--watch-surface-2);
    color: var(--watch-text) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.nx-w-badge[hidden] { display: none; }
.nx-w-badge.is-accent { border-color: transparent; background: var(--btn-grad); color: #fff !important; }
.nx-w-badge.is-imdb { padding: 0 10px 0 0; overflow: hidden; border-color: rgba(245, 197, 24, .5); background: rgba(245, 197, 24, .08); }
.nx-w-badge.is-imdb em { align-self: stretch; display: inline-grid; place-items: center; padding: 0 8px; background: #F5C518; color: #111; font-family: "Inter", Arial, sans-serif; font-size: 11.5px; font-style: normal; font-weight: 800; }
.nx-w-badge.is-imdb b { font-size: 13.5px; font-weight: 700; }

.nx-w-orig { margin-top: 4px; font-size: 16px; color: var(--watch-muted); }
.nx-w-orig:empty { display: none; }

.nx-w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 12px !important; font-size: 14px; color: var(--watch-muted); }
.nx-w-meta li { display: inline-flex; align-items: center; gap: 6px; }
.nx-w-meta li + li::before { content: "•"; margin: 0 12px; color: var(--text-faint); }
.nx-w-meta a { color: inherit !important; transition: color var(--watch-transition); }
.nx-w-meta a:hover { color: var(--watch-accent-light) !important; }
.nx-w-meta .nx-i { width: 14px; height: 14px; }
.nx-w-meta .nx-w-age { height: 22px; padding: 0 8px; border-radius: 5px; background: #6B1622; color: #fff; font-size: 12px; font-weight: 700; }
.nx-w-meta li.nx-w-age { margin-left: 14px; }
.nx-w-meta li.nx-w-age::before { content: none; }

.nx-w-rate {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    min-width: 157px;
    min-height: 92px;
    padding: 12px 16px;
    border: 1px solid var(--watch-border);
    border-radius: var(--watch-radius-md);
    background: var(--watch-surface);
    transition: border-color var(--watch-transition);
}

.nx-w-rate[hidden] { display: none; }
.nx-w-rate:hover { border-color: rgba(245, 197, 24, .45); }
.nx-w-rate .nx-3d { width: 38px; height: 38px; }
.nx-w-rate-val { display: block; font-size: 14px; color: var(--watch-muted); line-height: 1.1; }
.nx-w-rate-val b { font-size: 25px; font-weight: 700; color: var(--watch-text); }
.nx-w-rate-src { display: block; margin-top: 2px; font-family: "Inter", Arial, sans-serif; font-size: 12.5px; font-weight: 800; color: #F5C518; }
.nx-w-rate small { grid-column: 1 / -1; font-size: 12px; color: var(--watch-muted); text-align: center; }
.nx-w-rate small:empty { display: none; }

.nx-w-poster { position: relative; z-index: 1; width: 122px; margin-bottom: -58px; overflow: hidden; border: 1px solid var(--watch-border); border-radius: var(--watch-radius-md); background: var(--watch-surface); }
.nx-w-poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.nx-w-trailer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; background: var(--btn-grad); color: #fff !important; font-size: 12.5px; font-weight: 600; transition: filter var(--watch-transition); }
.nx-w-trailer:hover { filter: brightness(1.1); }
.nx-w-trailer .nx-i { width: 11px; height: 11px; }

/* ---------- actions ---------- */

.nx-w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 18px; padding-right: 138px; }
.nx-w-watch { height: 42px; padding: 0 30px; border-radius: 8px; font-size: 15px; }

.nx-w-act,
.nx-w-fav > a,
.nx-w-report > a,
.nx-w-like > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--watch-border);
    border-radius: 8px;
    background: var(--watch-surface);
    color: var(--text-2) !important;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--watch-transition), border-color var(--watch-transition), background-color var(--watch-transition);
}

/* DLE wraps favourites / complaint / rating in its own <a>: the wrapper span is only a holder */
.nx-w-fav, .nx-w-report, .nx-w-like { height: auto; padding: 0; border: 0; background: none; }
.nx-w-fav:not(:has(> a)), .nx-w-report:not(:has(> a)), .nx-w-like:not(:has(> a)) { height: 42px; padding: 0 16px; border: 1px solid var(--watch-border); background: var(--watch-surface); }
.nx-w-report:empty, .nx-w-fav:empty { display: none; }

.nx-w-act:hover, .nx-w-fav > a:hover, .nx-w-report > a:hover, .nx-w-like > a:hover { color: var(--watch-text) !important; border-color: var(--accent-border); background: var(--accent-soft); }
.nx-w-act.is-strong { border-color: var(--accent-border); background: var(--accent-soft); color: var(--watch-text) !important; font-weight: 600; }
.nx-w-act .nx-i { color: var(--watch-accent-light); }
.nx-w-like b { font-weight: 700; color: var(--watch-text); }
.nx-i-flip { transform: scaleY(-1); }
.nx-w-act.is-done { border-color: var(--accent-border); color: var(--watch-accent-light) !important; }

/* ---------- tabs ---------- */

.nx-w-tabs { display: flex; gap: 4px; margin-top: 18px; overflow-x: auto; border-bottom: 1px solid var(--watch-border); scrollbar-width: none; }
.nx-w-tabs::-webkit-scrollbar { display: none; }

.nx-w-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0 14px;
    color: var(--watch-muted) !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--watch-transition);
}

.nx-w-tabs a:first-child { padding-left: 2px; }
.nx-w-tabs a:hover { color: var(--watch-text) !important; }
.nx-w-tabs a.is-active { color: var(--watch-accent-light) !important; }
.nx-w-tabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--watch-accent); }
.nx-w-tabs .nx-i { width: 17px; height: 17px; }

/* ---------- cast ---------- */

.nx-w-cast { margin-top: 14px; scroll-margin-top: 80px; }
.nx-w-cast-row { display: flex; gap: 26px; padding: 4px 0 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.nx-w-actor { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; max-width: 220px; transition: filter var(--watch-transition); }
.nx-w-actor img { width: 54px; height: 54px; flex: 0 0 auto; border: 1.5px solid var(--watch-border); border-radius: 50%; background: var(--watch-surface-2); object-fit: cover; object-position: center 20%; transition: border-color var(--watch-transition); }
.nx-w-actor span { min-width: 0; }
.nx-w-actor b { display: block; overflow: hidden; font-size: 12.5px; font-weight: 700; color: var(--watch-text); white-space: nowrap; text-overflow: ellipsis; }
.nx-w-actor small { display: block; margin-top: 2px; overflow: hidden; font-size: 11.5px; color: var(--watch-muted); white-space: nowrap; text-overflow: ellipsis; }
.nx-w-actor:hover { filter: brightness(1.12); }
.nx-w-actor:hover img { border-color: var(--watch-accent); }

/* ---------- description + technical info ---------- */

.nx-w-info { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 18px; scroll-margin-top: 80px; }

.nx-w-card { padding: 14px 16px; border: 1px solid var(--watch-border); border-radius: var(--watch-radius-md); background: var(--watch-surface); }
.nx-w-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15.5px !important; font-weight: 700 !important; color: var(--watch-text); }
.nx-w-card h2 .nx-i { color: var(--watch-accent); }

.nx-w-desc-text { font-size: 13px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.nx-w-desc-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.nx-w-desc-text a { color: var(--watch-accent-light) !important; }
.nx-w-desc-text img { height: auto; border-radius: 8px; }

.nx-w-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--watch-accent-light); font-size: 13px; font-weight: 600; }
.nx-w-more[hidden] { display: none; }
.nx-w-more .nx-i { width: 15px; height: 15px; transition: transform var(--watch-transition); }
.nx-w-more.is-open .nx-i { transform: rotate(180deg); }

.nx-w-tech dl { display: grid; gap: 10px; margin: 0; }
.nx-w-tech dl > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--watch-border); }
.nx-w-tech dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.nx-w-tech dt { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--watch-muted); }
.nx-w-tech dt .nx-i { margin-top: 1px; }
.nx-w-tech dt .nx-i { width: 15px; height: 15px; color: var(--watch-accent); }
.nx-w-tech dd { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--watch-text); overflow-wrap: anywhere; }
.nx-w-tech dd a { color: inherit !important; transition: color var(--watch-transition); }
.nx-w-tech dd a:hover { color: var(--watch-accent-light) !important; }

.nx-w-keys { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 12px; padding: 12px 18px; border: 1px solid var(--watch-border); border-radius: var(--watch-radius-md); background: var(--watch-surface); font-size: 12.5px; }
.nx-w-keys > span { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-weight: 600; color: var(--watch-muted); }
.nx-w-keys > span .nx-i { width: 15px; height: 15px; color: var(--watch-accent); }
.nx-w-keys > div { flex: 1 1 300px; line-height: 2.1; color: transparent; font-size: 0; }
.nx-w-keys > div a { display: inline-block; height: 24px; margin: 0 6px 6px 0; padding: 0 10px; border: 1px solid var(--watch-border); border-radius: 12px; background: var(--watch-surface-3); color: var(--text-2) !important; font-size: 12px; line-height: 22px; transition: color var(--watch-transition), border-color var(--watch-transition); }
.nx-w-keys > div a:hover { color: var(--watch-accent-light) !important; border-color: var(--accent-border); }

/* ---------- comments (existing DLE markup, new skin) ---------- */

.nx-w-comments { margin-top: 24px; scroll-margin-top: 80px; }
.nx-w-comments > .nx-section-title { margin-bottom: 12px; font-size: 18px !important; }
.nx-w-comments > .nx-section-title .nx-i { width: 20px; height: 20px; color: var(--watch-accent); filter: none; }

.nx-w-comments .shida-movie-27, .nx-w-comments .shida-movie-30, .nx-w-comments .shida-movie-31,
.nx-w-comments .div-addcomments-1, .nx-w-comments .div-addcomments-2 { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; box-shadow: none !important; }

.nx-w-comments .addcomment { padding: 14px !important; border: 1px solid var(--watch-border) !important; border-radius: var(--watch-radius-md) !important; background: var(--watch-surface) !important; }
.nx-w-comments .addcomment .box_in, .nx-w-comments .addcomment .ui-form { margin: 0 !important; padding: 0 !important; background: none !important; list-style: none; }
.nx-w-comments .addcomment li { margin: 0 0 10px !important; list-style: none; }

.nx-w-comments .addcomment input[type="text"],
.nx-w-comments .addcomment textarea {
    width: 100% !important;
    box-sizing: border-box;
    padding: 11px 14px !important;
    border: 1px solid var(--watch-border) !important;
    border-radius: 8px !important;
    background: var(--watch-surface-3) !important;
    color: var(--watch-text) !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
}

.nx-w-comments .addcomment input:focus, .nx-w-comments .addcomment textarea:focus { border-color: var(--accent-border) !important; outline: 0; }
.nx-w-comments .form_submit, .nx-w-comments .add-coments-2, .nx-w-comments .add-coments-3 { margin: 0 !important; padding: 0 !important; background: none !important; text-align: right; }

.nx-w-comments .addcomment button[type="submit"] {
    height: 40px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--btn-grad) !important;
    color: #fff !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(134, 96, 224, .3);
}

.nx-w-comments .div-addcomments-2 { margin-top: 14px !important; }
.nx-w-comments .newi-comment-1 { margin: 0 0 10px !important; padding: 14px !important; border: 1px solid var(--watch-border) !important; border-radius: var(--watch-radius-md) !important; background: var(--watch-surface) !important; }
.nx-w-comments .newi-comment-7 { color: var(--watch-text) !important; font-family: var(--font) !important; font-weight: 700 !important; }
.nx-w-comments .newi-comment-8 { color: var(--text-2) !important; font-family: var(--font) !important; font-size: 13.5px !important; line-height: 1.6 !important; }
.nx-w-comments .newi-comment-10, .nx-w-comments .newi-comment-12, .nx-w-comments .newi-comment-13, .nx-w-comments .newi-comment-011 { color: var(--watch-muted) !important; font-family: var(--font) !important; font-size: 12px !important; }
.nx-w-comments .newi-comment-12:hover { color: var(--watch-accent-light) !important; }

/* ---------- sidebar ---------- */

.nx-w-side { display: grid; gap: 22px; min-width: 0; }
.nx-w-sidebox { min-width: 0; scroll-margin-top: 80px; }
.nx-w-sidebox[hidden] { display: none; }
.nx-w-sidebox .nx-section-head { margin-bottom: 12px; }
.nx-w-sidebox .nx-btn-line { height: 30px; padding: 0 14px; border-radius: 15px; }
.nx-w-sidebox .nx-section-title { font-size: 18px !important; }
.nx-w-sidebox .nx-section-title > .nx-i { width: 20px; height: 20px; filter: none; }
.nx-w-sidebox .nx-section-title > .nx-3d { width: 28px; height: 28px; }
.nx-w-epcount { margin-left: auto; font-size: 12px; color: var(--watch-muted); }

.nx-rel { display: grid; grid-template-columns: 157px minmax(0, 1fr); gap: 16px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--watch-border); }
.nx-rel:first-child { padding-top: 0; }
.nx-rel:last-child { border-bottom: 0; }

.nx-rel-media { position: relative; display: block; aspect-ratio: 157 / 94; overflow: hidden; border: 1px solid var(--watch-border); border-radius: 6px; background: var(--watch-surface-2); transition: border-color var(--watch-transition); }
.nx-rel-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 250ms ease; }
.nx-rel:hover .nx-rel-media { border-color: var(--accent-border); }
.nx-rel:hover .nx-rel-media img { transform: scale(1.05); }

.nx-rel-q, .nx-rel-len { position: absolute; display: inline-grid; place-items: center; height: 21px; padding: 0 7px; border-radius: 4px; background: rgba(7, 7, 13, .8); color: #fff; font-size: 11.5px; font-weight: 700; }
.nx-rel-q { top: 6px; right: 6px; border: 1px solid rgba(255, 255, 255, .2); letter-spacing: .04em; }
.nx-rel-len { right: 6px; bottom: 6px; }

.nx-rel-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--watch-text) !important; transition: color var(--watch-transition); }
.nx-rel:hover .nx-rel-title { color: var(--watch-accent-light) !important; }
.nx-rel-orig { margin-top: 3px; overflow: hidden; font-size: 13.5px; color: var(--watch-muted); white-space: nowrap; text-overflow: ellipsis; }
.nx-rel-meta { display: flex; align-items: center; gap: 16px; margin-top: 9px; font-size: 13px; color: var(--watch-muted); }
.nx-rel-meta .nx-rate { display: inline-flex; align-items: center; gap: 5px; color: var(--watch-text); }
.nx-rel-meta .nx-rate[hidden] { display: none; }
.nx-rel-meta .nx-rate .nx-i { width: 13px; height: 13px; color: var(--gold); }
.nx-rel-meta .nx-rate b { font-weight: 700; color: var(--gold); }

.nx-ep-list { display: grid; gap: 6px; max-height: 470px; padding-right: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.nx-ep {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 3px 12px 3px 4px;
    border: 1px solid transparent;
    border-radius: var(--watch-radius-sm);
    background: transparent;
    color: var(--watch-text) !important;
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--watch-transition), background-color var(--watch-transition);
}

.nx-ep:hover { border-color: var(--watch-border); background: var(--watch-surface); }
.nx-ep.is-active { border-color: var(--watch-accent); background: rgba(183, 140, 255, .10); box-shadow: 0 0 20px rgba(183, 140, 255, .18); }

.nx-ep-media { position: relative; display: block; aspect-ratio: 88 / 50; overflow: hidden; border-radius: 5px; background: var(--watch-surface-2); }
.nx-ep-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: brightness(.72); }
.nx-ep-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(7, 7, 13, .5); color: #fff; transform: translate(-50%, -50%); }
.nx-ep-play .nx-i { width: 10px; height: 10px; margin-left: 1px; }
.nx-ep.is-active .nx-ep-play { border-color: var(--watch-accent); background: rgba(80, 45, 130, .8); }
.nx-ep-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; }
.nx-ep-len { font-size: 11.5px; color: var(--watch-muted); white-space: nowrap; }
.nx-ep-group { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--watch-muted); }

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
    .nx-w-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
    .nx-rel { grid-template-columns: 134px minmax(0, 1fr); gap: 12px; }
    .nx-w-poster { display: none; }
    .nx-w-actions { padding-right: 0; }
    .nx-w-head { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 1100px) {
    .nx-w-grid { grid-template-columns: minmax(0, 1fr); }
    .nx-w-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .nx-w-side > .nx-w-tech { grid-column: 1 / -1; }
    .nx-w-side > .nx-w-tech dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .nx-w-side > .nx-w-sidebox:first-child:last-child { grid-column: 1 / -1; }
    .nx-rel { grid-template-columns: 152px minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .nx-watch { padding-top: 0; }
    .nx-watch > .nx-wrap { padding: 0; }
    .nx-w-main > *:not(.nx-w-player), .nx-w-side { padding-left: var(--pad); padding-right: var(--pad); }
    .nx-w-player { border-left: 0; border-right: 0; border-radius: 0; }
    .nx-w-head { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
    .nx-w-titlerow h1 { font-size: 23px !important; }
    .nx-w-rate { justify-self: start; grid-template-columns: auto auto auto; min-width: 0; padding: 10px 14px; }
    .nx-w-rate small { grid-column: auto; }
    .nx-w-meta li + li::before { margin: 0 8px; }
    .nx-w-actions { gap: 8px; }
    .nx-w-watch { flex: 1 1 100%; }
    .nx-w-act, .nx-w-fav > a, .nx-w-report > a, .nx-w-like > a { height: 42px; padding: 0 13px; font-size: 13px; }
    .nx-w-info { grid-template-columns: minmax(0, 1fr); }
    .nx-w-side { grid-template-columns: minmax(0, 1fr); }
    .nx-w-side > .nx-w-tech dl { grid-template-columns: minmax(0, 1fr); }
    .nx-rel { grid-template-columns: 132px minmax(0, 1fr); }
    .nx-w-tech dl > div { grid-template-columns: 150px minmax(0, 1fr); }
}

/* =====================================================
   SCHEDULE PAGE (ganrigi.tpl)
===================================================== */

/* new full-width pages inside the legacy {content} wrappers */
.center-top:has(.nx-page) { margin-top: 0 !important; }
/* the legacy breadcrumb strip is replaced by each page's own header */
.center-top:has(.nx-page) .moviesi-1 > .svri-div-00 { display: none !important; }
.center-top:has(.nx-page) .moviesi-1 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.center-top:has(.nx-page) > .center-1,
.center-top:has(.nx-page) .nohom,
.center-top:has(.nx-page) #content,
.center-top:has(.nx-page) .container-3 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; background: none !important; }

.nx-sched { clear: both; width: 100%; padding: 26px 0 12px; }

.nx-sched-head { display: flex; align-items: center; gap: 18px; }
.nx-sched-head > .nx-3d { width: 62px; height: 62px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px var(--accent-glow)); }
.nx-sched-head:hover > .nx-3d { --nx-anim: running; }
.nx-sched-headtext h1 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; color: var(--text); }
.nx-sched-headtext p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }

.nx-sched-now {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 2px 12px;
    margin-left: auto;
    padding: 12px 18px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 70%), var(--surface);
    box-shadow: 0 0 26px var(--accent-glow);
}

.nx-sched-now[hidden] { display: none; }
.nx-sched-now small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.nx-sched-now b { font-size: 19px; font-weight: 800; color: var(--text); }
.nx-sched-now span { font-size: 12.5px; color: var(--text-muted); }

.nx-sched-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
}

.nx-sched-note .nx-i { margin-top: 2px; color: var(--accent); }

/* ---------- day filter ---------- */

.nx-sched-days { display: flex; gap: 8px; margin-top: 18px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.nx-sched-days::-webkit-scrollbar { display: none; }

.nx-sched-days button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.nx-sched-days button:hover { color: var(--text); border-color: var(--accent-border); }
.nx-sched-days button.is-active { border-color: transparent; background: var(--btn-grad); color: #fff; box-shadow: 0 6px 20px rgba(134, 96, 224, .32); }

.nx-sched-days em {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.nx-sched-days em:empty { display: none; }
.nx-sched-days button.is-active em { background: rgba(255, 255, 255, .22); }
.nx-sched-days button.is-empty:not(.is-active) { color: var(--text-faint); }

.nx-sched-days button.is-today::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: #43D9A3;
    box-shadow: 0 0 10px rgba(67, 217, 163, .7);
}

/* ---------- week board ---------- */

.nx-sched-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 18px; }

.nx-sched-col {
    min-width: 0;
    min-height: 220px;
    padding: 12px 10px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.nx-sched-col[hidden] { display: none; }

.nx-sched-col h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 12px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text);
}

.nx-sched-col h2 em { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-light); font-size: 11px; font-style: normal; font-weight: 700; }
.nx-sched-col h2 em:empty { display: none; }

.nx-sched-col.is-today { border-color: var(--accent-border); background: radial-gradient(140% 60% at 50% 0%, var(--accent-soft) 0%, transparent 70%), linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); box-shadow: 0 0 30px var(--accent-glow); }
.nx-sched-col.is-today h2 { border-bottom-color: var(--accent-border); color: var(--accent-light); }
.nx-sched-col h2 span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.nx-sched-col.is-today h2 span::after { content: "დღეს"; flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; background: var(--btn-grad); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1.4; }

.nx-sched-list { display: grid; gap: 10px; }

.nx-sched-empty { display: grid; place-items: center; gap: 8px; min-height: 140px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--text-faint); text-align: center; }
.nx-sched-empty .nx-i { width: 22px; height: 22px; opacity: .6; }

/* ---------- item ---------- */

.nx-sched-item {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-sched-item:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), 0 0 20px var(--accent-glow); }

.nx-sched-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #241A45 0%, #10111A 100%); }
.nx-sched-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 420ms ease-out, filter var(--transition); }
.nx-sched-media { border-bottom: 1px solid var(--border); }
.nx-sched-media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(7, 7, 13, .5) 0%, transparent 100%); pointer-events: none; }
.nx-sched-item:hover .nx-sched-media img { transform: scale(1.06); filter: brightness(1.1); }

.nx-sched-net { position: absolute; z-index: 1; top: 7px; left: 7px; max-width: calc(100% - 14px); height: 20px; padding: 0 7px; overflow: hidden; border-radius: 5px; background: rgba(7, 7, 13, .76); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.nx-sched-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--btn-grad); color: #fff; opacity: 0; transform: translate(-50%, -40%) scale(.9); transition: opacity var(--transition), transform var(--transition); }
.nx-sched-play .nx-i { width: 14px; height: 14px; margin-left: 2px; }
.nx-sched-item:hover .nx-sched-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.nx-sched-body { display: block; padding: 10px 11px 12px; }
.nx-sched-body b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text); transition: color var(--transition); }
.nx-sched-item:hover .nx-sched-body b { color: var(--accent-light); }
.nx-sched-body i { display: block; margin-top: 2px; overflow: hidden; font-size: 11.5px; font-style: normal; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }

.nx-sched-prog { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.nx-sched-bar { position: relative; flex: 1 1 auto; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.darken .nx-sched-bar { background: rgba(20, 16, 40, .1); }
.nx-sched-bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 3px; background: var(--btn-grad); transition: width 700ms cubic-bezier(.22, 1, .36, 1); }
.nx-sched-prog small { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

.nx-sched-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.nx-sched-tags:empty { display: none; }
.nx-sched-tags em { max-width: 100%; height: 20px; padding: 0 7px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 18px; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.nx-sched-tags em.is-status { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light); }

/* one day selected: its column opens into a card grid */
.nx-sched-board.is-single { grid-template-columns: minmax(0, 1fr); }
.nx-sched-board.is-single .nx-sched-col { min-height: 0; padding: 16px; }
.nx-sched-board.is-single .nx-sched-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.nx-sched-board.is-single .nx-sched-empty { min-height: 200px; font-size: 13px; }

@media (max-width: 1320px) {
    .nx-sched-board:not(.is-single) { grid-template-columns: repeat(7, 210px); overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}

@media (max-width: 767px) {
    .nx-sched { padding-top: 18px; }
    .nx-sched-head { flex-wrap: wrap; gap: 12px; }
    .nx-sched-head > .nx-3d { width: 46px; height: 46px; }
    .nx-sched-headtext h1 { font-size: 24px !important; }
    .nx-sched-headtext p { font-size: 13px; }
    .nx-sched-now { width: 100%; margin-left: 0; grid-template-columns: auto 1fr; }
    .nx-sched-board:not(.is-single) { grid-template-columns: minmax(0, 1fr); overflow: visible; }
    .nx-sched-board:not(.is-single) .nx-sched-col { min-height: 0; }
    .nx-sched-board:not(.is-single) .nx-sched-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-sched-board:not(.is-single) .nx-sched-empty { min-height: 64px; grid-column: 1 / -1; }
    .nx-sched-board.is-single .nx-sched-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* =====================================================
   LIVING ICONS + AMBIENT BACKGROUNDS
   Icon parts live in the SVG sprite (#m-*). They animate only while
   --nx-anim is "running"; custom properties inherit into <use>, so a
   hovered tile switches on just its own icon.
===================================================== */

.nx-sprite [class^="a-"], .nx-3d [class^="a-"] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: var(--nx-anim, paused);
}

.nx-sprite .a-spin, .nx-3d .a-spin { animation-name: nx-a-spin; animation-duration: 2.2s; animation-timing-function: linear; }
.nx-sprite .a-pop, .nx-3d .a-pop { animation-name: nx-a-pop; animation-duration: .7s; transform-origin: 50% 100%; }
.nx-sprite .a-sway, .nx-3d .a-sway { animation-name: nx-a-sway; animation-duration: 1.5s; transform-origin: 50% 85%; }
.nx-sprite .a-blink, .nx-3d .a-blink { animation-name: nx-a-blink; animation-duration: 2.4s; }
.nx-sprite .a-pulse, .nx-3d .a-pulse { animation-name: nx-a-pulse; animation-duration: 1.3s; }
.nx-sprite .a-beat, .nx-3d .a-beat { animation-name: nx-a-beat; animation-duration: 1.1s; }
.nx-sprite .a-float, .nx-3d .a-float { animation-name: nx-a-float; animation-duration: 1.8s; }
.nx-sprite .a-flick, .nx-3d .a-flick { animation-name: nx-a-flick; animation-duration: .55s; transform-origin: 50% 100%; }
.nx-sprite .a-flick2, .nx-3d .a-flick2 { animation-name: nx-a-flick2; animation-duration: .4s; transform-origin: 50% 100%; }
.nx-sprite .a-twinkle, .nx-3d .a-twinkle { animation-name: nx-a-twinkle; animation-duration: 1s; }
.nx-sprite .a-twinkle2, .nx-3d .a-twinkle2 { animation-name: nx-a-twinkle; animation-duration: 1.4s; animation-delay: -.5s; }
.nx-sprite .a-tick, .nx-3d .a-tick { animation-name: nx-a-tick; animation-duration: .9s; }

@keyframes nx-a-spin { to { transform: rotate(360deg); } }
@keyframes nx-a-pop { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-4px) scale(1.06, 1.1); } 70% { transform: translateY(0) scale(1.03, .96); } }
@keyframes nx-a-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes nx-a-blink { 0%, 42%, 52%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes nx-a-pulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.13) rotate(14deg); } }
@keyframes nx-a-beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.16); } 36% { transform: scale(1); } 54% { transform: scale(1.1); } 72% { transform: scale(1); } }
@keyframes nx-a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nx-a-flick { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.03, 1.09) skewX(-3deg); } 65% { transform: scale(.98, .96) skewX(3deg); } }
@keyframes nx-a-flick2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(.88, 1.14); } }
@keyframes nx-a-twinkle { 0%, 100% { transform: scale(.35) rotate(0); opacity: .35; } 50% { transform: scale(1.25) rotate(45deg); opacity: 1; } }
@keyframes nx-a-tick { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 55% { transform: translateY(1px); } }

.nx-quick a:hover .nx-3d,
.nx-quick a:focus-visible .nx-3d,
.nx-premium-card:hover .nx-3d,
.nx-logo:hover .nx-3d,
.nx-section-title:hover > .nx-3d,
.nx-w-rate:hover .nx-3d { --nx-anim: running; }

/* the logo reel now spins instead of tilting */
.nx-logo:hover .nx-3d { transform: none; }

/* ---------- quick navigation tiles ---------- */

.nx-quick a {
    --tint: 183, 140, 255;
    isolation: isolate;
    border-color: rgba(var(--tint), .16);
    background:
        radial-gradient(120% 95% at 50% -12%, rgba(var(--tint), .30) 0%, rgba(var(--tint), .08) 42%, transparent 68%),
        linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, transparent 38%),
        linear-gradient(180deg, #181A2B 0%, #0D0E18 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .35);
}

.nx-quick a:nth-child(2) { --tint: 228, 196, 255; }
.nx-quick a:nth-child(3) { --tint: 255, 143, 200; }
.nx-quick a:nth-child(4) { --tint: 248, 190, 69; }
.nx-quick a:nth-child(5) { --tint: 255, 138, 61; }
.nx-quick a:nth-child(6) { --tint: 196, 150, 255; }
.nx-quick a:nth-child(7) { --tint: 132, 160, 255; }

/* soft light behind the icon */
.nx-quick a::before {
    top: 6px;
    width: 96px;
    height: 66px;
    background: radial-gradient(ellipse at center, rgba(var(--tint), .46) 0%, rgba(var(--tint), .12) 45%, transparent 70%);
    filter: blur(6px);
    opacity: .75;
}

/* fine dotted texture + a light sweep that crosses the tile on hover */
.nx-quick a::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%) no-repeat -160% 0 / 220% 100%,
        radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 14px 14px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 100%);
    pointer-events: none;
    transition: background-position 700ms cubic-bezier(.22, 1, .36, 1);
}

.nx-quick a:hover {
    border-color: rgba(var(--tint), .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 30px rgba(0, 0, 0, .45), 0 0 28px rgba(var(--tint), .22);
}

.nx-quick a:hover::after { background-position: 160% 0, 0 0; }
.nx-quick a:hover::before { opacity: 1; transform: translateX(-50%) scale(1.2); }

.darken .nx-quick a {
    background:
        radial-gradient(120% 95% at 50% -12%, rgba(var(--tint), .34) 0%, rgba(var(--tint), .10) 42%, transparent 68%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F2FF 100%);
    box-shadow: 0 8px 22px rgba(30, 24, 60, .08);
}

.darken .nx-quick a::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%) no-repeat -160% 0 / 220% 100%; }

/* ---------- page ambience (replaces the flat black) ---------- */

body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(52% 44% at 10% -6%, rgba(110, 75, 193, .30) 0%, transparent 70%),
        radial-gradient(44% 40% at 94% 4%, rgba(72, 92, 214, .18) 0%, transparent 70%),
        radial-gradient(60% 44% at 50% 108%, rgba(183, 140, 255, .12) 0%, transparent 70%),
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px) 0 0 / 22px 22px;
    pointer-events: none;
}

.darken body::before, body.darken::before {
    background:
        radial-gradient(52% 44% at 10% -6%, rgba(126, 87, 214, .14) 0%, transparent 70%),
        radial-gradient(44% 40% at 94% 4%, rgba(72, 92, 214, .09) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
    .nx-sprite [class^="a-"], .nx-3d [class^="a-"] { animation: none !important; }
}

/* =====================================================
   SECTION HEADER BAR (homepage)
   icon tile · title · tabs · "see all" · glowing rule
===================================================== */

.nx-home .nx-section { margin-top: 34px; }

.nx-home .nx-section-head {
    position: relative;
    gap: 26px;
    min-height: 72px;
    margin-bottom: 18px;
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 4px 4px;
    background:
        radial-gradient(60% 180% at 0% 50%, rgba(183, 140, 255, .14) 0%, transparent 62%),
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #14132A 0%, #0B0A16 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* the glowing rule under the bar */
.nx-home .nx-section-head::before,
.nx-home .nx-section-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(183, 140, 255, .05) 0%, #8E66E8 22%, #B78CFF 50%, #8E66E8 78%, rgba(183, 140, 255, .05) 100%);
    pointer-events: none;
}

.nx-home .nx-section-head::before { height: 10px; bottom: -4px; background: linear-gradient(90deg, transparent 0%, rgba(142, 102, 232, .55) 30%, rgba(183, 140, 255, .65) 50%, rgba(142, 102, 232, .55) 70%, transparent 100%); filter: blur(9px); opacity: .8; }

.nx-home .nx-section-title { gap: 16px; font-size: 23px !important; font-weight: 800 !important; letter-spacing: .01em !important; }

/* icon in a glass tile */
.nx-home .nx-section-title > .nx-3d,
.nx-home .nx-section-title > .nx-i {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(183, 140, 255, .26);
    border-radius: 13px;
    background: radial-gradient(90% 90% at 50% 20%, rgba(183, 140, 255, .26) 0%, rgba(110, 75, 193, .10) 60%, rgba(20, 16, 44, .5) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 6px 18px rgba(0, 0, 0, .4), 0 0 22px rgba(183, 140, 255, .16);
    filter: none;
}

.nx-home .nx-section-title > .nx-i { padding: 12px; color: var(--accent-light); }
.nx-home .nx-section-head:hover .nx-section-title > .nx-3d { --nx-anim: running; }
.nx-home .nx-section-title .nx-pill-new { margin-left: -4px; }

/* tabs */
.nx-home .nx-tabs { gap: 6px; margin-left: 5%; }

.nx-home .nx-tabs button {
    height: 40px;
    padding: 0 20px;
    border-radius: 11px;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 500;
}

.nx-home .nx-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.nx-home .nx-tabs button.is-active {
    background: linear-gradient(180deg, #B994FF 0%, #8A62E6 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(209, 181, 255, .35), 0 6px 22px rgba(134, 96, 224, .5), 0 0 34px rgba(183, 140, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* "see all" */
.nx-home .nx-section-head .nx-btn-line {
    height: 42px;
    padding: 0 20px;
    gap: 12px;
    border: 1px solid rgba(183, 140, 255, .48);
    border-radius: 13px;
    background: rgba(183, 140, 255, .05);
    color: var(--text) !important;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 0 18px rgba(183, 140, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.nx-home .nx-section-head .nx-btn-line .nx-i { width: 16px; height: 16px; }
.nx-home .nx-section-head .nx-btn-line:hover { border-color: var(--accent); background: rgba(183, 140, 255, .14); box-shadow: 0 0 26px rgba(183, 140, 255, .26); }

.darken .nx-home .nx-section-head {
    background:
        radial-gradient(60% 180% at 0% 50%, rgba(126, 87, 214, .12) 0%, transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F3FF 100%);
    box-shadow: 0 8px 22px rgba(30, 24, 60, .06);
}

.darken .nx-home .nx-section-title > .nx-3d, .darken .nx-home .nx-section-title > .nx-i { background: rgba(126, 87, 214, .08); box-shadow: none; }
.darken .nx-home .nx-tabs button:hover { background: rgba(20, 16, 40, .05); }

@media (max-width: 1100px) {
    .nx-home .nx-tabs { margin-left: 0; }
    .nx-home .nx-tabs button { height: 36px; padding: 0 15px; font-size: 13.5px; }
}

@media (max-width: 767px) {
    .nx-home .nx-section { margin-top: 26px; }
    .nx-home .nx-section-head { gap: 10px 12px; min-height: 0; margin-bottom: 14px; padding: 10px 12px; }
    .nx-home .nx-section-title { gap: 11px; font-size: 18px !important; }
    .nx-home .nx-section-title > .nx-3d, .nx-home .nx-section-title > .nx-i { width: 38px; height: 38px; padding: 6px; border-radius: 10px; }
    .nx-home .nx-section-title > .nx-i { padding: 9px; }
    .nx-home .nx-section-head .nx-btn-line { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
    .nx-home .nx-tabs button { height: 32px; padding: 0 13px; border-radius: 9px; font-size: 13px; }
}

/* =====================================================
   SECTION PANELS (homepage): header bar + cards on one surface
===================================================== */

.nx-home .nx-section {
    padding-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(70% 46% at 0% 0%, rgba(183, 140, 255, .10) 0%, transparent 62%),
        radial-gradient(60% 40% at 100% 100%, rgba(72, 92, 214, .07) 0%, transparent 65%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #121126 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .34);
}

.nx-home .nx-section-head {
    border: 0;
    border-radius: 15px 15px 0 0;
    background: radial-gradient(60% 180% at 0% 50%, rgba(183, 140, 255, .14) 0%, transparent 62%);
    box-shadow: none;
}

.nx-home .nx-section > *:not(.nx-section-head) { margin-left: 18px; margin-right: 18px; }

.darken .nx-home .nx-section {
    background:
        radial-gradient(70% 46% at 0% 0%, rgba(126, 87, 214, .10) 0%, transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%);
    box-shadow: 0 14px 34px rgba(30, 24, 60, .08);
}

.darken .nx-home .nx-section-head { background: radial-gradient(60% 180% at 0% 50%, rgba(126, 87, 214, .12) 0%, transparent 62%); box-shadow: none; }

@media (max-width: 767px) {
    .nx-home .nx-section { padding-bottom: 14px; border-radius: 14px; }
    .nx-home .nx-section > *:not(.nx-section-head) { margin-left: 12px; margin-right: 12px; }
}

/* =====================================================
   CATALOGUE FILTER (engine/modules/asia_neon/filter.php)
===================================================== */

.nx-filter { clear: both; width: 100%; padding: 26px 0 12px; }

.nx-filter-head { display: flex; align-items: center; gap: 18px; }
.nx-filter-head > .nx-3d { width: 60px; height: 60px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px var(--accent-glow)); }
.nx-filter-head:hover > .nx-3d { --nx-anim: running; }
.nx-filter-head h1 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; color: var(--text); }
.nx-filter-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }

.nx-filter-total { display: flex; align-items: baseline; gap: 8px; margin-left: auto; padding: 12px 20px; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 70%), var(--surface); box-shadow: 0 0 26px var(--accent-glow); }
.nx-filter-total b { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.nx-filter-total span { font-size: 13px; color: var(--text-muted); }

/* ---------- form ---------- */

.nx-filter-form {
    position: relative;
    display: grid;
    gap: 16px;
    margin: 20px 0 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(70% 60% at 0% 0%, rgba(183, 140, 255, .10) 0%, transparent 62%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #121126 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .34);
}

.darken .nx-filter-form { background: linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%); box-shadow: 0 14px 34px rgba(30, 24, 60, .08); }

.nx-f-top { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 12px; align-items: center; }

.nx-f-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--text-muted);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.darken .nx-f-search { background: rgba(20, 16, 40, .04); }
.nx-f-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }

.nx-filter-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    -webkit-appearance: none;
    appearance: none;
}

.nx-filter-form input::placeholder { color: var(--text-muted); opacity: 1; }

/* type switch */
.nx-f-seg { display: flex; height: 44px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.nx-f-seg label { position: relative; display: block; cursor: pointer; }
.nx-f-seg input, .nx-f-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nx-f-seg span { display: grid; place-items: center; height: 34px; padding: 0 16px; border-radius: 9px; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: color var(--transition), background-color var(--transition), box-shadow var(--transition); }
.nx-f-seg label:hover span { color: var(--text); }
.nx-f-seg input:checked + span { background: var(--btn-grad); color: #fff; font-weight: 700; box-shadow: 0 4px 16px rgba(134, 96, 224, .4); }
.nx-f-seg input:focus-visible + span, .nx-f-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* chips */
.nx-f-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nx-f-chip { position: relative; display: block; cursor: pointer; }

.nx-f-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.nx-f-chip:hover span { color: var(--text); border-color: var(--accent-border); }
.nx-f-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); font-weight: 700; box-shadow: 0 0 16px var(--accent-glow); }
.nx-f-chip input:checked + span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.nx-f-chip.is-locked { cursor: default; }
.nx-f-chip.is-locked span { border-color: transparent; background: var(--btn-grad); color: #fff; box-shadow: 0 4px 16px rgba(134, 96, 224, .35); }
.nx-f-chip.is-locked input:checked + span::before { background: #fff; box-shadow: none; }

/* ---------- results ---------- */

.nx-filter-results { position: relative; margin-top: 18px; transition: opacity 200ms ease-out; }
.nx-filter-results.is-loading { opacity: .45; pointer-events: none; }

.nx-f-active { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.nx-f-active > span { margin-right: 4px; font-size: 12.5px; color: var(--text-muted); }
.nx-f-active a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 12px; border: 1px solid var(--accent-border); border-radius: 15px; background: var(--accent-soft); color: var(--accent-light) !important; font-size: 12.5px; font-weight: 600; transition: background-color var(--transition), border-color var(--transition); }
.nx-f-active a .nx-i { width: 13px; height: 13px; opacity: .8; }
.nx-f-active a:hover { border-color: var(--accent); background: rgba(183, 140, 255, .22); }
.nx-f-active a.is-clear { padding: 0 12px; border-color: var(--border-strong); background: transparent; color: var(--text-2) !important; }

.nx-filter-bar { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--text-muted); }
.nx-filter-bar b { font-size: 18px; font-weight: 800; color: var(--text); }
.nx-filter-bar span { margin-left: auto; font-size: 12.5px; }

.nx-filter-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 16px; }

.nx-filter-empty { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; border: 1px dashed var(--border-strong); border-radius: 16px; text-align: center; }
.nx-filter-empty > .nx-i { width: 34px; height: 34px; color: var(--accent); opacity: .8; }
.nx-filter-empty b { font-size: 17px; color: var(--text); }
.nx-filter-empty span { max-width: 420px; font-size: 13px; color: var(--text-muted); }
.nx-filter-empty .nx-btn { margin-top: 8px; }

.nx-filter-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.nx-filter-pages a, .nx-filter-pages span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2) !important; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--transition), border-color var(--transition), background-color var(--transition); }
.nx-filter-pages a:hover { color: var(--text) !important; border-color: var(--accent-border); background: var(--accent-soft); }
.nx-filter-pages span[aria-current] { border-color: transparent; background: var(--btn-grad); color: #fff !important; box-shadow: 0 6px 20px rgba(134, 96, 224, .35); }
.nx-filter-pages i { color: var(--text-faint); font-style: normal; }
.nx-filter-pages .nx-i { width: 16px; height: 16px; }

@media (max-width: 1320px) { .nx-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (max-width: 1100px) {
    .nx-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .nx-f-top { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 767px) {
    .nx-filter { padding-top: 18px; }
    .nx-filter-head { flex-wrap: wrap; gap: 12px; }
    .nx-filter-head > .nx-3d { width: 44px; height: 44px; }
    .nx-filter-head h1 { font-size: 24px !important; }
    .nx-filter-head p { font-size: 12.5px; }
    .nx-filter-total { margin-left: 0; padding: 8px 14px; }
    .nx-filter-total b { font-size: 20px; }
    .nx-filter-form { padding: 14px; gap: 14px; }
    .nx-f-top { grid-template-columns: minmax(0, 1fr); }
    .nx-f-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .nx-f-chips::-webkit-scrollbar { display: none; }
    .nx-f-chip { flex: 0 0 auto; }
    .nx-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    .nx-filter-pages a, .nx-filter-pages span { min-width: 36px; height: 36px; padding: 0 9px; }
}

@media (max-width: 420px) { .nx-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================
   FILTER DROP-DOWNS (custom menus, no native controls)
===================================================== */

.nx-filter-form { gap: 12px; padding: 14px; }
.nx-f-top { grid-template-columns: minmax(220px, 1fr) auto auto; }
.nx-f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.nx-dd { position: relative; }
.nx-dd > summary { list-style: none; }
.nx-dd > summary::-webkit-details-marker { display: none; }

.nx-dd > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.darken .nx-dd > summary { background: rgba(20, 16, 40, .04); }
.nx-dd > summary > .nx-i:first-child { width: 16px; height: 16px; color: var(--accent); }
.nx-dd > summary > .nx-i:last-child { width: 14px; height: 14px; opacity: .6; transition: transform var(--transition); }
.nx-dd > summary:hover { color: var(--text); border-color: var(--accent-border); }
.nx-dd[open] > summary { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nx-dd[open] > summary > .nx-i:last-child { transform: rotate(180deg); }

.nx-dd > summary em { display: none; max-width: 150px; overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.nx-dd.is-on > summary { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text); }
.nx-dd.is-on > summary em { display: inline-block; color: var(--accent-light); font-weight: 700; }
.nx-dd[data-nx-dd="multi"].is-on > summary em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--btn-grad); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.nx-dd-sort > summary { height: 44px; border-radius: 12px; }
.nx-dd-sort > summary span { display: none; }
.nx-dd-sort > summary em { display: inline-block; max-width: none; color: var(--text); font-weight: 600; }
.nx-dd-sort.is-on > summary { border-color: var(--border-strong); background: rgba(255, 255, 255, .04); }

.nx-dd-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(92vw, 560px);
    padding: 10px;
    border: 1px solid rgba(183, 140, 255, .28);
    border-radius: 14px;
    background: linear-gradient(180deg, #181A2C 0%, #101120 100%);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .65), 0 0 34px rgba(183, 140, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: nx-rise 180ms ease-out both;
}

.darken .nx-dd-panel { background: #FFFFFF; box-shadow: 0 22px 54px rgba(30, 24, 60, .2); }
.nx-dd.is-right .nx-dd-panel, .nx-dd.is-flip .nx-dd-panel { left: auto; right: 0; }
.nx-dd-wide .nx-dd-panel { width: min(92vw, 560px); padding: 14px; }
.nx-dd-mid .nx-dd-panel { width: min(92vw, 380px); padding: 14px; }

.nx-dd-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--text-faint); }

/* option list with its own slim scrollbar */
.nx-dd-list { display: grid; gap: 2px; min-width: 190px; max-height: 268px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(183, 140, 255, .55) transparent; }
.nx-dd-list::-webkit-scrollbar { width: 6px; }
.nx-dd-list::-webkit-scrollbar-track { background: transparent; }
.nx-dd-list::-webkit-scrollbar-thumb { border-radius: 3px; background: linear-gradient(180deg, #B78CFF 0%, #6E4BC1 100%); }

.nx-dd-opt { position: relative; display: block; cursor: pointer; }
.nx-dd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.nx-dd-opt span { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 0 12px; border-radius: 9px; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 140ms ease-out, background-color 140ms ease-out; }
.nx-dd-opt:hover span { color: var(--text); background: rgba(255, 255, 255, .06); }
.darken .nx-dd-opt:hover span { background: rgba(20, 16, 40, .05); }
.nx-dd-opt input:checked + span { background: var(--accent-soft); color: var(--accent-light); font-weight: 700; }
.nx-dd-opt input:checked + span::after { content: ""; width: 14px; height: 8px; flex: 0 0 auto; margin-bottom: 3px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.nx-dd-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.nx-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nx-dd-cols > div > b { display: block; margin: 2px 0 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nx-dd-cols .nx-dd-list { min-width: 118px; }

/* single toggle + reset */
.nx-f-toggle { position: relative; display: block; cursor: pointer; }
.nx-f-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.nx-f-toggle span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 11px; background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color var(--transition), border-color var(--transition), background-color var(--transition); }
.nx-f-toggle span .nx-i { width: 14px; height: 14px; color: var(--accent); }
.nx-f-toggle:hover span { color: var(--text); border-color: var(--accent-border); }
.nx-f-toggle input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); }
.nx-f-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.nx-f-reset { display: inline-flex; align-items: center; height: 40px; margin-left: auto; padding: 0 12px; border-radius: 11px; color: var(--text-muted) !important; font-size: 13px; font-weight: 500; transition: color var(--transition), background-color var(--transition); }
.nx-f-reset:hover { color: var(--text) !important; background: rgba(255, 255, 255, .06); }

@media (max-width: 1100px) {
    .nx-f-top { grid-template-columns: minmax(0, 1fr) auto; }
    .nx-f-seg { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
    .nx-f-seg::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
    .nx-filter-form { padding: 12px; }
    .nx-f-top { grid-template-columns: minmax(0, 1fr); }
    .nx-dd-sort > summary { width: 100%; justify-content: space-between; }
    .nx-f-bar { flex-wrap: nowrap; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
    .nx-f-bar::-webkit-scrollbar { display: none; }
    .nx-f-bar > * { flex: 0 0 auto; }
    .nx-f-reset { margin-left: 0; }
    .nx-f-chips { flex-wrap: wrap; overflow: visible; }

    /* menus open as a bottom sheet */
    .nx-f-bar .nx-dd, .nx-dd-sort { position: static; }
    .nx-dd-panel, .nx-dd.is-right .nx-dd-panel, .nx-dd.is-flip .nx-dd-panel {
        position: fixed;
        z-index: 950;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        max-height: 72vh;
        padding: 18px 16px 22px;
        overflow-y: auto;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 60px rgba(0, 0, 0, .7), 0 0 0 100vmax rgba(4, 4, 10, .55);
    }
    .nx-dd-list { max-height: 46vh; }
}

/* =====================================================
   RULES PAGE (rules.tpl + .nx-rules-doc content)
===================================================== */

.nx-rules { clear: both; width: 100%; padding: 26px 0 12px; }
.nx-rules > .nx-wrap { max-width: 1240px; }

.nx-rules-head { display: flex; align-items: center; gap: 18px; }
.nx-rules-head h1 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; color: var(--text); }
.nx-rules-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.nx-rules-head > .nx-btn { margin-left: auto; height: 40px; padding: 0 18px; border-radius: 12px; }

.nx-rules-ico { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 auto; border: 1px solid var(--accent-border); border-radius: 16px; background: radial-gradient(90% 90% at 50% 20%, rgba(183, 140, 255, .28) 0%, rgba(110, 75, 193, .10) 60%, transparent 100%); color: var(--accent-light); box-shadow: 0 0 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .1); }
.nx-rules-ico .nx-i { width: 28px; height: 28px; }

.nx-rules-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }

.nx-rules-card {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: radial-gradient(120% 90% at 0% 0%, var(--accent-soft) 0%, transparent 64%), linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-rules-card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
.nx-rules-card .nx-i { width: 24px; height: 24px; color: var(--accent); }
.nx-rules-card b { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.nx-rules-card span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

.nx-rules-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; margin-top: 20px; }

.nx-rules-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; }

.nx-rules-toc, .nx-rules-help { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.nx-rules-toc > b { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nx-rules-toc ol { display: grid; gap: 2px; counter-reset: nx-toc; }
.nx-rules-toc a { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text-2) !important; font-size: 13px; line-height: 1.4; counter-increment: nx-toc; transition: color var(--transition), background-color var(--transition); }
.nx-rules-toc a::before { content: counter(nx-toc, decimal-leading-zero); flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.nx-rules-toc a:hover { color: var(--text) !important; background: var(--accent-soft); }
.nx-rules-toc a.is-active { color: var(--accent-light) !important; background: var(--accent-soft); font-weight: 600; }
.nx-rules-toc a.is-active::before { color: var(--accent); }

.nx-rules-help { background: radial-gradient(120% 100% at 100% 0%, var(--accent-soft) 0%, transparent 66%), var(--surface); }
.nx-rules-help > .nx-i { width: 24px; height: 24px; color: var(--accent); }
.nx-rules-help b { display: block; margin-top: 8px; font-size: 15px; color: var(--text); }
.nx-rules-help p { margin: 4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.nx-rules-help .nx-btn { width: 100%; margin-top: 6px; }
.nx-rules-help .nx-btn-line { height: 34px; }

/* ---------- the document itself (also used when DLE shows the rules during registration) ---------- */

.nx-rules-doc { counter-reset: nx-rule; display: grid; gap: 14px; font-family: var(--font); color: var(--text-2); }

.nx-rules-doc section {
    position: relative;
    padding: 20px 22px 20px 78px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    counter-increment: nx-rule;
    scroll-margin-top: calc(var(--header-h) + 16px);
    transition: border-color var(--transition);
}

.nx-rules-doc section:target, .nx-rules-doc section.is-active { border-color: var(--accent-border); }

.nx-rules-doc section::before {
    content: counter(nx-rule, decimal-leading-zero);
    position: absolute;
    top: 18px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-light);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.nx-rules-doc h2 { margin: 2px 0 10px !important; font-family: var(--font) !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--text); }
.nx-rules-doc p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.nx-rules-doc p:last-child { margin-bottom: 0; }

.nx-rules-doc ul { display: grid; gap: 8px; margin: 4px 0 12px !important; padding: 0 !important; list-style: none !important; }
.nx-rules-doc ul li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; list-style: none !important; }
.nx-rules-doc ul li::before { content: ""; position: absolute; top: .62em; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.nx-rules-doc .nx-note { padding: 11px 14px; border: 1px solid var(--accent-border); border-left-width: 3px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13.5px; font-weight: 600; }

.nx-rules-doc .nx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px !important; padding: 0 !important; list-style: none !important; counter-reset: nx-step; }
.nx-rules-doc .nx-steps li { padding: 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-secondary); font-size: 12.5px; line-height: 1.55; color: var(--text-muted); list-style: none !important; counter-increment: nx-step; }
.nx-rules-doc .nx-steps li::before { content: counter(nx-step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--btn-grad); color: #fff; font-size: 12px; font-weight: 800; }
.nx-rules-doc .nx-steps li:nth-child(2)::before { background: linear-gradient(135deg, #F8BE45 0%, #D4801A 100%); }
.nx-rules-doc .nx-steps li:nth-child(3)::before { background: linear-gradient(135deg, #FF6B8A 0%, #C0264A 100%); }
.nx-rules-doc .nx-steps b { display: block; margin-bottom: 3px; font-size: 14px; color: var(--text); }

.nx-rules-accept { text-align: center; }
.nx-rules-accept:empty { display: none; }
.nx-rules-accept input[type="submit"], .nx-rules-accept input[type="button"], .nx-rules-accept button { height: 42px; margin: 6px 5px 0; padding: 0 22px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-rules-accept input:first-of-type, .nx-rules-accept button:first-of-type { border-color: transparent; background: var(--btn-grad); color: #fff; }

@media (max-width: 1100px) {
    .nx-rules-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-rules-layout { grid-template-columns: minmax(0, 1fr); }
    .nx-rules-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row: 1; }
}

@media (max-width: 767px) {
    .nx-rules { padding-top: 18px; }
    .nx-rules-head { flex-wrap: wrap; gap: 12px; }
    .nx-rules-head h1 { font-size: 24px !important; }
    .nx-rules-head > .nx-btn { margin-left: 0; }
    .nx-rules-ico { width: 46px; height: 46px; border-radius: 13px; }
    .nx-rules-ico .nx-i { width: 22px; height: 22px; }
    .nx-rules-cards { gap: 10px; }
    .nx-rules-card { padding: 13px 14px; }
    .nx-rules-side { grid-template-columns: minmax(0, 1fr); }
    .nx-rules-help { display: none; }
    .nx-rules-doc section { padding: 62px 16px 16px; }
    .nx-rules-doc section::before { top: 14px; left: 16px; width: 36px; height: 36px; font-size: 13px; }
    .nx-rules-doc h2 { font-size: 17px !important; }
    .nx-rules-doc .nx-steps { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================
   LEGAL PAGE (copyright.tpl) + CONTACT PAGE (feedback.tpl)
===================================================== */

.nx-rules-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* static text that arrives without <section> wrappers (grouped by neon.js; readable even without it) */
.nx-rules-doc[data-nx-group]:not(.is-grouped) { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.nx-rules-doc[data-nx-group]:not(.is-grouped) h1 { display: none; }
.nx-rules-doc[data-nx-group]:not(.is-grouped) h2 { margin-top: 14px !important; }
.nx-rules-doc strong { color: var(--text); }
.nx-rules-doc a { color: var(--accent-light) !important; }

.nx-contact { clear: both; width: 100%; padding: 26px 0 12px; }
.nx-contact > .nx-wrap { max-width: 1240px; }

.nx-contact-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; }
.nx-contact-side { display: grid; gap: 12px; }

.nx-contact-channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: radial-gradient(120% 120% at 0% 0%, var(--accent-soft) 0%, transparent 64%), linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-contact-channel:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: 0 12px 26px rgba(0, 0, 0, .4), 0 0 22px var(--accent-glow); }
.nx-contact-ico { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--accent-border); border-radius: 13px; background: var(--accent-soft); color: var(--accent-light); }
.nx-contact-ico .nx-i { width: 21px; height: 21px; }
.nx-contact-channel small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nx-contact-channel b { display: block; margin-top: 2px; overflow: hidden; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.nx-contact-channel > .nx-i { color: var(--text-faint); transition: color var(--transition), transform var(--transition); }
.nx-contact-channel:hover > .nx-i { color: var(--accent-light); transform: translateX(3px); }

.nx-contact-links { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.nx-contact-links > b { margin: 2px 0 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nx-contact-links a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--text-2) !important; font-size: 13.5px; font-weight: 500; transition: color var(--transition), background-color var(--transition); }
.nx-contact-links a .nx-i { width: 16px; height: 16px; color: var(--accent); }
.nx-contact-links a:hover { color: var(--text) !important; background: var(--accent-soft); }

.nx-contact-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(183, 140, 255, .10) 0%, transparent 62%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #121126 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .34);
}

.darken .nx-contact-card { background: linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%); box-shadow: 0 14px 34px rgba(30, 24, 60, .08); }
.nx-contact-card h2 { display: flex; align-items: center; gap: 10px; font-size: 20px !important; font-weight: 800 !important; color: var(--text); }
.nx-contact-card h2 .nx-i { width: 20px; height: 20px; color: var(--accent); }
.nx-contact-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

.nx-contact-field { display: block; margin-top: 16px; }
.nx-contact-field > span { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.nx-contact-field > span small { font-weight: 400; color: var(--text-faint); }

.nx-contact-card input[type="text"],
.nx-contact-card input[type="email"],
.nx-contact-card textarea {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 11px !important;
    outline: 0 !important;
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
    scrollbar-width: thin;
    scrollbar-color: rgba(183, 140, 255, .55) transparent;
}

.darken .nx-contact-card input[type="text"], .darken .nx-contact-card input[type="email"], .darken .nx-contact-card textarea { background: rgba(20, 16, 40, .04) !important; }
.nx-contact-card input[type="text"]:focus, .nx-contact-card input[type="email"]:focus, .nx-contact-card textarea:focus { border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.nx-contact-card input::placeholder, .nx-contact-card textarea::placeholder { color: var(--text-faint); opacity: 1; }
.nx-contact-card textarea { min-height: 140px; }

.nx-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.nx-contact-actions .nx-btn-primary { height: 44px; padding: 0 22px; }
.nx-contact-actions .nx-btn-primary .nx-i { width: 16px; height: 16px; }
.nx-contact-actions .nx-btn-line { height: 44px; padding: 0 18px; border-radius: 11px; }
.nx-contact-status { font-size: 12.5px; color: var(--accent-light); }

.nx-contact-faq { margin-top: 30px; }
.nx-contact-faq > .nx-section-title { margin-bottom: 14px; font-size: 20px !important; }
.nx-contact-faq > .nx-section-title .nx-i { width: 22px; height: 22px; color: var(--accent); filter: none; }

.nx-contact-faq details { margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--transition); }
.nx-contact-faq details[open] { border-color: var(--accent-border); }
.nx-contact-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; color: var(--text); font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.nx-contact-faq summary::-webkit-details-marker { display: none; }
.nx-contact-faq summary .nx-i { width: 16px; height: 16px; color: var(--accent); transition: transform var(--transition); }
.nx-contact-faq details[open] summary .nx-i { transform: rotate(180deg); }
.nx-contact-faq details p { margin: 0; padding: 0 18px 16px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.nx-contact-faq details p a { color: var(--accent-light) !important; }

@media (max-width: 1100px) {
    .nx-rules-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-contact-layout { grid-template-columns: minmax(0, 1fr); }
    .nx-contact-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-contact-links { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-contact-links > b { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .nx-contact { padding-top: 18px; }
    .nx-rules-cards-3 { grid-template-columns: minmax(0, 1fr); }
    .nx-contact-side { grid-template-columns: minmax(0, 1fr); }
    .nx-contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-contact-card { padding: 16px; }
    .nx-contact-card .nx-f-chips { flex-wrap: wrap; overflow: visible; }
    .nx-contact-actions .nx-btn { flex: 1 1 100%; }
}

/* ---------- contact form (DLE feedback fields) ---------- */

.nx-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.nx-contact-field > span i, .nx-contact-note i { color: var(--accent); font-style: normal; font-weight: 700; }
.nx-contact-field > span em { float: right; font-size: 11.5px; font-style: normal; font-weight: 400; color: var(--text-faint); }
.nx-contact-field[hidden] { display: none; }
.nx-contact-field .nx-f-chips { margin-bottom: 10px; }
.nx-contact-recip select[hidden] { display: none; }
.nx-contact-recip .nx-f-chips { margin-bottom: 0; }

.nx-contact-topic {
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.nx-contact-topic:hover { color: var(--text); border-color: var(--accent-border); }
.nx-contact-topic.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); font-weight: 700; box-shadow: 0 0 16px var(--accent-glow); }

.nx-contact-card input.is-missing, .nx-contact-card textarea.is-missing { border-color: #FF6B8A !important; box-shadow: 0 0 0 3px rgba(255, 107, 138, .16) !important; }

.nx-contact-file { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px dashed var(--border-strong); border-radius: 11px; background: rgba(255, 255, 255, .03); color: var(--text-2); cursor: pointer; transition: border-color var(--transition), background-color var(--transition); }
.nx-contact-file:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.nx-contact-file .nx-i { color: var(--accent); transform: rotate(180deg); }
.nx-contact-file b { overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.nx-contact-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.nx-contact-code { display: flex; align-items: center; gap: 12px; }
.nx-contact-code img { height: 46px; width: auto; border-radius: 9px; }
.nx-contact-code input { flex: 1 1 auto; }

.nx-contact-actions button.nx-btn-primary { height: 46px; padding: 0 30px; border: 0; font-family: var(--font); font-size: 15px; }
.nx-contact-note { font-size: 12.5px; color: var(--text-muted); }

/* the message DLE shows in place of the form after sending */
#sendmail:not(:has(.nx-contact)) {
    width: min(680px, calc(100% - 32px));
    margin: 60px auto;
    padding: 30px 28px;
    border: 1px solid var(--accent-border);
    border-radius: 16px;
    background: radial-gradient(120% 120% at 50% 0%, var(--accent-soft) 0%, transparent 64%), var(--surface);
    box-shadow: 0 0 34px var(--accent-glow);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

#sendmail:not(:has(.nx-contact)) > * , #sendmail:not(:has(.nx-contact)) div { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; font-family: inherit !important; }
#sendmail:not(:has(.nx-contact)) b { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 800; color: var(--accent-light); }
#sendmail:not(:has(.nx-contact)) a { color: var(--accent-light) !important; }

@media (max-width: 767px) {
    .nx-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .nx-contact-code { flex-wrap: wrap; }
}

/* =====================================================
   VIP PAGE (subscriptions.tpl)
===================================================== */

.nx-vip { clear: both; width: 100%; padding: 22px 0 12px; }
.nx-vip > .nx-wrap { max-width: 1240px; }

.nx-vip-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: center;
    padding: 40px 44px;
    overflow: hidden;
    border: 1px solid rgba(245, 184, 61, .26);
    border-radius: 20px;
    background:
        radial-gradient(46% 90% at 88% 30%, rgba(245, 184, 61, .20) 0%, transparent 66%),
        radial-gradient(60% 110% at 0% 0%, rgba(183, 140, 255, .22) 0%, transparent 62%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(160deg, #17132E 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .45);
}

.nx-vip-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid rgba(245, 184, 61, .45); border-radius: 14px; background: rgba(245, 184, 61, .10); color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.nx-vip-eyebrow .nx-i { width: 15px; height: 15px; }
.nx-vip-hero h1 { margin-top: 16px !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.01em !important; color: #F5F5F8; }
.nx-vip-hero-text > p { max-width: 520px; margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #C4C6D4; }
.nx-vip-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nx-vip-cta .nx-btn { height: 46px; }
.nx-vip-cta .nx-btn-primary .nx-i { transform: rotate(90deg); }

.nx-vip-price {
    position: relative;
    padding: 26px 24px 22px;
    border: 1px solid rgba(245, 184, 61, .34);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 24, 52, .86) 0%, rgba(14, 13, 26, .92) 100%);
    box-shadow: 0 0 44px rgba(245, 184, 61, .13), inset 0 1px 0 rgba(255, 255, 255, .08);
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nx-vip-price > .nx-3d { --nx-anim: running; width: 84px; height: 84px; margin: -6px auto 0; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)) drop-shadow(0 0 26px rgba(245, 184, 61, .34)); }
.nx-vip-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; color: #F5F5F8; }
.nx-vip-amount b { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #FFF1BF 0%, #F8BE45 60%, #D4801A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nx-vip-amount span { font-size: 30px; font-weight: 800; color: var(--gold); }
.nx-vip-amount small { font-size: 15px; color: #9699AA; }
.nx-vip-price ul { display: grid; gap: 9px; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, .09); text-align: left; }
.nx-vip-price li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #DCDDE8; }
.nx-vip-price li .nx-i { width: 16px; height: 16px; color: var(--gold); }

/* steps */
.nx-vip-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px !important; counter-reset: nx-vip; }

.nx-vip-steps li {
    position: relative;
    padding: 18px 18px 18px 72px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    counter-increment: nx-vip;
    transition: transform var(--transition), border-color var(--transition);
}

.nx-vip-steps li:hover { transform: translateY(-3px); border-color: var(--accent-border); }
.nx-vip-steps li::before { content: counter(nx-vip); position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--btn-grad); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 6px 18px rgba(134, 96, 224, .4); }
.nx-vip-steps b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.nx-vip-steps span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* payment + side */
.nx-vip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; margin-top: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.nx-vip-side { display: grid; gap: 14px; }

.nx-vip-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.nx-vip-card > .nx-i { width: 24px; height: 24px; color: var(--accent); }
.nx-vip-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px !important; font-size: 20px !important; font-weight: 800 !important; color: var(--text); }
.nx-vip-card h2 .nx-i { width: 20px; height: 20px; color: var(--accent); }
.nx-vip-card h3 { margin: 8px 0 6px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--text); }
.nx-vip-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.nx-vip-card p:last-child { margin-bottom: 0; }
.nx-vip-card p a { color: var(--accent-light) !important; font-weight: 600; }
.nx-vip-card .nx-btn { margin-top: 8px; }

.nx-vip-pay {
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(183, 140, 255, .10) 0%, transparent 62%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #121126 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .34);
}

.darken .nx-vip-pay { background: linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%); box-shadow: 0 14px 34px rgba(30, 24, 60, .08); }

.nx-vip-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.nx-vip-row > span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.nx-vip-row > b { min-width: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.nx-vip-iban { font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px !important; letter-spacing: .04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.nx-vip-bank { display: inline-grid; place-items: center; height: 22px; padding: 0 8px; border-radius: 6px; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.nx-vip-bank.is-bog { background: #FF6022; }
.nx-vip-bank.is-tbc { background: #00A3E0; }

.nx-vip-copy { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: color var(--transition), border-color var(--transition), background-color var(--transition); }
.nx-vip-copy .nx-i { width: 15px; height: 15px; }
.nx-vip-copy em { font-style: normal; }
.nx-vip-copy:hover { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); }
.nx-vip-copy.is-done { border-color: rgba(67, 217, 163, .55); background: rgba(67, 217, 163, .12); color: #7BE9C2; }

.nx-vip-row.is-total { border-bottom: 0; }
.nx-vip-row.is-total > b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nx-vip-row.is-total strong { font-size: 26px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.nx-vip-row.is-total small { font-size: 13px; font-weight: 500; color: var(--text-muted); }

.nx-vip-months { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.nx-vip-months > span { margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--text); }

.nx-vip-notice { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 16px; border: 1px solid rgba(245, 184, 61, .4); border-left-width: 3px; border-radius: 12px; background: rgba(245, 184, 61, .07); }
.nx-vip-notice > .nx-i { width: 22px; height: 22px; margin-top: 1px; color: var(--gold); }
.nx-vip-notice b { display: block; margin-bottom: 4px; font-size: 15px; color: var(--text); }
.nx-vip-notice p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.nx-vip-notice p:last-child { margin-bottom: 0; }
.nx-vip-notice strong { color: var(--gold); }

.nx-vip-login { border-color: var(--accent-border); background: radial-gradient(120% 100% at 100% 0%, var(--accent-soft) 0%, transparent 66%), var(--surface); }
.nx-vip-card.is-warning { border-color: rgba(245, 184, 61, .28); }
.nx-vip-card.is-warning > .nx-i { color: var(--gold); }

@media (max-width: 1100px) {
    .nx-vip-hero { grid-template-columns: minmax(0, 1fr) 290px; padding: 30px; }
    .nx-vip-hero h1 { font-size: 36px !important; }
    .nx-vip-layout { grid-template-columns: minmax(0, 1fr); }
    .nx-vip-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .nx-vip { padding-top: 14px; }
    .nx-vip-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 18px; border-radius: 16px; }
    .nx-vip-hero h1 { font-size: 30px !important; }
    .nx-vip-hero-text > p { font-size: 14.5px; }
    .nx-vip-cta .nx-btn { flex: 1 1 100%; }
    .nx-vip-amount b { font-size: 54px; }
    .nx-vip-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .nx-vip-card { padding: 16px; }
    .nx-vip-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; }
    .nx-vip-row > span { grid-column: 1 / -1; }
    .nx-vip-iban { font-size: 15px !important; }
    .nx-vip-copy em { display: none; }
    .nx-vip-copy { width: 40px; padding: 0; justify-content: center; }
    .nx-vip-side { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================
   LOGIN PAGE (shesvla.tpl)
===================================================== */

.nx-auth-page { clear: both; width: 100%; padding: 34px 0 20px; }
.nx-auth-page > .nx-wrap { max-width: 1120px; }

.nx-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 600px;
    overflow: hidden;
    border: 1px solid rgba(183, 140, 255, .24);
    border-radius: 22px;
    background: linear-gradient(180deg, #121126 0%, #0A0915 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(183, 140, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- brand side ---------- */

.nx-auth-brand { position: relative; display: flex; align-items: flex-end; padding: 40px; overflow: hidden; isolation: isolate; background: #0B0A18; }

.nx-auth-posters {
    position: absolute;
    z-index: -2;
    top: -12%;
    left: -10%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 124%;
    transform: rotate(-9deg);
    opacity: .62;
}

.nx-auth-posters img { width: 100%; aspect-ratio: 2 / 3; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.nx-auth-posters img:nth-child(4n + 2), .nx-auth-posters img:nth-child(4n + 4) { transform: translateY(34px); }

.nx-auth-brand::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(0deg, #0B0A18 12%, rgba(11, 10, 24, .86) 46%, rgba(11, 10, 24, .42) 100%),
        radial-gradient(70% 60% at 20% 100%, rgba(110, 75, 193, .55) 0%, transparent 70%);
}

.nx-auth-brand-in { position: relative; color: #F5F5F8; }
.nx-auth-brand .nx-logo { font-size: 22px; color: #F5F5F8 !important; }
.nx-auth-brand .nx-logo .nx-3d { width: 38px; height: 38px; }
.nx-auth-brand h2 { margin-top: 22px !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #F5F5F8; }
.nx-auth-brand p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: #C4C6D4; }
.nx-auth-brand ul { display: grid; gap: 11px; margin-top: 22px !important; }
.nx-auth-brand li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 500; color: #DCDDE8; }
.nx-auth-brand li .nx-i { width: 32px; height: 32px; padding: 7px; border: 1px solid rgba(183, 140, 255, .4); border-radius: 10px; background: rgba(183, 140, 255, .14); color: #D1B5FF; }

/* ---------- form side ---------- */

.nx-auth-card { display: flex; flex-direction: column; justify-content: center; padding: 44px 48px; }

.nx-auth-ico { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--accent-border); border-radius: 16px; background: radial-gradient(90% 90% at 50% 20%, rgba(183, 140, 255, .28) 0%, rgba(110, 75, 193, .10) 60%, transparent 100%); color: var(--accent-light); box-shadow: 0 0 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .1); }
.nx-auth-ico .nx-i { width: 26px; height: 26px; }
.nx-auth-card h1 { margin-top: 18px !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.15 !important; color: var(--text); }
.nx-auth-sub { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); }

.nx-auth-error { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 14px; border: 1px solid rgba(255, 107, 138, .5); border-radius: 11px; background: rgba(255, 107, 138, .10); color: #FF9CB2; font-size: 13.5px; font-weight: 600; }
.nx-auth-error[hidden] { display: none; }
.nx-auth-error .nx-i { width: 17px; height: 17px; }

.nx-auth-card form { margin: 22px 0 0; }
.nx-auth-field { display: block; margin-bottom: 16px; }
.nx-auth-field > span:first-child { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.nx-auth-field > span:first-child a { font-weight: 500; color: var(--accent-light) !important; }

.nx-auth-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 6px 0 15px;
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    background: rgba(255, 255, 255, .04);
    color: var(--text-muted);
    transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
}

.darken .nx-auth-input { background: rgba(20, 16, 40, .04); }
.nx-auth-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent-light); }
.nx-auth-input.is-missing { border-color: #FF6B8A; box-shadow: 0 0 0 3px rgba(255, 107, 138, .16); }

.nx-auth-input input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 15px !important;
}

.nx-auth-input input::placeholder { color: var(--text-faint); opacity: 1; }
.nx-auth-input input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 99999s ease-out 0s; }

.nx-auth-eye { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); transition: color var(--transition), background-color var(--transition); }
.nx-auth-eye:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

.nx-auth-check { position: relative; display: flex; align-items: center; gap: 10px; margin: 2px 0 20px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.nx-auth-check input { position: absolute; opacity: 0; pointer-events: none; }
.nx-auth-check span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 6px; background: rgba(255, 255, 255, .04); transition: border-color var(--transition), background-color var(--transition); }
.nx-auth-check input:checked + span { border-color: transparent; background: var(--btn-grad); }
.nx-auth-check input:checked + span::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.nx-auth-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.nx-auth-submit { width: 100%; height: 50px; border: 0; border-radius: 13px; font-family: var(--font); font-size: 15.5px; }
.nx-auth-submit .nx-i { transition: transform var(--transition); }
.nx-auth-submit:hover .nx-i { transform: translateX(4px); }

.nx-auth-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); text-align: center; }
.nx-auth-foot a { margin-left: 6px; color: var(--accent-light) !important; font-weight: 700; }

.nx-auth-done { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 60px auto; padding: 34px; border: 1px solid var(--accent-border); border-radius: 18px; background: var(--surface); text-align: center; }
.nx-auth-done > .nx-i { width: 34px; height: 34px; color: #43D9A3; }
.nx-auth-done b { font-size: 20px; color: var(--text); }
.nx-auth-done p { margin: 0 0 8px; font-size: 14px; color: var(--text-muted); }

@media (max-width: 900px) {
    .nx-auth-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .nx-auth-brand { order: 2; padding: 28px; }
    .nx-auth-brand h2 { font-size: 22px !important; }
    .nx-auth-card { padding: 34px 28px; }
}

@media (max-width: 767px) {
    .nx-auth-page { padding-top: 16px; }
    .nx-auth-shell { border-radius: 18px; }
    .nx-auth-card { padding: 26px 18px; }
    .nx-auth-card h1 { font-size: 25px !important; }
    .nx-auth-brand { padding: 22px 18px; }
    .nx-auth-brand ul { display: none; }
}

/* DLE system messages (info.tpl) shown above the new pages, e.g. a wrong password */
.center-top:has(.nx-page) .infis-1 { width: min(1120px, calc(100% - 2 * var(--pad))) !important; margin: 22px auto -14px !important; padding: 0 !important; float: none !important; background: none !important; }
.center-top:has(.nx-page) .infis-1 div { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.center-top:has(.nx-page) .infis-1 .shecdoma-2 { padding: 13px 16px !important; border: 1px solid rgba(255, 107, 138, .5) !important; border-left-width: 3px !important; border-radius: 12px !important; background: rgba(255, 107, 138, .10) !important; color: #FFC2CF !important; font-family: var(--font) !important; font-size: 13.5px !important; line-height: 1.6 !important; text-align: left !important; }
.center-top:has(.nx-page) .infis-1 .shecdoma-2 b { color: #FF9CB2; font-size: 14.5px; }

/* =====================================================
   PROFILE / FIELD-SEARCH PAGES (person.php) + TEAM PAGE (staff.php)
===================================================== */

.nx-person, .nx-staff { clear: both; width: 100%; padding: 24px 0 12px; }

/* ---------- profile header ---------- */

.nx-person-head {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 30px 32px;
    overflow: hidden;
    border: 1px solid rgba(183, 140, 255, .26);
    border-radius: 20px;
    background:
        radial-gradient(50% 120% at 0% 0%, rgba(183, 140, 255, .24) 0%, transparent 62%),
        radial-gradient(40% 100% at 100% 100%, rgba(72, 92, 214, .16) 0%, transparent 66%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(160deg, #17132E 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .45);
}

.nx-person-avatar { position: relative; width: 132px; height: 132px; flex: 0 0 auto; padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #D1B5FF 0%, #8660E0 55%, #485CD6 100%); box-shadow: 0 0 44px rgba(183, 140, 255, .34), 0 16px 34px rgba(0, 0, 0, .5); }
.nx-person-avatar img, .nx-person-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border: 4px solid #0F0E1E; border-radius: 50%; background: linear-gradient(135deg, #2A1F52 0%, #14122A 100%); object-fit: cover; }
.nx-person-avatar span { color: #D1B5FF; font-size: 44px; font-weight: 800; letter-spacing: -.02em; }

.nx-person-role { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid var(--accent-border); border-radius: 14px; background: var(--accent-soft); color: var(--accent-light); font-size: 12px; font-weight: 700; }
.nx-person-role .nx-i { width: 14px; height: 14px; }
.nx-person-id h1 { margin-top: 12px !important; overflow-wrap: anywhere; font-size: 40px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.01em !important; color: #F5F5F8; }
.nx-person-id p { margin: 8px 0 0; font-size: 13.5px; color: #B9BBCB; }

.nx-person-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.nx-person-tags:empty { display: none; }
.nx-person-tags span { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 5px 0 11px; border: 1px solid rgba(183, 140, 255, .38); border-radius: 13px; background: rgba(183, 140, 255, .12); color: #D1B5FF; font-size: 12px; font-weight: 600; }
.nx-person-tags span.is-alt { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #DCDDE8; }
.nx-person-tags em { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; }

.nx-person-stats { display: grid; grid-template-columns: repeat(2, minmax(106px, 1fr)); gap: 10px; width: 250px; }
.nx-person-stats li { padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; background: rgba(10, 9, 21, .55); text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nx-person-stats li.is-wide { grid-column: 1 / -1; border-color: rgba(183, 140, 255, .34); background: rgba(183, 140, 255, .10); }
.nx-person-stats b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: #F5F5F8; font-variant-numeric: tabular-nums; }
.nx-person-stats li.is-wide b { background: linear-gradient(180deg, #EBDDFF 0%, #B78CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nx-person-stats span { display: block; margin-top: 3px; font-size: 11.5px; color: #9699AA; }

/* ---------- bar: role tabs + sort ---------- */

.nx-person-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 18px; }
.nx-person-tabs { display: flex; gap: 8px; }

.nx-person-tabs a { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text-2) !important; font-size: 14px; font-weight: 600; transition: color var(--transition), border-color var(--transition), box-shadow var(--transition); }
.nx-person-tabs a .nx-i { width: 16px; height: 16px; color: var(--accent); }
.nx-person-tabs a em { display: inline-grid; place-items: center; min-width: 24px; height: 21px; padding: 0 7px; border-radius: 11px; background: rgba(255, 255, 255, .08); font-size: 11.5px; font-style: normal; font-weight: 700; }
.nx-person-tabs a:hover { color: var(--text) !important; border-color: var(--accent-border); }
.nx-person-tabs a.is-active { border-color: transparent; background: var(--btn-grad); color: #fff !important; box-shadow: 0 6px 22px rgba(134, 96, 224, .4); }
.nx-person-tabs a.is-active .nx-i { color: #fff; }
.nx-person-tabs a.is-active em { background: rgba(255, 255, 255, .22); }

.nx-person-sort { display: flex; padding: 4px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.nx-person-sort a { display: grid; place-items: center; height: 32px; padding: 0 14px; border-radius: 9px; color: var(--text-2) !important; font-size: 13px; font-weight: 500; transition: color var(--transition), background-color var(--transition); }
.nx-person-sort a:hover { color: var(--text) !important; }
.nx-person-sort a.is-active { background: var(--accent-soft); color: var(--accent-light) !important; font-weight: 700; }

.nx-person-count { font-size: 14px; color: var(--text-muted); }
.nx-person-count b { font-size: 18px; color: var(--text); }
.nx-person-kicker { margin: 0 0 2px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
.nx-person-back { margin: 26px 0 0; text-align: center; }
.nx-person-back a { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-2) !important; font-size: 13.5px; font-weight: 600; transition: color var(--transition), border-color var(--transition), background-color var(--transition); }
.nx-person-back a:hover { color: var(--text) !important; border-color: var(--accent-border); background: var(--accent-soft); }
.nx-person-back .nx-i { width: 16px; height: 16px; color: var(--accent); }

/* ---------- team page ---------- */

.nx-staff-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 36px 40px;
    border: 1px solid rgba(183, 140, 255, .26);
    border-radius: 20px;
    background:
        radial-gradient(50% 120% at 0% 0%, rgba(183, 140, 255, .24) 0%, transparent 62%),
        radial-gradient(40% 100% at 100% 100%, rgba(72, 92, 214, .16) 0%, transparent 66%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(160deg, #17132E 0%, #0A0915 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .45);
}

.nx-vip-eyebrow.is-violet { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light); }
.nx-staff-hero h1 { max-width: 620px; margin-top: 16px !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1.16 !important; color: #F5F5F8; }
.nx-staff-hero p { max-width: 560px; margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: #C4C6D4; }

.nx-staff-totals { display: grid; gap: 10px; width: 210px; }
.nx-staff-totals li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; background: rgba(10, 9, 21, .55); }
.nx-staff-totals b { font-size: 26px; font-weight: 800; color: #F5F5F8; font-variant-numeric: tabular-nums; }
.nx-staff-totals li:first-child { border-color: rgba(183, 140, 255, .34); background: rgba(183, 140, 255, .10); }
.nx-staff-totals span { font-size: 12.5px; color: #9699AA; }

.nx-staff-section { margin-top: 30px; }
.nx-staff-section > h2 { display: flex; align-items: center; gap: 11px; margin-bottom: 16px !important; font-size: 22px !important; font-weight: 800 !important; color: var(--text); }
.nx-staff-section > h2 .nx-i { width: 38px; height: 38px; padding: 9px; border: 1px solid var(--accent-border); border-radius: 11px; background: var(--accent-soft); color: var(--accent-light); }
.nx-staff-section > h2 em { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--text-2); font-size: 12.5px; font-style: normal; font-weight: 700; }

.nx-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }

.nx-staff-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 18px 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: radial-gradient(120% 70% at 50% 0%, var(--accent-soft) 0%, transparent 62%), linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-staff-card:hover { transform: translateY(-5px); border-color: var(--accent-border); box-shadow: 0 18px 38px rgba(0, 0, 0, .5), 0 0 30px var(--accent-glow); }

.nx-staff-avatar { width: 96px; height: 96px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #D1B5FF 0%, #8660E0 55%, #485CD6 100%); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transition: box-shadow var(--transition), transform var(--transition); }
.nx-staff-avatar img, .nx-staff-avatar i { display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--surface); border-radius: 50%; background: linear-gradient(135deg, #2A1F52 0%, #14122A 100%); object-fit: cover; color: #D1B5FF; font-size: 30px; font-style: normal; font-weight: 800; }
.nx-staff-card:hover .nx-staff-avatar { transform: scale(1.05); box-shadow: 0 0 34px rgba(183, 140, 255, .42); }

.nx-staff-name { display: block; width: 100%; margin-top: 14px; overflow: hidden; font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.nx-staff-role { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--accent-light); }

.nx-staff-meter { display: block; width: 100%; height: 4px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.darken .nx-staff-meter { background: rgba(20, 16, 40, .08); }
.nx-staff-meter span { display: block; height: 100%; border-radius: 2px; background: var(--btn-grad); }

.nx-staff-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; width: 100%; margin-top: 12px; }
.nx-staff-counts span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nx-staff-counts .nx-i { width: 14px; height: 14px; color: var(--accent); }
.nx-staff-counts b { font-size: 14.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

.nx-staff-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 36px; margin-top: 14px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: color var(--transition), border-color var(--transition), background-color var(--transition); }
.nx-staff-go .nx-i { width: 14px; height: 14px; transition: transform var(--transition); }
.nx-staff-card:hover .nx-staff-go { border-color: transparent; background: var(--btn-grad); color: #fff; }
.nx-staff-card:hover .nx-staff-go .nx-i { transform: translateX(3px); }

.nx-staff-others { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-staff-others a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 6px; border: 1px solid var(--border); border-radius: 23px; background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.nx-staff-others a:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: 0 10px 22px rgba(0, 0, 0, .4); }
.nx-staff-others i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2A1F52 0%, #14122A 100%); color: #D1B5FF; font-size: 12.5px; font-style: normal; font-weight: 800; }
.nx-staff-others b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.nx-staff-others em { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-light); font-size: 11.5px; font-style: normal; font-weight: 700; }

@media (max-width: 1100px) {
    .nx-person-head { grid-template-columns: auto minmax(0, 1fr); padding: 26px; }
    .nx-person-stats { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; }
    .nx-person-stats li.is-wide { grid-column: auto; }
    .nx-staff-hero { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .nx-staff-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
    .nx-staff-totals li { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 767px) {
    .nx-person, .nx-staff { padding-top: 14px; }
    .nx-person-head { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 18px; border-radius: 16px; text-align: center; }
    .nx-person-avatar { width: 108px; height: 108px; margin: 0 auto; }
    .nx-person-avatar span { font-size: 36px; }
    .nx-person-id h1 { font-size: 28px !important; }
    .nx-person-tags { justify-content: center; }
    .nx-person-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-person-stats li.is-wide { grid-column: 1 / -1; }
    .nx-person-bar { flex-direction: column; align-items: stretch; }
    .nx-person-tabs a { flex: 1 1 0; justify-content: center; padding: 0 10px; }
    .nx-person-sort a { flex: 1 1 0; }
    .nx-staff-hero { padding: 22px 18px; border-radius: 16px; }
    .nx-staff-hero h1 { font-size: 26px !important; }
    .nx-staff-hero p { font-size: 14px; }
    .nx-staff-totals b { font-size: 21px; }
    .nx-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nx-staff-card { padding: 18px 12px 12px; border-radius: 14px; }
    .nx-staff-avatar { width: 76px; height: 76px; }
    .nx-staff-name { font-size: 15px; }
    .nx-staff-counts { flex-direction: column; align-items: center; gap: 4px; }
}

/* =====================================================
   PROFILE COVER: activity chart + reactions
===================================================== */

.nx-person-head > * { position: relative; z-index: 1; }

.nx-person-chart { position: absolute !important; z-index: 0 !important; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
.nx-person-chart svg { display: block; width: 100%; height: 100%; opacity: .5; }
.nx-person-years { position: absolute; left: 0; right: 0; bottom: 6px; height: 14px; }
.nx-person-years span { position: absolute; bottom: 0; padding-left: 6px; border-left: 1px solid rgba(201, 167, 255, .45); color: rgba(209, 181, 255, .7); font-size: 10.5px; font-weight: 700; line-height: 14px; letter-spacing: .04em; }

.nx-person-peak { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 14px 0 0 !important; font-size: 12.5px !important; color: #B9BBCB !important; }
.nx-person-peak .nx-i { width: 14px; height: 14px; color: var(--accent); }
.nx-person-peak b { color: #F5F5F8; font-weight: 700; }

/* ---------- reactions ---------- */

.nx-react { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.nx-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 18px 0 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 25px;
    background: rgba(10, 9, 21, .6);
    color: #DCDDE8;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.nx-react-btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.nx-react-btn:active { transform: translateY(0) scale(.97); }
.nx-react-btn b { min-width: 16px; font-size: 16px; font-weight: 800; color: #F5F5F8; font-variant-numeric: tabular-nums; }
.nx-react-btn[disabled] { cursor: progress; }

.nx-heart { width: 34px; height: 34px; flex: 0 0 auto; overflow: visible; filter: grayscale(.75) brightness(.8); opacity: .7; transition: filter 300ms ease-out, opacity 300ms ease-out; }
.nx-react-btn:hover .nx-heart { filter: grayscale(.2); opacity: 1; }

/* love: the heart beats for as long as it stays chosen */
.nx-react-btn.is-love.is-on { border-color: rgba(255, 77, 125, .6); background: rgba(255, 77, 125, .13); box-shadow: 0 0 26px rgba(255, 77, 125, .28); color: #FFD3DF; }
.nx-react-btn.is-love.is-on .nx-heart { filter: drop-shadow(0 0 9px rgba(255, 77, 125, .75)); opacity: 1; transform-origin: 50% 60%; animation: nx-heartbeat 1.05s ease-in-out infinite; }

@keyframes nx-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.22); }
    28% { transform: scale(1); }
    42% { transform: scale(1.14); }
    60% { transform: scale(1); }
}

/* heartbreak: the two halves fall apart and stay apart */
.nx-half-l, .nx-half-r { transform-box: view-box; transform-origin: 32px 56px; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.nx-crack { opacity: 0; transition: opacity 200ms ease-out; }
.nx-react-btn.is-broken.is-on { border-color: rgba(167, 139, 250, .55); background: rgba(110, 75, 193, .16); box-shadow: 0 0 22px rgba(110, 75, 193, .26); color: #E3D7FF; }
.nx-react-btn.is-broken.is-on .nx-heart { filter: none; opacity: 1; }
.nx-react-btn.is-broken.is-on .nx-half-l { transform: translate(-6px, 3px) rotate(-14deg); }
.nx-react-btn.is-broken.is-on .nx-half-r { transform: translate(6px, 3px) rotate(14deg); }
.nx-react-btn.is-broken:not(.is-on):hover .nx-crack { opacity: .8; }
.nx-react-btn.is-broken.is-snap .nx-heart { animation: nx-heartsnap 420ms ease-in-out 1; }

@keyframes nx-heartsnap {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px) rotate(-4deg); }
    40% { transform: translateX(3px) rotate(4deg); }
    60% { transform: translateX(-2px) rotate(-2deg); }
    80% { transform: translateX(2px) rotate(2deg); }
}

@media (max-width: 767px) {
    .nx-react { justify-content: center; }
    .nx-react-btn { height: 46px; padding: 0 14px 0 8px; }
    .nx-react-btn span { display: none; }
    .nx-person-peak { justify-content: center; }
    .nx-person-chart { height: 40%; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-react-btn.is-love.is-on .nx-heart { animation: none; transform: scale(1.12); }
}

/* =====================================================
   ACTORS CATALOGUE (actors.php)
===================================================== */

.nx-f-top-2 { grid-template-columns: minmax(220px, 1fr) auto; }
.nx-f-letters { max-width: 360px; }
.nx-f-letters .nx-f-chip span { min-width: 34px; justify-content: center; padding: 0 9px; }

.nx-actor-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 16px; }

.nx-actor { display: block; min-width: 0; text-align: center; }

.nx-actor-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, #241A45 0%, #10111A 100%);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nx-actor-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 420ms ease-out, filter var(--transition); }
.nx-actor-media i { display: grid; place-items: center; width: 100%; height: 100%; color: #D1B5FF; font-size: 42px; font-style: normal; font-weight: 800; }

.nx-actor-media em {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(7, 7, 13, .74);
    color: #F5F5F8;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nx-actor-media em .nx-i { width: 12px; height: 12px; color: var(--accent-light); }

.nx-actor:hover .nx-actor-media { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 24px var(--accent-glow); }
.nx-actor:hover .nx-actor-media img { transform: scale(1.05); filter: brightness(1.08); }

.nx-actor b { display: block; margin-top: 10px; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text); white-space: nowrap; text-overflow: ellipsis; transition: color var(--transition); }
.nx-actor:hover b { color: var(--accent-light); }
.nx-actor small { display: block; margin-top: 1px; overflow: hidden; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.nx-actor-facts { display: block; margin-top: 4px; overflow: hidden; font-size: 11px; color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; }

@media (min-width: 1700px) { .nx-actor-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 1320px) { .nx-actor-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .nx-actor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (max-width: 767px) {
    .nx-f-top-2 { grid-template-columns: minmax(0, 1fr); }
    .nx-actor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    .nx-actor b { font-size: 13px; }
    .nx-f-letters { max-width: none; }
}

@media (max-width: 420px) { .nx-actor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================
   ACTOR PROFILE (actor.php)
===================================================== */

.nx-person-head.is-actor .nx-person-avatar { width: 168px; height: 224px; border-radius: 20px; }
.nx-person-head.is-actor .nx-person-avatar img,
.nx-person-head.is-actor .nx-person-avatar span { border-radius: 16px; object-position: center 18%; }

.nx-card-note { margin-top: 3px; overflow: hidden; font-size: 11.5px; color: var(--accent-light); white-space: nowrap; text-overflow: ellipsis; }

.nx-actor-info { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: #0F0F1B; }
.nx-actor-info h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--text); }
.nx-actor-info h2 .nx-i { width: 18px; height: 18px; color: var(--accent); }
.nx-actor-info dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.nx-actor-info dl > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.nx-actor-info dl > div.is-wide { grid-column: span 2; }
.nx-actor-info dt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.nx-actor-info dt .nx-i { width: 14px; height: 14px; color: var(--accent); }
.nx-actor-info dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); }
.nx-actor-info dd a { color: var(--accent-light) !important; }
.nx-actor-info dd a:hover { text-decoration: underline; }
.nx-actor-info dd a.is-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--accent-border); border-radius: 10px; font-size: 11.5px; font-weight: 600; }

.nx-actor-page .nx-person-bar { margin-top: 26px; scroll-margin-top: 84px; }
.nx-actor-partners { margin-top: 36px; }
.nx-actor-partners .nx-section-title { margin-bottom: 16px; }
.nx-actor-partners .nx-actor-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }

.nx-actor-edit { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 18px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.nx-actor-edit a { color: inherit !important; }
.nx-actor-edit .nx-i { width: 15px; height: 15px; color: var(--accent); }

@media (max-width: 1320px) { .nx-actor-partners .nx-actor-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .nx-actor-info dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-actor-partners .nx-actor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (max-width: 767px) {
    .nx-person-head.is-actor .nx-person-avatar { width: 132px; height: 176px; }
    .nx-actor-info { padding: 14px; }
    .nx-actor-info dl { grid-template-columns: minmax(0, 1fr); }
    .nx-actor-info dl > div.is-wide { grid-column: auto; }
    .nx-actor-partners .nx-actor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* duration chip on the poster + duration in the popover */
.nx-dur { position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: rgba(7, 7, 13, .74); color: #F5F5F8; font-size: 11px; font-weight: 700; line-height: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.nx-dur .nx-i { width: 11px; height: 11px; color: var(--accent-light); }
.nx-dur ~ .nx-card-edit { top: 36px; }
.nx-tip-facts > span.nx-tip-dur { gap: 5px; }
.nx-tip-facts > span.nx-tip-dur .nx-i { width: 12px; height: 12px; color: var(--accent-light); }
/* region swapped without a reload (tabs, sorting, pages) */
#nxSwap { transition: opacity 160ms ease-out; }
#nxSwap.is-loading { opacity: .45; pointer-events: none; }

/* =====================================================
   COMICS — catalogue, comic page, chapter reader, zoom viewer
===================================================== */

.nx-reader > .nx-wrap, .nx-comics > .nx-wrap { padding-top: 22px; }
.nx-comics-totals { display: flex; gap: 10px; margin-left: auto; }
.nx-comics-totals .nx-filter-total { margin-left: 0; }

/* quick jump between comics */
.nx-comics-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nx-comics-jump a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 5px; border: 1px solid var(--border); border-radius: 14px; background: #0F0F1B; color: var(--text) !important; font-size: 13.5px; font-weight: 600; transition: border-color var(--transition), background-color var(--transition), transform var(--transition); }
.nx-comics-jump a:hover { border-color: var(--accent-border); background: var(--accent-soft); transform: translateY(-2px); }
.nx-comics-jump img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.nx-comics-jump em { padding: 2px 8px; border-radius: 10px; background: rgba(183, 140, 255, .14); color: var(--accent-light); font-size: 11.5px; font-style: normal; font-weight: 700; }

/* newest chapters */
.nx-comics-latest { margin-top: 34px; }
.nx-comics-latest .nx-section-title { margin-bottom: 16px; }
.nx-chapter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nx-chapter-card { display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #0F0F1B; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.nx-chapter-card:hover { border-color: var(--accent-border); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, .45), 0 0 22px var(--accent-glow); }
.nx-chapter-thumb { flex: 0 0 96px; align-self: stretch; min-height: 86px; border-right: 1px solid var(--border); background: #151526; overflow: hidden; }
.nx-chapter-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease-out; }
.nx-chapter-card:hover .nx-chapter-thumb img { transform: scale(1.06); }
.nx-chapter-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 10px 14px; }
.nx-chapter-text small { overflow: hidden; color: var(--accent-light); font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.nx-chapter-text b { overflow: hidden; color: var(--text); font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.nx-chapter-text i { color: var(--text-muted); font-size: 11.5px; font-style: normal; }

/* a comic */
.nx-comics-list { display: grid; gap: 18px; margin-top: 34px; }
.nx-comic { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; padding: 22px; border: 1px solid var(--border); border-radius: 22px; background: #0F0F1B; scroll-margin-top: 86px; }
.nx-comic:target { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), 0 0 34px var(--accent-glow); }
.nx-comic-cover { position: relative; display: block; align-self: start; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 16px; background: linear-gradient(135deg, #241A45 0%, #10111A 100%); box-shadow: 0 18px 34px rgba(0, 0, 0, .5); }
.nx-comic-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 460ms ease-out; }
.nx-comic-cover:hover img { transform: scale(1.04); }
.nx-comic-cover i { display: grid; place-items: center; height: 100%; color: #D1B5FF; font-size: 46px; font-style: normal; font-weight: 800; }
.nx-comic-cover em { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 9px; background: rgba(7, 7, 13, .78); color: #8FE3B0; font-size: 11.5px; font-style: normal; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.nx-comic-body { min-width: 0; }
.nx-comic-body h1, .nx-comic-body h2 { margin: 2px 0 0 !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--text); }
.nx-comic.is-full .nx-comic-body h1 { font-size: 34px !important; }
.nx-comic-body h2 a { color: inherit !important; transition: color var(--transition); }
.nx-comic-body h2 a:hover { color: var(--accent-light) !important; }
.nx-comic-orig { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; }

.nx-comic-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.nx-comic-facts li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text-2); font-size: 12.5px; }
.nx-comic-facts li b { color: var(--text); font-weight: 700; }
.nx-comic-facts .nx-i { width: 14px; height: 14px; color: var(--accent); }

.nx-comic-story { margin: 14px 0 0; max-width: 900px; color: var(--text-2); font-size: 14px; line-height: 1.7; }

.nx-comic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.nx-comic-actions .nx-btn .nx-i { width: 17px; height: 17px; }
.nx-comic-more { margin-left: 4px; color: var(--text-muted) !important; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .2); }
.nx-comic-more:hover { color: var(--accent-light) !important; }

/* chapter tiles */
.nx-comic-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 7px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.nx-comic-chapters a { position: relative; display: grid; place-items: center; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .025); color: var(--text-2) !important; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition); }
.nx-comic-chapters a:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text) !important; transform: translateY(-2px); }
.nx-comic-chapters a.is-new::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #5EE0A0; box-shadow: 0 0 8px #5EE0A0; }
.nx-comic-chapters a.is-read { border-color: rgba(183, 140, 255, .28); color: var(--text-muted) !important; }
.nx-comic-chapters a.is-last, .nx-comic-chapters a.is-current { border-color: transparent; background: var(--btn-grad); color: #fff !important; box-shadow: 0 6px 18px rgba(134, 96, 224, .35); }
.nx-comic-chapters.is-cut a.is-more { display: none; }
.nx-comic-all { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: none; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--transition), color var(--transition), background-color var(--transition); }
.nx-comic-all:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text); }
.nx-comic-all .nx-i { width: 15px; height: 15px; color: var(--accent); transition: transform var(--transition); }
.nx-comic-all.is-open .nx-i { transform: rotate(180deg); }

/* ---------- chapter reader ---------- */

.nx-reader-head { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 20px; background: #0F0F1B; }
.nx-reader-series { display: flex; flex: 0 0 auto; align-items: center; gap: 13px; max-width: 46%; padding-right: 22px; border-right: 1px solid var(--border); }
.nx-reader-series img { width: 54px; height: 76px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 10px; object-fit: cover; }
.nx-reader-series span { min-width: 0; }
.nx-reader-series small { display: flex; align-items: center; gap: 6px; color: var(--accent-light); font-size: 11.5px; font-weight: 600; }
.nx-reader-series small .nx-i { width: 13px; height: 13px; }
.nx-reader-series b { display: block; margin-top: 3px; overflow: hidden; color: var(--text); font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; transition: color var(--transition); }
.nx-reader-series:hover b { color: var(--accent-light); }
.nx-reader-title { min-width: 0; }
.nx-reader-title h1 { margin: 0 !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--text); overflow-wrap: anywhere; }
.nx-reader-title p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }

.nx-reader-bar { position: sticky; z-index: 30; top: 66px; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 16px; background: rgba(15, 15, 27, .94); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nx-reader-bar.is-static { position: relative; top: auto; margin-top: 18px; }
.nx-reader-gap { flex: 1 1 auto; }
.nx-reader-count { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.nx-reader-count .nx-i { width: 16px; height: 16px; color: var(--accent); }

.nx-reader-step { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, .03); color: var(--text) !important; font-size: 13.5px; font-weight: 600; transition: border-color var(--transition), background-color var(--transition), color var(--transition); }
a.nx-reader-step:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light) !important; }
.nx-reader-step.is-off { opacity: .35; }
.nx-reader-step .nx-i { width: 16px; height: 16px; }

.nx-reader-list { position: relative; flex: 0 1 300px; min-width: 0; }
.nx-reader-list summary { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; transition: border-color var(--transition), background-color var(--transition); }
.nx-reader-list summary::-webkit-details-marker { display: none; }
.nx-reader-list summary:hover, .nx-reader-list[open] summary { border-color: var(--accent-border); background: var(--accent-soft); }
.nx-reader-list summary span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nx-reader-list summary .nx-i { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); transition: transform var(--transition); }
.nx-reader-list[open] summary .nx-i:last-child { transform: rotate(180deg); }
.nx-reader-list-panel { position: absolute; z-index: 5; left: 0; top: calc(100% + 8px); width: 340px; max-width: 86vw; max-height: min(62vh, 520px); padding: 6px; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: 14px; background: #131424; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(183, 140, 255, .45) transparent; }
.nx-reader-list-panel::-webkit-scrollbar { width: 6px; }
.nx-reader-list-panel::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(183, 140, 255, .45); }
.nx-reader-list-panel a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text-2) !important; font-size: 13.5px; }
.nx-reader-list-panel a:hover { background: rgba(255, 255, 255, .05); color: var(--text) !important; }
.nx-reader-list-panel a em { flex: 0 0 34px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .05); color: var(--text-muted); font-size: 11.5px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-reader-list-panel a span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.nx-reader-list-panel a i { flex: 0 0 auto; color: var(--text-faint); font-size: 11px; font-style: normal; }
.nx-reader-list-panel a.is-current { background: var(--accent-soft); color: var(--text) !important; }
.nx-reader-list-panel a.is-current em { background: var(--btn-grad); color: #fff; }

.nx-reader-switch, .nx-reader-zoom { display: inline-flex; flex: 0 0 auto; align-items: center; height: 40px; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, .03); }
.nx-reader-switch button, .nx-reader-zoom button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--transition), color var(--transition); }
.nx-reader-zoom button { width: 32px; padding: 0; }
.nx-reader-switch button:hover, .nx-reader-zoom button:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.nx-reader-switch button.is-active { background: var(--btn-grad); color: #fff; box-shadow: 0 4px 14px rgba(134, 96, 224, .35); }
.nx-reader-switch .nx-i, .nx-reader-zoom .nx-i { width: 15px; height: 15px; }
.nx-reader-zoom b { min-width: 46px; color: var(--text); font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.nx-reader-progress { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; overflow: hidden; border-radius: 2px; pointer-events: none; }
.nx-reader-progress b { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-dark), var(--accent-light)); box-shadow: 0 0 10px var(--accent); }

.nx-reader-view { margin-top: 18px; }
.nx-reader-pages { --nx-reader-w: 820px; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--nx-reader-w); margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #0B0B14; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.nx-reader-page { position: relative; display: block; width: 100%; min-height: 120px; margin: 0; padding: 0; border: 0; background: #0B0B14; cursor: zoom-in; }
.nx-reader-page img { display: block; width: 100%; height: auto; }
.nx-reader-page span { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(7, 7, 13, .72); color: #fff; opacity: 0; transform: scale(.9); transition: opacity var(--transition), transform var(--transition); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nx-reader-page span .nx-i { width: 17px; height: 17px; }
.nx-reader-page:hover span, .nx-reader-page:focus-visible span { opacity: 1; transform: none; }
.nx-reader-page:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nx-reader-pdf { max-width: 1100px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #0B0B14; }
.nx-reader-pdf iframe { display: block; width: 100%; height: min(86vh, 1100px); border: 0; }
.nx-reader-pdf[hidden], .nx-reader-pages[hidden] { display: none; }

.nx-reader-end { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 26px; }
.nx-reader-next { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: #0F0F1B; color: var(--text) !important; transition: border-color var(--transition), background-color var(--transition), transform var(--transition), box-shadow var(--transition); }
a.nx-reader-next:hover { border-color: var(--accent-border); background: #15152A; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 22px var(--accent-glow); }
.nx-reader-next:not(.is-prev) { justify-content: flex-end; text-align: right; }
.nx-reader-next img { width: 84px; height: 56px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 9px; object-fit: cover; }
.nx-reader-next span { min-width: 0; }
.nx-reader-next small { display: block; color: var(--text-muted); font-size: 12px; }
.nx-reader-next b { display: block; margin-top: 2px; overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.nx-reader-next > .nx-i { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
.nx-reader-next.is-off { opacity: .45; }
.nx-reader-home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 112px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 16px; background: #0F0F1B; color: var(--text-2) !important; font-size: 12.5px; font-weight: 600; transition: border-color var(--transition), color var(--transition), background-color var(--transition); }
.nx-reader-home:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text) !important; }
.nx-reader-home .nx-i { width: 20px; height: 20px; color: var(--accent); }

/* ---------- zoom viewer ---------- */

.nx-lb { position: fixed; z-index: 100000; inset: 0; display: none; flex-direction: column; background: rgba(4, 4, 9, .97); font-family: var(--font); user-select: none; -webkit-user-select: none; }
.nx-lb.is-on { display: flex; }
.nx-lb-top { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: #0C0C16; }
.nx-lb-count { margin-right: auto; color: #F5F5F8; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-lb-count small { margin-left: 8px; color: #8E91A3; font-size: 12.5px; font-weight: 500; }
.nx-lb button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; background: rgba(255, 255, 255, .04); color: #F5F5F8; cursor: pointer; transition: border-color 160ms, background-color 160ms, color 160ms; }
.nx-lb button:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light); }
.nx-lb button:disabled { opacity: .3; cursor: default; }
.nx-lb button .nx-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-lb-scale { min-width: 54px; color: #F5F5F8; font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.nx-lb-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; cursor: zoom-in; touch-action: none; }
.nx-lb-stage.is-zoomed { cursor: grab; }
.nx-lb-stage.is-drag { cursor: grabbing; }
.nx-lb-stage img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.nx-lb-stage img.is-smooth { transition: transform 200ms ease-out; }
.nx-lb-nav { position: absolute; z-index: 2; top: 50%; width: 46px !important; height: 46px !important; margin-top: -23px; border-radius: 14px !important; background: rgba(12, 12, 22, .82) !important; }
.nx-lb-nav.is-prev { left: 14px; }
.nx-lb-nav.is-next { right: 14px; }
.nx-lb-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; padding: 7px 14px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(12, 12, 22, .86); color: #B9BBCB; font-size: 12px; white-space: nowrap; pointer-events: none; transition: opacity 400ms; }
.nx-lb-hint.is-gone { opacity: 0; }

/* ---------- comments: the same look on every page of the new design ---------- */

.nx-page .nx-w-comments { --watch-surface: #0F0F1B; --watch-surface-3: #151526; --watch-text: var(--text); --watch-muted: var(--text-muted); --watch-border: rgba(255, 255, 255, .08); --watch-accent: var(--accent); --watch-accent-light: var(--accent-light); --watch-radius-md: 14px; margin-top: 40px; }
.nx-w-comments > .nx-section-title em { margin-left: 4px; padding: 2px 10px; border-radius: 11px; background: rgba(183, 140, 255, .14); color: var(--accent-light); font-size: 13px; font-style: normal; font-weight: 700; }

@media (max-width: 1100px) {
    .nx-chapter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-comics-totals .nx-filter-total:last-child { display: none; }
}

@media (max-width: 767px) {
    .nx-comics-totals { display: none; }
    .nx-comics-jump { flex-wrap: nowrap; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); overflow-x: auto; scrollbar-width: none; }
    .nx-comics-jump::-webkit-scrollbar { display: none; }
    .nx-comics-jump a { flex: 0 0 auto; }
    .nx-chapter-row { grid-template-columns: minmax(0, 1fr); }
    .nx-comic { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; }
    .nx-comic-body h1, .nx-comic-body h2, .nx-comic.is-full .nx-comic-body h1 { font-size: 19px !important; }
    .nx-comic-facts { gap: 6px; margin-top: 10px; }
    .nx-comic-facts li { height: 28px; padding: 0 9px; font-size: 11.5px; }
    .nx-comic-story, .nx-comic-actions, .nx-comic-chapters, .nx-comic-all { grid-column: 1 / -1; }
    .nx-comic-body { display: contents; }
    .nx-comic-body > h1, .nx-comic-body > h2, .nx-comic-body > .nx-comic-orig, .nx-comic-body > .nx-comic-facts { grid-column: 2; }
    .nx-comic-cover { grid-row: 1 / span 3; }
    .nx-comic-actions .nx-btn { flex: 1 1 auto; justify-content: center; }
    .nx-comic-more { display: none; }
    .nx-comic-chapters { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); margin-top: 4px; }

    .nx-reader-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .nx-reader-series { max-width: none; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--border); }
    .nx-reader-series img { width: 44px; height: 62px; }
    .nx-reader-title h1 { font-size: 22px !important; }
    .nx-reader-bar { top: 58px; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 14px; }
    .nx-reader-step { padding: 0 10px; }
    .nx-reader-step span, .nx-reader-switch button span { display: none; }
    .nx-reader-list { flex: 1 1 0; }
    .nx-reader-gap { display: none; }
    .nx-reader-zoom { display: none; }
    .nx-reader-pages { border-radius: 10px; margin-left: calc(var(--pad) * -1 + 6px); margin-right: calc(var(--pad) * -1 + 6px); width: auto; max-width: none !important; }
    .nx-reader-page span { display: none; }
    .nx-reader-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .nx-reader-home { grid-column: 1 / -1; grid-row: 2; flex-direction: row; min-height: 44px; }
    .nx-reader-next img { display: none; }
    .nx-reader-next b { font-size: 14px; }
    .nx-lb-hint { display: none; }
    .nx-lb-nav { width: 40px !important; height: 40px !important; }
}

/* comment form: dark editor */
.nx-w-comments .addcomment { padding: 18px !important; border-radius: 16px !important; }
.nx-w-comments .addcomment li { position: relative; }
.nx-w-comments .addcomment label { display: block; margin: 0 0 7px; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; }
.nx-w-comments .addcomment input[type="text"] { height: 44px; border-radius: 11px !important; }
.nx-w-comments .addcomment input::placeholder { color: var(--text-faint); }
.nx-w-comments .addcomment textarea { min-height: 150px; border-radius: 11px !important; resize: vertical; }
.nx-w-comments .dleaddcomments-editor { overflow: hidden; border: 1px solid var(--watch-border); border-radius: 12px; background: #151526; transition: border-color var(--transition), box-shadow var(--transition); }
.nx-w-comments .dleaddcomments-editor:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px rgba(183, 140, 255, .12); }
.nx-w-comments .tox.tox-tinymce { height: 210px !important; border: 0 !important; border-radius: 0 !important; background: #151526 !important; }
.nx-w-comments .tox .tox-editor-header, .nx-w-comments .tox .tox-toolbar-overlord, .nx-w-comments .tox .tox-toolbar, .nx-w-comments .tox .tox-toolbar__primary, .nx-w-comments .tox .tox-toolbar__overflow { border: 0 !important; background: #10101C !important; box-shadow: none !important; }
.nx-w-comments .tox .tox-editor-header { padding: 4px 6px !important; border-bottom: 1px solid var(--watch-border) !important; }
.nx-w-comments .tox .tox-toolbar__group { border: 0 !important; padding: 0 4px !important; }
.nx-w-comments .tox .tox-tbtn { width: 32px; height: 32px; margin: 1px; border-radius: 8px; background: none !important; cursor: pointer; }
.nx-w-comments .tox .tox-tbtn svg { fill: #B9BBCB !important; }
.nx-w-comments .tox .tox-tbtn:hover, .nx-w-comments .tox .tox-tbtn:focus { background: rgba(255, 255, 255, .08) !important; }
.nx-w-comments .tox .tox-tbtn:hover svg { fill: #fff !important; }
.nx-w-comments .tox .tox-tbtn--enabled, .nx-w-comments .tox .tox-tbtn--enabled:hover { background: var(--accent-soft) !important; }
.nx-w-comments .tox .tox-tbtn--enabled svg { fill: var(--accent-light) !important; }
.nx-w-comments .tox .tox-edit-area, .nx-w-comments .tox .tox-edit-area__iframe, .nx-w-comments .tox .tox-sidebar-wrap { background: #151526 !important; }
.nx-w-comments .tox .tox-edit-area::before { border: 0 !important; }
.nx-w-comments .tox .tox-statusbar { display: none !important; }
.nx-w-comments .form_submit { margin-top: 4px !important; }
.nx-w-comments .addcomment button[type="submit"] { height: 44px; padding: 0 28px !important; border-radius: 11px !important; transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.nx-w-comments .addcomment button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(134, 96, 224, .45); }

/* comments */
.nx-w-comments .newi-comment-1 { margin: 0 0 12px !important; padding: 16px 18px !important; border-radius: 16px !important; transition: border-color var(--transition); }
.nx-w-comments .newi-comment-1:hover { border-color: rgba(183, 140, 255, .24) !important; }
.nx-w-comments .newi-comment-2, .nx-w-comments .newi-comment-05, .nx-w-comments .newi-comment-06 { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; }
.nx-w-comments .newi-comment-3 { display: flex !important; align-items: flex-start; gap: 14px; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; }
.nx-w-comments .newi-comment-4 { flex: 0 0 46px; width: 46px !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.nx-w-comments .newi-comment-5 { position: relative; width: 46px !important; height: 46px !important; margin: 0 !important; }
.nx-w-comments .cover-1 { display: block !important; width: 46px !important; height: 46px !important; border: 2px solid rgba(183, 140, 255, .4); border-radius: 50% !important; background-color: #1B1933; background-position: center; background-size: cover; }
.nx-w-comments .newi-comment-online { position: absolute; z-index: 1; right: 0; bottom: 0; display: none; width: 12px; height: 12px; border: 2px solid #0F0F1B; border-radius: 50%; background: #5EE0A0; }
.nx-w-comments .newi-comment-online.online { display: block; }
.nx-w-comments .newi-comment-05 { flex: 1 1 auto; min-width: 0; }
.nx-w-comments .newi-comment-6 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.nx-w-comments .newi-comment-7 { order: 1; margin: 0 !important; padding: 0 !important; font-size: 14.5px !important; }
.nx-w-comments .newi-comment-7 a { color: inherit !important; }
.nx-w-comments .newi-comment-7 a:hover { color: var(--accent-light) !important; }
.nx-w-comments .newi-comment-07 { display: none !important; }
.nx-w-comments .newi-comment-011 { order: 2; margin: 0 !important; padding: 2px 9px !important; border: 1px solid var(--watch-border); border-radius: 9px; background: rgba(255, 255, 255, .04); font-size: 11px !important; line-height: 1.5; }
.nx-w-comments .newi-comment-011 b { font-weight: 600; }
.nx-w-comments .newi-comment-11 { order: 3; margin: 0 0 0 auto !important; padding: 0 !important; float: none !important; }
.nx-w-comments .newi-comment-11 .rate, .nx-w-comments .newi-comment-11 .rate_like { margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; }
.nx-w-comments .newi-comment-11 a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--watch-border); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text-2) !important; font-family: var(--font); font-size: 12.5px; font-weight: 700; transition: border-color var(--transition), color var(--transition), background-color var(--transition); }
.nx-w-comments .newi-comment-11 a:hover { border-color: rgba(255, 110, 150, .5); background: rgba(255, 77, 125, .1); color: #FF8FAE !important; }
.nx-w-comments .newi-comment-11 i { font-size: 12px; }
.nx-w-comments .newi-comment-11 .rate_like-1, .nx-w-comments .newi-comment-11 .ratingtypeplus { margin: 0 !important; padding: 0 !important; background: none !important; color: inherit !important; font: inherit !important; }
.nx-w-comments .newi-comment-8 { order: 4; display: block !important; flex: 0 0 100%; width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.7 !important; overflow-wrap: anywhere; }
.nx-w-comments .newi-comment-8 p { margin: 0 0 6px; }
.nx-w-comments .newi-comment-8 img { max-width: 100%; height: auto; border-radius: 8px; }
.nx-w-comments .newi-comment-8 a { color: var(--accent-light) !important; }
.nx-w-comments .title_quote { margin: 0 0 4px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.nx-w-comments .quote { margin: 0 0 8px; padding: 9px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(183, 140, 255, .07); color: var(--text-muted); font-size: 13px; }
.nx-w-comments .newi-comment-9 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: auto !important; margin: 8px 0 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; }
.nx-w-comments .newi-comment-9 > li { display: none; }
.nx-w-comments .newi-comment-9 > li:not(:empty) { display: inline; list-style: none; color: var(--text-faint); font-size: 11.5px; }
.nx-w-comments .newi-comment-9 > a { display: inline-flex; }
.nx-w-comments .newi-comment-10, .nx-w-comments .newi-comment-12, .nx-w-comments .newi-comment-13, .nx-w-comments .newi-comment-9 .reply { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; cursor: default; }
.nx-w-comments .newi-comment-12, .nx-w-comments .newi-comment-13, .nx-w-comments .newi-comment-9 .reply { cursor: pointer; font-weight: 600; transition: color var(--transition); }
.nx-w-comments .newi-comment-12 a, .nx-w-comments .newi-comment-13 a, .nx-w-comments .newi-comment-9 .reply a { color: inherit !important; }
.nx-w-comments .newi-comment-13:hover, .nx-w-comments .newi-comment-13:hover a { color: #FF7A8A !important; }
.nx-w-comments .comment-reply-link { color: var(--text-muted); font-family: var(--font); font-size: 12px; }
.nx-w-comments .dle-comments-navigation { margin-top: 6px; }

@media (max-width: 767px) {
    .nx-w-comments .addcomment { padding: 12px !important; }
    .nx-w-comments .newi-comment-1 { padding: 12px !important; }
    .nx-w-comments .newi-comment-3 { gap: 10px; }
    .nx-w-comments .newi-comment-4, .nx-w-comments .newi-comment-5, .nx-w-comments .cover-1 { flex-basis: 38px; width: 38px !important; height: 38px !important; }
}

/* =====================================================
   COMMENTS — threads, not a wall
   A reply sits under what it answers, so the quoted copy of that comment
   is dropped and only a thin line says who is being answered. The cards
   are tighter, and past the first few threads the rest wait behind a button.
===================================================== */

/* tighter cards: the list reads as a conversation, not as a stack of panels */
.nx-w-comments .newi-comment-1 { margin: 0 0 8px !important; padding: 13px 15px !important; border-radius: 14px !important; }
.nx-w-comments .newi-comment-3 { gap: 12px; }
.nx-w-comments .newi-comment-4, .nx-w-comments .newi-comment-5, .nx-w-comments .cover-1 { flex-basis: 38px; width: 38px !important; height: 38px !important; }
.nx-w-comments .newi-comment-6 { gap: 4px 9px; }
.nx-w-comments .newi-comment-7 { font-size: 14px !important; }
.nx-w-comments .newi-comment-8 { margin-top: 3px !important; font-size: 13.5px !important; line-height: 1.62 !important; }
.nx-w-comments .newi-comment-9 { margin-top: 6px !important; gap: 5px 14px; }

/* the date rides in the name row; the row underneath is for actions only */
.nx-w-comments .newi-comment-10 { color: var(--text-faint) !important; font-size: 11.5px !important; }

/* a reply and its children */
.nx-cm-kids { margin: 8px 0 0 0; padding-left: 16px; border-left: 2px solid rgba(183, 140, 255, .26); }
.nx-cm-kids .newi-comment-1 { background: rgba(255, 255, 255, .018) !important; }
.nx-cm-kids .nx-cm-kids { margin-top: 6px; }
.nx-cm-reply > .newi-comment-1 { margin-bottom: 6px !important; }

/* the line that replaces the quoted copy of the parent */
.nx-cm-to { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 5px; color: var(--text-faint); font-size: 11.5px; }
.nx-cm-to .nx-i { width: 12px; height: 12px; color: var(--accent); }
.nx-cm-to b { color: var(--accent-light); font-weight: 600; }

/* a quote that stays (its comment is on another page) is folded */
.nx-w-comments .quote_body.nx-cm-fold { max-height: 4.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.nx-cm-morequote { margin: 4px 0 8px; padding: 0; border: 0; background: none; color: var(--accent-light); font-family: var(--font); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.nx-cm-morequote:hover { text-decoration: underline; }

/* threads kept back */
.nx-w-comments #dle-comments-list > .nx-cm-off { display: none; }
.nx-cm-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    margin-top: 4px;
    border: 1px solid var(--watch-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-2);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.nx-cm-more:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light); }
.nx-cm-more .nx-i { width: 15px; height: 15px; }

/* the form waits behind one line instead of standing open with the whole editor */
.nx-cm-write {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--watch-border);
    border-radius: 14px;
    background: var(--watch-surface);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 13.5px;
    text-align: left;
    cursor: text;
    transition: border-color var(--transition), background-color var(--transition);
}
.nx-cm-write:hover { border-color: var(--accent-border); background: #141425; }
.nx-cm-write .nx-i { width: 17px; height: 17px; color: var(--accent); }

.nx-w-comments .addcomment.nx-cm-shut { max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border-width: 0 !important; opacity: 0; }

@media (max-width: 767px) {
    .nx-cm-kids { padding-left: 10px; }
    .nx-w-comments .newi-comment-1 { padding: 11px 12px !important; }
}

/* =====================================================
   HOME — genre tiles: number, artwork tinted in the genre colour, count, arrow
===================================================== */

.nx-genres { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }

.nx-gtile {
    --g: var(--accent);
    position: relative;
    display: block;
    height: 132px;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: #0D0D17;
    isolation: isolate;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* artwork sits on the right and dissolves into the tile itself (mask, not an overlay colour) */
.nx-gtile-art { position: absolute; z-index: 0; inset: 0 0 0 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 58%, #000 100%); }
.nx-gtile-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(.55) contrast(1.08) brightness(.68); transition: transform 520ms ease-out, filter var(--transition); }
.nx-gtile-art::after { content: ""; position: absolute; inset: 0; background: var(--g); mix-blend-mode: soft-light; opacity: .85; }

/* colour wash from the left and a lit right edge */
.nx-gtile::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--g) 26%, transparent) 0%, transparent 46%), linear-gradient(270deg, color-mix(in srgb, var(--g) 34%, transparent) 0, transparent 5px); pointer-events: none; }

.nx-gtile-num { position: absolute; z-index: 2; left: 12px; top: 6px; color: color-mix(in srgb, var(--g) 62%, transparent); font-size: 54px; font-style: normal; font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color var(--transition); }

.nx-gtile-text { position: absolute; z-index: 2; left: 12px; right: 48px; bottom: 12px; display: block; padding: 0; background: none; text-align: left; }
.nx-gtile-text b { display: -webkit-box; overflow: hidden; color: #F5F5F8; font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-shadow: 0 1px 8px rgba(7, 7, 13, .9); }
.nx-gtile-text small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #C3C6D4; text-shadow: 0 1px 6px rgba(7, 7, 13, .9); font-size: 11.5px; font-weight: 500; }
.nx-gtile-text small .nx-i { width: 12px; height: 12px; color: var(--g); }

.nx-gtile-go { position: absolute; z-index: 2; right: 11px; bottom: 11px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(7, 7, 13, .45); color: #fff; transition: background-color var(--transition), border-color var(--transition), transform var(--transition), color var(--transition); }
.nx-gtile-go .nx-i { width: 15px; height: 15px; }

.nx-gtile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--g) 60%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--g) 30%, transparent); }
.nx-gtile:hover .nx-gtile-art img { transform: scale(1.07); filter: grayscale(.2) contrast(1.08) brightness(.95); }
.nx-gtile:hover .nx-gtile-num { color: var(--g); }
.nx-gtile:hover .nx-gtile-go { border-color: var(--g); background: var(--g); color: #0B0B14; transform: translateX(2px); }

@media (max-width: 1500px) { .nx-genres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .nx-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nx-gtile { height: 112px; }
    .nx-gtile-num { font-size: 42px; }
    .nx-gtile-text b { font-size: 13.5px; }
}

/* =====================================================
   HOME — collections: poster fan, light that follows the pointer, tilt
===================================================== */

.nx-colls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.nx-colls-page .nx-colls { margin-top: 26px; }

.nx-coll {
    --c: var(--accent);
    --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
    position: relative;
    display: block;
    height: 196px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: #0F0F1B;
    isolation: isolate;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1), border-color var(--transition), box-shadow var(--transition);
    will-change: transform;
}

.nx-coll.is-live { transition: transform 80ms linear, border-color var(--transition), box-shadow var(--transition); }

/* soft wash in the collection colour + a light under the pointer */
.nx-coll::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 20%, transparent) 0%, transparent 55%); }
.nx-coll-glow { position: absolute; z-index: 0; inset: 0; background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 34%, transparent) 0%, transparent 70%); opacity: 0; transition: opacity 260ms ease-out; pointer-events: none; }
/* lit rim that follows the pointer */
.nx-coll::after { content: ""; position: absolute; z-index: 3; inset: 0; padding: 1px; border-radius: inherit; background: radial-gradient(300px circle at var(--mx) var(--my), var(--c) 0%, transparent 62%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity 260ms ease-out; pointer-events: none; }

.nx-coll-text { position: absolute; z-index: 2; left: 22px; top: 20px; bottom: 18px; display: flex; flex-direction: column; width: 46%; transform: translateZ(26px); }
.nx-coll-text small { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; height: 26px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); font-size: 11.5px; font-weight: 700; }
.nx-coll-text small .nx-i { width: 12px; height: 12px; }
.nx-coll-text b { display: block; margin-top: 12px; color: #F5F5F8; font-size: 21px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.nx-coll-text i { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #A9ACBD; font-size: 12.5px; font-style: normal; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nx-coll-text em { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #F5F5F8; font-size: 13px; font-style: normal; font-weight: 600; }
.nx-coll-text em .nx-i { width: 16px; height: 16px; padding: 6px; box-sizing: content-box; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); }

/* three posters, stacked like cards; they spread out on hover */
.nx-coll-fan { position: absolute; z-index: 1; right: 26px; top: 50%; width: 112px; height: 160px; margin-top: -80px; transform: translateZ(40px); }
.nx-coll-fan img { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; object-fit: cover; box-shadow: 0 12px 26px rgba(0, 0, 0, .6); transform-origin: 50% 120%; transition: transform 520ms cubic-bezier(.2, .9, .25, 1.15), filter 320ms ease-out, box-shadow 320ms ease-out; }
.nx-coll-fan img.is-1 { transform: rotate(0deg); }
.nx-coll-fan img.is-2 { transform: translateX(-34px) rotate(-9deg) scale(.94); filter: brightness(.72); }
.nx-coll-fan img.is-3 { transform: translateX(-66px) rotate(-18deg) scale(.88); filter: brightness(.52); }

.nx-coll:hover, .nx-coll:focus-visible { border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 0 34px color-mix(in srgb, var(--c) 22%, transparent); outline: 0; }
.nx-coll:hover .nx-coll-glow, .nx-coll:hover::after, .nx-coll:focus-visible::after { opacity: 1; }
.nx-coll:hover .nx-coll-fan img.is-1, .nx-coll:focus-visible .nx-coll-fan img.is-1 { transform: translate(10px, -6px) rotate(8deg); box-shadow: 0 18px 34px rgba(0, 0, 0, .7), 0 0 22px color-mix(in srgb, var(--c) 40%, transparent); }
.nx-coll:hover .nx-coll-fan img.is-2, .nx-coll:focus-visible .nx-coll-fan img.is-2 { transform: translate(-46px, -8px) rotate(-6deg) scale(.97); filter: brightness(.92); transition-delay: 40ms; }
.nx-coll:hover .nx-coll-fan img.is-3, .nx-coll:focus-visible .nx-coll-fan img.is-3 { transform: translate(-90px, 2px) rotate(-19deg) scale(.93); filter: brightness(.8); transition-delay: 80ms; }
.nx-coll:hover .nx-coll-text em .nx-i { transform: translateX(4px); border-color: var(--c); background: var(--c); color: #0B0B14; }

@media (max-width: 1320px) { .nx-coll-text { width: 50%; } .nx-coll-text b { font-size: 19px; } .nx-coll-fan { right: 18px; width: 98px; height: 140px; margin-top: -70px; } }
@media (max-width: 1100px) { .nx-colls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .nx-colls { grid-template-columns: minmax(0, 1fr); gap: 12px; perspective: none; }
    .nx-coll { height: 164px; border-radius: 16px; transform: none; }
    .nx-coll-text { left: 16px; top: 14px; bottom: 14px; width: 56%; }
    .nx-coll-text b { margin-top: 9px; font-size: 18px; }
    .nx-coll-fan { right: 14px; width: 86px; height: 124px; margin-top: -62px; }
    .nx-coll-fan img.is-2 { transform: translateX(-28px) rotate(-9deg) scale(.94); }
    .nx-coll-fan img.is-3 { transform: translateX(-54px) rotate(-18deg) scale(.88); }
}

@media (prefers-reduced-motion: reduce) { .nx-coll { transform: none !important; } .nx-coll-fan img { transition: none; } }

/* =====================================================
   LISTING PAGES — every DLE list of posts (categories, collections,
   search, tags, favourites …) uses the home page card in a grid
===================================================== */

.center-top:has(.nx-list-grid > .nx-card) { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 22px 0 10px !important; float: none !important; clear: both; background: none !important; }
.center-top:has(.nx-list-grid > .nx-card) > .center-1 { width: auto !important; max-width: var(--wrap) !important; margin: 0 auto !important; padding: 0 var(--pad) !important; float: none !important; background: none !important; box-sizing: border-box; }
.center-top:has(.nx-list-grid > .nx-card) .moviesi-1,
.center-top:has(.nx-list-grid > .nx-card) .svri-div-4,
.center-top:has(.nx-list-grid > .nx-card) #content { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; box-shadow: none !important; }

.nx-list-grid:has(> .nx-card) { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 16px; width: auto !important; margin: 0 !important; padding: 20px !important; float: none !important; border: 1px solid var(--border); border-radius: 0 0 20px 20px; border-top: 0; background: #0F0F1B; }
.nx-list-grid:has(> .nx-card) > :not(.nx-card) { grid-column: 1 / -1; min-width: 0; }
.nx-list-grid:has(> .nx-card) > .nx-pager { margin-top: 14px; }
.nx-list-grid > .nx-card { min-width: 0; }

/* header bar with the breadcrumb trail */
.center-top:has(.nx-list-grid > .nx-card) .nx-list-bar { display: flex !important; align-items: center; gap: 14px; width: auto !important; height: auto !important; margin: 0 !important; padding: 16px 20px !important; float: none !important; border: 1px solid var(--border) !important; border-bottom: 2px solid var(--accent) !important; border-radius: 20px 20px 0 0 !important; background: linear-gradient(90deg, #1A1535 0%, #11111D 60%) !important; box-shadow: 0 10px 30px -18px var(--accent); }
.nx-list-bar .nx-3d { width: 40px; height: 40px; flex: 0 0 auto; }
.nx-list-crumbs { min-width: 0; font-family: var(--font); }
.nx-list-crumbs .speedbar-1, .nx-list-crumbs > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0 !important; padding: 0 !important; background: none !important; color: var(--text) !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.3 !important; }
.nx-list-crumbs a { display: inline-flex; align-items: baseline; color: var(--text-muted) !important; font-size: 13.5px !important; font-weight: 500 !important; transition: color var(--transition); }
.nx-list-crumbs a::after { content: "›"; margin: 0 9px; color: var(--text-faint); }
.nx-list-crumbs a:hover { color: var(--accent-light) !important; }
/* the first link is the long site title: shown as "მთავარი" */
.nx-list-crumbs a:first-child { font-size: 0 !important; }
.nx-list-crumbs a:first-child::before { content: "მთავარი"; font-size: 13.5px; }
.nx-list-crumbs a:first-child::after { font-size: 13.5px; }
body:not(:has(.nx-list-grid > .nx-card)) .nx-list-bar > .nx-3d { display: none; }

/* favourites toggle and the card without a poster */
.nx-card-fav { position: absolute; z-index: 3; top: 38px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(7, 7, 13, .72); color: #fff; font-size: 12px; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity var(--transition), transform var(--transition), color var(--transition), border-color var(--transition); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nx-card:hover .nx-card-fav, .nx-card-fav.active { opacity: 1; transform: none; }
.nx-card-fav:hover { border-color: #FF6FAE; color: #FF6FAE; }
.nx-card-fav.active { border-color: transparent; background: #FF4D7D; color: #fff; }
.nx-card-fav span { display: grid; place-items: center; width: 100%; height: 100%; }
.nx-card-noimg { display: grid; place-items: center; width: 100%; height: 100%; padding: 14px; box-sizing: border-box; background: linear-gradient(135deg, #241A45 0%, #10111A 100%); color: #D1B5FF; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }

@media (min-width: 1700px) { .nx-list-grid:has(> .nx-card) { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 1320px) { .nx-list-grid:has(> .nx-card) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .nx-list-grid:has(> .nx-card) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .center-top:has(.nx-list-grid > .nx-card) { padding-top: 14px !important; }
    .nx-list-grid:has(> .nx-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding: 12px !important; border-radius: 0 0 16px 16px; }
    .center-top:has(.nx-list-grid > .nx-card) .nx-list-bar { padding: 12px 14px !important; border-radius: 16px 16px 0 0 !important; }
    .nx-list-bar .nx-3d { width: 32px; height: 32px; }
    .nx-list-crumbs > span:last-child, .nx-list-crumbs a:last-child { font-size: 17px; }
    .nx-card-fav { opacity: 1; transform: none; }
}

/* =====================================================
   LOGO — split-flap letters: "ASIA" <-> "აზია"
   Each letter is a small flap display: the upper half falls
   forward, the lower half of the next letter lands after it.
===================================================== */

.nx-logo .is-flap { display: inline-flex; align-items: baseline; }
.nx-flap { position: relative; display: inline-grid; perspective: 160px; }
.nx-flap > s { grid-area: 1 / 1; visibility: hidden; text-decoration: none; white-space: pre; }
.nx-flap > i { position: absolute; inset: 0; display: grid; place-items: center; font-style: inherit; white-space: pre; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
/* halves are cut along the middle line; the sides stay open for the slanted glyphs */
.nx-flap > .is-top, .nx-flap > .is-fall { clip-path: inset(-4px -6px 50% -6px); }
.nx-flap > .is-bot, .nx-flap > .is-land { clip-path: inset(50% -6px -4px -6px); }
.nx-flap > .is-fall, .nx-flap > .is-land { visibility: hidden; }
.nx-flap.is-turning > .is-fall, .nx-flap.is-turning > .is-land { visibility: visible; }
/* the hinge: a hairline that shows only while a letter turns */
.nx-flap::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; margin-top: -.5px; background: rgba(7, 7, 13, .55); opacity: 0; transition: opacity 180ms ease-out; pointer-events: none; }
.nx-flap.is-turning::after { opacity: 1; }

/* popover on a short window: shed the description, then the detail rows, so it never runs under the header */
.nx-tip.is-compact .nx-tip-body > p { display: none; }
.nx-tip.is-mini .nx-tip-rows { display: none; }
.nx-tip.is-mini .nx-tip-media { aspect-ratio: 16 / 7; }

/* =====================================================
   LOGO FONT — "Asiana" for the Latin spelling only
   (unicode-range keeps Georgian letters on the site font).
   Licence: personal use only, see fonts/asiana/LICENSE-personal-use-only.txt —
   a commercial licence is needed before this goes on the live site.
===================================================== */

@font-face { font-family: "Asiana"; src: url("../fonts/asiana/Asiana.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E; }
@font-face { font-family: "Asiana"; src: url("../fonts/asiana/Asiana.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0020-007E; }

/* Georgian spelling: "Eurostile GEO_Mt" (GF Fonts, marked "Free" in the font file), Georgian letters only */
@font-face { font-family: "NxLogoKa"; src: url("../fonts/eurostile-geo/Eurostile-GEO_Mt.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "NxLogoKa"; src: url("../fonts/eurostile-geo/Eurostile-GEO_Mt.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

/* =====================================================
   PAGER — one look for every page switch on the site
   (DLE navigation.tpl, comments, nx_pages): a thin line with
   a dot per page, the number under it, the current page ringed.
===================================================== */

.nx-pager { display: flex; align-items: flex-start; justify-content: center; gap: 14px; width: 100%; max-width: 760px; margin: 34px auto 6px; padding: 0; clear: both; font-family: var(--font); }

.nx-pager > a, .nx-pager > span { display: block; flex: 0 0 auto; margin: -9px 0 0; padding: 0; border: 0; background: none; text-decoration: none; }
.nx-pager-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: 12px; background: #11111D; color: var(--text); transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition); }
.nx-pager-arrow .nx-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-pager > a:hover .nx-pager-arrow { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-light); box-shadow: 0 0 18px var(--accent-glow); }
.nx-pager > span .nx-pager-arrow { opacity: .32; }

.nx-pager-track { position: relative; display: flex; flex: 1 1 auto; align-items: flex-start; justify-content: space-between; min-width: 0; margin: 0; padding: 0 6px; font-size: 0; }
.nx-pager-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 9%, rgba(255, 255, 255, .22) 91%, rgba(255, 255, 255, 0) 100%); }

.nx-pager-track > a, .nx-pager-track > span {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 26px;
    max-width: 64px;
    height: auto;
    margin: 0;
    padding: 30px 0 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-muted) !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--transition);
}

/* the dot on the line */
.nx-pager-track > a::before, .nx-pager-track > span::before { content: ""; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E9E9F2; box-shadow: 0 0 0 4px #07070D; transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition); }
.nx-pager-track > a:hover { color: var(--text) !important; }
.nx-pager-track > a:hover::before { transform: scale(1.35); background: var(--accent-light); box-shadow: 0 0 0 4px #07070D, 0 0 14px var(--accent); }

/* current page: accent ring with a core, number in the accent colour */
.nx-pager-track > span:not(.nav_ext) { color: var(--accent-light) !important; font-size: 15px; font-weight: 800; }
.nx-pager-track > span:not(.nav_ext)::before { top: 0; width: 22px; height: 22px; margin-left: -11px; border: 2px solid var(--accent); background: radial-gradient(circle, var(--accent-light) 0 4px, #151226 5px); box-shadow: 0 0 0 4px #07070D, 0 0 0 5px rgba(183, 140, 255, .22), 0 0 18px var(--accent-glow), 0 0 34px rgba(183, 140, 255, .28); }

/* gap between page ranges: no dot */
.nx-pager-track > span.nav_ext { color: var(--text-faint) !important; letter-spacing: 2px; }
.nx-pager-track > span.nav_ext::before { display: none; }

.dle-comments-navigation { clear: both; }
.nx-pager.splitnewsnavigation { margin-top: 22px; }

@media (max-width: 767px) {
    .nx-pager { gap: 8px; margin-top: 26px; }
    .nx-pager-arrow { width: 36px; height: 36px; border-radius: 10px; }
    .nx-pager > a, .nx-pager > span { margin-top: -7px; }
    .nx-pager-track { padding: 0 2px; }
    .nx-pager-track > a, .nx-pager-track > span { min-width: 22px; font-size: 12.5px; }
    .nx-pager-track > span:not(.nav_ext) { font-size: 14px; }
    /* DLE prints up to ten neighbours; keep the ones nearest to the current page */
    .nx-pager-track > :nth-child(n+8):not(:nth-last-child(-n+2)) { display: none; }
}

/* =====================================================
   CONTAINER WIDTH
   Medium setting: wider than the original 1460px, not edge to edge.
   Change --wrap to tune it (1460px = original, 100vw = full width).
===================================================== */

:root { --wrap: 1700px; --pad: 32px; }

.nx-watch .nx-wrap,
body:has(.nx-watch) .nx-header .nx-wrap { max-width: var(--wrap); padding: 0 var(--pad); }
/* the footer keeps its own top/bottom padding: only the sides follow the page */
body:has(.nx-watch) .nx-footer .nx-wrap { max-width: var(--wrap); padding-left: var(--pad); padding-right: var(--pad); }

.nx-rules > .nx-wrap, .nx-contact > .nx-wrap, .nx-vip > .nx-wrap { max-width: 1400px; }
.nx-auth-page > .nx-wrap { max-width: 1200px; }

/* an eighth card fits once the container is at its full width */
@media (min-width: 1700px) {
    .nx-row { --cols: 8; }
    .nx-row-4 { --cols: 5; }
    .nx-filter-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .nx-hero { height: 420px; }
}

@media (max-width: 1100px) { :root { --pad: 22px; } }
@media (max-width: 767px) { :root { --pad: 16px; } }


/* the category chip on a news card: one line, cut with an ellipsis */
.nx-news-tag { max-width: calc(100% - 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* a card with no picture: give the empty frame something to look at */
.nx-news-media:not(:has(img))::after { content: ""; position: absolute; inset: 0; height: auto; background: radial-gradient(ellipse 50% 70% at 28% 110%, rgba(183, 140, 255, .22) 0%, transparent 70%); }



/* =====================================================
   HEADER NAV + DROPDOWNS — reference mockup (2026-10-09)
   Every top item carries an icon; the item that is open (or, when none is,
   the section you are in) is a lit pill with a bar under it. All four
   dropdowns share one panel: icon, label, chevron per row, hairlines between
   rows, the lit row bordered and glowing. Colours are the site tokens.
   The mockup is a crop at about twice the real size (its labels are ~30px
   against our 13.5px), so its measures are halved here:
     panel radius 32 -> 16, padding 18/20 -> 9/10, list rows 102-110 -> 54,
     icon 48 -> 24 centred 30 from the row edge, label at 70, chevron 22 from the right.
   ჟანრები and კოლექციები have 28 and 15 entries, too many for one column, so
   the same rows sit in three columns there.
===================================================== */

/* ---- top row ---- */
.nx-nav > ul { gap: 4px; }
.nx-nav > ul > li > a {
    position: relative;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.nx-nav > ul > li > a > span { line-height: 1; }

.nx-nav > ul > li > a .nx-i.nx-nav-ico,
.nx-nav > ul > li:hover > a .nx-i.nx-nav-ico,
.nx-nav > ul > li:focus-within > a .nx-i.nx-nav-ico { width: 19px; height: 19px; opacity: 1; color: var(--text-2); stroke-width: 1.7; transform: none; transition: color var(--transition); }
.nx-nav > ul > li > a .nx-nav-ico.is-fill { width: 20px; height: 20px; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.nx-nav > ul > li > a .nx-nav-ico.is-3d { width: 26px; height: 26px; margin: -3px -2px; }
.nx-nav > ul > li > a .nx-nav-chev { width: 13px; height: 13px; margin-left: 2px; opacity: .75; }

/* the bar under the lit item */
.nx-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity var(--transition), transform var(--transition);
}

/* lit: the item under the pointer or the keyboard; when there is none, the current section */
.nx-nav > ul > li:hover > a,
.nx-nav > ul > li:focus-within > a,
.nx-nav > ul:not(:has(> li:hover, > li:focus-within)) > li > a.is-active {
    border-color: var(--accent-border);
    background: linear-gradient(180deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
    box-shadow: 0 0 18px var(--accent-glow), inset 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent-light);
    text-shadow: none;
}
.nx-nav > ul > li:hover > a::after,
.nx-nav > ul > li:focus-within > a::after,
.nx-nav > ul:not(:has(> li:hover, > li:focus-within)) > li > a.is-active::after { opacity: 1; transform: none; }
.nx-nav > ul > li:hover > a .nx-i.nx-nav-ico,
.nx-nav > ul > li:focus-within > a .nx-i.nx-nav-ico,
.nx-nav > ul:not(:has(> li:hover, > li:focus-within)) > li > a.is-active .nx-i.nx-nav-ico { color: var(--accent); }
.nx-nav > ul > li > a:focus-visible { outline: 0; }

/* ---- the panel ---- */
.nx-sub.nx-navdd { min-width: 0; width: 380px; padding-top: 10px; }
.nx-sub.nx-navdd-grid { width: 744px; left: var(--dd-shift, 0px); }

.nx-sub.nx-navdd > ul {
    display: block;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}
.nx-sub.nx-navdd-grid > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }

.nx-navdd li { position: relative; list-style: none; }

/* hairlines between rows, inset like the mockup */
.nx-navdd:not(.nx-navdd-grid) li + li::before,
.nx-navdd-grid li:nth-child(n+4)::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 9px;
    right: 9px;
    top: 0;
    height: 1px;
    background: var(--border);
    transition: opacity var(--transition);
}

/* ---- rows ---- */
.nx-sub.nx-navdd a {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 13px;
    align-items: center;
    column-gap: 28px;
    height: 54px;
    padding: 0 14px 0 18px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--text-2) !important;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: clip;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.nx-sub.nx-navdd-grid a { grid-template-columns: 20px minmax(0, 1fr) 11px; column-gap: 14px; height: 46px; padding: 0 12px 0 14px; font-size: 14px; }
.nx-navdd a > span { overflow: hidden; text-overflow: ellipsis; }

.nx-navdd .nx-navdd-ico { width: 24px; height: 24px; color: var(--text-2); stroke-width: 1.6; transition: color var(--transition); }
.nx-navdd-grid .nx-navdd-ico { width: 20px; height: 20px; }
.nx-navdd .nx-navdd-go { width: 13px; height: 13px; color: var(--text-2); stroke-width: 2.2; justify-self: end; transition: color var(--transition), transform var(--transition); }
.nx-navdd-grid .nx-navdd-go { width: 11px; height: 11px; }

/* lit row: whatever the pointer or the keyboard is on; otherwise the first row - every
   time a panel opens it starts from the top, whatever page you are on */
.nx-sub.nx-navdd a:hover,
.nx-sub.nx-navdd a:focus-visible,
.nx-navdd > ul:not(:has(a:hover, a:focus-visible)) > li:first-child > a {
    border-color: var(--accent-border);
    background: linear-gradient(90deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 100%);
    box-shadow: 0 0 18px var(--accent-glow), inset 0 0 16px color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent-light) !important;
    outline: 0;
}
.nx-navdd a:hover .nx-navdd-ico,
.nx-navdd a:focus-visible .nx-navdd-ico,
.nx-navdd > ul:not(:has(a:hover, a:focus-visible)) > li:first-child > a .nx-navdd-ico { color: var(--accent); }
.nx-navdd a:hover .nx-navdd-go,
.nx-navdd a:focus-visible .nx-navdd-go,
.nx-navdd > ul:not(:has(a:hover, a:focus-visible)) > li:first-child > a .nx-navdd-go { color: var(--accent-light); }
.nx-navdd a:hover .nx-navdd-go { transform: translateX(2px); }

/* the hairlines touching the lit row step aside */
.nx-navdd:not(.nx-navdd-grid) li:hover::before,
.nx-navdd:not(.nx-navdd-grid) li:hover + li::before,
.nx-navdd:not(.nx-navdd-grid) li:focus-within::before,
.nx-navdd:not(.nx-navdd-grid) li:focus-within + li::before,
.nx-navdd:not(.nx-navdd-grid) > ul:not(:has(li:hover, li:focus-within)) > li:first-child + li::before,
.nx-navdd-grid li:hover::before,
.nx-navdd-grid li:hover + li + li + li::before,
.nx-navdd-grid li:focus-within::before,
.nx-navdd-grid li:focus-within + li + li + li::before,
.nx-navdd-grid > ul:not(:has(li:hover, li:focus-within)) > li:first-child + li + li + li::before { opacity: 0; }

/* Escape closes it even while the keyboard is still inside. At once, not faded: while it fades
   its rows can still take focus, and the next Tab would land in a row that then vanishes */
.nx-has-sub.is-shut > .nx-navdd { opacity: 0; visibility: hidden; transform: translateY(6px); transition: none; }

/* ---- room. With an icon on every item the row needs about 1680px for everything at once;
   below that things give way in this order, measured, so nothing overlaps:
   the search field becomes its icon, then the sign-in button drops its label,
   then the nav drops its icons and tightens (the pills and the bar stay) ---- */
@media (max-width: 1679px) {
    .nx-header-right .nx-search { display: none; }
    .nx-header-right .nx-search-m { display: grid; }
}
@media (max-width: 1365px) {
    .nx-header-right .nx-auth > span { display: none; }
    .nx-header-right .nx-auth { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 1279px) {
    .nx-nav > ul { gap: 2px; }
    .nx-nav > ul > li > a { gap: 6px; padding: 0 9px; }
    .nx-nav > ul > li > a .nx-nav-ico { display: none; }
    .nx-nav > ul > li > a::after { left: 8px; right: 8px; }
}

/* =====================================================
   HEADER — no more sideways scroll on a 1366 laptop
   Between 1281px and about 1440px the nav, the search box and the account
   button together asked for more than the row had, and the page picked up a
   horizontal scrollbar (every page, not just one). They now give way as the
   room shrinks instead of waiting for the 1320px breakpoint to rescue them.
===================================================== */

.nx-header-in { gap: clamp(12px, 1.5vw, 26px); min-width: 0; }
.nx-nav { min-width: 0; }
.nx-nav > ul > li > a { padding: 0 clamp(6px, .75vw, 12px); white-space: nowrap; }
.nx-header-right { min-width: 0; gap: clamp(6px, .7vw, 10px); }
.nx-search { flex: 0 1 270px; min-width: 150px; }

/* sidebar heading + "see all": with a long title the button was pushed past the
   column and the whole page picked up a few pixels of sideways scroll */
.nx-w-sidebox .nx-section-head { flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.nx-w-sidebox .nx-section-head .nx-section-title { min-width: 0; }
.nx-w-sidebox .nx-section-head .nx-btn-line { flex: 0 1 auto; min-width: 0; white-space: nowrap; }




/* =====================================================
   DETAIL PAGE — premium cinematic layout (reference 2026-10-09)
   Everything below the site header on a film / series page. All of it is
   scoped to .nx-cine; the header, the nav and the other pages are not touched.
   The palette from the brief lives in --c-* variables here and only here.
===================================================== */

.nx-cine {
    --c-bg: #070812;
    --c-bg2: #0B0D19;
    --c-panel: #101222;
    --c-panel2: #15152A;
    --c-violet: #8B5CF6;
    --c-violet2: #B54CFF;
    --c-magenta: #E84AAE;
    --c-text: #F7F5FF;
    --c-text2: #A5A4B8;
    --c-muted: #74758C;
    --c-line: rgba(180, 160, 255, .14);
    --c-line-hot: rgba(181, 76, 255, .55);
    --c-grad: linear-gradient(100deg, var(--c-violet) 0%, var(--c-violet2) 55%, var(--c-magenta) 100%);
    --c-r-panel: 14px;
    --c-r-btn: 11px;
    --c-r-img: 10px;
    --c-ease: 180ms ease;

    /* the watch components inside take the same palette */
    --watch-surface: var(--c-panel);
    --watch-surface-2: var(--c-panel2);
    --watch-surface-3: var(--c-panel2);
    --watch-border: var(--c-line);
    --watch-text: var(--c-text);
    --watch-muted: var(--c-text2);
    --watch-accent: var(--c-violet2);
    --watch-accent-light: #D7B8FF;

    padding-bottom: 28px;
    background: var(--c-bg);
    color: var(--c-text);
}

/* the site's light look: the same layout on the site's light tokens */
.darken .nx-cine {
    --c-bg: var(--bg);
    --c-bg2: var(--bg-secondary);
    --c-panel: var(--surface);
    --c-panel2: var(--surface-2);
    --c-text: var(--text);
    --c-text2: var(--text-2);
    --c-muted: var(--text-muted);
    --c-line: rgba(90, 60, 170, .14);
    --watch-accent-light: var(--accent-2);
}

.nx-cine-w { width: min(1320px, calc(100% - 2 * var(--pad))); margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */
.nx-cine-hero { position: relative; isolation: isolate; overflow: hidden; }
.nx-cine-backdrop { position: absolute; z-index: -1; inset: 0; }
.nx-cine-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 25%; }
/* left fade for the text, bottom fade into the page; the last stop of each is the page colour itself */
.nx-cine-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 84%, transparent) 30%, color-mix(in srgb, var(--c-bg) 25%, transparent) 68%, color-mix(in srgb, var(--c-bg) 40%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 35%, transparent) 0%, transparent 26%, color-mix(in srgb, var(--c-bg) 55%, transparent) 72%, var(--c-bg) 100%);
}

.nx-cine-hero-in { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 28px; min-height: 350px; padding: 36px 0 34px; }

.nx-cine-poster { position: relative; width: 140px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-panel); box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .04) inset; }
.nx-cine-poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.nx-cine-score { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(7, 8, 18, .78); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(6px); }
.nx-cine-score[hidden] { display: none; }
.nx-cine-score .nx-i { width: 11px; height: 11px; color: #F5C518; }

.nx-cine-info { min-width: 0; max-width: 680px; }
.nx-cine-title { margin: 0; color: var(--c-text); font-size: 38px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.nx-cine-orig { margin-top: 6px; color: var(--c-text2); font-size: 14px; }
.nx-cine-orig:empty { display: none; }

.nx-cine-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 12px 0 0; padding: 0; color: var(--c-text); font-size: 13px; font-weight: 500; }
.nx-cine-meta li { display: inline-flex; align-items: center; list-style: none; }
.nx-cine-meta li + li::before { content: ""; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: var(--c-text2); }

.nx-cine-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nx-cine-chips span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 6px; background: color-mix(in srgb, var(--c-panel2) 70%, transparent); color: var(--c-text2); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.nx-cine-chips span.is-age { border-color: rgba(232, 74, 174, .4); color: #FF9BD0; }

.nx-cine-excerpt { display: -webkit-box; margin: 14px 0 0; overflow: hidden; color: var(--c-text2); font-size: 13.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.nx-cine-excerpt[hidden] { display: none; }

/* actions: one strong button, the watchlist, the rest behind ⋯ */
.nx-cine .nx-cine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 0; border: 0; }
.nx-cine-play {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 26px 0 22px;
    border-radius: 23px;
    background: var(--c-grad);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(181, 76, 255, .32);
    transition: transform var(--c-ease), box-shadow var(--c-ease), filter var(--c-ease);
}
.nx-cine-play .nx-i { width: 17px; height: 17px; }
.nx-cine-play:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(181, 76, 255, .42); }
.nx-cine-play:active { transform: none; }

.nx-cine .nx-cine-actions > .nx-w-act {
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--c-line);
    border-radius: 23px;
    background: rgba(16, 18, 34, .55);
    color: var(--c-text) !important;
    font-size: 14px;
    backdrop-filter: blur(8px);
    transition: border-color var(--c-ease), background-color var(--c-ease);
}
.nx-cine .nx-cine-actions > .nx-w-act:hover { border-color: var(--c-line-hot); background: rgba(21, 21, 42, .8); }
.nx-cine .nx-cine-actions > .nx-w-act a { color: inherit !important; display: inline-flex; align-items: center; gap: 8px; }

.nx-cine-more { position: relative; }
.nx-cine-more-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: rgba(16, 18, 34, .55); color: var(--c-text); cursor: pointer; backdrop-filter: blur(8px); transition: border-color var(--c-ease), background-color var(--c-ease); }
.nx-cine-more-btn .nx-i { width: 18px; height: 18px; }
.nx-cine-more-btn:hover, .nx-cine-more-btn[aria-expanded="true"] { border-color: var(--c-line-hot); background: rgba(21, 21, 42, .85); }
.nx-cine-menu {
    position: absolute;
    z-index: 30;
    left: 0;
    top: calc(100% + 8px);
    display: grid;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-panel) 96%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    backdrop-filter: blur(14px);
}
.nx-cine-menu[hidden] { display: none; }
.nx-cine .nx-cine-menu .nx-w-act { justify-content: flex-start; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--c-text) !important; font-size: 13.5px; text-align: left; }
.nx-cine .nx-cine-menu .nx-w-act:hover, .nx-cine .nx-cine-menu .nx-w-act:focus-visible { background: color-mix(in srgb, var(--c-violet) 14%, transparent); outline: 0; }
.nx-cine .nx-cine-menu .nx-w-act a { display: inline-flex; align-items: center; gap: 10px; width: 100%; height: 100%; color: inherit !important; }
.nx-cine .nx-cine-menu .nx-w-act b { margin-left: auto; color: var(--c-text2); font-weight: 600; }
.nx-cine .nx-cine-menu .nx-w-report { width: 100%; font-size: 13.5px; }

/* ---------- local navigation ---------- */
.nx-cine .nx-cine-nav { position: sticky; z-index: 25; top: var(--header-h, 58px); display: block; margin: 0; overflow: visible; border: 0; background: color-mix(in srgb, var(--c-bg) 90%, transparent); box-shadow: 0 1px 0 var(--c-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nx-cine .nx-cine-nav > .nx-cine-w { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.nx-cine .nx-cine-nav > .nx-cine-w::-webkit-scrollbar { display: none; }
.nx-cine .nx-cine-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text2) !important;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--c-ease);
}
.nx-cine .nx-cine-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--c-grad); box-shadow: 0 0 10px rgba(181, 76, 255, .45); opacity: 0; transform: scaleX(.5); transition: opacity var(--c-ease), transform var(--c-ease); }
.nx-cine .nx-cine-nav a:hover { color: var(--c-text) !important; }
.nx-cine .nx-cine-nav a.is-active { color: var(--c-text) !important; }
.nx-cine .nx-cine-nav a.is-active::after { opacity: 1; transform: none; }
.nx-cine .nx-cine-nav a .nx-i { display: none; }

/* ---------- player + seasons ---------- */
.nx-cine-watch { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(290px, .9fr); align-items: start; gap: 20px; margin-top: 24px; }
.nx-cine-watch.is-solo { grid-template-columns: minmax(0, 1fr); }
.nx-cine-watch.is-solo .nx-cine-side { display: none; }
.nx-cine-stage { min-width: 0; }

.nx-cine .nx-w-player { border: 1px solid rgba(180, 160, 255, .16); border-radius: 14px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.nx-cine .nx-w-player .nav-pills { background: var(--c-panel) !important; border-bottom: 1px solid var(--c-line) !important; }
.nx-cine .nx-w-player .warning-box { background: var(--c-panel) !important; color: var(--c-text2) !important; }

/* the panel is as tall as its rows and stops at the player's height (--nx-side-max, set by neon.js); past that its list scrolls */
.nx-cine-side { min-width: 0; }
.nx-cine-side-in { display: flex; flex-direction: column; gap: 14px; max-height: var(--nx-side-max, none); }
.nx-cine-eps, .nx-cine-parts { display: flex; flex-direction: column; min-height: 0; padding: 14px; border: 1px solid var(--c-line); border-radius: var(--c-r-panel); background: linear-gradient(180deg, var(--c-panel) 0%, var(--c-bg2) 100%); }
.nx-cine-eps { flex: 0 1 auto; }
.nx-cine-parts { flex: 0 1 auto; max-height: 50%; }
.nx-cine-eps:not([hidden]) + .nx-cine-parts { max-height: 40%; }
.nx-cine-eps[hidden] { display: none; }
.nx-cine-side-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.nx-cine-side-head h2 { margin: 0; color: var(--c-text); font-size: 16px !important; font-weight: 700 !important; }
.nx-cine .nx-w-epcount { margin-left: auto; color: var(--c-muted); font-size: 12.5px; }

.nx-cine-season { margin-bottom: 10px; }
.nx-cine-season[hidden] { display: none; }
.nx-cine-season select {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A4B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
    color: var(--c-text);
    font-family: var(--font);
    font-size: 13.5px;
    appearance: none;
    cursor: pointer;
}
.nx-cine-season select:focus-visible { border-color: var(--c-line-hot); outline: 0; }

.nx-cine .nx-cine-side .nx-ep-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; max-height: none; margin: 0 -6px 0 0; padding: 0 6px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; }
.nx-cine .nx-cine-side .nx-ep-group { margin: 8px 2px 2px; color: var(--c-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nx-cine .nx-cine-side .nx-ep-group[hidden], .nx-cine .nx-cine-side .nx-ep[hidden] { display: none; }

.nx-cine .nx-cine-side .nx-ep {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 62px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--c-text) !important;
    text-align: left;
    transition: background-color var(--c-ease), border-color var(--c-ease);
}
.nx-cine .nx-cine-side .nx-ep:hover { background: color-mix(in srgb, var(--c-panel2) 85%, transparent); }
.nx-cine .nx-cine-side .nx-ep-media { position: relative; width: 96px; height: 54px; overflow: hidden; border-radius: 8px; background: var(--c-panel2); }
.nx-cine .nx-cine-side .nx-ep-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transition: transform 260ms ease; }
.nx-cine .nx-cine-side .nx-ep:hover .nx-ep-media img { transform: scale(1.8); }
.nx-cine .nx-cine-side .nx-ep-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(7, 8, 18, .6); color: #fff; opacity: 0; transition: opacity var(--c-ease); }
.nx-cine .nx-cine-side .nx-ep-play .nx-i { width: 10px; height: 10px; margin-left: 1px; }
.nx-cine .nx-cine-side .nx-ep:hover .nx-ep-play { opacity: 1; }
.nx-cine .nx-cine-side .nx-ep-title { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.nx-cine .nx-cine-side .nx-ep-title small { overflow: hidden; color: var(--c-muted); font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.nx-cine .nx-cine-side .nx-ep-len { color: var(--c-muted); font-size: 12px; }

.nx-cine .nx-cine-side .nx-ep.is-active { border-color: var(--c-line-hot); background: linear-gradient(90deg, color-mix(in srgb, var(--c-violet) 16%, transparent), color-mix(in srgb, var(--c-magenta) 6%, transparent)); box-shadow: 0 0 18px rgba(181, 76, 255, .18); }
.nx-cine .nx-cine-side .nx-ep.is-active .nx-ep-play { opacity: 1; background: var(--c-grad); }
.nx-cine .nx-cine-side .nx-ep.is-active .nx-ep-title { color: #fff; }

/* parts (seasons / instalments that are separate posts) use the same row */
.nx-cine .nx-cine-parts .nx-ep-title { font-size: 13px; }

/* ---------- overview + details ---------- */
.nx-cine-about { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; gap: 20px; margin-top: 28px; }
.nx-cine-panel { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--c-r-panel); background: var(--c-panel); }
.nx-cine-h { margin: 0 0 12px; color: var(--c-text); font-size: 16px !important; font-weight: 700 !important; }
.nx-cine .nx-cine-overview .nx-w-desc-text { max-width: 72ch; color: var(--c-text2); font-size: 14px; line-height: 1.65; }
.nx-cine .nx-cine-overview .nx-w-more { margin-top: 8px; color: var(--watch-accent-light); font-size: 13px; }

/* genres: only DLE's genre categories (under /categories/) become chips */
.nx-cine-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; font-size: 0; }
.nx-cine-genres a { display: none; }
.nx-cine-genres a[href*="/categories/"] { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-panel2); color: var(--c-text) !important; font-size: 12px; font-weight: 500; transition: border-color var(--c-ease), color var(--c-ease); }
.nx-cine-genres a[href*="/categories/"]:hover { border-color: var(--c-line-hot); color: #fff !important; }

.nx-cine .nx-cine-overview .nx-w-keys { margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: none; font-size: 12px; }
.nx-cine .nx-cine-overview .nx-w-keys > div a { height: 22px; font-size: 11px; }

.nx-cine .nx-cine-facts dl { gap: 0; }
.nx-cine .nx-cine-facts dl > div { grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; padding: 7px 0; border-bottom: 1px solid var(--c-line); }
.nx-cine .nx-cine-facts dl > div:last-child { border-bottom: 0; }
.nx-cine .nx-cine-facts dt { align-items: center; color: var(--c-text2); font-size: 12.5px; }
.nx-cine .nx-cine-facts dt .nx-i { margin: 0; color: var(--c-violet2); }
.nx-cine .nx-cine-facts dd { color: var(--c-text); font-size: 13px; }

/* ---------- section heads below ---------- */
.nx-cine-block { margin-top: 30px; }
.nx-cine-sh { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--c-text); font-size: 19px !important; font-weight: 700 !important; }
.nx-cine-sh::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--c-grad); }
.nx-cine .nx-cine-block > .nx-section-head { margin-bottom: 14px; }

/* ---------- main characters ---------- */
.nx-cine .nx-w-cast { margin: 0; }
.nx-cine .nx-cine-castcar { position: relative; }
/* the old cast strip was a flex row; here it is the site's carousel grid */
.nx-cine .nx-w-cast-row.nx-row { --cols: 9; --gap: 12px; display: grid; gap: var(--gap); padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; }
.nx-cine .nx-w-cast-row.nx-row::-webkit-scrollbar { display: none; }
.nx-cine .nx-w-actor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-width: none;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: var(--c-panel);
    text-align: center;
    transition: border-color var(--c-ease), transform var(--c-ease);
}
.nx-cine .nx-w-actor:hover { border-color: var(--c-line-hot); transform: translateY(-2px); }
.nx-cine .nx-w-actor img { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: center 18%; }
.nx-cine .nx-w-actor span { display: grid; gap: 2px; padding: 8px 8px 10px; }
.nx-cine .nx-w-actor b { max-width: none; font-size: 12.5px; }
.nx-cine .nx-w-actor small { max-width: none; font-size: 11px; }

/* ---------- similar ---------- */
.nx-cine .nx-cine-similar .nx-row { --cols: 6; --gap: 14px; }
.nx-cine .nx-cine-similar .nx-card-media { border-radius: 12px; }

/* ---------- comments ---------- */

.nx-cine .nx-cine-talk .nx-w-comments { margin-top: 0; }

/* ---------- trailer dialog ---------- */
.nx-cine-trailer { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(4, 4, 10, .82); backdrop-filter: blur(6px); }
.nx-cine-trailer[hidden] { display: none; }
.nx-cine-trailer-box { position: relative; width: min(1100px, 100%); }
.nx-cine-trailer-frame { overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--c-line); border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.nx-cine-trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.nx-cine-trailer-x { position: absolute; right: 0; top: -48px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-panel); color: #fff; cursor: pointer; }
.nx-cine-trailer-x .nx-i { width: 18px; height: 18px; }

/* jumps land below the header and the sticky local navigation */
.nx-cine #nx-player { scroll-margin-top: calc(var(--header-h, 58px) + 60px); }
.nx-cine #nx-watchzone, .nx-cine #nx-desc, .nx-cine #nx-cast, .nx-cine #nx-related, .nx-cine #nx-also, .nx-cine #nx-comments { scroll-margin-top: calc(var(--header-h, 58px) + 64px); }

/* ---------- 1024–1439 ---------- */
@media (max-width: 1439px) {
    .nx-cine-title { font-size: 34px !important; }
    .nx-cine-hero-in { min-height: 330px; }
    .nx-cine .nx-w-cast-row.nx-row { --cols: 8; }
    .nx-cine .nx-cine-similar .nx-row { --cols: 5; }
}

/* ---------- tablet: the panel goes under the player and flows naturally ---------- */
@media (max-width: 1023px) {
    .nx-cine-hero-in { grid-template-columns: 120px minmax(0, 1fr); gap: 22px; min-height: 300px; }
    .nx-cine-poster { width: 120px; }
    .nx-cine-title { font-size: 30px !important; }
    .nx-cine-watch { grid-template-columns: minmax(0, 1fr); }
    .nx-cine-side-in { max-height: none; }
    .nx-cine-eps, .nx-cine-parts, .nx-cine-eps:not([hidden]) + .nx-cine-parts { max-height: none; }
    .nx-cine .nx-cine-side .nx-ep-list { overflow: visible; margin: 0; padding: 0; }
    .nx-cine-about { grid-template-columns: minmax(0, 1fr); }
    .nx-cine .nx-w-cast-row.nx-row { --cols: 6; }
    .nx-cine .nx-cine-similar .nx-row { --cols: 4; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
    .nx-cine-backdrop img { object-position: 60% 20%; }
    .nx-cine-hero-in { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 14px; min-height: 0; padding: 22px 0 22px; }
    .nx-cine-poster { width: 96px; border-radius: 10px; }
    .nx-cine-title { font-size: 24px !important; }
    .nx-cine-orig { font-size: 13px; }
    .nx-cine-meta { font-size: 12px; }
    .nx-cine-excerpt { font-size: 13px; }
    .nx-cine .nx-cine-actions { grid-column: 1 / -1; margin-top: 16px; }
    .nx-cine-info { display: contents; }
    .nx-cine-title, .nx-cine-orig, .nx-cine-meta, .nx-cine-chips { grid-column: 2; }
    .nx-cine-poster { grid-row: 1 / span 4; align-self: start; }
    .nx-cine-excerpt { grid-column: 1 / -1; }
    .nx-cine-play { flex: 1 1 auto; justify-content: center; }
    .nx-cine .nx-cine-nav > .nx-cine-w { gap: 20px; }
    .nx-cine-watch { margin-top: 16px; }
    .nx-cine .nx-w-player { border-radius: 12px; }
    .nx-cine-panel { padding: 16px; }
    .nx-cine .nx-cine-facts dl > div { grid-template-columns: 130px minmax(0, 1fr); }
    .nx-cine .nx-w-cast-row.nx-row { --cols: 3.4; }
    .nx-cine .nx-cine-similar .nx-row { --cols: 2.4; }
    .nx-cine-trailer-x { top: -46px; }
}

/* a narrow phone: the watchlist keeps its icon (the word stays for screen readers) so the row fits */
@media (max-width: 480px) {
    .nx-cine .nx-cine-actions > .nx-w-fav, .nx-cine .nx-cine-actions > .cd-popup-trigger { width: 46px; padding: 0; justify-content: center; font-size: 0; }
    .nx-cine .nx-cine-actions > .nx-w-fav a { font-size: 0; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-cine *, .nx-cine *::before, .nx-cine *::after { transition-duration: .01ms !important; }
}

/* =====================================================
   ARTICLE PAGE — magazine setting
   Posts in "სტატიები" and "მაყურებელთა ცენტრი".
   The text keeps a reading measure of 760px; pictures break out into a
   1100px lane around it; the contents sit as numbered ticks in the left
   margin. Nothing is boxed into a sidebar, so no half of the page stands
   empty. The stored text comes from an old editor (centred, sizes set by
   hand, <br><br> as paragraphs) - initArticle() in neon.js rebuilds it.
===================================================== */

.nx-art {
    --measure: 760px;
    --lane: 1100px;
    background: var(--bg);
}

/* ---- reading progress, a hairline under the header ---- */
.nx-art-progress { position: fixed; z-index: 40; left: 0; right: 0; top: var(--header-h, 58px); height: 2px; pointer-events: none; }
.nx-art-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 60%, #FF8FC8 100%); box-shadow: 0 0 12px var(--accent-glow); transform: scaleX(0); transform-origin: 0 50%; }

/* ---- cover: the fade's last stop is exactly the page colour, so no band shows ---- */
.nx-art-cover { position: relative; height: 440px; overflow: hidden; }
.nx-art-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(.9) brightness(.62); transform: scale(1.03); }
.nx-art-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg) 55%, transparent) 0%,
            color-mix(in srgb, var(--bg) 0%, transparent) 28%,
            color-mix(in srgb, var(--bg) 70%, transparent) 70%,
            var(--bg) 100%);
}

/* ---- header: lines up with the text column, so everything starts on one edge ---- */
.nx-art-head { position: relative; z-index: 1; width: min(var(--measure), calc(100% - 2 * var(--pad))); margin: 0 auto; padding-top: 34px; }
.nx-art-cover + .nx-art-head { margin-top: -176px; padding-top: 0; }

.nx-art-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12.5px; letter-spacing: .02em; }
.nx-art-crumbs a { color: var(--text-muted); transition: color var(--transition); }
.nx-art-crumbs a:hover { color: var(--accent-light); }
.nx-art-crumbs a:not(:last-child)::after { content: "/"; margin-left: 7px; color: var(--text-faint); }
.nx-art-crumbs a:last-child { color: var(--accent-light); }

.nx-art-title { margin: 12px 0 0; color: var(--text); font-size: 42px; font-weight: 800; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }

.nx-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 18px; color: var(--text-muted); font-size: 13px; }
.nx-art-meta li { display: inline-flex; align-items: center; gap: 7px; }
.nx-art-meta .nx-i { width: 14px; height: 14px; color: var(--accent); }
.nx-art-meta a { display: inline-flex; align-items: center; gap: 7px; color: inherit; transition: color var(--transition); }
.nx-art-meta a:hover { color: var(--accent-light); }

.nx-art-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.nx-art-edit { margin-left: auto; }

/* =====================================================
   ARTICLE BODY — a text column with a wider lane for pictures
===================================================== */

.nx-art-body {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--pad), 1fr)
        [wide-start] minmax(0, calc((var(--lane) - var(--measure)) / 2))
        [text-start] min(var(--measure), calc(100% - 2 * var(--pad))) [text-end]
        minmax(0, calc((var(--lane) - var(--measure)) / 2)) [wide-end]
        minmax(var(--pad), 1fr) [full-end];
    margin-top: 40px;
    color: var(--text-2);
    font-size: 17px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.nx-art-body > * { grid-column: text; min-width: 0; }
.nx-art-body > :first-child { margin-top: 0; }

.nx-art-body p { margin: 0 0 22px; }
.nx-art-body .nx-art-lead { margin-bottom: 34px; color: var(--text); font-size: 20px; line-height: 1.66; }

/* numbered sections: the number is lifted out of the heading into its own figure */
.nx-art-body h2 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    margin: 64px 0 22px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -.005em;
    scroll-margin-top: calc(var(--header-h, 58px) + 24px);
}
.nx-art-body h2:not(:has(.nx-art-num)) { display: block; }
/* the first section follows the lead directly - no rule, no double gap */
.nx-art-body > .nx-art-lead + h2, .nx-art-body > :first-child + h2 { margin-top: 8px; padding-top: 0; border-top: 0; }
.nx-art-body h2 a { color: inherit; border: 0; }
.nx-art-body h2 a:hover { color: var(--accent-light); }
.nx-art-num {
    color: transparent;
    font-size: 46px;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.nx-art-body a { color: var(--accent-light); border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); transition: color var(--transition), border-color var(--transition); }
.nx-art-body a:hover { border-bottom-color: var(--accent); }

/* pictures take the wide lane and a steady height, so the page keeps a rhythm */
.nx-art-body > figure { grid-column: wide; margin: 6px 0 34px; }
.nx-art-body figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 18px;
    background: var(--surface-2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
/* two or more frames dropped in one block sit side by side */
.nx-art-body figure.is-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nx-art-body figure.is-pair img { height: 340px; max-height: none; }
.nx-art-body figure.is-pair figcaption { grid-column: 1 / -1; }
.nx-art-body figcaption { max-width: var(--measure); margin: 14px auto 0; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--text-muted); font-size: 14px; font-style: italic; line-height: 1.6; }

.nx-art-body img { max-width: 100%; height: auto; border-radius: 12px; }
.nx-art-body img.nx-art-emoji { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .1em; vertical-align: -.17em; border-radius: 0; box-shadow: none; }

.nx-art-body ul, .nx-art-body ol { margin: 0 0 22px; padding-left: 22px; }
.nx-art-body li { margin-bottom: 8px; }
.nx-art-body ul li { list-style: disc; }
.nx-art-body ol li { list-style: decimal; }
.nx-art-body blockquote { grid-column: wide; margin: 18px 0 36px; padding: 26px 34px; border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0; background: var(--accent-soft); color: var(--text); font-size: 20px; line-height: 1.6; }
.nx-art-body iframe { grid-column: wide; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom: 34px; border: 0; border-radius: 18px; }
.nx-art-body hr { height: 1px; margin: 40px 0; border: 0; background: var(--border); }
.nx-art-body b, .nx-art-body strong { color: var(--text); font-weight: 700; }

/* ---- contents rail in the left margin ---- */
.nx-art-rail {
    position: fixed;
    z-index: 30;
    top: 50%;
    left: max(18px, calc(50vw - var(--lane) / 2 - 76px));
    opacity: 0;
    visibility: hidden;
    transform: translate(-8px, -50%);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.nx-art-rail.is-in { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.nx-art-rail ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-art-rail li { list-style: none; }
.nx-art-rail a { position: relative; display: flex; align-items: center; gap: 10px; color: var(--text-faint); }
.nx-art-rail a i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px);
    transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition);
}
.nx-art-rail a span {
    position: absolute;
    left: 40px;
    top: 50%;
    max-width: 260px;
    padding: 7px 12px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition: opacity .2s ease, transform .2s ease;
}
.nx-art-rail a:hover i { border-color: var(--accent-border); color: var(--text-2); }
.nx-art-rail a:hover span { opacity: 1; transform: translate(0, -50%); }
.nx-art-rail a.is-on i { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); transform: scale(1.08); box-shadow: 0 0 16px var(--accent-glow); }
.nx-art-rail a.is-done i { color: var(--text-muted); }

/* ---- after the article: same lane as the pictures ---- */
.nx-art-foot { width: min(var(--lane), calc(100% - 2 * var(--pad))); margin: 70px auto 0; }
.nx-art-foot .nx-w-keys { margin-bottom: 30px; }
.nx-art-foot .nx-w-comments { margin-top: 0; }
.nx-art-more { margin-top: 44px; }

@media (max-width: 1499px) {
    .nx-art-rail { display: none; }
}

@media (max-width: 1100px) {
    .nx-art-title { font-size: 34px; }
    .nx-art-body figure.is-pair img { height: 260px; }
}

@media (max-width: 767px) {
    .nx-art-cover { height: 250px; }
    .nx-art-cover + .nx-art-head { margin-top: -96px; }
    .nx-art-title { font-size: 26px; }
    .nx-art-meta { gap: 6px 14px; font-size: 12px; }
    .nx-art-edit { margin-left: 0; }
    .nx-art-body { margin-top: 28px; font-size: 16px; line-height: 1.75; }
    .nx-art-body .nx-art-lead { font-size: 17.5px; }
    .nx-art-body h2 { gap: 12px; margin: 44px 0 16px; padding-top: 20px; font-size: 19px !important; }
    .nx-art-num { font-size: 34px; }
    .nx-art-body figure img { max-height: 300px; border-radius: 14px; }
    .nx-art-body figure.is-pair { grid-template-columns: 1fr; }
    .nx-art-body figure.is-pair img { height: auto; max-height: 300px; }
    .nx-art-body blockquote { padding: 18px 20px; font-size: 17px; }
    .nx-art-foot { margin-top: 50px; }
}

/* =====================================================
   SITE FONT — "ganaxlebis fotn.OTF" (internal family UbuntuMedium)
   Carries Latin, Georgian Mkhedruli and Asomtavruli, and Cyrillic.
   Mtavruli (U+1C90-1CBF) and the lari sign are not in the file, so
   Noto Sans Georgian stays behind it and picks those up.
   The logo keeps its own two fonts and is not touched by this.
   Source and licence note: fonts/site/SOURCE.txt
===================================================== */

@font-face {
    font-family: "NxSite";
    src: url("../fonts/site/nxsite.woff2") format("woff2"),
         url("../fonts/site/nxsite.otf") format("opentype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "NxSite";
    src: url("../fonts/site/nxsite.woff2") format("woff2"),
         url("../fonts/site/nxsite.otf") format("opentype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* the old theme sheets name their fonts font-1 … font-5 and Camber in hundreds of
   rules; this sheet loads after them, so pointing those names at the new file
   carries every one of those rules over without touching them one by one */
@font-face { font-family: font-1; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }
@font-face { font-family: font-2; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }
@font-face { font-family: font-3; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }
@font-face { font-family: font-4; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }
@font-face { font-family: font-5; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Camber"; src: url("../fonts/site/nxsite.woff2") format("woff2"), url("../fonts/site/nxsite.otf") format("opentype"); font-display: swap; }

html, body { font-family: var(--font); }
input, button, textarea, select, optgroup { font-family: inherit; }

/* the logo stands on its own two fonts, with the old stack behind them */
.nx-logo > span { font-family: "Asiana", "NxLogoKa", "Noto Sans Georgian", "Inter", "BPG Arial", "Sylfaen", system-ui, sans-serif; }

/* =====================================================
   2026-10-09 fixes
   1. Top menu: the generic hover/focus icon rule set every icon to 19px, so the
      20px filled icons (ფილმები, ჟანრები) shrank by 1px on hover and the whole row
      shifted. Keep their size in every state.
   2. top.ge counter: moved to the footer bottom bar, right side.
===================================================== */
.nx-nav > ul > li > a .nx-i.nx-nav-ico.is-fill,
.nx-nav > ul > li:hover > a .nx-i.nx-nav-ico.is-fill,
.nx-nav > ul > li:focus-within > a .nx-i.nx-nav-ico.is-fill { width: 20px; height: 20px; flex: 0 0 auto; }
.nx-nav > ul > li > a .nx-i.nx-nav-ico { flex: 0 0 auto; }

.nx-topge { display: flex; align-items: center; flex: 0 0 auto; min-height: 31px; }
.nx-topge a { display: block; line-height: 0; border-radius: 6px; overflow: hidden; opacity: .7; filter: grayscale(.35); transition: opacity var(--transition), filter var(--transition), box-shadow var(--transition); }
.nx-topge a:hover { opacity: 1; filter: none; box-shadow: 0 0 14px var(--accent-glow); }
.nx-topge img { display: block; width: 88px; height: 31px; }
@media (min-width: 768px) {
    .nx-footer-bottom-in > ul { margin-left: auto; }
    .nx-topge { padding-left: 22px; border-left: 1px solid var(--border); }
}

/* =====================================================
   FORMS & ACCOUNT — premium pass (2026-10-09)
   One set of parts for the sign-in popup, the member menu, registration,
   password reset, system messages and the comment form:
     .nx-field   label + .nx-input (icon, field, optional eye button)
     .nx-btn-main  the gradient action button
     .nx-pop-*   modal shell on top of the legacy .cd-popup open/close logic
     .nx-auth-*  the full-page card
   Everything reads the site tokens, so the light look follows on its own.
===================================================== */

/* ---- fields ---- */
.nx-pop-box, .nx-pop-box *, .nx-acc, .nx-acc *, .nx-cform, .nx-cform * { box-sizing: border-box; }
.nx-form, .nx-cform { --f-bg: color-mix(in srgb, var(--surface) 70%, #000 30%); --f-bd: var(--border-strong); }
.darken .nx-form, .darken .nx-cform { --f-bg: #F7F5FC; }
.nx-field { display: block; margin: 0 0 16px; padding: 0; list-style: none; }
.nx-field > label, .nx-field-row > label { display: block; margin: 0 0 7px; color: var(--text-2); font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.nx-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nx-field-row a { color: var(--accent-light) !important; font-size: 12px; font-weight: 600; }
.nx-field-row a:hover { text-decoration: underline; }

.nx-input { position: relative; display: flex; align-items: center; }
.nx-input > .nx-i { position: absolute; left: 14px; z-index: 1; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; transition: color var(--transition); }
.nx-form .nx-input input, .nx-w-comments .nx-cform .nx-input input[type] {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px 0 44px !important;
    border: 1px solid var(--f-bd) !important;
    border-radius: 12px !important;
    background: var(--f-bg) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    line-height: normal !important;
    outline: 0 !important;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition) !important;
}
.nx-form .nx-input:not(:has(> .nx-i)) input, .nx-w-comments .nx-cform .nx-input:not(:has(> .nx-i)) input[type] { padding-left: 14px !important; }
.nx-form .nx-input:has(.nx-eye) input { padding-right: 46px !important; }
.nx-form .nx-input input::placeholder, .nx-cform .nx-input input::placeholder { color: var(--text-faint); opacity: 1; }
.nx-form .nx-input input:hover, .nx-w-comments .nx-cform .nx-input input[type]:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--f-bd)) !important; }
.nx-form .nx-input input:focus, .nx-w-comments .nx-cform .nx-input input[type]:focus { border-color: var(--accent-border) !important; box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px var(--accent-glow) !important; }
.nx-input:focus-within > .nx-i { color: var(--accent); }
.nx-form .nx-input input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px var(--f-bg) inset !important; caret-color: var(--text); }

.nx-eye { position: absolute; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--text-faint); cursor: pointer; transition: color var(--transition), background-color var(--transition); }
.nx-eye:hover, .nx-eye.is-on { background: var(--accent-soft); color: var(--accent-light); }
.nx-eye .nx-i { width: 17px; height: 17px; pointer-events: none; }

.nx-field-note { min-height: 0; margin-top: 6px; color: var(--text-faint); font-size: 11.5px; line-height: 1.45; }
.nx-field-note:empty { display: none; }
.nx-field-note.is-ok { color: #5EE0A0; }
.nx-field-note.is-bad { color: #FF7A8A; }
#result-registration.nx-field-note { color: var(--text-2); }
#result-registration.nx-field-note font, #result-registration.nx-field-note span { font-size: 11.5px !important; }
.nx-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.nx-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.nx-meter i { height: 4px; border-radius: 4px; background: var(--border-strong); transition: background-color var(--transition); }
.nx-meter i.on.s1 { background: #FF6B81; }
.nx-meter i.on.s2 { background: #F5B83D; }
.nx-meter i.on.s3 { background: #8BD3FF; }
.nx-meter i.on.s4 { background: #5EE0A0; }

.nx-captcha { display: flex; align-items: center; gap: 10px; }
.nx-captcha > a, .nx-captcha > span, .nx-captcha > img { flex: 0 0 auto; display: block; line-height: 0; }
.nx-captcha img { height: 48px; width: auto; border: 1px solid var(--f-bd); border-radius: 12px; background: #fff; cursor: pointer; }
.nx-captcha .nx-input { flex: 1 1 auto; }

/* ---- buttons ---- */
.nx-btn-main {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin: 6px 0 0;
    padding: 0 24px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--btn-grad) !important;
    box-shadow: 0 10px 28px rgba(134, 96, 224, .38), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font-family: var(--font) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.nx-btn-main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms ease; }
.nx-btn-main:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 14px 34px rgba(134, 96, 224, .5), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
.nx-btn-main:hover::before { transform: translateX(120%); }
.nx-btn-main:active { transform: translateY(0); filter: brightness(.97); }
.nx-btn-main:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.nx-btn-main .nx-i { position: relative; width: 17px; height: 17px; transition: transform var(--transition); }
.nx-btn-main span { position: relative; }
.nx-btn-main:hover .nx-i { transform: translateX(3px); }

/* ---- shared heading block (popup + reset page) ---- */
.nx-pop-badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 14px; border: 1px solid var(--accent-border); border-radius: 16px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent-soft) 70%); box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .15); color: #fff; }
.darken .nx-pop-badge { color: var(--accent-dark); }
.nx-pop-badge .nx-i { width: 24px; height: 24px; }
.nx-pop-head { margin: 0 0 22px; text-align: center; }
.nx-pop-head .nx-pop-badge { margin: 0 auto 14px; }
.nx-pop-head h1, .nx-pop-head h2 { margin: 0 0 7px !important; padding: 0 !important; color: var(--text) !important; font-family: var(--font); font-size: 22px !important; font-weight: 800 !important; line-height: 1.25; }
.nx-pop-head p { max-width: 340px; margin: 0 auto !important; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* ---- modal shell over the legacy .cd-popup ---- */
.cd-popup.nx-pop { box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 3, 10, .62) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); overflow-y: auto; }
.darken .cd-popup.nx-pop { background: rgba(40, 30, 70, .35) !important; }
.cd-popup.nx-pop .cd-popup-container.nx-pop-box {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 34px 32px 26px;
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    background:
        radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
        color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 60px var(--accent-glow);
    transform: translateY(18px) scale(.97);
    opacity: 0;
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease;
}
.darken .cd-popup.nx-pop .cd-popup-container.nx-pop-box { box-shadow: 0 30px 70px rgba(30, 24, 60, .25), 0 0 50px var(--accent-glow); }
.cd-popup.nx-pop.is-visible .cd-popup-container.nx-pop-box { transform: none; opacity: 1; }
.cd-popup.nx-pop .cd-popup-container::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); opacity: .6; }

.cd-popup.nx-pop .cd-popup-close.nx-pop-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-muted) !important; transition: color var(--transition), border-color var(--transition), background-color var(--transition), transform var(--transition); }
.cd-popup.nx-pop .cd-popup-close.nx-pop-x::after { display: none; }
.cd-popup.nx-pop .cd-popup-close.nx-pop-x:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text) !important; transform: rotate(90deg); }
.cd-popup.nx-pop .cd-popup-close.nx-pop-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; }

.nx-pop-foot { margin: 20px -32px -26px; padding: 16px 20px; border-top: 1px solid var(--border); border-radius: 0 0 24px 24px; background: color-mix(in srgb, var(--surface) 60%, #000 40%); color: var(--text-muted); font-size: 13px; text-align: center; }
.darken .nx-pop-foot { background: #F6F3FD; }
.nx-pop-foot a { margin-left: 4px; color: var(--accent-light) !important; font-weight: 700; }
.nx-pop-foot a:hover { text-decoration: underline; }

/* member menu */
.nx-pop-user.nx-pop-box { max-width: 360px !important; padding: 24px 20px 18px !important; }
.nx-pop-me { display: flex; align-items: center; gap: 14px; margin: 0 40px 18px 4px; }
.nx-pop-ava { position: relative; flex: 0 0 auto; width: 58px; height: 58px; padding: 2px; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), #FF8FD8, var(--accent-dark), var(--accent)); box-shadow: 0 0 22px var(--accent-glow); }
.nx-pop-ava span { display: block; width: 100%; height: 100%; border: 3px solid var(--surface); border-radius: 50%; background: #1B1933 center / cover no-repeat; }
.nx-pop-me-txt { min-width: 0; }
.nx-pop-me-txt b { display: block; overflow: hidden; color: var(--text); font-size: 17px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.nx-pop-me-txt small { color: var(--text-faint); font-size: 12px; }
.nx-pop-menu { margin: 0; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 60%, #000 40%); list-style: none; }
.darken .nx-pop-menu { background: #F8F6FD; }
.nx-pop-menu li { list-style: none; }
.nx-pop-menu a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 11px; color: var(--text-2) !important; font-size: 13.5px; font-weight: 600; transition: background-color var(--transition), color var(--transition); }
.nx-pop-menu a > span { flex: 1 1 auto; }
.nx-pop-menu a > .nx-i { width: 18px; height: 18px; color: var(--text-faint); transition: color var(--transition); }
.nx-pop-menu a > .nx-pop-go { width: 14px; height: 14px; opacity: .6; transition: transform var(--transition), opacity var(--transition); }
.nx-pop-menu a:hover { background: var(--accent-soft); color: var(--text) !important; }
.nx-pop-menu a:hover > .nx-i { color: var(--accent); }
.nx-pop-menu a:hover > .nx-pop-go { opacity: 1; transform: translateX(2px); }
.nx-pop-menu em { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-light); font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 22px; text-align: center; }
.nx-pop-out { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; margin-top: 10px; border: 1px solid rgba(255, 110, 140, .22); border-radius: 12px; background: rgba(255, 77, 125, .06); color: #FF8FA6 !important; font-size: 13.5px; font-weight: 700; transition: background-color var(--transition), border-color var(--transition); }
.nx-pop-out:hover { border-color: rgba(255, 110, 140, .5); background: rgba(255, 77, 125, .13); }
.nx-pop-out svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- full-page card (registration, reset, messages) ---- */
.nx-acc { width: 100%; max-width: 1040px; margin: 34px auto 56px; padding: 0 var(--pad); }
.nx-acc-narrow { max-width: 520px; }
.nx-acc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow), 0 0 70px color-mix(in srgb, var(--accent) 10%, transparent); }
.nx-acc-card:has(.nx-acc-side) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.nx-acc-card::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); opacity: .55; }

.nx-acc-side { position: relative; padding: 44px 40px; overflow: hidden; border-right: 1px solid var(--border); background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%), radial-gradient(70% 60% at 100% 100%, rgba(255, 120, 200, .12), transparent 70%); }
.nx-acc-side h1 { margin: 0 0 10px !important; padding: 0 !important; color: var(--text) !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.15; }
.nx-acc-side > p { max-width: 330px; margin: 0 0 28px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.nx-acc-perks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nx-acc-perks li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 55%, transparent); list-style: none; transition: border-color var(--transition), transform var(--transition); }
.nx-acc-perks li:hover { border-color: var(--accent-border); transform: translateX(3px); }
.nx-acc-perks .nx-i { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.nx-acc-perks span { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.nx-acc-perks b { display: block; margin-bottom: 1px; color: var(--text); font-size: 13.5px; font-weight: 700; }

.nx-acc-main { padding: 44px 44px 36px; }
.nx-acc-narrow .nx-acc-main { padding: 40px 36px 30px; }
.nx-acc-head { margin: 0 0 24px; }
.nx-acc-head h2 { margin: 0 0 5px !important; padding: 0 !important; color: var(--text) !important; font-size: 22px !important; font-weight: 800 !important; }
.nx-acc-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.nx-acc-head a, .nx-acc-legal a { color: var(--accent-light) !important; font-weight: 700; }
.nx-acc-head a:hover, .nx-acc-legal a:hover { text-decoration: underline; }
.nx-acc-legal { margin: 14px 0 0; color: var(--text-faint); font-size: 12px; text-align: center; }
.nx-acc .error:empty { display: none; }
.nx-acc .error:not(:empty) { margin: -6px 0 14px; color: #FF7A8A; font-size: 12px; }
.nx-xfields { width: 100%; margin: 0 0 10px; border-collapse: separate; border-spacing: 0 10px; }
.nx-xfields td { padding: 0 8px 0 0; color: var(--text-2); font-size: 13px; vertical-align: middle; }
.nx-xfields input, .nx-xfields select, .nx-xfields textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--f-bd); border-radius: 11px; background: var(--f-bg); color: var(--text); font-family: var(--font); }

/* the page around the card: DLE prints these templates inside the content column */
.center-size-3:has(> .nx-acc), .center-size-4:has(> .nx-acc) { width: 100%; }

/* system message card */
.nx-note-card { display: flex; align-items: flex-start; gap: 18px; padding: 26px 28px; border: 1px solid var(--border-strong); border-radius: 22px; background: radial-gradient(100% 80% at 0% 0%, var(--accent-soft), transparent 60%), color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.nx-note-card .nx-pop-badge { flex: 0 0 auto; margin: 0; }
.nx-note-card b { display: block; margin: 4px 0 6px; color: var(--text); font-size: 17px; font-weight: 800; }
.nx-note-body { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }
.nx-note-body a { color: var(--accent-light) !important; font-weight: 600; }
.nx-note-body ul, .nx-note-body ol { margin: 6px 0 0 18px; }

.box.story:has(#dle_rules_accept), .center-size-3:has(#dle_rules_accept) { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* registration step 1: the rules DLE shows before the form (static.tpl + its accept form) */
.box_in:has(#dle_rules_accept) { max-width: 860px; margin: 0 auto; padding: 40px 44px 0 !important; border: 1px solid var(--border-strong) !important; border-radius: 26px !important; background: color-mix(in srgb, var(--surface) 94%, transparent) !important; box-shadow: var(--shadow); }
.box_in:has(#dle_rules_accept) .text { color: var(--text-muted) !important; font-size: 14px !important; line-height: 1.75 !important; text-transform: none !important; }
.box_in:has(#dle_rules_accept) .text > p:first-child { margin: 0 0 18px; color: var(--text) !important; font-size: 22px; font-weight: 800; line-height: 1.3; }
.box_in:has(#dle_rules_accept) .text p { margin: 0 0 12px; }
.box_in:has(#dle_rules_accept) .text ul { margin: 4px 0 18px; padding: 0; list-style: none; }
.box_in:has(#dle_rules_accept) .text li { position: relative; margin: 0 0 8px; padding: 10px 14px 10px 40px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.box_in:has(#dle_rules_accept) .text li::before { content: "✕"; position: absolute; left: 14px; top: 10px; color: #FF7A8A; font-size: 12px; font-weight: 800; }
.box_in:has(#dle_rules_accept) .text > div:has(#registration) { position: sticky; bottom: 0; margin: 26px -44px 0; padding: 18px 44px 22px; border-top: 1px solid var(--border); border-radius: 0 0 26px 26px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.box_in:has(#dle_rules_accept) #registration { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.box_in:has(#dle_rules_accept) #registration input.bbcodes { height: 48px; padding: 0 28px; border: 1px solid var(--border-strong); border-radius: 13px; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color var(--transition), color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.box_in:has(#dle_rules_accept) #registration input.bbcodes:hover { border-color: var(--accent-border); color: var(--text); }
.box_in:has(#dle_rules_accept) #registration input[type="submit"].bbcodes { min-width: 220px; border: 0; background: var(--btn-grad); box-shadow: 0 10px 28px rgba(134, 96, 224, .38); color: #fff; }
.box_in:has(#dle_rules_accept) #registration input[type="submit"].bbcodes:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(134, 96, 224, .5); }
.box_in:has(#dle_rules_accept) ~ .nx-pager, .box_in:has(#dle_rules_accept) .nx-pager { display: none; }

/* ---- comment form ---- */
.nx-w-comments .addcomment.nx-cform { padding: 22px 22px 18px !important; border: 1px solid var(--watch-border) !important; border-radius: 20px !important; background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--watch-surface) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.nx-cform .box_in { padding: 0 !important; border: 0 !important; background: none !important; }
.nx-cform-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.nx-cform-ico { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.nx-cform-ico .nx-i { width: 19px; height: 19px; }
.nx-cform-head b { display: block; color: var(--text); font-size: 15px; font-weight: 800; }
.nx-cform-head small { color: var(--text-faint); font-size: 12px; }
.nx-cform .ui-form { margin: 0 !important; padding: 0 !important; list-style: none; }
.nx-cform .ui-form > li { margin: 0 0 14px !important; padding: 0 !important; list-style: none; }
.nx-w-comments .nx-cform .dleaddcomments-editor { border-color: var(--f-bd); border-radius: 14px; background: var(--f-bg); }
.nx-w-comments .nx-cform .dleaddcomments-editor:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px var(--accent-glow); }
.nx-cform-foot { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.nx-cform-hint { margin-right: auto; color: var(--text-faint); font-size: 12px; }
.nx-cform-hint a { color: var(--accent-light) !important; font-weight: 700; }
.nx-w-comments .nx-cform .nx-btn-main { width: auto; min-width: 180px; height: 46px; margin: 0; }

@media (max-width: 860px) {
    .nx-acc { margin: 18px auto 36px; padding: 0 14px; }
    .nx-acc-card:has(.nx-acc-side) { grid-template-columns: minmax(0, 1fr); }
    .nx-acc-side { padding: 28px 22px 22px; border-right: 0; border-bottom: 1px solid var(--border); }
    .nx-acc-side h1 { font-size: 24px !important; }
    .nx-acc-side > p { margin-bottom: 16px; }
    .nx-acc-perks { grid-template-columns: 1fr 1fr; gap: 8px; }
    .nx-acc-perks li { padding: 10px 12px; gap: 10px; }
    .nx-acc-perks span { font-size: 0; }
    .nx-acc-perks b { margin: 0; font-size: 12.5px; }
    .nx-acc-main, .nx-acc-narrow .nx-acc-main { padding: 26px 20px 22px; }
    .nx-field-pair { grid-template-columns: 1fr; }
    .cd-popup.nx-pop .cd-popup-container.nx-pop-box { padding: 30px 20px 22px; border-radius: 22px; }
    .nx-pop-foot { margin: 18px -20px -22px; }
    .box_in:has(#dle_rules_accept) { padding: 26px 20px 0 !important; border-radius: 20px !important; }
    .box_in:has(#dle_rules_accept) .text > div:has(#registration) { margin: 20px -20px 0; padding: 14px 20px 18px; }
    .box_in:has(#dle_rules_accept) #registration input.bbcodes { flex: 1 1 100%; }
    .nx-w-comments .addcomment.nx-cform { padding: 16px 14px 14px !important; border-radius: 16px !important; }
    .nx-cform-foot { justify-content: stretch; }
    .nx-w-comments .nx-cform .nx-btn-main { width: 100%; }
    .nx-note-card { padding: 20px; gap: 14px; }
}
/* system message on the home page (a failed sign-in lands there) */
.nx-home-info:empty { display: none; }
.nx-home-info .nx-acc { margin: 22px auto 0; }

/* =====================================================
   2026-10-09 detail page fixes
   1. The "⋯" menu was cut off by the hero (overflow: hidden) and sat under the
      sticky tab bar (z-index 25). The hero no longer clips; the backdrop clips
      itself, and while the menu is open the hero rises above the tabs.
   2. Bigger poster.
===================================================== */
.nx-cine-hero { overflow: visible; }
.nx-cine-backdrop { overflow: hidden; }
.nx-cine-hero:has(.nx-cine-menu:not([hidden])) { z-index: 40; }

.nx-cine-hero-in { grid-template-columns: 210px minmax(0, 1fr); gap: 34px; min-height: 400px; }
.nx-cine-poster { width: 210px; border-radius: 16px; }
@media (max-width: 1439px) {
    .nx-cine-hero-in { grid-template-columns: 190px minmax(0, 1fr); gap: 30px; min-height: 370px; }
    .nx-cine-poster { width: 190px; }
}
@media (max-width: 1023px) {
    .nx-cine-hero-in { grid-template-columns: 150px minmax(0, 1fr); gap: 22px; min-height: 320px; }
    .nx-cine-poster { width: 150px; border-radius: 14px; }
}
@media (max-width: 767px) {
    .nx-cine-hero-in { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; min-height: 0; }
    .nx-cine-poster { width: 116px; border-radius: 12px; }
}
/* the "⋯" button is the last one in the row on phones: open the menu towards the left */
@media (max-width: 767px) {
    .nx-cine-menu { left: auto !important; right: 0 !important; max-width: calc(100vw - 32px); }
}

/* =====================================================
   AVATAR PICKER (engine/mods/AvatarSelect) — 2026-10-09
===================================================== */
.nx-avm { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 20px; background: rgba(4, 3, 10, .62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); opacity: 0; transition: opacity 220ms ease; }
.darken .nx-avm { background: rgba(40, 30, 70, .35); }
.nx-avm[hidden] { display: none !important; }
.nx-avm.is-on { opacity: 1; }
.nx-avm, .nx-avm * { box-sizing: border-box; }
.nx-avm-box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: min(720px, calc(100vh - 40px)); padding: 28px 26px 20px; border: 1px solid var(--border-strong); border-radius: 24px; background: radial-gradient(120% 50% at 50% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px var(--accent-glow); transform: translateY(14px) scale(.98); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.nx-avm.is-on .nx-avm-box { transform: none; }
.nx-avm-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition), transform var(--transition); }
.nx-avm-x:hover { border-color: var(--accent-border); color: var(--text); transform: rotate(90deg); }
.nx-avm-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.nx-avm-head { margin: 0 44px 16px 0; }
.nx-avm-head h2 { margin: 0 0 4px !important; padding: 0 !important; color: var(--text) !important; font-family: var(--font); font-size: 21px !important; font-weight: 800 !important; }
.nx-avm-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.nx-avm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.nx-avm-tabs[hidden] { display: none; }
.nx-avm-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 11px; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color var(--transition), background-color var(--transition), color var(--transition); }
.nx-avm-tab em { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-light); font-size: 11px; font-style: normal; line-height: 20px; text-align: center; }
.nx-avm-tab:hover { border-color: var(--accent-border); color: var(--text); }
.nx-avm-tab.is-on { border-color: transparent; background: var(--btn-grad); color: #fff; box-shadow: 0 6px 18px rgba(134, 96, 224, .35); }
.nx-avm-tab.is-on em { background: rgba(255, 255, 255, .22); color: #fff; }
.nx-avm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; min-height: 120px; margin: 0 -6px; padding: 4px 6px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nx-avm-item { position: relative; display: block; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 50%; background: var(--surface-hover); cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.nx-avm-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-avm-item:hover { transform: translateY(-2px) scale(1.03); border-color: var(--accent-border); }
.nx-avm-item:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.nx-avm-item.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px var(--accent-glow); }
.nx-avm-item.is-on::after { content: "✓"; position: absolute; right: 6%; bottom: 6%; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.nx-avm-empty { grid-column: 1 / -1; margin: 30px 0; color: var(--text-muted); font-size: 13px; text-align: center; }
.nx-avm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.nx-avm-note { margin-right: auto; color: var(--text-muted); font-size: 12.5px; }
.nx-avm-note.is-ok { color: #5EE0A0; }
.nx-avm-note.is-bad { color: #FF7A8A; }
.nx-avm .nx-avm-save { width: auto; min-width: 160px; height: 46px; margin: 0; }
.nx-avm .nx-avm-save:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }
@media (max-width: 600px) {
    .nx-avm { padding: 10px; align-items: flex-end; }
    .nx-avm-box { max-height: calc(100vh - 20px); padding: 22px 16px 16px; border-radius: 22px; }
    .nx-avm-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .nx-avm .nx-avm-save { flex: 1 1 auto; }
}
.nx-avm-grid { flex: 1 1 auto; min-height: 0; grid-auto-rows: max-content; align-content: start; }
.nx-avm-item { width: 100%; height: auto; }

/* =====================================================
   DLE SYSTEM DIALOGS (jQuery UI .ui-dialog) — 2026-10-09
   Alerts, confirms, prompts, complaints: the same card as the account popups.
   The last button in a dialog is DLE's action button ("გაგზავნა", "OK").
===================================================== */
.ui-widget-overlay { background: rgba(4, 3, 10, .62) !important; opacity: 1 !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.darken .ui-widget-overlay { background: rgba(40, 30, 70, .35) !important; }
.ui-dialog.ui-widget {
    box-sizing: border-box;
    max-width: calc(100vw - 24px) !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border-strong) !important;
    border-radius: 22px !important;
    background: radial-gradient(120% 60% at 50% -15%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--surface) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px var(--accent-glow) !important;
    color: var(--text-2) !important;
    font-family: var(--font) !important;
}
.ui-dialog .ui-dialog-titlebar { display: flex; align-items: center; min-height: 0; padding: 20px 64px 6px 24px !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
.ui-dialog .ui-dialog-title { float: none !important; width: auto !important; margin: 0 !important; color: var(--text) !important; font-family: var(--font) !important; font-size: 18px !important; font-weight: 800 !important; white-space: normal !important; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute !important; top: 16px !important; right: 16px !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: 11px !important; background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: transparent !important; font-size: 0 !important; transition: border-color var(--transition), background-color var(--transition), transform var(--transition); }
.ui-dialog .ui-dialog-titlebar-close::before, .ui-dialog .ui-dialog-titlebar-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; border-radius: 2px; background: var(--text-muted); transform: translate(-50%, -50%) rotate(45deg); }
.ui-dialog .ui-dialog-titlebar-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ui-dialog .ui-dialog-titlebar-close:hover { border-color: var(--accent-border) !important; background: var(--accent-soft) !important; transform: rotate(90deg); }
.ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space { display: none !important; }
.ui-dialog .ui-dialog-content { box-sizing: border-box; padding: 10px 24px 6px !important; border: 0 !important; background: none !important; color: var(--text-muted) !important; font-family: var(--font) !important; font-size: 13.5px !important; line-height: 1.65 !important; }
.ui-dialog .ui-dialog-content a { color: var(--accent-light) !important; }
.ui-dialog .ui-dialog-content textarea, .ui-dialog .ui-dialog-content input[type="text"], .ui-dialog .ui-dialog-content input[type="email"], .ui-dialog .ui-dialog-content input[type="password"], .ui-dialog .ui-dialog-content select {
    box-sizing: border-box;
    width: 100% !important;
    margin-top: 10px;
    padding: 12px 14px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--surface) 70%, #000 30%) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    outline: 0 !important;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.darken .ui-dialog .ui-dialog-content textarea, .darken .ui-dialog .ui-dialog-content input[type="text"], .darken .ui-dialog .ui-dialog-content select { background: #F7F5FC !important; }
.ui-dialog .ui-dialog-content textarea:focus, .ui-dialog .ui-dialog-content input:focus, .ui-dialog .ui-dialog-content select:focus { border-color: var(--accent-border) !important; box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px var(--accent-glow) !important; }
.ui-dialog .ui-dialog-buttonpane { margin: 0 !important; padding: 14px 24px 20px !important; border: 0 !important; background: none !important; }
.ui-dialog .ui-dialog-buttonset { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; float: none !important; }
.ui-dialog .ui-dialog-buttonset .ui-button {
    height: 44px;
    margin: 0 !important;
    padding: 0 22px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-2) !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.ui-dialog .ui-dialog-buttonset .ui-button:hover { border-color: var(--accent-border) !important; color: var(--text) !important; }
.ui-dialog .ui-dialog-buttonset .ui-button:last-child { min-width: 130px; border-color: transparent !important; background: var(--btn-grad) !important; box-shadow: 0 10px 26px rgba(134, 96, 224, .38) !important; color: #fff !important; }
.ui-dialog .ui-dialog-buttonset .ui-button:last-child:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ui-dialog .ui-dialog-buttonset .ui-button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
@media (max-width: 600px) {
    .ui-dialog.ui-widget { left: 12px !important; right: 12px !important; width: auto !important; }
    .ui-dialog .ui-dialog-buttonset .ui-button { flex: 1 1 auto; }
}

/* =====================================================
   PLAYER SERVER BAR (js/nx-servers.js) — 2026-10-09
   Servers as tabs, language / season / episode as pickers, on one line above
   the player. The old controls stay in the page (the bar drives them) but are
   hidden while the bar is on (html.nx-has-srv).
===================================================== */
.nx-has-srv #fullstory-tabs { display: none !important; }
.nx-has-srv .adj-sidebar { display: none !important; }
.nx-has-srv #nxEpisodes { display: none !important; }

.nx-srv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nx-srv.is-bare { display: none; }
.nx-srv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-srv-tabs[hidden] { display: none; }
.nx-srv-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 12px; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition); }
.nx-srv-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; opacity: .75; }
.nx-srv-tab:hover { border-color: var(--accent-border); color: var(--text); }
.nx-srv-tab.is-on { border-color: transparent; background: var(--btn-grad); box-shadow: 0 8px 22px rgba(134, 96, 224, .38); color: #fff; }
.nx-srv-tab.is-on svg { opacity: 1; }
.nx-srv-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.nx-srv-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nx-srv-pick { position: relative; display: inline-flex; align-items: center; margin: 0; }
.nx-srv-pick[hidden] { display: none; }
.nx-srv-pick-l { position: absolute; left: 13px; top: 50%; color: var(--text-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; transform: translateY(-50%); }
.nx-srv-pick select {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    min-width: 150px;
    max-width: 240px;
    margin: 0;
    padding: 0 36px 0 70px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 70%, #000 30%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B78CFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.darken .nx-srv-pick select { background-color: #F7F5FC; }
.nx-srv-pick select:hover { border-color: var(--accent-border); }
.nx-srv-pick select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 4px var(--accent-soft); outline: 0; }
.nx-srv-pick select option { background: var(--surface); color: var(--text); }
.nx-srv-pick select option:disabled { color: var(--text-faint); }
.nx-srv-views { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px 0 0; color: var(--text-faint); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nx-srv-picks + .nx-srv-views { margin-left: 4px; }
.nx-srv-tabs[hidden] ~ .nx-srv-picks { margin-left: 0; }

@media (max-width: 767px) {
    .nx-srv { gap: 8px; padding: 8px; border-radius: 14px; }
    .nx-srv-tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nx-srv-tabs::-webkit-scrollbar { display: none; }
    .nx-srv-tab { flex: 0 0 auto; height: 38px; padding: 0 12px; font-size: 12.5px; }
    .nx-srv-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); width: 100%; margin: 0; }
    .nx-srv-pick select { width: 100%; max-width: none; min-width: 0; }
    .nx-srv-views { display: none; }
}

/* header account button: on narrow screens flex squeezed it to 22px wide (a tall pill); it keeps its size now */
.nx-header .nx-auth { flex: 0 0 auto; }
@media (max-width: 1023px) {
    .nx-header-right .nx-auth { display: grid !important; place-items: center; width: 38px !important; height: 38px !important; min-width: 38px; padding: 0 !important; border-radius: 50% !important; }
    .nx-header-right .nx-auth > span { display: none !important; }
    .nx-header-right .nx-auth .nx-i { width: 18px; height: 18px; margin: 0; }
    .nx-header-right .nx-auth-user img { display: block; width: 32px; height: 32px; margin: 0; border-radius: 50%; object-fit: cover; }
}

/* =====================================================
   LIST PAGES: cards the size of the home page rows (2026-10-09)
   Category, genre, search, TOP 100, xfsearch and similar grids use the same
   column count as .nx-row at every width (8 / 7 / 6 / 5). On phones the home
   rows show 2.6 / 2.2 cards per screen, so the grid keeps that card width and
   centres two of them instead of stretching two cards across the screen.
===================================================== */
.nx-list-grid:has(> .nx-card) { --cols: 7; --gap: 16px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important; column-gap: var(--gap) !important; }
@media (min-width: 1700px) { .nx-list-grid:has(> .nx-card) { --cols: 8; } }
@media (max-width: 1320px) { .nx-list-grid:has(> .nx-card) { --cols: 6; } }
@media (max-width: 1100px) { .nx-list-grid:has(> .nx-card) { --cols: 5; } }
@media (max-width: 767px) {
    .nx-list-grid:has(> .nx-card) { --gap: 12px; grid-template-columns: repeat(auto-fill, calc((100% - 1.6 * var(--gap)) / 2.6)) !important; justify-content: center; }
}
@media (max-width: 420px) {
    .nx-list-grid:has(> .nx-card) { grid-template-columns: repeat(auto-fill, calc((100% - 1.2 * var(--gap)) / 2.2)) !important; }
}
/* genre / filter results (engine/modules/asia_neon/filter.php): the same card width on phones */
@media (max-width: 767px) {
    .nx-filter-grid { --gap: 12px; grid-template-columns: repeat(auto-fill, calc((100% - 1.6 * var(--gap)) / 2.6)) !important; column-gap: var(--gap) !important; justify-content: center; }
}
@media (max-width: 420px) {
    .nx-filter-grid { grid-template-columns: repeat(auto-fill, calc((100% - 1.2 * var(--gap)) / 2.2)) !important; }
}
/* phones: one card width for every grid, taken from the home rows (row width = 100vw - 62px) */
@media (max-width: 767px) {
    .nx-list-grid:has(> .nx-card), .nx-filter-grid { --gap: 12px; --nx-card-w: calc((100vw - 62px - 1.6 * 12px) / 2.6); grid-template-columns: repeat(auto-fill, var(--nx-card-w)) !important; }
}
@media (max-width: 420px) {
    .nx-list-grid:has(> .nx-card), .nx-filter-grid { --nx-card-w: calc((100vw - 62px - 1.2 * 12px) / 2.2); }
}

/* =====================================================
   LIGHT LOOK FIXES (.darken) — 2026-10-09
   These panels had a dark colour written in directly instead of a token, so in the
   light look they stayed dark while the text on them turned dark: titles on the
   list pages (series, films, TOP 100, search), the actor box, comics and reader
   panels, the comment editor. Dark badges that sit on posters stay dark on purpose.
===================================================== */
.darken .nx-list-grid:has(> .nx-card) { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow); }
.darken .center-top:has(.nx-list-grid > .nx-card) .nx-list-bar { background: linear-gradient(90deg, #EFE8FF 0%, #FFFFFF 60%) !important; border-color: var(--border) !important; }
.darken .nx-list-bar, .darken .nx-list-bar .nx-list-crumbs, .darken .nx-list-bar .nx-list-crumbs a, .darken .nx-list-bar .nx-list-crumbs span { color: var(--text-2) !important; }
.darken .nx-actor-info,
.darken .nx-comics-jump a,
.darken .nx-chapter-card,
.darken .nx-comic,
.darken .nx-reader-head,
.darken .nx-reader-next,
.darken .nx-reader-home,
.darken .nx-reader-list-panel,
.darken .nx-pager-arrow,
.darken .nx-collection,
.darken .nx-auth-brand { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
.darken a.nx-reader-next:hover { background: var(--surface-hover) !important; }
.darken .nx-reader-bar { background: rgba(255, 255, 255, .94) !important; border-color: var(--border-strong) !important; }
.darken .nx-auth-shell { background: linear-gradient(180deg, #FFFFFF 0%, #F4F1FB 100%) !important; }
.darken .nx-vip-price { background: linear-gradient(180deg, #FFFFFF 0%, #F6F2FF 100%) !important; }
.darken .nx-react-btn { background: rgba(255, 255, 255, .8) !important; color: var(--text-2) !important; }
.darken .nx-cm-write:hover { background: var(--surface-hover) !important; }

/* comment editor and the comments panel on static pages */
.darken .nx-page .nx-w-comments { --watch-surface: #FFFFFF; --watch-surface-3: #F3EEFF; --watch-border: rgba(20, 16, 40, .10); }
.darken .nx-w-comments .dleaddcomments-editor,
.darken .nx-w-comments .tox.tox-tinymce,
.darken .nx-w-comments .tox .tox-edit-area,
.darken .nx-w-comments .tox .tox-edit-area__iframe,
.darken .nx-w-comments .tox .tox-sidebar-wrap { background: #FFFFFF !important; }
.darken .nx-w-comments .tox .tox-editor-header,
.darken .nx-w-comments .tox .tox-toolbar-overlord,
.darken .nx-w-comments .tox .tox-toolbar,
.darken .nx-w-comments .tox .tox-toolbar__primary,
.darken .nx-w-comments .tox .tox-toolbar__overflow { background: #F6F3FD !important; }
.darken .nx-w-comments .tox .tox-tbtn svg { fill: #5B5873 !important; }
.darken .nx-w-comments .tox .tox-tbtn:hover svg { fill: var(--accent-dark) !important; }
.darken .nx-w-comments .cover-1, .darken .nx-pop-ava span { background-color: #E9E3F7; }
.darken .nx-w-comments .newi-comment-online { border-color: #FFFFFF; }

/* group names come from the database (silver, gold, hotpink…): pale ones get a readable shade */
.darken .newi-comment-011 span[style*="silver"] { color: #6B6F80 !important; }
.darken .newi-comment-011 span[style*="gold"] { color: #A87400 !important; }
.darken .newi-comment-011 span[style*="hotpink"] { color: #C2185B !important; }
/* PlayerJS draws its own episode / season dropdown in the corner of the video; the bar above
   the player does that job now, so the player's copy is hidden while the bar is on */
.nx-has-srv [id^="playerjs1_playlist"] { display: none !important; }

/* =====================================================
   FILTER MENUS (genre / country / status / collections…) — 2026-10-09
   Options sit in an even grid of equal cells instead of a ragged row of pills,
   and a menu in the right half of the filter row opens towards the left
   (.is-flip, set by neon.js), nudged back inside the screen if needed.
===================================================== */
/* desktop only: on phones the panel is a bottom sheet across the screen */
@media (min-width: 768px) {
    /* the opening animation owns transform, so the nudge uses the separate translate property */
    .nx-dd-panel { translate: var(--dd-nudge, 0px) 0; }
    /* the side a menu opens to follows where it sits (neon.js sets .is-flip), not a fixed class */
    .nx-f-bar .nx-dd.is-right:not(.is-flip) .nx-dd-panel { left: 0; right: auto; }
    .nx-dd-wide .nx-dd-panel { max-width: min(92vw, 640px); }
}
.nx-dd-panel .nx-f-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.nx-dd-mid .nx-dd-panel .nx-f-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-dd-wide .nx-dd-panel .nx-f-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-dd-panel .nx-f-chip { min-width: 0; }
.nx-dd-panel .nx-f-chip span { display: flex; justify-content: center; width: 100%; height: 38px; padding: 0 10px; overflow: hidden; text-align: center; text-overflow: ellipsis; }
.nx-dd-panel .nx-f-chip input:checked + span::before { flex: 0 0 auto; }
.nx-dd-panel:not(:has(.nx-f-chips)) { min-width: 220px; }
@media (min-width: 768px) { .nx-dd-wide .nx-dd-panel { width: min(92vw, 640px); } }
@media (max-width: 520px) {
    .nx-dd-panel .nx-f-chips, .nx-dd-wide .nx-dd-panel .nx-f-chips, .nx-dd-mid .nx-dd-panel .nx-f-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-dd-panel .nx-f-chips { flex-wrap: unset; overflow: visible; }
}
/* long names wrap to a second line instead of being cut; short-option menus (age) get a compact 4-up grid */
.nx-dd-panel .nx-f-chip span { height: auto; min-height: 38px; padding: 6px 10px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 768px) {
    .nx-dd:not(.nx-dd-wide):not(.nx-dd-mid) .nx-dd-panel:has(.nx-f-chips) { width: 300px; }
    .nx-dd:not(.nx-dd-wide):not(.nx-dd-mid) .nx-dd-panel .nx-f-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* words are never split; every row of a menu is one height */
.nx-dd-panel .nx-f-chip span { overflow-wrap: normal; word-break: keep-all; }
.nx-dd-panel .nx-f-chips { grid-auto-rows: 1fr; }
@media (min-width: 768px) {
    .nx-dd-wide .nx-dd-panel .nx-f-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* each row is only as tall as its own tallest cell (one 2-line name no longer stretches every row) */
.nx-dd-panel .nx-f-chips { grid-auto-rows: auto; align-items: stretch; gap: 6px; }
.nx-dd-panel .nx-f-chip span { min-height: 36px; padding: 5px 10px; }

/* card rows: a hovered poster grows 3.5% and casts a glow, but the row scrolls sideways and so
   clips whatever leaves its box: the top edge (a cut line over the badges) and the side glow.
   The row gets room on every side, and equal negative margins keep the layout where it was. */
.nx-row { padding: 16px 12px 26px; margin: -10px -12px -22px; scroll-padding-inline: 12px; }
@media (max-width: 767px) { .nx-row { padding-inline: 12px; margin-inline: -12px; } }
/* the carousel arrows stay above the rows' extra room */
.nx-arrow { z-index: 6; }
/* hover jitter: the poster sits on a fractional pixel (grid columns like 176.86px). The browser moved it
   to its own layer only for the zoom and back afterwards, snapping it to a whole pixel each way, so it
   slid ~1px right on hover and back left on leave. Keeping it on its own layer all the time stops that. */
.nx-card-media { transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.nx-card:hover .nx-card-media { transform: translateZ(0) scale(1.035); }

/* hero: the first slide shows as soon as the HTML arrives, not when neon.js (deferred) runs;
   the other slides stay out of layout until then, so their large backgrounds (loading="lazy")
   don't compete with the first one */
.nx-slides:not(:has(> .nx-slide.is-active)) > .nx-slide:first-child { opacity: 1; visibility: visible; transition: none; }
.nx-slides:not(:has(> .nx-slide.is-active)) > .nx-slide:not(:first-child) { display: none; }

/* PlayerJS control bar was invisible: the old shida-2.css fixes #playerjs1 at 483px (!important),
   but PlayerJS lays its controls out at the bottom of the 16:9 frame (~570px), so the whole bar
   (play, time, CC, download, settings, fullscreen) sat below the player's edge and was cut off.
   The player now fills its 16:9 frame. */
.fullstory__player > #playerjs1 { height: 100% !important; }
/* PlayerJS styles its own playlist with ID selectors (!important), which outranks the rule above:
   the same hide, with two IDs so it wins */
.nx-has-srv #playerjs1 #oframeplayerjs1 [id^="playerjs1_playlist"] { display: none !important; }

/* =====================================================
   SHARE WINDOW (js/nx-share.js) — 2026-10-09
===================================================== */
.nx-share { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 20px; background: rgba(4, 3, 10, .66); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); opacity: 0; transition: opacity 220ms ease; }
.nx-share[hidden] { display: none !important; }
.nx-share.is-on { opacity: 1; }
.darken .nx-share { background: rgba(40, 30, 70, .35); }
.nx-share, .nx-share * { box-sizing: border-box; }
.nx-share-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 22px 0; border: 1px solid var(--border-strong); border-radius: 24px; background: radial-gradient(120% 45% at 50% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), color-mix(in srgb, var(--surface) 98%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px var(--accent-glow); transform: translateY(14px) scale(.98); transition: transform 380ms cubic-bezier(.22, 1, .36, 1); scrollbar-width: thin; }
.nx-share.is-on .nx-share-box { transform: none; }
.nx-share-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.nx-share-head h2 { margin: 0 !important; padding: 0 !important; color: var(--text) !important; font-family: var(--font); font-size: 19px !important; font-weight: 800 !important; }
.nx-share-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--text-muted); cursor: pointer; transition: color .2s, border-color .2s, transform .25s; }
.nx-share-x:hover { border-color: var(--accent-border); color: var(--text); transform: rotate(90deg); }
.nx-share-x svg { width: 17px; height: 17px; pointer-events: none; }

/* the link card, as Facebook shows it */
.nx-share-card { display: block; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, #000 30%); color: inherit !important; text-decoration: none !important; transition: border-color .2s, transform .25s; }
.nx-share-card:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.darken .nx-share-card { background: #F6F3FD; }
.nx-share-cover { display: block; aspect-ratio: 1200 / 630; background: #0B0A12; }
.nx-share-cover[hidden] { display: none; }
.nx-share-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-share-meta { display: grid; gap: 3px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.nx-share-meta small { color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.nx-share-meta b { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.nx-share-meta em { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 12.5px; font-style: normal; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Facebook first */
.nx-share-fb { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 54px; margin: 16px 0 12px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #2D88FF 0%, #1565D8 100%); box-shadow: 0 12px 30px rgba(24, 119, 242, .38), inset 0 1px 0 rgba(255, 255, 255, .22); color: #fff; font-family: var(--font); font-size: 15.5px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; }
.nx-share-fb:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 16px 36px rgba(24, 119, 242, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nx-share-fb:focus-visible { outline: 2px solid #8AB8FF; outline-offset: 3px; }
.nx-share-fb svg { width: 24px; height: 24px; }

/* the other networks */
.nx-share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.nx-share-grid button { --c: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 78px; padding: 0 4px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-2); font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s; }
.nx-share-grid button svg { width: 26px; height: 26px; color: var(--c); transition: transform .2s; }
.nx-share-grid button:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--text); transform: translateY(-1px); }
.nx-share-grid button:hover svg { transform: scale(1.08); }
.nx-share-grid button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.nx-share-grid .is-ms { --c: #A65BFF; }
.nx-share-grid .is-wa { --c: #25D366; }
.nx-share-grid .is-tg { --c: #2AABEE; }
.nx-share-grid .is-vb { --c: #7F4DA0; }
.darken .nx-share-grid .is-vb { --c: #6E3F8E; }
.nx-share-grid .is-x { --c: var(--text); }
.nx-share-grid .is-mail, .nx-share-grid .is-more { --c: var(--accent-light); }

/* copy link */
.nx-share-copy { display: flex; gap: 8px; margin: 12px 0 0; }
.nx-share-copy input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, #000 30%); color: var(--text-2); font-family: var(--font); font-size: 13px; outline: 0; }
.darken .nx-share-copy input { background: #F7F5FC; }
.nx-share-copy input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 4px var(--accent-soft); }
.nx-share-copy button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--btn-grad); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 800; cursor: pointer; transition: filter .2s, transform .2s; }
.nx-share-copy button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.nx-share-copy button.is-done { background: linear-gradient(135deg, #3BD08A, #1FA36A); }
.nx-share-copy button svg { width: 17px; height: 17px; }

/* the site's mark */
.nx-share-foot { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 18px -22px 0; padding: 14px 22px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, #000 45%); }
.darken .nx-share-foot { background: #F6F3FD; }
.nx-share-logo { display: block; flex: 0 0 auto; width: 34px; height: 34px; }
.nx-share-logo svg { width: 100%; height: 100%; }
.nx-share-foot > span:last-child { display: grid; line-height: 1.2; }
.nx-share-foot b { color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.nx-share-foot small { color: var(--text-faint); font-size: 11.5px; }

@media (max-width: 560px) {
    .nx-share { align-items: flex-end; padding: 10px; }
    .nx-share-box { padding: 18px 16px 0; border-radius: 22px; }
    .nx-share-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .nx-share-grid button { height: 70px; font-size: 11px; }
    .nx-share-foot { margin: 16px -16px 0; }
}
/* six networks: 3 + 3; with the device's own share sheet (seven): 4 + 3 */
.nx-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-share-grid:has(.is-more) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* menus built by {catmenu}: a category with no titles yet would open an empty (404) page, so it is not listed */
li[data-count="0"] { display: none !important; }

/* =====================================================
   FOOTER CREDIT — "შექმნილია სიყვარულით ❤ GENX(r)" (2026-10-09)
   Font: DM Ivane Javakhishvili UNI © 2015 David Maisuradze, CC BY-SA 3.0
   (fonts/ivane/LICENSE.txt). It has Georgian only; GENX uses the site face.
===================================================== */
@font-face {
    font-family: "DM Ivane Javakhishvili";
    src: url("../fonts/ivane/dm-ivane-javakhishvili.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.nx-credit { position: relative; border-top: 1px solid var(--border); background: radial-gradient(60% 140% at 50% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--bg); }
.nx-credit::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(420px, 60%); height: 1px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); opacity: .55; transform: translateX(-50%); }
.nx-credit-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 0; padding: 22px 16px 26px; text-align: center; }
.nx-credit-txt { color: var(--text-2); font-family: "DM Ivane Javakhishvili", "Noto Sans Georgian", var(--font); font-size: 19px; line-height: 1.2; letter-spacing: .01em; }
.nx-credit-heart { flex: 0 0 auto; width: 22px; height: 22px; fill: #FF3B5C; filter: drop-shadow(0 0 8px rgba(255, 59, 92, .55)) drop-shadow(0 0 2px rgba(255, 59, 92, .8)); transform-origin: 50% 60%; animation: nx-credit-beat 1.6s ease-in-out infinite; }
@keyframes nx-credit-beat {
    0%, 40%, 100% { transform: scale(1); }
    12% { transform: scale(1.22); }
    24% { transform: scale(.96); }
    32% { transform: scale(1.12); }
}
.nx-credit-brand { position: relative; display: inline-block; padding-right: 15px; background: linear-gradient(135deg, #FFFFFF 0%, var(--accent-light) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font); font-size: 21px; font-weight: 800; letter-spacing: .16em; line-height: 1; }
.nx-credit-r { position: absolute; top: -9px; right: 0; display: grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid var(--accent-light); border-radius: 50%; color: var(--accent-light); -webkit-text-fill-color: currentColor; font-family: "Inter", var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: lowercase; }
.darken .nx-credit-brand { background-image: linear-gradient(135deg, #2A2140 0%, var(--accent-dark) 55%, var(--accent) 100%); }
.darken .nx-credit-heart { fill: #E8173F; }
@media (prefers-reduced-motion: reduce) { .nx-credit-heart { animation: none; } }
@media (max-width: 560px) {
    .nx-credit-in { padding: 18px 12px 22px; gap: 8px 10px; }
    .nx-credit-txt { font-size: 17px; }
    .nx-credit-brand { font-size: 19px; }
}
/* the handwritten face has hairline strokes: larger and brighter so it reads beside GENX */
.nx-credit-txt { color: var(--text); font-size: 27px; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 560px) { .nx-credit-txt { font-size: 23px; } }

/* credit moved into the bottom bar (copyright · credit · links · TOP.GE), scaled down to the bar */
.nx-footer-bottom-in .nx-credit-mini { flex: 1 1 auto; gap: 7px; margin: 0; padding: 0; }
.nx-footer-bottom-in .nx-credit-mini .nx-credit-txt { font-size: 19px; text-shadow: none; color: var(--text-2); }
.nx-footer-bottom-in .nx-credit-mini .nx-credit-heart { width: 15px; height: 15px; filter: drop-shadow(0 0 5px rgba(255, 59, 92, .55)); }
.nx-footer-bottom-in .nx-credit-mini .nx-credit-brand { padding-right: 11px; font-size: 14px; letter-spacing: .14em; }
.nx-footer-bottom-in .nx-credit-mini .nx-credit-r { top: -7px; width: 11px; height: 11px; border-width: 1.2px; font-size: 7px; }
@media (min-width: 768px) {
    .nx-footer-bottom-in:has(.nx-credit-mini) > ul { margin-left: 0; }
}
@media (max-width: 767px) {
    .nx-footer-bottom-in .nx-credit-mini { justify-content: flex-start; order: 3; }
    .nx-footer-bottom-in .nx-credit-mini .nx-credit-txt { font-size: 18px; }
}
@media (max-width: 767px) {
    .nx-footer-bottom-in .nx-credit-mini { align-self: stretch; justify-content: center; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
}

/* =====================================================
   FOOTER CREDIT v2 — a small badge in the bottom bar (2026-10-09)
   "შექმნილია სიყვარულით ❤ │ GENX(r)"
   Font: DM Grigol Robakidze © David Maisuradze (fonts/grigol/LICENSE.txt)
===================================================== */
@font-face {
    font-family: "DM Grigol Robakidze";
    src: url("../fonts/grigol/dm-grigol-robakidze.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.nx-made {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    height: 34px;
    margin: 0 auto;
    padding: 0 14px 0 15px;
    border-radius: 999px;
    background:
        linear-gradient(color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)) padding-box,
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 70%, transparent), rgba(255, 92, 138, .55) 50%, color-mix(in srgb, var(--accent) 35%, transparent)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
    white-space: nowrap;
    transition: box-shadow .3s ease, transform .3s ease;
}
.nx-made:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .3), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-1px); }
.darken .nx-made { box-shadow: 0 6px 16px rgba(30, 24, 60, .1); }
.nx-made-txt { color: var(--text-2); font-family: "DM Grigol Robakidze", "Noto Sans Georgian", var(--font); font-size: 16px; line-height: 1; letter-spacing: .01em; transform: translateY(1px); }
.nx-made-heart { flex: 0 0 auto; width: 13px; height: 13px; fill: #FF3B5C; filter: drop-shadow(0 0 4px rgba(255, 59, 92, .6)); transform-origin: 50% 60%; animation: nx-credit-beat 1.6s ease-in-out infinite; }
.darken .nx-made-heart { fill: #E8173F; }
.nx-made-sep { width: 1px; height: 14px; background: var(--border-strong); }
.nx-made-brand { position: relative; padding-right: 11px; color: var(--text); font-family: "Inter", var(--font); font-size: 12px; font-weight: 800; letter-spacing: .24em; line-height: 1; }
.nx-made-r { position: absolute; top: -6px; right: -1px; display: grid; place-items: center; width: 10px; height: 10px; border: 1px solid var(--accent-light); border-radius: 50%; color: var(--accent-light); font-size: 6.5px; font-weight: 800; letter-spacing: 0; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .nx-made-heart { animation: none; } }
@media (min-width: 768px) { .nx-footer-bottom-in:has(.nx-made) > ul { margin-left: 0; } }
@media (max-width: 767px) { .nx-footer-bottom-in .nx-made { order: 3; align-self: center; margin: 6px auto 0; } }
/* credit v3: no frame, just the words — quiet, in the bar's own tone */
.nx-made { height: auto; gap: 7px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transition: none; }
.nx-made:hover { box-shadow: none; transform: none; }
.darken .nx-made { box-shadow: none; }
.nx-made-txt { color: var(--text-muted); font-size: 15px; }
.nx-made-heart { width: 11px; height: 11px; filter: drop-shadow(0 0 3px rgba(255, 59, 92, .45)); }
.nx-made-sep { height: 11px; margin: 0 2px; background: var(--border-strong); }
.nx-made-brand { color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .26em; padding-right: 10px; transition: color .25s ease; }
.nx-made:hover .nx-made-brand { color: var(--text); }
.nx-made-r { top: -5px; width: 9px; height: 9px; border-color: var(--text-faint); color: var(--text-faint); font-size: 6px; }
@media (max-width: 767px) { .nx-footer-bottom-in .nx-made { margin: 10px auto 0; } }
a.nx-made-brand { color: var(--text-2) !important; text-decoration: none !important; }
a.nx-made-brand:hover, a.nx-made-brand:focus-visible { color: var(--text) !important; }
a.nx-made-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* GENX: the author's round photo before the name, all one link to the Facebook page */
a.nx-made-brand { display: inline-flex; align-items: center; gap: 8px; }
.nx-made-ava { display: block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px color-mix(in srgb, var(--accent) 60%, transparent); transition: box-shadow .25s ease, transform .25s ease; }
a.nx-made-brand:hover .nx-made-ava { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--accent), 0 0 12px var(--accent-glow); transform: scale(1.06); }

/* =====================================================
   LIVE STATS (2026-10-10) — footer chip beside TOP.GE + /stats/
   js/nx-stats.js fills both. Sky-blue frame, own tokens.
   ===================================================== */
:root { --sky: #38BDF8; --sky-2: #0EA5E9; --sky-soft: rgba(56, 189, 248, .12); --sky-border: rgba(56, 189, 248, .55); --sky-glow: rgba(56, 189, 248, .28); }
.darken { --sky: #0284C7; --sky-2: #0369A1; --sky-soft: rgba(2, 132, 199, .09); --sky-border: rgba(2, 132, 199, .45); --sky-glow: rgba(2, 132, 199, .18); }

.nx-stw { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.nx-stw-chip { display: flex; align-items: center; gap: 7px; width: 88px; height: 31px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--sky-border); background: linear-gradient(135deg, var(--sky-soft), transparent 70%), var(--surface); color: var(--text); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 0 0 0 var(--sky-glow); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); }
.nx-stw-chip:hover, .nx-stw.is-open .nx-stw-chip, .nx-stw-chip:focus-visible { border-color: var(--sky); box-shadow: 0 0 16px var(--sky-glow); outline: none; }
.nx-stw-bars { display: flex; align-items: flex-end; gap: 2px; height: 17px; flex: 0 0 auto; }
.nx-stw-bars i { width: 3px; height: calc(var(--h, .4) * 100%); min-height: 3px; border-radius: 2px; background: linear-gradient(var(--sky), var(--sky-2)); transition: height .8s cubic-bezier(.22, 1, .36, 1); animation: nxStwPulse 2.4s ease-in-out infinite; }
.nx-stw-bars i:nth-child(2) { animation-delay: .15s } .nx-stw-bars i:nth-child(3) { animation-delay: .3s } .nx-stw-bars i:nth-child(4) { animation-delay: .45s }
.nx-stw-bars i:nth-child(5) { animation-delay: .6s } .nx-stw-bars i:nth-child(6) { animation-delay: .75s } .nx-stw-bars i:nth-child(7) { animation-delay: .9s }
@keyframes nxStwPulse { 0%, 100% { opacity: 1; transform: scaleY(1) } 50% { opacity: .55; transform: scaleY(.72) } }
.nx-stw-bars i { transform-origin: bottom; }
.nx-stw-num { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 0; }
.nx-stw-num b { font-size: 13px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--text); }
.nx-stw-num small { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 8.5px; color: var(--text-muted); letter-spacing: .02em; }
.nx-stw-dot { position: relative; width: 5px; height: 5px; border-radius: 50%; background: #22C55E; flex: 0 0 auto; }
.nx-stw-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid #22C55E; animation: nxStwPing 1.8s ease-out infinite; }
@keyframes nxStwPing { from { transform: scale(.4); opacity: 1 } to { transform: scale(1.6); opacity: 0 } }

/* the 100×100 live window */
.nx-stw-pop { position: absolute; z-index: 30; right: 50%; bottom: calc(100% + 10px); width: 100px; height: 100px; box-sizing: border-box; padding: 7px 8px 6px; border-radius: 12px; border: 1px solid var(--sky-border); background: radial-gradient(120% 80% at 100% 0%, var(--sky-soft), transparent 60%), var(--surface); box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 22px var(--sky-glow); color: var(--text); text-decoration: none; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translate(50%, 6px) scale(.96); transform-origin: 50% 100%; transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1), visibility .2s; }
.nx-stw-pop::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--surface); border-right: 1px solid var(--sky-border); border-bottom: 1px solid var(--sky-border); transform: rotate(45deg); }
.nx-stw:hover .nx-stw-pop, .nx-stw.is-open .nx-stw-pop, .nx-stw-pop:focus-visible { opacity: 1; visibility: visible; transform: translate(50%, 0) scale(1); }
.nx-stw-top { display: flex; align-items: center; justify-content: space-between; height: 14px; }
.nx-stw-live { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 800; letter-spacing: .14em; color: #22C55E; }
.nx-stw-go { width: 15px; height: 15px; padding: 2px; border-radius: 5px; background: var(--sky); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.nx-stw-pop:hover .nx-stw-go { transform: translate(1px, -1px) scale(1.12); }
.nx-stw-big { margin-top: 3px; font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sky); }
.nx-stw-lbl { font-size: 7.5px; color: var(--text-muted); margin-top: 1px; }
.nx-stw-spark { width: 100%; height: 16px; margin: 2px 0 2px; overflow: visible; }
.nx-stw-spark .a { fill: var(--sky-soft); }
.nx-stw-spark .l { fill: none; stroke: var(--sky); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.nx-stw-row { display: flex; justify-content: space-between; font-size: 7.5px; line-height: 1.35; color: var(--text-muted); }
.nx-stw-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .nx-stw { margin-left: 4px; } .nx-stw + .nx-topge { padding-left: 10px; border-left: 0; } }
@media (max-width: 767px) { .nx-stw-pop { right: auto; left: 0; transform: translate(0, 6px) scale(.96); transform-origin: 20% 100%; } .nx-stw:hover .nx-stw-pop, .nx-stw.is-open .nx-stw-pop { transform: none; } .nx-stw-pop::after { left: 44px; } }
@media (prefers-reduced-motion: reduce) { .nx-stw-bars i, .nx-stw-dot::after { animation: none; } }

/* ---------- /stats/ ---------- */
.nx-stp { padding: 28px 0 56px; }
.nx-stp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.nx-stp-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--sky); }
.nx-stp-live { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: nxStpLive 1.8s infinite; }
@keyframes nxStpLive { 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0) } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0) } }
.nx-stp-head h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; color: var(--text); }
.nx-stp-sub { margin: 8px 0 0; max-width: 560px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.nx-stp-online { position: relative; min-width: 210px; padding: 16px 18px 14px; border-radius: var(--radius-lg); border: 1px solid var(--sky-border); background: radial-gradient(120% 90% at 100% 0%, var(--sky-soft), transparent 65%), var(--surface); box-shadow: 0 0 30px var(--sky-glow); overflow: hidden; }
.nx-stp-online b { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--sky); font-variant-numeric: tabular-nums; }
.nx-stp-online span { font-size: 13px; color: var(--text-muted); }
.nx-stp-online svg { display: block; width: 100%; height: 32px; margin-top: 8px; }
.nx-stp-online path { fill: none; stroke: var(--sky); stroke-width: 2; vector-effect: non-scaling-stroke; }
.nx-stp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.nx-stp-kpi, .nx-stp-card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.nx-stp-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-stp-kpi span { font-size: 12px; color: var(--text-muted); }
.nx-stp-kpi b { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.nx-stp-kpi em { font-style: normal; font-size: 12px; color: var(--text-faint); min-height: 1em; }
.nx-stp-kpi:first-child { border-color: var(--sky-border); }
.nx-stp-kpi:first-child b { color: var(--sky); }
.nx-stp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nx-stp-wide { grid-column: 1 / -1; }
.nx-stp-card { padding: 16px 18px 18px; min-width: 0; }
.nx-stp-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nx-stp-card h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nx-stp-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.nx-stp-legend i, .nx-stp-tip i, .nx-stp-devices i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 6px; }
.is-uv { background: var(--sky); } .is-pv { background: var(--accent); }
.nx-stp-chart { position: relative; height: 220px; cursor: crosshair; }
.nx-stp-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nx-stp-gridl line { stroke: var(--border); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.nx-stp-uv { fill: none; stroke: var(--sky); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.nx-stp-pv { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .85; }
.nx-stp-mark { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--sky-border); pointer-events: none; opacity: 0; transition: opacity .15s; }
.nx-stp-chart:hover .nx-stp-mark { opacity: 1; }
.nx-stp-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-faint); }
.nx-stp-chart.is-bars { height: 200px; }
.nx-stp-bars { display: flex; align-items: flex-end; gap: 3px; height: calc(100% - 22px); }
.nx-stp-bars i { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(var(--sky), var(--sky-2)); opacity: .75; transform-origin: bottom; animation: nxStpGrow .7s cubic-bezier(.22, 1, .36, 1) both; }
.nx-stp-bars i.is-now { opacity: 1; box-shadow: 0 0 14px var(--sky-glow); }
.nx-stp-bars i.is-future { background: var(--border); opacity: 1; }
@keyframes nxStpGrow { from { transform: scaleY(0) } }
.nx-stp-devices { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nx-stp-ring { --p: 50; position: relative; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--sky) calc(var(--p) * 1%), var(--accent) 0); display: grid; place-content: center; text-align: center; }
.nx-stp-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); }
.nx-stp-ring b, .nx-stp-ring span { position: relative; }
.nx-stp-ring b { font-size: 24px; font-weight: 800; color: var(--text); }
.nx-stp-ring span { font-size: 11px; color: var(--text-muted); }
.nx-stp-devices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.nx-stp-devices li b { margin-right: 6px; color: var(--text); }
.nx-stp-devices li i { margin: 0 0 0 8px; }
.nx-stp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: nxs; }
.nx-stp-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 34px; border-radius: 9px; font-size: 13.5px; counter-increment: nxs; overflow: hidden; }
.nx-stp-list li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--sky-soft); border-radius: 9px; }
.nx-stp-list li::after { content: counter(nxs); position: absolute; left: 10px; font-size: 12px; font-weight: 700; color: var(--sky); }
.nx-stp-list a, .nx-stp-list span { position: relative; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nx-stp-list a:hover { color: var(--sky); }
.nx-stp-list b { position: relative; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }
.nx-stp-list .is-empty { color: var(--text-muted); padding-left: 10px; } .nx-stp-list .is-empty::after { content: none; }
.nx-stp-site { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.nx-stp-site div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.nx-stp-site b { display: block; font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.nx-stp-site span { font-size: 12px; color: var(--text-muted); }
.nx-stp-foot { margin: 16px 0 0; font-size: 12px; color: var(--text-faint); text-align: center; }
.nx-stp-tip { position: fixed; z-index: 9999; left: 0; top: 0; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--sky-border); box-shadow: var(--shadow); font-size: 12px; color: var(--text-2); display: grid; gap: 3px; white-space: nowrap; }
.nx-stp-tip b { color: var(--text); font-size: 12.5px; }
.nx-stp-tip i { margin: 0 0 0 6px !important; }
.nx-stp:not(.is-ready) .nx-stp-chart { background: linear-gradient(90deg, transparent, var(--sky-soft), transparent) 0 0 / 200% 100%; animation: nxStpLoad 1.4s linear infinite; border-radius: 12px; }
@keyframes nxStpLoad { to { background-position: -200% 0 } }
@media (max-width: 1100px) { .nx-stp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-stp-site { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .nx-stp { padding-top: 18px; }
    .nx-stp-online { flex: 1 1 100%; }
    .nx-stp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .nx-stp-kpi b { font-size: 22px; }
    .nx-stp-grid { grid-template-columns: 1fr; }
    .nx-stp-chart { height: 180px; }
    .nx-stp-site { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* stats v2: tighter chip, daily bars */
.nx-stw-chip { gap: 6px; padding: 0 6px; }
.nx-stw-num small { font-size: 8px; gap: 3px; white-space: nowrap; }
.nx-stp-chart.is-bars[data-chart="days"] { height: 240px; }
.nx-stp-pairs { display: flex; align-items: flex-end; justify-content: space-around; gap: 6px; height: calc(100% - 22px); border-bottom: 1px solid var(--border); }
.nx-stp-pairs > span { flex: 1 1 0; max-width: 64px; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.nx-stp-pairs i { flex: 1; max-width: 26px; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 5px 5px 1px 1px; transform-origin: bottom; animation: nxStpGrow .7s cubic-bezier(.22, 1, .36, 1) both; }
.nx-stp-pairs i.is-pv { background: linear-gradient(var(--accent), var(--accent-dark)); opacity: .55; }
.nx-stp-pairs i.is-uv { background: linear-gradient(var(--sky), var(--sky-2)); }
.nx-stp-pairs .is-now i.is-uv { box-shadow: 0 0 16px var(--sky-glow); }
.nx-stp-pairs .is-now i { background-size: 100% 100%; outline: 1px dashed var(--sky-border); outline-offset: 2px; }
.nx-badges { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (min-width: 768px) { .nx-badges { padding-left: 22px; border-left: 1px solid var(--border); } .nx-badges .nx-topge { padding-left: 0; border-left: 0; } .nx-stw { margin-left: 0; } }


/* =====================================================
   HOME TOP ROW + "მოგწონთ საიტი?" (2026-10-10)
   .nx-top holds the slider, the quick tiles and the vote card (js/nx-love.js).
   Wide screens: card on the right, as tall as slider + tiles. Narrower: below the tiles.
   ===================================================== */
.nx-top { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.nx-top > .nx-hero { width: 100%; max-width: none; }
.nx-top > .nx-quick { margin-top: 16px; }
@media (min-width: 1200px) {
    .nx-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "hero love" "quick love"; column-gap: 16px; align-items: stretch; }
    .nx-top > .nx-hero { grid-area: hero; }
    .nx-top > .nx-quick { grid-area: quick; }
    .nx-top > .nx-love { grid-area: love; margin-top: 16px; }
}
@media (min-width: 1700px) { .nx-top { grid-template-columns: minmax(0, 1fr) 330px; } }
@media (max-width: 767px) {
    .nx-top { padding: 0; }
    .nx-top > .nx-quick { margin-left: var(--pad); margin-right: var(--pad); }
    .nx-top > .nx-love { margin: 16px var(--pad) 0; }
}

.nx-love {
    --pink: 255, 77, 126;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px 18px 16px; border-radius: 18px;
    border: 1px solid rgba(var(--pink), .22);
    background:
        radial-gradient(110% 60% at 50% -8%, rgba(var(--pink), .26) 0%, rgba(183, 140, 255, .10) 45%, transparent 72%),
        radial-gradient(80% 50% at 50% 115%, rgba(139, 92, 246, .22), transparent 70%),
        linear-gradient(180deg, #181A2B 0%, #0D0E18 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 0 rgba(var(--pink), 0);
    animation: nxLoveFloat 6s ease-in-out infinite;
    transition: border-color .3s, box-shadow .3s;
}
.nx-love:hover { border-color: rgba(var(--pink), .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(var(--pink), .16); }
@keyframes nxLoveFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.nx-love::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px) 0 0 / 14px 14px;
    -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .15)); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .15)); }

/* small hearts drifting up behind everything */
.nx-love-amb { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.nx-love-amb i { position: absolute; bottom: -24px; width: 14px; height: 14px; background: #FF4D7E; opacity: 0;
    -webkit-mask: var(--nx-heart) center / contain no-repeat; mask: var(--nx-heart) center / contain no-repeat; animation: nxLoveAmb 11s linear infinite; }
.nx-love-amb i:nth-child(1) { left: 8%; animation-delay: 0s; }
.nx-love-amb i:nth-child(2) { left: 26%; width: 9px; height: 9px; background: #C084FC; animation-delay: 2.2s; animation-duration: 13s; }
.nx-love-amb i:nth-child(3) { left: 47%; width: 18px; height: 18px; background: #FF7AA2; animation-delay: 4.5s; }
.nx-love-amb i:nth-child(4) { left: 66%; width: 10px; height: 10px; background: #7DD3FC; animation-delay: 1.2s; animation-duration: 12s; }
.nx-love-amb i:nth-child(5) { left: 84%; width: 13px; height: 13px; background: #FDA4AF; animation-delay: 6.3s; }
.nx-love-amb i:nth-child(6) { left: 36%; width: 8px; height: 8px; background: #FFC857; animation-delay: 8s; animation-duration: 14s; }
.nx-love-amb i:nth-child(7) { left: 74%; width: 16px; height: 16px; background: #F472B6; animation-delay: 9.4s; }
@keyframes nxLoveAmb { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 12% { opacity: .32; } 50% { transform: translate(10px, -48vh) rotate(8deg); } 85% { opacity: .2; } 100% { transform: translate(-6px, -90vh) rotate(-6deg); opacity: 0; } }
:root { --nx-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4C5.4 16.6 2 12.9 2 8.6 2 5.5 4.4 3.2 7.4 3.2c1.9 0 3.6 1 4.6 2.6 1-1.6 2.7-2.6 4.6-2.6 3 0 5.4 2.3 5.4 5.4 0 4.3-3.4 8-10 12.8z'/%3E%3C/svg%3E"); }

.nx-love-head { text-align: center; }
.nx-love-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; padding: 4px 11px; border-radius: 99px; background: rgba(var(--pink), .12); border: 1px solid rgba(var(--pink), .25); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #FF9EC0; }
.nx-love-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #FF4D7E; box-shadow: 0 0 8px #FF4D7E; animation: nxLoveDot 1.6s ease-in-out infinite; }
@keyframes nxLoveDot { 50% { transform: scale(.6); opacity: .6; } }
.nx-love-head h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; color: #fff;
    background: linear-gradient(90deg, #fff 0%, #FFD1E0 40%, #fff 60%, #E9D5FF 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nxLoveShine 6s linear infinite; }
@keyframes nxLoveShine { to { background-position: -200% 0; } }
.nx-love-sub { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

.nx-love-btns { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.nx-love-btn {
    --tint: var(--pink);
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 150px; padding: 14px 8px 12px; border-radius: 15px; cursor: pointer; font: inherit; color: var(--text);
    border: 1px solid rgba(var(--tint), .2);
    background: radial-gradient(120% 80% at 50% 0%, rgba(var(--tint), .22), transparent 65%), rgba(255, 255, 255, .03);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .25s, box-shadow .25s, opacity .3s, filter .3s;
}
.nx-love-btn.is-hate { --tint: 139, 92, 246; }
.nx-love-btn:hover { transform: translateY(-3px); border-color: rgba(var(--tint), .55); box-shadow: 0 12px 26px rgba(0, 0, 0, .35), 0 0 24px rgba(var(--tint), .22); }
.nx-love-btn:active, .nx-love-btn.is-press { transform: scale(.95); }
.nx-love-btn:focus-visible { outline: 2px solid rgba(var(--tint), .9); outline-offset: 2px; }
.nx-love-ico { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.nx-love-ico::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tint), .45) 0%, rgba(var(--tint), .1) 45%, transparent 70%); filter: blur(6px); transition: transform .3s, opacity .3s; }
.nx-love-btn:hover .nx-love-ico::before { transform: scale(1.25); }
.nx-love-ico .nx-3d { position: relative; width: 76px; height: 76px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.nx-love-lbl { font-size: 13.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.nx-love-num { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: rgb(var(--tint)); text-shadow: 0 0 14px rgba(var(--tint), .45); }
.nx-love-btn.is-hate .nx-love-num { color: #C4A5FF; }

/* idle life: the heart breathes, the broken heart sways, sparkles twinkle */
.nx-heart-beat { transform-origin: 32px 34px; animation: nxBeatIdle 2.4s ease-in-out infinite; }
@keyframes nxBeatIdle { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.07); } 20% { transform: scale(.99); } 30% { transform: scale(1.05); } }
.nx-broken { animation: nxBrokeIdle 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes nxBrokeIdle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
.nx-love .a-twinkle, .nx-love .a-twinkle2 { transform-box: fill-box; transform-origin: center; animation: nx-a-twinkle 2.6s ease-in-out infinite; }
.nx-love .a-twinkle2 { animation-delay: 1.2s; }
.nx-broken-crack { opacity: .55; stroke-dasharray: 60; stroke-dashoffset: 0; }
.nx-broken-l, .nx-broken-r { transform-box: view-box; transform-origin: 32px 58px; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.nx-tears path { opacity: 0; transform-box: fill-box; }

/* press → pounding heart (the burst itself lives in .nx-love-fx) */
.nx-love-btn.is-love.is-anim .nx-heart-beat { animation: nxPound .9s ease-in-out 3; }
@keyframes nxPound { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1.02); } 42% { transform: scale(1.22); } 70% { transform: scale(1); } }
.nx-love-btn.is-love.is-anim { box-shadow: 0 0 0 0 rgba(var(--pink), .6); animation: nxRing 1s ease-out 2; }
@keyframes nxRing { to { box-shadow: 0 0 0 18px rgba(var(--pink), 0); } }

/* press → the heart cracks open and cries */
.nx-love-btn.is-hate.is-anim .nx-broken { animation: nxShake .45s ease-in-out; }
@keyframes nxShake { 20% { transform: translateX(-3px) rotate(-4deg); } 40% { transform: translateX(3px) rotate(3deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.nx-love-btn.is-hate.is-anim .nx-broken-l, .is-hated .nx-love-btn.is-hate .nx-broken-l { transform: translate(-3px, 1px) rotate(-11deg); }
.nx-love-btn.is-hate.is-anim .nx-broken-r, .is-hated .nx-love-btn.is-hate .nx-broken-r { transform: translate(3px, 1px) rotate(11deg); }
.nx-love-btn.is-hate.is-anim .nx-broken-crack, .is-hated .nx-love-btn.is-hate .nx-broken-crack { opacity: 0; }
.nx-love-btn.is-hate.is-anim .nx-tears .t1 { animation: nxTear 1.5s .35s ease-in 2; }
.nx-love-btn.is-hate.is-anim .nx-tears .t2 { animation: nxTear 1.5s .75s ease-in 2; }
@keyframes nxTear { 0% { opacity: 0; transform: translateY(-4px) scale(.4); } 15% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(26px) scale(.8); } }
.is-hated .nx-love-btn.is-hate .nx-tears .t1 { animation: nxTear 2.6s 1s ease-in infinite; }

/* after the vote */
.nx-love.is-voted .nx-love-btn { cursor: default; }
.nx-love.is-voted .nx-love-btn[aria-pressed="false"] { opacity: .45; filter: saturate(.4); }
.nx-love.is-voted .nx-love-btn[aria-pressed="false"]:hover { transform: none; box-shadow: none; }
.nx-love.is-voted .nx-love-btn[aria-pressed="true"] { border-color: rgba(var(--tint), .6); box-shadow: 0 0 26px rgba(var(--tint), .25); }
.nx-love.is-voted .nx-love-btn[aria-pressed="true"]::after { content: "✓ თქვენი ხმა"; position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; background: rgba(var(--tint), .9); color: #fff; }
.nx-love-btn.is-nope { animation: nxShake .4s ease-in-out; }

.nx-love-meter { position: relative; height: 8px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #6D28D9, #8B5CF6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.nx-love-meter span { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: inherit; background: linear-gradient(90deg, #FF3D74, #FF7AA2); box-shadow: 0 0 12px rgba(var(--pink), .7); transition: width 1.2s cubic-bezier(.22, 1, .36, 1); }
.nx-love-meter span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent) 0 0 / 50% 100% no-repeat; animation: nxMeter 2.8s linear infinite; }
@keyframes nxMeter { from { background-position: -100% 0; } to { background-position: 250% 0; } }
.nx-love-meta { display: flex; justify-content: space-between; margin: -6px 0 0; font-size: 12px; color: var(--text-muted); }
.nx-love-meta b { color: #FF7AA2; font-size: 13px; }
.nx-love-msg { min-height: 34px; margin: -4px 0 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--text-2); background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .08); }
.nx-love-msg:empty { visibility: hidden; }
.nx-love-msg.is-love { color: #FFB3CB; border-color: rgba(var(--pink), .35); background: rgba(var(--pink), .08); }
.nx-love-msg.is-hate { color: #D8C4FF; border-color: rgba(139, 92, 246, .35); background: rgba(139, 92, 246, .08); }
.nx-love-msg a { color: inherit; text-decoration: underline; }

/* the effects layer: heart cloud and rose petals */
.nx-love-fx { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; }
.nx-love-fx .h { position: absolute; opacity: 0; -webkit-mask: var(--nx-heart) center / contain no-repeat; mask: var(--nx-heart) center / contain no-repeat; animation: nxFxHeart var(--d) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes nxFxHeart {
    0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
    12% { opacity: var(--o); transform: translate(calc(var(--x) * .2), calc(var(--y) * .15)) scale(1) rotate(calc(var(--r) * .3)); }
    70% { opacity: calc(var(--o) * .8); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.85) rotate(var(--r)); }
}
.nx-love-fx .p { position: absolute; opacity: 0; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, var(--c1), var(--c2)); box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .25); animation: nxFxPetal var(--d) cubic-bezier(.3, .2, .5, 1) forwards; }
@keyframes nxFxPetal {
    0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
    10% { opacity: 1; transform: translate(calc(var(--x) * .25), var(--up)) rotate(calc(var(--r) * .2)) scale(1); }
    40% { transform: translate(calc(var(--x) * .6), calc(var(--up) * .3)) rotate(calc(var(--r) * .5)) rotateX(60deg); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) rotateX(180deg); }
}

/* narrower screens: one horizontal card under the tiles */
@media (max-width: 1199px) {
    .nx-love { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "head btns" "meter btns" "meta btns" "msg btns"; column-gap: 20px; row-gap: 10px; align-items: center; animation: none; }
    .nx-love-head { grid-area: head; text-align: left; }
    .nx-love-btns { grid-area: btns; }
    .nx-love-meter { grid-area: meter; }
    .nx-love-meta { grid-area: meta; margin: 0; }
    .nx-love-msg { grid-area: msg; margin: 0; }
    .nx-love-btn { min-height: 140px; }
}
@media (max-width: 640px) {
    .nx-love { display: flex; padding: 18px 14px 14px; }
    .nx-love-head { text-align: center; }
    .nx-love-head h2 { font-size: 21px; }
    .nx-love-btn { min-height: 130px; }
    .nx-love-ico, .nx-love-ico .nx-3d { width: 66px; height: 66px; }
}

.darken .nx-love { background: radial-gradient(110% 60% at 50% -8%, rgba(var(--pink), .18) 0%, rgba(183, 140, 255, .08) 45%, transparent 72%), linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%); box-shadow: 0 10px 28px rgba(60, 30, 120, .1); }
.darken .nx-love-head h2 { background-image: linear-gradient(90deg, #2B1550 0%, #C2185B 40%, #2B1550 60%, #6D28D9 100%); }
.darken .nx-love-btn { background: radial-gradient(120% 80% at 50% 0%, rgba(var(--tint), .14), transparent 65%), #fff; }
.darken .nx-love-msg { background: rgba(0, 0, 0, .02); border-color: rgba(0, 0, 0, .1); }
.darken .nx-love-eyebrow { color: #C2185B; }
.darken .nx-love-msg.is-love { color: #BE185D; } .darken .nx-love-msg.is-hate { color: #6D28D9; }
.darken .nx-love::after { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
    .nx-love, .nx-love *, .nx-love-fx * { animation: none !important; }
}

/* v1 restored 2026-10-10: tear drops in the effects layer, test-mode tag, tiles that keep one line */
.nx-love-fx .d { position: absolute; opacity: 0; border-radius: 0 0 50% 50%; clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); background: radial-gradient(circle at 35% 40%, #E0F7FF, #38BDF8 70%); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .9)); animation: nxFxDrop var(--d) ease-in forwards; }
@keyframes nxFxDrop { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; transform: translate(calc(var(--x) * .1), 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.8); } }
.nx-love-test { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #1A1206; background: #FBBF24; box-shadow: 0 0 12px rgba(251, 191, 36, .5); }
@media (min-width: 1200px) and (max-width: 1599px) { .nx-top .nx-quick a { font-size: 12.5px; white-space: nowrap; } .nx-top .nx-quick { gap: 10px; } }

/* =====================================================
   "მოგწონთ საიტი?" card, round edition (2026-10-10)
   The tile card keeps its layout; the round pill's details move in:
   glossy red / navy circles, glowing hearts, petals and drops around it,
   rising soft hearts behind, and the speech bubble beside the card.
   ===================================================== */
.nx-love.is-round { overflow: visible; }
.nx-love.is-round .nx-love-amb { overflow: visible; }

/* soft hearts rising behind the card (clipped to the card) */
.nx-love.is-round::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.nx-love.is-round .nx-love-amb u { position: absolute; bottom: 0; width: 14px; height: 14px; background: #FF7AA2; opacity: 0; -webkit-mask: var(--nx-heart) center / contain no-repeat; mask: var(--nx-heart) center / contain no-repeat; animation: nxRoundRise 9s linear infinite; }
.nx-love.is-round .nx-love-amb u:nth-child(1) { left: 12%; }
.nx-love.is-round .nx-love-amb u:nth-child(2) { left: 34%; width: 10px; height: 10px; background: #C084FC; animation-delay: 1.8s; animation-duration: 11s; }
.nx-love.is-round .nx-love-amb u:nth-child(3) { left: 55%; width: 17px; height: 17px; background: #FF4D7E; animation-delay: 3.6s; }
.nx-love.is-round .nx-love-amb u:nth-child(4) { left: 72%; width: 11px; height: 11px; background: #7DD3FC; animation-delay: 5.2s; animation-duration: 10s; }
.nx-love.is-round .nx-love-amb u:nth-child(5) { left: 88%; width: 13px; height: 13px; background: #FDA4AF; animation-delay: 7s; }
@keyframes nxRoundRise { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 12% { opacity: .35; } 55% { transform: translate(10px, -260px) rotate(8deg); } 85% { opacity: .18; } 100% { transform: translate(-6px, -460px) rotate(-6deg); opacity: 0; } }

/* glowing hearts around the edges, as on the pill */
.nx-love.is-round .nx-love-amb i { bottom: auto; opacity: 1; width: 18px; height: 18px; background: linear-gradient(180deg, #FF8FB3, #FF2E6E); filter: drop-shadow(0 0 6px rgba(255, 60, 120, .9)); animation: nxAmbHeart 4.5s ease-in-out infinite; }
.nx-love.is-round .nx-love-amb i:nth-child(6) { left: -12px; top: 30%; width: 22px; height: 22px; animation-delay: 0s; }
.nx-love.is-round .nx-love-amb i:nth-child(7) { left: -7px; top: 46%; width: 13px; height: 13px; animation-delay: 1.1s; }
.nx-love.is-round .nx-love-amb i:nth-child(8) { left: 40%; top: -9px; width: 16px; height: 16px; animation-delay: .5s; }
.nx-love.is-round .nx-love-amb i:nth-child(9) { right: -11px; left: auto; top: 26%; width: 19px; height: 19px; animation-delay: 1.7s; }
.nx-love.is-round .nx-love-amb i:nth-child(10) { left: -9px; top: 62%; width: 11px; height: 11px; animation-delay: 2.3s; }
.nx-love.is-round .nx-love-amb i:nth-child(11) { right: -8px; left: auto; top: 12%; width: 12px; height: 12px; animation-delay: 2.9s; }
@keyframes nxAmbHeart { 0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); opacity: .95; } 50% { transform: translateY(-9px) rotate(8deg) scale(1.12); opacity: .7; } }

/* rose petals drifting down and blue drops near the broken heart */
.nx-love.is-round .nx-love-amb b { position: absolute; width: 14px; height: 18px; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, #FF7A9C, #D61F57); box-shadow: 0 0 10px rgba(255, 60, 120, .45); opacity: 0; animation: nxAmbPetal 7s linear infinite; }
.nx-love.is-round .nx-love-amb b:nth-child(12) { left: 58%; top: 70%; }
.nx-love.is-round .nx-love-amb b:nth-child(13) { left: 84%; top: 74%; width: 11px; height: 14px; animation-delay: 2.4s; }
.nx-love.is-round .nx-love-amb b:nth-child(14) { left: 70%; top: 80%; width: 16px; height: 20px; animation-delay: 4.6s; }
@keyframes nxAmbPetal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .95; } 100% { opacity: 0; transform: translate(26px, 150px) rotate(320deg); } }
.nx-love.is-round .nx-love-amb em { position: absolute; right: -6px; top: 52%; width: 11px; height: 15px; border-radius: 0 0 50% 50%; clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); background: radial-gradient(circle at 35% 35%, #E0F7FF, #38BDF8 70%); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .8)); opacity: 0; animation: nxAmbDrop 3.8s ease-in infinite; }
.nx-love.is-round .nx-love-amb em:nth-child(16) { right: 30%; top: 60%; width: 8px; height: 11px; animation-delay: 1.9s; }
@keyframes nxAmbDrop { 0% { opacity: 0; transform: translateY(-6px) scale(.5); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(44px) scale(.85); } }

/* glossy round icons */
.nx-love.is-round .nx-love-ico { width: 86px; height: 86px; border-radius: 50%; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, filter .3s; }
.nx-love.is-round .nx-love-ico::before { display: none; }
.nx-love.is-round .nx-love-ico svg { width: 46px; height: 46px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.nx-love.is-round .nx-love-ico::after { content: ""; position: absolute; top: 8px; left: 18px; width: 32px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent); transform: rotate(-20deg); pointer-events: none; }
.nx-love.is-round .is-love .nx-love-ico { background: radial-gradient(circle at 34% 26%, #FF9AB0 0%, #F7335E 42%, #B40E3A 82%, #8A0A2C 100%); box-shadow: 0 0 0 3px rgba(255, 130, 170, .22), 0 0 30px rgba(255, 45, 100, .65), 0 10px 22px rgba(0, 0, 0, .45), inset 0 -8px 14px rgba(80, 0, 20, .45), inset 0 5px 10px rgba(255, 255, 255, .35); }
.nx-love.is-round .is-hate .nx-love-ico { background: radial-gradient(circle at 34% 26%, #4A5DA8 0%, #223070 48%, #121A45 82%, #0B1030 100%); box-shadow: 0 0 0 1.5px rgba(140, 170, 255, .45), 0 0 26px rgba(70, 110, 255, .45), 0 10px 22px rgba(0, 0, 0, .45), inset 0 -8px 14px rgba(0, 0, 20, .5), inset 0 5px 10px rgba(255, 255, 255, .18); }
.nx-love.is-round .nx-love-btn:hover .nx-love-ico { transform: scale(1.07); }
.nx-love.is-round .nx-love-btn.is-hate { --tint: 70, 110, 255; }
.nx-love.is-round .nx-love-btn.is-hate .nx-love-num { color: #A9B8FF; }

/* the 24-unit icons need their own pivots and moves */
.nx-love.is-round .nx-heart-beat { transform-box: view-box; transform-origin: 12px 13px; }
.nx-love.is-round .nx-broken-l, .nx-love.is-round .nx-broken-r { transform-origin: 12px 21px; }
.nx-love.is-round .is-hate.is-anim .nx-broken-l, .nx-love.is-round.is-hated .is-hate .nx-broken-l { transform: translate(-1.6px, .4px) rotate(-13deg); }
.nx-love.is-round .is-hate.is-anim .nx-broken-r, .nx-love.is-round.is-hated .is-hate .nx-broken-r { transform: translate(1.6px, .4px) rotate(13deg); }
.nx-love.is-round .is-hate.is-anim .nx-tears .t1 { animation: nxTearS 1.4s .35s ease-in 2; }
.nx-love.is-round .is-hate.is-anim .nx-tears .t2 { animation: nxTearS 1.4s .7s ease-in 2; }
.nx-love.is-round.is-hated .is-hate .nx-tears .t1 { animation: nxTearS 2.6s 1s ease-in infinite; }
@keyframes nxTearS { 0% { opacity: 0; transform: translateY(-2px) scale(.4); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px) scale(.8); } }
.nx-love.is-round .is-love.is-anim .nx-love-ico { animation: nxRingR .85s ease-out 3; }
@keyframes nxRingR { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 141, .7), 0 0 30px rgba(255, 45, 100, .65), inset 0 -8px 14px rgba(80, 0, 20, .45); } 100% { box-shadow: 0 0 0 22px rgba(255, 77, 141, 0), 0 0 50px rgba(255, 45, 100, .9), inset 0 -8px 14px rgba(80, 0, 20, .45); } }
.nx-love.is-round.is-voted .nx-love-btn[aria-pressed="false"] .nx-love-ico { filter: grayscale(.75) brightness(.7); transform: scale(.9); }

/* the speech bubble beside the card */
.nx-love.is-round .nx-love-msg { position: absolute; z-index: 5; right: calc(100% + 14px); top: 40%; width: 230px; min-height: 0; margin: 0; padding: 11px 14px; border-radius: 14px; border-style: solid; font-size: 13px; line-height: 1.4; text-align: left; color: #fff; background: rgba(20, 16, 36, .97); border: 1px solid rgba(255, 77, 141, .5); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 77, 141, .25); opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity .3s, transform .35s cubic-bezier(.22, 1, .36, 1), visibility .3s; }
.nx-love.is-round .nx-love-msg::after { content: ""; position: absolute; right: -6px; top: 18px; width: 10px; height: 10px; background: inherit; border-top: 1px solid rgba(255, 77, 141, .5); border-right: 1px solid rgba(255, 77, 141, .5); transform: rotate(45deg); }
.nx-love.is-round .nx-love-msg.is-show { opacity: 1; visibility: visible; transform: none; }
.nx-love.is-round .nx-love-msg.is-hate { border-color: rgba(99, 140, 255, .55); }
.nx-love.is-round .nx-love-msg.is-hate::after { border-color: rgba(99, 140, 255, .55); }
.nx-love.is-round .nx-love-msg a { color: #FF9EC0; }
@media (max-width: 1199px) {
    .nx-love.is-round .nx-love-msg { position: static; grid-area: msg; width: auto; display: none; transform: none; text-align: center; }
    .nx-love.is-round .nx-love-msg::after { display: none; }
    .nx-love.is-round .nx-love-msg.is-show { display: block; }
    .nx-love.is-round .nx-love-amb i:nth-child(n+9), .nx-love.is-round .nx-love-amb em { display: none; }
}
@media (max-width: 640px) { .nx-love.is-round .nx-love-ico { width: 70px; height: 70px; } .nx-love.is-round .nx-love-ico svg { width: 38px; height: 38px; } .nx-love.is-round .nx-love-ico::after { left: 14px; width: 26px; } }
@media (prefers-reduced-motion: reduce) { .nx-love.is-round .nx-love-amb * { animation: none !important; } }