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

:root {
    --bg-color: #121212;
    /* Softer dark grey - Less transparent */
    --surface-color: rgba(20, 20, 20, 0.95);
    --surface-border: #333;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --primary-color: #00ff9d;
    /* Neon Spring Green */
    --accent-color: #00ff9d;
    /* Same family as primary — no cyan/blue accent */
    --error-color: #ff4757;
    --radius: 6px;
    /* Rounded corners as requested */
    --font-main: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --glow: 0 0 10px rgba(0, 255, 157, 0.2);
    --corner-line-color: rgba(0, 255, 157, 0.72);
    --content-max-width: min(80vw, 1360px);
    /* Distance from fixed nav to first toolbar row (lists, forum heads, detail cards — same value site-wide) */
    --page-content-top-offset: 0.45rem;
    /* Space below filter/toolbar row before list (Files, Resources, forum heads) */
    --page-toolbar-row-gap: 1.5rem;
    /* Same vertical band: filter chips row (Files) vs title row (Discussions index) */
    --page-toolbar-band-min-height: 2.75rem;
    --filter-chip-height: 40px;
    /* Header + toolbar glass (desktop & mobile) */
    --header-hover-fill: rgba(255, 255, 255, 0.08);
    --header-hover-text: rgba(248, 255, 252, 0.96);
    --header-hover-ms: 0.16s;
    --header-glass-bg: rgba(10, 11, 14, 0.38);
    --header-glass-blur: blur(18px) saturate(1.12);
    --header-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --header-glass-drop: 0 6px 28px rgba(0, 0, 0, 0.38);
    /*
     * Filter chips sit vertically centered in .page-toolbar-row (min-height band).
     * Detail cyber-card top should line up with chip tops, not the empty band above chips.
     */
    --toolbar-chip-inset-top: max(0px, calc((var(--page-toolbar-band-min-height) - var(--filter-chip-height)) / 2));
    /* Gaps inside file/resource detail card (below header border → body → file lines) */
    --detail-inner-section-gap: 0.75rem;
    /*
     * Detail card: horizontal matches .file-item (1rem); top matches .file-item vertical padding (0.6rem).
     */
    --detail-card-pad-x: 1rem;
    --detail-card-pad-top: 0.6rem;
    --detail-card-pad-bottom: 1.1rem;
    /*
     * Single global inset below fixed header for every page that uses .page-toolbar-page.
     * Applied on the WRAPPER only — never on .page-toolbar-row (would break chip vs toolbar button alignment).
     */
    --panel-content-inset-top: 0.7rem;
    /* Sticky panels (e.g. forum categories): distance from viewport top = fixed header + gap */
    --sticky-header-offset: calc(64px + 0.45rem);
    /* Bottom-left toast stack (showToast + legacy flash fallback) */
    --ulp-corner-stack-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    --ulp-corner-toast-radius: 16px;
    --ulp-corner-stack-gap: 0.65rem;
    --ulp-corner-stack-max: min(360px, calc(100vw - 2.5rem));
    --ulp-corner-toast-max: min(340px, calc(100vw - 2.5rem));
}

/*
 * Global rhythm: main.container padding-top + this block = distance to first in-flow content.
 * Lists (chips row), forum heads, file/resource detail card, upload back-link — all start after the same padding-top.
 */
.page-toolbar-page {
    margin-top: var(--page-content-top-offset);
    padding-top: var(--panel-content-inset-top);
}

/*
 * Upload / edit / add resource — same usable width as Files & Resources lists (main .container only).
 * Do not nest a second max-width here or forms look narrower than index rows.
 */
.upload-page-shell {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.upload-form-page-title {
    margin: 0 0 1rem;
}

.directory-form-shell {
    max-width: 720px;
    width: 100%;
    margin: 1.5rem auto 2rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

.search-highlight {
    background: rgba(0, 255, 157, 0.2);
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
    font-weight: bold;
    border-radius: 2px;
    padding: 0 2px;
}

::selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

body {
    background-color: var(--bg-color);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-top: 64px;
    /* Offset for fixed header (Match .site-header height) */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    max-width: 100vw;
    /* Ensure body doesn't exceed viewport */
}

@media (min-width: 768px) {
    body {
        background-size: 50px 50px;
    }
}

#site-header-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    width: 100%;
    /*
     * Wrapper can be taller than the visible chrome (e.g. wrapped mobile rows vs body padding-top).
     * Without this, transparent band under the real header swallows clicks meant for page content.
     */
    pointer-events: none;
}

.site-header {
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    backdrop-filter: blur(15px);
    height: 64px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10000;
    /* Must match #site-header-wrapper: otherwise the full header box (incl. transparent / flex gaps) blocks page hits */
    pointer-events: none;
}

.header-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0 1.5rem;
    pointer-events: none;
    /* Tight gap logo → nav; .header-right uses margin-left: auto for the right cluster */
    gap: 0.75rem;
}

.header-left {
    flex-shrink: 0;
    min-width: 0;
}

.header-center {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

/* --- Terminal Logo --- */
.terminal-logo .logo-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.3s;
}

.terminal-logo .prompt {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
}

.terminal-logo .logo-text {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
}

.terminal-logo .cursor {
    width: 8px;
    height: 18px;
    background: var(--primary-color);
    display: inline-block;
    animation: blink 1s step-end infinite;
    box-shadow: 0 0 5px var(--primary-color);
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.terminal-logo:hover .logo-link {
    transform: translateX(3px);
}

/* --- Navigation (match .filter-chip / category tabs) --- */
.desktop-nav {
    display: flex;
    gap: 0;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    position: relative;
    top: 1px; /* sit on top of header bottom border */
}

.nav-item {
    padding: 0.34rem 0.85rem;
    height: var(--filter-chip-height, 36px);
    min-height: var(--filter-chip-height, 36px);
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border: 1px solid transparent;
    border-bottom-color: transparent;
    border-radius: 11px 11px 0 0;
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    line-height: 1;
    white-space: nowrap;
    position: relative;
}

.desktop-nav .nav-item:last-child {
    border-right: 1px solid transparent;
}

.nav-item i {
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.nav-item:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
    border-bottom-color: transparent;
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.16) inset;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
    transform: none;
}

.nav-item:hover i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 5px rgba(0, 255, 157, 0.55));
}

.nav-item.active {
    background: rgba(18, 18, 18, 0.98);
    border-color: rgba(0, 255, 157, 0.28);
    border-bottom-color: rgba(18, 18, 18, 0.98); /* merge active tab into page */
    color: #eafff6;
    box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.2), 0 0 10px rgba(0, 255, 157, 0.12);
}

.nav-item.active i {
    color: #fff;
}

.nav-item.active:hover {
    background: rgba(18, 18, 18, 0.98);
    border-color: rgba(0, 255, 157, 0.35);
    border-bottom-color: rgba(18, 18, 18, 0.98);
    color: #eafff6;
    box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.24), 0 0 14px rgba(0, 255, 157, 0.14);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
    transform: none;
}

.nav-item.active:hover i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 5px rgba(0, 255, 157, 0.5));
}

/* --- Action Buttons --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 0;
}

/* Same stacking as each other so neighbors stay clickable; dropdown paints above only where it overlaps (shield side). */
.header-right > .search-expandable,
.header-right > a.shield-btn,
.header-right .notification-container,
.header-right .notification-container ~ a,
.header-right > .mobile-toggle {
    position: relative;
    z-index: 10200;
}

/*
 * Header hit-testing (all viewports): glass shells + flex seams pass through to content under the fixed bar;
 * only real controls receive pointer events. (Previously .site-header { pointer-events: auto } undid the wrapper.)
 */
.site-header .header-nav-cluster {
    pointer-events: none;
}

.site-header .header-nav-cluster .header-left {
    pointer-events: auto;
}

.site-header .header-nav-cluster .header-center {
    pointer-events: none;
}

.site-header .header-nav-cluster .desktop-nav {
    pointer-events: none;
}

.site-header .header-nav-cluster .desktop-nav .nav-item,
.site-header .header-nav-cluster .desktop-nav a.nav-item {
    pointer-events: auto;
}

.site-header .header-right {
    pointer-events: none;
}

.site-header .header-right > * {
    pointer-events: auto;
}

.site-header .header-right > .search-expandable {
    pointer-events: none;
}

.site-header .header-right .search-expandable #header-search-form {
    pointer-events: auto;
}

.site-header .header-right > .auth-btns {
    pointer-events: none;
}

.site-header .header-right .auth-btns > a {
    pointer-events: auto;
}

.site-header .mobile-menu-overlay:not(.active) {
    pointer-events: none;
}

.site-header .mobile-menu-overlay.active {
    pointer-events: auto;
}

/* Bell hover-bridge padding — invisible strip under the rail blocks taps on tablets / narrow desktop */
@media (max-width: 1024px) {
    .site-header .header-right .notification-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* --- Unified Header Buttons (Search, Notify, Profile, Admin, Logout) --- */
.nav-btn-icon,
.profile-link-btn {
    position: relative;
    /* Fix for notification badge positioning */
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    overflow: visible;
}

.nav-btn-icon i {
    font-size: 1rem;
}

@keyframes nav-btn-vip-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 197, 66, 0);
        border-color: var(--surface-border);
    }
    35% {
        box-shadow: 0 0 11px 1px rgba(255, 224, 170, 0.16);
        border-color: rgba(255, 214, 160, 0.28);
    }
    70% {
        box-shadow: 0 0 13px 2px rgba(245, 197, 66, 0.18);
        border-color: rgba(230, 190, 95, 0.34);
    }
}

/* Soft iridescence: hue + saturation drift + gentle pulse (kept subtle) */
@keyframes nav-btn-vip-gem {
    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(245, 197, 66, 0.35)) hue-rotate(0deg) saturate(1.04) brightness(1);
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 0 5px rgba(255, 220, 150, 0.42)) hue-rotate(7deg) saturate(1.1) brightness(1.04);
        transform: scale(1.04);
    }
    50% {
        filter: drop-shadow(0 0 7px rgba(245, 197, 66, 0.5)) hue-rotate(-4deg) saturate(1.08) brightness(1.05);
        transform: scale(1.07);
    }
    75% {
        filter: drop-shadow(0 0 5px rgba(255, 236, 195, 0.38)) hue-rotate(10deg) saturate(1.06) brightness(1.03);
        transform: scale(1.04);
    }
}

@keyframes nav-btn-vip-sheen {
    0%,
    100% {
        background-position: 120% 0;
    }
    50% {
        background-position: -20% 0;
    }
}

.nav-btn-vip {
    animation: nav-btn-vip-glow 3.2s ease-in-out infinite;
}

/* Slow gloss pass across the tile — low opacity, not flashy */
.nav-btn-vip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 252, 235, 0.11) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 240% 100%;
    animation: nav-btn-vip-sheen 6.5s ease-in-out infinite;
    pointer-events: none;
}

.nav-btn-vip i {
    /* Slightly larger than other header icons — gem glyph is optically small */
    font-size: 1.18rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    animation: nav-btn-vip-gem 3.2s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, filter;
}

.nav-btn-vip:hover {
    animation: none;
}

.nav-btn-vip:hover::after {
    animation: none;
    opacity: 0;
}

.nav-btn-vip:hover i {
    animation: none;
    filter: drop-shadow(0 0 4px rgba(245, 197, 66, 0.45));
    transform: none;
}

.mobile-nav-vip-gem {
    animation: nav-btn-vip-gem 2.8s ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}

.mobile-nav-item-vip:hover .mobile-nav-vip-gem,
.mobile-nav-item-vip:focus .mobile-nav-vip-gem {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-btn-vip,
    .nav-btn-vip i,
    .mobile-nav-vip-gem {
        animation: none !important;
    }

    .nav-btn-vip::after {
        animation: none !important;
        opacity: 0;
    }
}

/* Hover Effects */
.nav-btn-icon:hover,
.profile-link-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.05);
}

.logout-btn:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    background: rgba(255, 71, 87, 0.05);
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.15);
}

/* --- Profile Link Specifics (same 38px slot as .nav-btn-icon; avatar fills it) --- */
.profile-link-btn .avatar-tiny {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #222222;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    box-sizing: border-box;
}

.profile-link-btn.user .avatar-tiny,
.profile-link-btn.admin .avatar-tiny,
.profile-link-btn.moderator .avatar-tiny {
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-link-btn.vip .avatar-tiny {
    border-color: rgba(232, 197, 71, 0.52);
    box-shadow:
        0 0 10px rgba(245, 197, 66, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-link-btn .username {
    display: none;
    /* Hide username to match other icon buttons */
}

.notification-container.notifications-open .notification-trigger {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.06);
}

/* Typography */
h1,
h2,
h3 {
    margin-top: 0;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--primary-color);
    text-shadow: var(--glow);
}

/* Layout */
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0.65rem 1rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container {
        padding: 0.5rem;
        max-width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        /* Header + main both use .container — widen band so chrome matches list rails (~full viewport) */
        --content-max-width: min(calc(100vw - 2rem), 1420px);
    }

    .container {
        padding: 0.65rem clamp(0.85rem, 2.4vw, 1.5rem) 1rem;
    }
}

/* Navigation Items */
nav a,
.nav-btn {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    /* Unify rounding */
    transition: all 0.2s;
    height: 36px;
    /* User requested unified height */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center content */
    box-sizing: border-box;
    text-decoration: none;
    line-height: 1;
}

/* Ensure icons don't break flex alignment */
nav a i,
.nav-btn i {
    font-size: 1rem;
    display: inline-block;
}

/* Reset icon margin in nav for perfect centering, but keep for tags with text */
nav a:not(.username-tag) i.icon,
.nav-btn:not(.username-tag) i.icon {
    margin-right: 0;
}

/* Generic Hover */
nav a:hover,
.nav-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

/* Admin Button (Red) */
.nav-btn-admin {
    color: var(--error-color) !important;
}

.nav-btn-admin:hover {
    border-color: var(--error-color) !important;
    background: rgba(255, 51, 102, 0.1) !important;
    color: var(--error-color) !important;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.2) !important;
}

/* Notification Bell (Default) */
.nav-btn-notify {
    color: var(--text-primary) !important;
}

.nav-btn-notify:hover {
    border-color: var(--accent-color) !important;
    background: rgba(0, 255, 157, 0.1) !important;
    color: var(--accent-color) !important;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2) !important;
}

/* Upload Button (Primary Green) */
.nav-btn-upload:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: rgba(0, 255, 157, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2) !important;
}

/* Logout Button (White/Grey) */
.nav-btn-logout:hover {
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

/* Group role badges — match .user-avatar-circle (24px) next to nicknames */
.group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    margin-left: 4px;
    vertical-align: middle;
    color: #fff;
    background-color: var(--badge-bg, rgba(0, 255, 157, 0.2));
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    cursor: help;
    transform-origin: center center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    z-index: 0;
}

.group-badge i {
    font-size: 0.82rem;
    line-height: 1;
    color: var(--badge-icon-color, #f0f0f0);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

.group-badge:hover {
    transform: translateY(-1px) scale(1.22);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.35);
    z-index: 3;
}

.group-badge.group-badge--admin-border:hover {
    /* Keep depth glow; admin border stays from inline — avoid piling a second “white” ring */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.48);
}

.group-badge i.fa-solid,
.group-badge i.fas,
.group-badge i.fa {
    /* Make sure the glyph is rendered from FA6 font (prevents tofu squares). */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
}

.group-badge i.fa-regular,
.group-badge i.far {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 768px) {
    .group-badge {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        flex: 0 0 24px;
        margin-left: 3px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }

    .group-badge i {
        font-size: 0.82rem;
    }
}

/* Stacked group icons (Flarum-style), same idea as .avatar-pile / .pile-avatar */
.group-badge-pile {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
}

.group-badge-pile:empty {
    display: none !important;
}

.group-badge-pile .group-badge {
    margin-left: 0;
    flex-shrink: 0;
    box-shadow: none;
}

/* Admin `badge_border` draws the ring — drop fake pile ring so yellow/custom borders stay visible */
.group-badge-pile .group-badge.group-badge--admin-border {
    box-shadow: none;
}

/* Stored notification HTML may omit the class — match inline border from shell */
.group-badge-pile .group-badge[style*='border'],
.group-badge-pile .group-badge[style*='Border'] {
    box-shadow: none;
}

.group-badge-pile .group-badge:not(:first-child) {
    margin-left: -12px;
}

.group-badge-pile .group-badge:nth-child(1) {
    z-index: 1;
}

.group-badge-pile .group-badge:nth-child(2) {
    z-index: 2;
}

.group-badge-pile .group-badge:nth-child(3) {
    z-index: 3;
}

.group-badge-pile .group-badge:nth-child(4) {
    z-index: 4;
}

.group-badge-pile .group-badge:nth-child(5) {
    z-index: 5;
}

.group-badge-pile .group-badge:nth-child(6) {
    z-index: 6;
}

.group-badge-pile .group-badge:nth-child(7) {
    z-index: 7;
}

.group-badge-pile .group-badge:nth-child(8) {
    z-index: 8;
}

.group-badge-pile .group-badge:hover {
    z-index: 24 !important;
}

@media (max-width: 768px) {
    .group-badge-pile {
        margin-left: 3px;
    }

    .group-badge-pile .group-badge:not(:first-child) {
        margin-left: -12px;
    }
}

/* Admin groups table: keep icon preview compact (not in username row with avatar) */
.view-file-badge.group-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex: 0 0 20px;
    margin-left: 0;
}

.view-file-badge.group-badge i {
    font-size: 0.7rem;
}

/* Highlight recently returned card after back navigation. */
.return-focus-pulse {
    animation: returnFocusPulse 1.1s ease-out;
    will-change: box-shadow, transform;
}

@keyframes returnFocusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 157, 0);
        transform: scale(1);
    }

    35% {
        box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.3), 0 0 10px rgba(0, 255, 157, 0.18);
        transform: scale(1.012);
    }

    70% {
        box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.2), 0 0 6px rgba(0, 255, 157, 0.12);
        transform: scale(1.006);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 157, 0);
        transform: scale(1);
    }
}

/* Username Tag in Nav (Override default tag styling to match buttons) */
nav .username-tag {
    padding: 0.5rem 0.8rem !important;
    /* Match other buttons */
    margin: 0 !important;
    height: 36px !important;
    box-shadow: none;
    /* Reset potential shadows */
}

/* Keep Role Specific Colors on Hover for Profile */
nav .username-tag.admin:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    background: rgba(255, 51, 102, 0.1);
}

nav .username-tag.moderator:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.1);
}

/* UI Elements */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    /* Match nickname rounding */
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: 0.5rem;
}

.btn:hover {
    background-color: rgba(0, 255, 157, 0.1);
    color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
    transform: translateY(-1px);
}

/* Toolbar CTAs (Add file, New topic, …) — same shell as .filter-chip */
.btn.btn-toolbar,
a.btn.btn-toolbar,
button.btn.btn-toolbar {
    height: var(--filter-chip-height, 36px);
    min-height: var(--filter-chip-height, 36px);
    padding: 0.28rem 0.7rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--surface-border);
    border-radius: var(--modern-rounded-sm, 8px);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    gap: 0.32rem;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-toolbar:hover,
a.btn.btn-toolbar:hover,
button.btn.btn-toolbar:hover {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.38);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 255, 157, 0.12);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.48);
    transform: translateY(-1px);
}

.btn.btn-toolbar i,
.btn.btn-toolbar .icon {
    color: #fff;
    margin-right: 0;
    opacity: 0.95;
}

.btn.btn-toolbar:hover i,
.btn.btn-toolbar:hover .icon {
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.5));
}

.btn-secondary {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
    transform: translateY(-1px);
}

/* Reject/Delete Button (Red) */
.btn[style*="--error-color"]:hover,
button[style*="border-color: var(--error-color)"]:hover {
    background-color: rgba(255, 51, 102, 0.1) !important;
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.3) !important;
    text-shadow: 0 0 5px rgba(255, 51, 102, 0.5) !important;
    transform: translateY(-1px);
}

/* Forms */
.form-control {
    width: 100%;
    padding: 0 1rem;
    /* Adjusted padding for fixed height */
    height: 36px;
    /* Match button height */
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--surface-border);
    color: var(--text-primary);
    font-family: var(--font-mono);
    transition: all 0.3s;
    box-sizing: border-box;
    display: flex;
    /* Ensure proper centering */
    align-items: center;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-color);
}

.cyber-input {
    width: 100%;
    padding: 0 1rem;
    /* Adjusted for fixed height */
    height: 36px;
    /* Match button height */
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    box-sizing: border-box;
    /* Ensure padding doesn't increase width/height */
    transition: all 0.3s;
    box-sizing: border-box;
}

.cyber-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

.cyber-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Custom File Input */
.file-upload-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    transition: all 0.3s;
}

.file-upload-wrapper:hover {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-custom-btn {
    background: var(--surface-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    text-transform: uppercase;
}

.file-upload-wrapper:hover .file-custom-btn {
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

.file-name-display {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Text file row: full-area click via default overlay input; row visuals ignore pointer */
.file-upload-wrapper.file-upload-row {
    position: relative;
    min-height: 3.15rem;
}

.file-upload-row-visual {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Preview image: choose, paste (⌘/Ctrl+V), or drop */
.file-upload-preview-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    min-height: 3.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(0, 255, 157, 0.38);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.file-upload-preview-zone:hover {
    border-color: rgba(0, 255, 157, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.file-upload-preview-zone:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.15);
}

.file-upload-preview-zone:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.file-upload-preview-zone.file-upload-preview-zone--drag {
    border-style: solid;
    border-color: var(--primary-color);
    background: rgba(0, 255, 157, 0.07);
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.12);
}

/* Full-zone file picker: sits above visuals; tabindex="-1" so Tab focuses the zone for paste */
.file-upload-preview-zone .file-upload-hit-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.file-upload-preview-visual {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    width: 100%;
    pointer-events: none;
    flex: 1;
    min-height: 0;
}

.file-upload-preview-zone .file-custom-btn {
    flex-shrink: 0;
}

.file-upload-preview-zone .file-name-display {
    flex: 1 1 140px;
    min-width: 0;
}

.file-upload-preview-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
    min-width: 0;
}

/* Compact preview thumb: fixed 44×44 when visible; collapsed when empty (no extra min-height on zone) */
.file-upload-preview-thumb-slot {
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.file-upload-preview-thumb-slot.has-image {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-radius: 6px;
    border: 1px solid var(--surface-border);
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.file-upload-preview-thumb-slot.has-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}

.resource-screenshot-thumb-slot.has-image {
    border-color: rgba(0, 255, 157, 0.35);
}

/* Preview remove: same control as edit-profile server media × (rounded square, not circle) */
.file-upload-thumb-remove,
.edit-profile-page .edit-profile-zone-server__x {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(8, 12, 16, 0.88);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.file-upload-thumb-remove i,
.edit-profile-page .edit-profile-zone-server__x i {
    font-size: 0.78rem;
    opacity: 0.95;
}

.file-upload-thumb-remove:hover,
.edit-profile-page .edit-profile-zone-server__x:hover {
    border-color: rgba(255, 71, 87, 0.55);
    background: rgba(255, 71, 87, 0.2);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 71, 87, 0.22);
}

.file-upload-thumb-remove:focus,
.edit-profile-page .edit-profile-zone-server__x:focus {
    outline: none;
}

.file-upload-thumb-remove:focus-visible,
.edit-profile-page .edit-profile-zone-server__x:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.25);
}

.file-upload-paste-hint {
    flex: 1 1 100%;
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1.35;
    margin: 0;
    padding-top: 0.45rem;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Upload file / add resource / edit profile / drag-drop modal: stacked drop zones + filter-chip-style trigger */
.upload-page-shell .file-upload-preview-zone > .file-upload-preview-visual,
.upload-modal-body .file-upload-preview-zone > .file-upload-preview-visual {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.upload-page-shell .file-upload-preview-zone > .file-upload-preview-visual > .file-upload-preview-main-row,
.upload-modal-body .file-upload-preview-zone > .file-upload-preview-visual > .file-upload-preview-main-row {
    width: 100%;
}

.upload-page-shell .file-upload-preview-zone > .file-upload-preview-visual > .file-upload-paste-hint,
.upload-modal-body .file-upload-preview-zone > .file-upload-preview-visual > .file-upload-paste-hint {
    margin-top: 0;
    padding-top: 0.45rem;
    flex: 0 0 auto;
}

.upload-page-shell .file-upload-preview-zone .file-custom-btn,
.upload-modal-body .file-upload-preview-zone .file-custom-btn {
    height: var(--filter-chip-height, 36px);
    min-height: var(--filter-chip-height, 36px);
    box-sizing: border-box;
    padding: 0.28rem 0.7rem;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--modern-rounded-sm, 8px) !important;
    color: var(--text-primary) !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    gap: 0.42rem !important;
    line-height: 1 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.upload-page-shell .file-upload-preview-zone:hover .file-custom-btn,
.upload-modal-body .file-upload-preview-zone:hover .file-custom-btn {
    color: var(--primary-color) !important;
    background: rgba(0, 255, 157, 0.07) !important;
    border-color: rgba(0, 255, 157, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 255, 157, 0.1) !important;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.35);
    transform: translateY(-1px);
}

.upload-page-shell .file-upload-preview-zone:hover .file-custom-btn i,
.upload-modal-body .file-upload-preview-zone:hover .file-custom-btn i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.45));
}

/* Image drop zones: preview on its own row (not a cramped 44×44 inline chip) */
.upload-page-shell .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-main-row,
.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0.5rem 0.75rem;
}

/* Preview box hugs image width so the × sits on the media, not on empty space to the right */
.upload-page-shell .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image,
.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image {
    flex: 0 1 auto;
    order: 10;
    width: fit-content !important;
    min-width: 0;
    max-width: 100%;
    align-self: flex-start;
    height: auto !important;
    min-height: 4.75rem;
    max-height: none;
    margin-top: 0.25rem;
    border-radius: var(--modern-rounded-sm, 8px);
}

.upload-page-shell .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image img,
.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 9rem;
    min-height: 3.25rem;
    object-fit: contain;
    object-position: left center;
    display: block;
    margin: 0;
    border-radius: 6px;
}

/* .txt file: same shell as image zone — doc tile + remove */
.upload-page-shell .file-upload-txt-zone .file-upload-preview-main-row,
.upload-modal-body .file-upload-txt-zone .file-upload-preview-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0.5rem 0.75rem;
}

.upload-page-shell .file-upload-txt-zone .file-upload-preview-thumb-slot.has-file,
.upload-modal-body .file-upload-txt-zone .file-upload-preview-thumb-slot.has-file {
    flex: 0 1 auto;
    order: 10;
    width: fit-content !important;
    max-width: 100%;
    align-self: flex-start;
    min-width: 5.5rem;
    min-height: 4.75rem;
    height: auto !important;
    margin-top: 0.25rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    border-radius: var(--modern-rounded-sm, 8px);
    border: 1px solid var(--surface-border);
    background: rgba(0, 0, 0, 0.25);
}

.upload-page-shell .file-upload-txt-zone .file-upload-doc-preview,
.upload-modal-body .file-upload-txt-zone .file-upload-doc-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: 4.25rem;
    padding: 0.65rem 1rem;
    box-sizing: border-box;
}

.upload-page-shell .file-upload-txt-zone .file-upload-doc-preview i,
.upload-modal-body .file-upload-txt-zone .file-upload-doc-preview i {
    font-size: 2.15rem;
    color: var(--primary-color);
    filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.25));
}

/* Upload: .txt + preview image — same row, matched height */
.upload-files-pair {
    align-items: stretch;
}

.upload-files-pair .upload-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.upload-files-pair .upload-grid-cell > .file-upload-preview-zone {
    flex: 1 1 auto;
    min-height: 5.85rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .upload-files-pair .upload-grid-cell > .file-upload-preview-zone {
        min-height: 5.25rem;
    }
}

.upload-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    align-items: stretch;
}

.upload-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.upload-grid-fill {
    flex: 1 1 auto;
    min-height: 6.75rem;
    box-sizing: border-box;
}

.upload-grid-cell .cyber-input.upload-grid-fill {
    min-height: 6.75rem;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

.upload-title-input-match {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Autogrow textareas: override fixed .cyber-input height; balanced vertical padding */
textarea.cyber-input.js-autogrow {
    height: auto !important;
    min-height: 0;
    resize: none;
    overflow-y: hidden;
    max-height: 16rem;
    line-height: 1.35;
    padding: 0.55rem 1rem;
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

.file-upload-preview-zone.upload-grid-fill {
    min-height: 6.75rem;
    flex: 1 1 auto;
}

.resource-current-screenshot {
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.2);
}

.resource-current-screenshot-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.resource-current-screenshot img {
    max-height: 150px;
    border-radius: 4px;
    display: block;
}

@media (max-width: 640px) {
    .upload-page-grid {
        grid-template-columns: 1fr;
    }

    .upload-grid-fill,
    .upload-grid-cell .cyber-input.upload-grid-fill,
    .file-upload-preview-zone.upload-grid-fill {
        min-height: 5.5rem;
    }
}

/* Cards & Containers */
.cyber-card {
    background-color: var(--surface-color);
    border: 1px solid var(--surface-border);
    position: relative;
    padding: 2rem;
    margin-bottom: 2rem;
    max-width: 100%;
    /* Prevent overflow */
    overflow: hidden;
    /* Contain content */

    @media (max-width: 768px) {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Profile Badges tab: match site-wide username-tag / avatar hover (pop-out past card edge) */
.cyber-card:has(#tab-achievements.active) {
    overflow: visible;
}

/*
 * File/resource detail: outer top aligns with list filter *chips* (see --toolbar-chip-inset-top);
 * inner padding matches .file-item (0.6rem top).
 */
.cyber-card.detail-main-card {
    margin-top: var(--toolbar-chip-inset-top);
    margin-bottom: 0.75rem;
    min-width: 0;
    max-width: 100%;
    /* Let toolbar/header chips use translateY on hover without clipping (see .header-actions). */
    overflow: visible;
    padding-top: var(--detail-card-pad-top);
    padding-right: var(--detail-card-pad-x);
    padding-bottom: var(--detail-card-pad-bottom);
    padding-left: var(--detail-card-pad-x);
}

/* Same gap below header band as under .page-toolbar-row on Files/Resources (before list body). */
.cyber-card.detail-main-card > .file-view-header {
    margin-bottom: var(--page-toolbar-row-gap);
}

.cyber-card.detail-main-card > .resource-detail-unified-card {
    margin-top: 0;
    margin-bottom: var(--detail-inner-section-gap);
}

.cyber-card.detail-main-card > .resource-detail-unified-card:last-child {
    margin-bottom: 0;
}

.cyber-card.detail-main-card .detail-inline-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: var(--detail-inner-section-gap);
}

@media (max-width: 768px) {
    .cyber-card.detail-main-card {
        margin-top: var(--toolbar-chip-inset-top);
        padding: 0.65rem 1rem 1.25rem;
        margin-bottom: 0.5rem;
    }
}

/* Second panel: major break like toolbar row → list on index (same --page-toolbar-row-gap). */
.page-toolbar-page > .file-discussion-shell {
    margin-top: var(--page-toolbar-row-gap);
    padding: 0.65rem var(--detail-card-pad-x) 0.85rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .page-toolbar-page > .file-discussion-shell {
        padding-top: 0.65rem;
    }
}

/* Resource detail H1: category glyph = same as list rows on /resources */
.resource-detail-title-caticon {
    color: var(--text-secondary);
    opacity: 0.85;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Decorative corner markers */
.cyber-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--corner-line-color);
    border-left: 1px solid var(--corner-line-color);
}

.cyber-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid var(--corner-line-color);
    border-right: 1px solid var(--corner-line-color);
}

/* Normal Turnstile is 300px wide; .cyber-card + .auth-modal .modal-body horizontal padding used to leave ~298px — too tight. */
.auth-box {
    max-width: 28rem;
    margin: 2rem auto;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
    position: relative;
    overflow: visible;

    @media (max-width: 768px) {
        max-width: 100%;
        margin: 0.5rem 0;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

.turnstile-wrapper {
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Tight frame around the real widget — avoid tall empty padding inside the green border. */
.turnstile-container {
    padding: 4px 6px;
    background: rgba(0, 255, 157, 0.03);
    border: 1px solid rgba(0, 255, 157, 0.2);
    border-radius: var(--radius);
    position: relative;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.05);
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
}

/* Normal managed widget: 300×65px (+ footer links). No flex — breaks Cloudflare layout. */
.cf-turnstile {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    min-height: 65px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.cf-turnstile iframe {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

.turnstile-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--accent-color);
    border-left: 1px solid var(--accent-color);
}

.turnstile-container::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-bottom: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
}

/* High-Density File List */
.file-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    /* Tighter gap */
}

/* Shared row shell: file rows, forum categories, forum topic list */
.file-item,
a.forum-category-card,
.forum-topic-list-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--surface-border);
    padding: 0.6rem 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(5px);
    margin-bottom: 0.2rem;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

a.forum-category-card {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.forum-category-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.forum-category-list {
    display: grid;
    gap: 0.5rem;
}

.forum-category-list a.forum-category-card {
    margin-bottom: 0;
}

.forum-topic-list-card {
    margin-bottom: 0 !important;
}

/* Admin bulk-select: checkbox column + main hit area side by side */
.forum-topic-list-card:has(> .list-bulk-checkbox-cell) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.35rem;
}

.forum-topic-list-card:has(> .list-bulk-checkbox-cell) .forum-topic-list-card-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {

    .file-item,
    a.forum-category-card,
    .forum-topic-list-card {
        padding: 0.5rem;
    }

    .file-item {
        flex-wrap: wrap;
    }
}

/* Filter + primary action row (Files, Resources) */
.page-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--page-toolbar-row-gap);
    flex-wrap: nowrap;
    gap: 0.55rem;
    min-height: var(--page-toolbar-band-min-height);
    overflow: visible;
    /* Stack above list cards so chip hover lift + shadow stay visible */
    position: relative;
    z-index: 5;
}

.page-toolbar-row > .btn.btn-toolbar,
.page-toolbar-row > a.btn.btn-toolbar,
.page-toolbar-row > .forum-index-actions {
    flex-shrink: 0;
}

/* Category page band — Discussions index uses .page-toolbar-row like Files/Resources */
.forum-cat-head {
    min-height: var(--page-toolbar-band-min-height);
}

.forum-category-card-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.forum-category-card-body {
    min-width: 0;
}

.forum-category-card-title {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    line-height: 1.25;
}

.forum-category-card-desc {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    line-height: 1.35;
}

.forum-last-reply-topic {
    max-width: min(100%, 18rem);
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
}

.forum-last-reply-topic-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 14rem;
}

/* Unified bulk-select column (files, resources, forum lists) — admin only in templates */
.list-bulk-checkbox-cell {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 0.35rem 0 0;
    z-index: 4;
    position: relative;
}

.list-bulk-checkbox-cell label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

/* Cyber Corners for File Items */
.file-item::before,
a.forum-category-card::before,
.forum-topic-list-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--corner-line-color);
    border-left: 1px solid var(--corner-line-color);
    pointer-events: none;
}

.file-item::after,
a.forum-category-card::after,
.forum-topic-list-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid var(--corner-line-color);
    border-right: 1px solid var(--corner-line-color);
    pointer-events: none;
}

/* Minimalist Action Buttons (Admin) */

.action-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    font-size: 1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.action-icon-btn:hover {
    transform: scale(1.1);
    color: var(--primary-color);
}

.action-icon-btn.approve:hover {
    color: var(--primary-color);
}

.action-icon-btn.delete:hover {
    color: var(--error-color);
}

.file-item:hover,
a.forum-category-card:hover,
.forum-topic-list-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Full-card <a>: global a:hover sets text-shadow: var(--glow); shadow inherits to title/icons */
a.forum-category-card:hover {
    color: inherit;
    text-shadow: none;
    position: relative;
    z-index: 6;
}

a.forum-category-card:focus {
    outline: none;
}

a.forum-category-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
    position: relative;
    z-index: 6;
}

.file-title {
    font-family: var(--font-mono);
    font-size: 1rem;
    /* Slightly smaller */
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Allow wrapping on narrow screens */
    max-width: 100%;
    /* Prevent overflow */
    min-width: 0;
    /* Critical for flexbox overflow prevention */
    overflow: hidden;
    /* Contain content */
}

.file-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    line-height: normal;
    padding: 6px 0;
    overflow: visible !important;
    flex-wrap: wrap;
    /* Allow wrapping for narrow views */
    width: 100%;
    /* Ensure metadata takes full width */
}

/* Keep author/meta row aligned with title start in file/resource list cards. */
.file-item .file-meta,
.resource-item .file-meta {
    padding-left: 0 !important;
}

.file-content-layout {
    --file-panel-max-height: 62vh;
    --file-panel-max-height: 62dvh;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    height: auto;
    max-height: none;
    min-height: 0;
}

.file-content-layout--compact {
    height: auto;
    max-height: none;
}

.file-content-layout--compact .file-content-shell {
    overflow: visible;
}

.file-content-layout--compact .file-content-area {
    overflow-y: visible;
}

.file-content-shell {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.42rem;
    min-height: 0;
    display: flex;
    max-height: var(--file-panel-max-height);
    overflow: hidden;
}

.file-content-layout .file-content-area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--file-panel-max-height) - 0.84rem);
}

.file-domain-stats-sidebar {
    flex: 0 0 240px;
    max-width: 240px;
    max-height: var(--file-panel-max-height);
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-domain-stats-head {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.file-domain-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 0.15rem;
}

.file-domain-stats-item {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.2rem 0.42rem;
}

.file-domain-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-domain-count {
    color: var(--primary-color, #00ff9d);
    font-weight: 700;
}

.file-domain-stats-empty {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

@media (max-width: 980px) {
    .file-content-layout {
        flex-direction: column;
        align-items: stretch;
        max-height: none;
    }
    .file-content-shell {
        width: 100%;
        max-width: 100%;
    }
    .file-content-layout .file-content-area {
        width: 100%;
    }
    .file-domain-stats-sidebar {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .file-domain-stats-list {
        max-height: 260px;
        flex: 0 0 auto;
    }

    .header-actions.detail-actions-compact .btn {
        flex: 0 0 auto;
    }
}

.telemetry-pod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    height: 20px;
    box-sizing: border-box;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Grouped Telemetry Styling */
.telemetry-group {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    /* Removed overflow: hidden to allow avatars to pop out if they are inside, 
       though they are usually siblings. Added flex-shrink: 0 to keep counters readable. */
    overflow: visible;
    height: 20px;
    flex-shrink: 0;
}

.telemetry-group .telemetry-pod {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 8px;
    height: 100% !important;
    position: relative;
}

.telemetry-group .telemetry-pod:not(:last-of-type) {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.telemetry-group .telemetry-pod.file-price-pod .price-amount {
    color: var(--primary-color);
    font-weight: 600;
}

.telemetry-group .telemetry-pod.file-price-pod i {
    color: var(--primary-color);
}

.telemetry-pod i {
    font-size: 0.75rem;
}

/* Directory listing category chip: same wording as filter tabs, no forced caps */
.file-meta .category-badge.telemetry-pod,
.resource-item .category-badge.telemetry-pod,
.category-badge.telemetry-pod {
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: normal;
}

/* Resource / detail: category chip must match sibling .telemetry-pod + .telemetry-group (20px shell, same radius). */
.file-meta a.category-badge.telemetry-pod.forum-topic-category-pill,
.resource-item a.category-badge.telemetry-pod.forum-topic-category-pill,
.forum-topic-list-card-category-row a.telemetry-pod.forum-topic-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    /* Match standalone .telemetry-pod shell (anchors otherwise pick up global link color / border feel). */
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    line-height: 1;
    padding: 0 7px;
    -webkit-tap-highlight-color: transparent;
    /* Same 6px shell as .telemetry-group in meta rows (not 8px “experiment” below). */
    border-radius: 6px !important;
}

.forum-topic-list-card-category-row a.telemetry-pod.forum-topic-category-pill i,
.file-meta a.category-badge.telemetry-pod.forum-topic-category-pill i,
.resource-item a.category-badge.telemetry-pod.forum-topic-category-pill i {
    font-size: 0.75rem;
    line-height: 1;
}

.telemetry-pod .fa-level-up-alt {
    color: var(--text-secondary) !important;
}

.telemetry-pod.bump-time-pod,
.file-meta .telemetry-pod[title^="Bumped at"] {
    color: var(--text-secondary) !important;
}

.telemetry-pod.clickable {
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
}

.telemetry-pod.clickable:hover {
    background: rgba(0, 255, 157, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
    transform: translateY(-1px);
    position: relative;
    z-index: 2;
}

.file-item:hover .telemetry-pod,
a.forum-category-card:hover .telemetry-pod,
.forum-topic-list-card:hover .telemetry-pod {
    border-color: rgba(255, 255, 255, 0.05);
}

.file-item:hover .telemetry-group,
a.forum-category-card:hover .telemetry-group,
.forum-topic-list-card:hover .telemetry-group {
    border-color: rgba(255, 255, 255, 0.08);
}

.file-item.is-read,
.forum-topic-list-card.is-read {
    border-color: rgba(255, 255, 255, 0.08);
}

.file-item.is-read .view-file-btn,
.file-item.is-read .view-item-btn,
/* Dim only the topic title text — prefix chips keep full color (opacity on parent would fade them). */
.forum-topic-list-card.is-read .forum-topic-list-heading-text {
    opacity: 0.75;
}

/*
 * Bottom-left notifications: #ulp-corner-dock pins live toasts + sticky site card to the real viewport corner
 * (flex column-reverse → toast stack touches the bottom edge; sticky card stacks above).
 * .flashes = legacy fallback when realtime.js is absent (still fixed).
 */
#ulp-corner-dock {
    position: fixed;
    left: max(1.25rem, env(safe-area-inset-left));
    bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    z-index: 2147483647;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--ulp-corner-stack-gap);
    width: fit-content;
    max-width: var(--ulp-corner-stack-max);
    pointer-events: none;
    box-sizing: border-box;
}

/* Inside the dock, children participate in flex — no second fixed bottom offset */
#ulp-corner-dock #toast-container {
    position: static;
    left: auto;
    bottom: auto;
    z-index: auto;
}

#toast-container {
    position: fixed;
    bottom: var(--ulp-corner-stack-bottom);
    left: max(1.25rem, env(safe-area-inset-left));
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: var(--ulp-corner-stack-gap);
    align-items: flex-start;
    width: fit-content;
    max-width: var(--ulp-corner-stack-max);
    pointer-events: none;
}

.flashes {
    position: fixed;
    bottom: var(--ulp-corner-stack-bottom);
    left: max(1.25rem, env(safe-area-inset-left));
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: var(--ulp-corner-stack-gap);
    align-items: flex-start;
    width: fit-content;
    max-width: var(--ulp-corner-stack-max);
    pointer-events: none;
}

/* Shared card shell */
#toast-container .realtime-toast,
.flash-message,
.ulp-site-banner-card {
    pointer-events: auto;
    box-sizing: border-box;
    width: fit-content;
    max-width: var(--ulp-corner-toast-max);
    /* No min-width — short one-line toasts stay compact; max-width still caps long copy. */
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--ulp-corner-toast-radius);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(8, 18, 14, 0.96), rgba(6, 10, 12, 0.97));
    color: var(--text-primary, #fff);
    font-family: var(--font-main, 'Inter', sans-serif);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.35;
    font-size: 0.9rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex: 0 1 auto;
    align-self: flex-start;
}

#toast-container .realtime-toast {
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Legacy flash row (createFlash / banned users): default “system” chrome */
.flash-message {
    border: 1px solid rgba(0, 255, 157, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 255, 157, 0.14);
    animation: slideInLeft 0.3s ease-out forwards;
}

.flash-message .icon {
    font-size: 1.45rem;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--primary-color, #00ff9d);
}

.flash-message__body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.flash-message.error,
.flash-message.danger {
    border-color: rgba(255, 107, 107, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 107, 107, 0.2);
}

.flash-message.error .icon,
.flash-message.danger .icon {
    color: #ff6b6b;
}

.flash-message.success {
    border-color: rgba(46, 213, 115, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(46, 213, 115, 0.2);
}

.flash-message.success .icon {
    color: #2ed573;
}

.flash-message.warning {
    border-color: rgba(255, 165, 2, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 165, 2, 0.2);
}

.flash-message.warning .icon {
    color: #ffa502;
}

.flash-message.info {
    border-color: rgba(116, 185, 255, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(116, 185, 255, 0.2);
}

.flash-message.info .icon {
    color: #74b9ff;
}

#toast-container .realtime-toast > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

/* Sticky site-wide announcement banner (dismissible per browser). */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Sticky site card host: positioned by #ulp-corner-dock flex (above toast stack); same shell as .realtime-toast */
.ulp-site-banner-host {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    pointer-events: none;
    width: fit-content;
    max-width: var(--ulp-corner-stack-max);
    flex-shrink: 0;
}

.ulp-site-banner-host .ulp-site-banner-card {
    pointer-events: auto;
}

/* Extra chrome aligned with default “system” toast border + glow (see toneMap.system in realtime.js) */
.ulp-site-banner-card {
    border: 1px solid rgba(0, 255, 157, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 255, 157, 0.14);
    transform: translateX(-110%);
    opacity: 0;
    transition:
        opacity 0.32s ease,
        transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.ulp-site-banner-card--in {
    opacity: 1;
    transform: translateX(0);
}

.ulp-corner-toast-iconCol {
    font-size: 1.45rem;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--primary-color, #00ff9d);
    line-height: 1;
}

.ulp-corner-toast-textCol {
    flex: 1;
    min-width: 0;
}

.ulp-site-banner-title {
    font-weight: 800;
    font-size: 0.98rem;
    margin-bottom: 4px;
    color: var(--primary-color, #00ff9d);
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.ulp-site-banner-msg {
    font-size: 0.9rem;
    line-height: 1.35;
    opacity: 0.92;
    color: var(--text-primary, #fff);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ulp-corner-toast-close {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary, #c7c7c7);
    cursor: pointer;
    font-size: 0.8rem;
    align-self: flex-start;
}

.ulp-corner-toast-close:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary, #fff);
}

@media (max-width: 520px) {
    #ulp-corner-dock {
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        width: auto;
        max-width: none;
    }

    .ulp-site-banner-host {
        width: 100%;
        max-width: none;
    }

    .ulp-site-banner-host .ulp-site-banner-card {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Footer */
footer {
    text-align: center;
    padding: 1.3rem 2rem 2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    border-top: none;
    font-family: var(--font-mono);
    margin-top: 0;
}

#site-footer-wrapper {
    position: relative;
    margin-top: 1.2rem;
}

#site-footer-wrapper::before {
    content: "";
    display: block;
    width: min(340px, 62vw);
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 255, 157, 0.38), rgba(0, 0, 0, 0));
}

/* Unified pagination across feed/resources/profile */
.site-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.site-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.site-page-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.28);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.35);
}

.site-page-btn.active {
    border-color: var(--primary-color);
    color: #00140d;
    background: linear-gradient(180deg, rgba(0, 255, 157, 0.95), rgba(0, 255, 157, 0.78));
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.25);
}

.site-page-dots {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    opacity: 0.8;
    padding: 0 0.2rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.site-page-dots:hover {
    opacity: 1;
    color: var(--primary-color);
}

/* Page jump popover — compact dialog; Go uses site primary (green), never .btn-secondary / accent cyan */
.page-jump-popover {
    display: none;
    position: fixed;
    z-index: 2147483640;
    transform: translate(-50%, calc(-100% - 10px));
    pointer-events: none;
}

.page-jump-popover.active {
    pointer-events: auto;
}

.page-jump-popover-inner {
    position: relative;
    background: var(--surface-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.65rem 0.72rem 0.7rem;
    min-width: 200px;
    max-width: min(94vw, 260px);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.35);
    animation: page-jump-popover-in 0.16s ease-out;
}

@keyframes page-jump-popover-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-jump-popover-inner::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--surface-color);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.page-jump-popover-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0 0 0.28rem;
    line-height: 1.2;
}

.page-jump-popover-range {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.page-jump-popover-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.page-jump-popover-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.42);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    box-sizing: border-box;
}

.page-jump-popover-input::placeholder {
    color: rgba(198, 210, 226, 0.45);
}

.page-jump-popover-input:focus {
    outline: none;
    border-color: rgba(0, 255, 157, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.12);
}

/* Primary CTA — same family as .site-page-btn.active (no cyan .btn-secondary) */
.page-jump-popover .page-jump-popover-go {
    margin: 0;
    height: 34px;
    min-width: 3rem;
    padding: 0 0.62rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--primary-color);
    color: #00140d;
    background: linear-gradient(180deg, rgba(0, 255, 157, 0.95), rgba(0, 255, 157, 0.78));
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.22);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.page-jump-popover .page-jump-popover-go:hover {
    background: linear-gradient(180deg, rgba(0, 255, 157, 1), rgba(0, 255, 157, 0.88));
    box-shadow: 0 0 16px rgba(0, 255, 157, 0.38);
}

.page-jump-popover .page-jump-popover-go:active {
    transform: scale(0.97);
}

.page-jump-popover .page-jump-popover-go .page-jump-popover-go-label {
    position: relative;
    top: 0.5px;
}

.page-jump-popover .page-jump-popover-go i {
    font-size: 0.68rem;
    opacity: 0.9;
    color: inherit;
}

.page-jump-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483639;
    background: rgba(0, 0, 0, 0.35);
}

.profile-pagination .site-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 0.5rem;
}

/* Utils */
.text-center {
    text-align: center;
}

.text-error {
    color: var(--error-color) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.mb-4 {
    margin-bottom: 0.8rem;
}

.w-100 {
    width: 100%;
}

.icon {
    margin-right: 0.5rem;
}

/* Username Styling */
.username-tag {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none !important;
    transition: all 0.2s;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.12rem;
    text-transform: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    height: 24px;
    /* Tight chip: less padding right of nick (esp. vs old hover bump + 6px symmetric) */
    padding: 0 3px 0 4px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible !important;
    /* Allow avatar to pop out if specifically desired, but align box by default */
    margin-left: 0;
    margin-right: 2px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy transition */
    vertical-align: middle;
    /* Column flex parents default align-items: stretch — chip was full cell width with empty space right of short nicks */
    align-self: flex-start;
}

/* Row meta bars: keep vertical centering with siblings (override align-self above) */
.file-meta > a.username-tag,
.discussion-message-header > a.username-tag,
.forum-post-header a.forum-user-tag,
.forum-topic-meta-person .username-tag,
.forum-category-card-meta .username-tag,
.profile-identity-name-row .username-tag,
.chat-msg-author.username-tag,
.notification-content .username-tag,
.nav-btn-profile.username-tag {
    align-self: center;
}

.username-tag .user-avatar-circle {
    margin-left: 0 !important;
    /* Reset inside tag because tag has its own margin */
}

.notification-content,
.comment-content {
    vertical-align: middle;
    line-height: 1.6;
}

.username-tag.admin {
    background: linear-gradient(145deg, rgba(255, 80, 120, 0.14), rgba(255, 51, 102, 0.07));
    border-color: rgba(255, 51, 102, 0.22);
    color: var(--error-color) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 51, 102, 0.06);
}

.username-tag.moderator {
    background: linear-gradient(145deg, rgba(0, 255, 180, 0.12), rgba(0, 255, 157, 0.06));
    border-color: rgba(0, 255, 157, 0.22);
    color: var(--primary-color) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 255, 157, 0.06);
}

.username-tag.vip {
    background: linear-gradient(
        135deg,
        rgba(255, 236, 180, 0.24) 0%,
        rgba(245, 197, 66, 0.14) 42%,
        rgba(120, 75, 25, 0.18) 100%
    );
    border-color: rgba(255, 210, 120, 0.55);
    color: #fff0c8 !important;
    text-shadow:
        0 0 12px rgba(255, 200, 90, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(245, 197, 66, 0.1);
}

.username-tag.admin:hover {
    background: linear-gradient(145deg, rgba(255, 80, 120, 0.2), rgba(255, 51, 102, 0.1));
    border-color: rgba(255, 51, 102, 0.32);
}

.username-tag.moderator:hover {
    background: linear-gradient(145deg, rgba(0, 255, 180, 0.16), rgba(0, 255, 157, 0.09));
    border-color: rgba(0, 255, 157, 0.32);
}

.username-tag.vip:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 244, 210, 0.3) 0%,
        rgba(245, 197, 66, 0.2) 45%,
        rgba(150, 95, 35, 0.2) 100%
    );
    border-color: rgba(255, 224, 150, 0.7);
}

/* Role-colored rings on inline avatars (aligned with .group-badge-pile framing) */
.username-tag.admin .user-avatar-circle {
    border-color: rgba(255, 51, 102, 0.88);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.username-tag.moderator .user-avatar-circle {
    border-color: rgba(0, 255, 157, 0.78);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.username-tag.vip .user-avatar-circle {
    border-color: rgba(255, 224, 150, 0.9);
    box-shadow:
        0 0 0 1px rgba(245, 197, 66, 0.35),
        0 2px 8px rgba(245, 197, 66, 0.22);
}

.username-tag.user .user-avatar-circle {
    border-color: rgba(148, 163, 184, 0.58);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Alerts & Navbar Profile Pod Harmonization */
.nav-btn-profile.username-tag {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 0.85rem !important;
    margin-top: 0 !important;
    align-self: center !important;
    /* Inherit vibrant background/border from global .username-tag */
}

.notification-item {
    overflow: visible !important;
}

.notification-content {
    overflow: visible !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.username-tag:not(.admin):not(.moderator):not(.vip):hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.username-tag.admin:hover,
.username-tag.moderator:hover,
.username-tag.vip:hover {
    box-shadow: 0 0 8px -2px currentColor;
    /* Glow matches role color */
    text-shadow: 0 0 5px currentColor;
    /* Text glow effect */
}

.username-tag i {
    font-size: 0.75rem;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Verified-slot sizing above must not apply to Font Awesome inside group badges (breaks centering in 24px circle). */
.username-tag .group-badge i {
    width: auto;
    min-width: 0;
    max-width: none;
    font-size: 0.82rem;
    line-height: 1;
    display: block;
    flex-shrink: 0;
}

.username-tag .verified-badge {
    color: var(--primary-color);
    margin-left: 2px;
    width: auto;
    font-size: 0.78rem;
    text-shadow: 0 0 6px rgba(0, 255, 157, 0.35);
}

.mention {
    display: inline-flex;
    align-items: center;
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-weight: 700;
    background-color: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.22);
    padding: 1px 6px;
    border-radius: 6px;
    text-decoration: none !important;
    line-height: 1.2;
}

.mention-link {
    white-space: nowrap;
}

.chat-context-menu {
    position: fixed;
    z-index: 12000;
    min-width: 180px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--surface-border);
    background: rgba(10, 10, 15, 0.97);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.chat-context-menu.hidden {
    display: none;
}

.chat-context-action {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: left;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.chat-context-action:hover {
    border-color: rgba(0, 255, 157, 0.25);
    background: rgba(0, 255, 157, 0.08);
    color: var(--primary-color);
}

.chat-context-action.danger:hover {
    border-color: rgba(255, 71, 87, 0.25);
    background: rgba(255, 71, 87, 0.1);
    color: var(--error-color);
}

.chat-msg {
    position: relative;
}

.chat-msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    min-width: 0;
}

.chat-msg-author {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.chat-msg-author-wrap {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    gap: 4px;
}

.chat-msg-author-sep {
    color: var(--text-secondary);
    opacity: 0.85;
    font-family: var(--font-mono);
    font-weight: 700;
    flex-shrink: 0;
}

.chat-msg-time-inline {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    opacity: 0.9;
    flex-shrink: 0;
    margin-left: 0;
    width: auto;
    min-width: 0;
    padding: 0 8px;
    justify-content: center;
    cursor: default;
}

.chat-msg-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
}

.chat-msg-controls {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.chat-msg-control-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.chat-msg-control-btn:hover {
    color: var(--accent-color);
    background: rgba(0, 255, 157, 0.08);
}

.chat-msg-control-btn.danger:hover {
    color: var(--error-color);
    background: rgba(255, 71, 87, 0.08);
}

.chat-msg-body {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    padding: 0;
}

/* Let long tokens (URLs, hashes) use remaining first-line space in chat. */
.chat-msg .comment-content,
.chat-msg .comment-content .external-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-msg .comment-content .external-link {
    word-break: normal;
    white-space: normal;
    display: inline;
    line-break: anywhere;
}

.chat-msg-edited {
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.35), 0 0 14px rgba(0, 255, 157, 0.14);
}

.mention:hover {
    text-decoration: none;
    background-color: rgba(0, 255, 157, 0.15);
    color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.mention.admin {
    color: var(--error-color);
    text-shadow: 0 0 5px rgba(255, 51, 102, 0.4);
}

.mention.admin {
    background-color: rgba(255, 51, 102, 0.05);
}

.mention.admin:hover {
    background-color: rgba(255, 51, 102, 0.15);
    color: var(--error-color);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}

.mention.moderator {
    color: var(--primary-color);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.4);
}

.mention.moderator {
    background-color: rgba(0, 255, 157, 0.05);
}

.mention.moderator:hover {
    background-color: rgba(0, 255, 157, 0.15);
    color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

.mention.user {
    color: var(--text-primary);
    /* Ordinary color */
    text-shadow: none;
    /* No glow */
}

.mention.user:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* File Title Link Styling */
.file-title .view-file-btn {
    font-weight: 500;
    transition: all 0.2s;
    padding: 0 4px;
    border-radius: 4px;
    margin-left: -4px;
    /* Offset the padding */
    overflow-wrap: anywhere;
    /* Allow breaking long words */
    word-break: break-word;
    /* Break long words */
    max-width: 100%;
    /* Prevent overflow */
    display: inline-block;
    /* Allow width constraints */
}

.file-title .view-file-btn:hover {
    color: var(--primary-color);
    text-shadow: var(--glow);
    background-color: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

/* Drag and Drop Overlay */
#drop-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
    border: 3px dashed var(--accent-color);
    pointer-events: none; /* prevent overlay's own children from generating extra drag events */
}

.drop-message {
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 2rem;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.upload-loading {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 2000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* File Viewer Lines */
.file-content-area {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    /* Spacing after header comes from .file-view-header margin-bottom (matches list toolbar gap). */
    margin-top: 0;
    max-height: var(--file-panel-max-height, 62dvh);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;

    @media (max-width: 768px) {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        width: calc(100% + 1rem);
        border-radius: 0;
    }
}

/* Detail card: keep file body inset with card padding (no edge bleed on small screens) */
@media (max-width: 768px) {
    .cyber-card.detail-main-card .file-content-area {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-radius: var(--radius);
    }
}

.line-row {
    padding: 0 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    /* Preserve spaces/tabs; break long tokens so the page does not grow wider than the viewport */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    margin-bottom: 4px;
    line-height: 1.35;
    height: 22px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.line-row-truncated {
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.line-row-truncated-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    border-radius: inherit;
    padding: 0 0.45rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary) !important;
    border: 1px solid transparent;
    background: transparent;
    appearance: none;
    height: 22px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 400;
}

.line-row-truncated-link > i {
    flex: 0 0 auto;
}

.line-row-truncated-link > span,
.line-row-truncated-link {
    min-width: 0;
}

.line-row-truncated:hover,
.line-row-truncated-link:hover,
.line-row-truncated-link:focus,
.line-row-truncated-link:focus-visible {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.35);
    color: var(--primary-color, #00ff9d);
    text-decoration: none;
    outline: none;
    box-shadow: none;
    border-radius: 6px;
}

.line-row-truncated:hover .line-row-truncated-link,
.line-row-truncated-link:hover,
.line-row-truncated-link:focus,
.line-row-truncated-link:focus-visible {
    color: var(--primary-color, #00ff9d) !important;
}

.line-row:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

/* Narrow screens: keep file lines single-row with ellipsis (no 2-line wrapping). */
@media (max-width: 768px) {
    .line-row {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/*
 * File body CTAs: same single-line row as .line-row (22px, ellipsis). Not tall toolbar buttons.
 */
.file-content-area .file-content-cta-wrap {
    width: 100%;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.file-content-area a.file-content-cta,
.file-content-area button.file-content-cta {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 0.45rem !important;
    gap: 0.4rem !important;
    margin: 0 !important;

    font-family: var(--font-mono) !important;
    font-size: 0.76rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    color: var(--text-secondary) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        box-shadow 0.15s ease, text-shadow 0.15s ease !important;
}

.file-content-area .file-content-cta > span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.file-content-area a.file-content-cta:hover,
.file-content-area button.file-content-cta:hover {
    background: rgba(0, 255, 157, 0.16) !important;
    border-color: rgba(0, 255, 157, 0.55) !important;
    color: var(--primary-color, #00ff9d) !important;
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.22), inset 0 0 0 1px rgba(0, 255, 157, 0.12) !important;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.35) !important;
    transform: none !important;
}

.file-content-area a.file-content-cta:hover i,
.file-content-area a.file-content-cta:hover .icon,
.file-content-area button.file-content-cta:hover i,
.file-content-area button.file-content-cta:hover .icon {
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.45)) !important;
}

.file-content-area a.file-content-cta:focus-visible,
.file-content-area button.file-content-cta:focus-visible {
    outline: 2px solid rgba(0, 255, 157, 0.45);
    outline-offset: 2px;
}

.file-content-area .file-content-cta i,
.file-content-area .file-content-cta i.icon,
.file-content-area .file-content-cta .icon {
    color: inherit !important;
    filter: none !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* VIP long copy: same row; ellipsis if it overflows */
.file-content-area .file-content-cta.file-content-cta--sentence {
    font-weight: 400 !important;
}

/* Notification Badge */
.notification-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005;
    overflow: visible;
    /* Ensure clickability over bridge */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/*
 * Unified count pills: same shell + corner anchor (header icons + VIP filter tab).
 * VIP filter chip lives in the same scroll row as other category chips; badge is inset so overflow does not clip.
 */
.notification-badge,
.filter-chip__badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(46%, -46%);
    z-index: 3;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
    pointer-events: none;
    background: linear-gradient(
        165deg,
        rgba(0, 255, 157, 0.26) 0%,
        rgba(0, 255, 157, 0.12) 45%,
        rgba(0, 200, 120, 0.16) 100%
    );
    color: #cfffec;
    border-color: rgba(0, 255, 157, 0.42);
    box-shadow:
        0 0 0 1px rgba(18, 18, 18, 0.92),
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(0, 255, 157, 0.18);
}

/* VIP tab: circle badge kept inside chip bounds (same row as All/Free/Paid — no corner hang / overlap) */
.filter-chip.filter-chip--vip .filter-chip__badge {
    z-index: 1;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.46rem;
    font-weight: 800;
    line-height: 1;
    top: 3px;
    right: 3px;
    transform: none;
    box-sizing: border-box;
}

.nav-btn-icon:hover .notification-badge,
.notification-trigger:hover .notification-badge {
    color: #eafff6;
    border-color: rgba(0, 255, 157, 0.52);
    box-shadow:
        0 0 0 1px rgba(18, 18, 18, 0.92),
        0 1px 4px rgba(0, 0, 0, 0.38),
        0 0 10px rgba(0, 255, 157, 0.22);
}

.nav-btn-vip .notification-badge {
    /* If a badge is ever added to the VIP header link, keep the same unified pill */
    background: linear-gradient(
        165deg,
        rgba(0, 255, 157, 0.26) 0%,
        rgba(0, 255, 157, 0.12) 45%,
        rgba(0, 200, 120, 0.16) 100%
    );
    border-color: rgba(0, 255, 157, 0.42);
    color: #cfffec;
}

/* Alerts: hover + focus-within. Wrapper ignores hits so wide box does not steal clicks from header icons beside the bell. */
.notification-container {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10200;
    box-sizing: border-box;
    padding-bottom: 12px;
    margin-bottom: -12px;
    cursor: pointer;
}

/*
 * Invisible bridge bell → panel. Wrapper .notification-dropdown has pointer-events: none, so we must not
 * rely on a negative card margin (that overlapped header icons). Tall narrow strip stays under the bell only.
 */
.notification-container.notifications-open::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 56px;
    height: 48px;
    pointer-events: auto;
    z-index: 2;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    padding-top: 0;
    box-sizing: border-box;
    right: 0;
    left: auto;
    transform: none;
    width: min(520px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    z-index: 3;
    isolation: isolate;
    cursor: default;
    pointer-events: none;
}

/* Visibility is tied only to .notifications-open so a focused bell can still close the panel (touch). */
.notification-container.notifications-open .notification-dropdown {
    display: block;
    animation: notifDropdownIn 0.3s ease-out;
}

@keyframes notifDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-dropdown .cyber-card {
    pointer-events: auto;
    /* Shared grid: icon column + gap match .notification-item so title & body share one keyline */
    --notif-icon-col: 28px;
    --notif-icon-gap: 10px;
    /* Pull file-title link flush with icon column (icon width + column gap) */
    --notif-text-pull: calc(var(--notif-icon-col) + var(--notif-icon-gap));
    --notification-pad-x-left: 12px;
    --notification-pad-x-right: 14px;
    --notification-pad-y: 10px;
    /* Opaque panel: var(--surface-color) is rgba → page grid & header leak through; no backdrop blur */
    --notif-panel-bg: #151515;
    background-color: var(--notif-panel-bg);
    border: 1px solid var(--surface-border);
    /* Match global .cyber-card radius; overflow clips .notification-header square paint at the top corners */
    border-radius: var(--modern-rounded-lg, 12px) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0 24px rgba(0, 255, 157, 0.06), 0 12px 40px rgba(0, 0, 0, 0.65);
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Padding lives on header / rows / empty state so list is full width of card (hover + scrollbar align) */
.notification-dropdown-body {
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
}

.notification-dropdown-scroll {
    max-height: min(560px, calc(100vh - 160px));
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    min-width: 0;
    background: var(--notif-panel-bg);
}

.notification-header {
    min-height: 38px;
    padding: calc(var(--notification-pad-y) + 2px) var(--notification-pad-x-right) var(--notification-pad-y)
        var(--notification-pad-x-left);
    box-sizing: border-box;
    border-bottom: 1px solid var(--surface-border);
    display: grid;
    grid-template-columns: var(--notif-icon-col) minmax(0, 1fr) auto;
    column-gap: var(--notif-icon-gap);
    align-items: center;
    background: var(--notif-panel-bg);
}

/* Outer cell: same width as .icon-box column; inner chip matches .icon-box metrics (shared left edge). */
.notification-header-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--notif-icon-col);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.notification-header-icon-chip {
    width: 100%;
    max-width: var(--notif-icon-col);
    height: 22px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1;
}

.notification-header-icon-chip > i {
    display: block;
    line-height: 1;
    transform: translateY(0.5px);
}

.notification-header-title {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.65rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.notification-header.staff-alert {
    background: rgba(255, 71, 87, 0.1);
    border-bottom: 1px solid rgba(255, 71, 87, 0.2);
}

.notification-header.staff-alert .notification-header-title {
    color: var(--error-color);
    font-weight: 700;
}

.clear-all-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.65rem;
    line-height: 1.2;
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 5px 8px;
    margin-right: 0;
    border-radius: var(--radius);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.85;
}

.clear-all-btn:hover {
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.22);
    opacity: 1;
}

.notification-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    min-width: 0;
}

.notification-view-all-link {
    font-family: var(--font-mono);
    font-size: 0.73rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Taller hit area (touch-friendly); entire footer row is the link */
    padding: 0.95rem 0.85rem 1.05rem;
    min-height: 2.85rem;
    border-radius: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.notification-view-all-link:hover,
.notification-view-all-link:focus-visible {
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.08);
    outline: none;
}

.notification-list {
    max-height: none;
    overflow: visible;
    width: 100%;
    min-width: 0;
}

.notification-list > .notification-item {
    position: relative;
    z-index: 0;
    padding: calc(var(--notification-pad-y) + 1px) var(--notification-pad-x-right)
        calc(var(--notification-pad-y) + 1px) var(--notification-pad-x-left);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    display: grid;
    grid-template-columns: var(--notif-icon-col) minmax(0, 1fr);
    column-gap: var(--notif-icon-gap);
    row-gap: 0.15rem;
    align-items: start;
    transition: border-top-color 0.2s ease;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.notification-list > .notification-item:first-child {
    border-top: none;
}

.notification-list > .notification-item.clickable {
    cursor: pointer;
}

/*
 * Alert icon: circular chip (matches group-badge dots) for a consistent row silhouette.
 */
.notification-list > .notification-item > .icon-box {
    --alert-icon-glyph: 0.7rem;
    position: relative;
    /* Above .msg: links/blocks can pull left (e.g. .notif-entity-title) and steal hits on the icon’s lower half */
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 2px;
    width: var(--notif-icon-col);
    max-width: var(--notif-icon-col);
    height: var(--notif-icon-col);
    min-width: var(--notif-icon-col);
    min-height: var(--notif-icon-col);
    box-sizing: border-box;
    margin: 0;
    justify-self: start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
    flex-shrink: 0;
}

.notification-list > .notification-item > .icon-box > i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: var(--alert-icon-glyph);
    font-style: normal;
    transform: translateY(0.5px);
}

/* Flatten body into the item grid: .msg col 2 (tight to icon); .meta full width so time aligns with icon left */
.notification-list > .notification-item > .notification-item-body {
    display: contents;
}

/* Compact layout: title beside icon (row 1); details + meta span full row width */
.notification-list > .notification-item:not(:has(.notification-kicker)) > .notification-item-body > .msg {
    display: contents;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) > .notification-item-body > .msg .notif-msg-compact {
    display: contents;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) .notif-msg-compact__title {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) .notif-msg-compact__rest {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.34;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 0.08rem 0 0;
    text-align: left;
}

/* Stored HTML uses <br> between block spans — drops a blank line; hide br when stacking as flex. */
.notification-list > .notification-item .notif-msg-compact__rest br {
    display: none;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) .notif-msg-compact__rest .notif-detail {
    display: block;
    margin: 0;
    padding: 0;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) .notif-msg-compact__rest .notif-detail:first-child {
    margin-top: 0;
}

.notification-list > .notification-item .notif-ach-lead {
    color: rgba(0, 255, 157, 0.92);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.notification-list > .notification-item .notif-ach-inline-label {
    color: rgba(0, 255, 157, 0.95);
    font-weight: 700;
    font-size: 0.88em;
    letter-spacing: 0.02em;
}

.notification-list > .notification-item:has(.notification-kicker) > .notification-item-body > .msg {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
}

.notification-list > .notification-item:has(.notification-kicker) .notif-msg-compact {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    width: 100%;
    min-width: 0;
}

.notification-list > .notification-item:has(.notification-kicker) > .notification-item-body > .notification-kicker {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* Block row so the next line (file title, etc.) starts on the same left keyline as the time chip */
.notification-list > .notification-item > .notification-item-body > .msg .notif-msg-primary {
    display: block;
    margin: 0;
    padding: 0;
}

/* Like/comment lead line must stay in one visual row (nick + verb). */
.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.24rem;
    row-gap: 0.1rem;
    white-space: normal;
    overflow: visible;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-primary,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-primary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.24rem;
    white-space: normal;
    max-width: 100%;
    overflow: visible;
    line-height: 1.2;
}

.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-primary .username-tag,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-primary .username-tag {
    flex: 0 0 auto;
}

.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-primary .group-badge,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-primary .group-badge {
    flex: 0 0 auto;
}

.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title {
    display: inline;
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    line-height: inherit;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    vertical-align: baseline;
}

.notification-list > .notification-item:not(:has(.notification-kicker)) .notif-msg-compact__title .notif-msg-primary > i {
    margin-right: 0.35rem;
    opacity: 0.92;
    vertical-align: -0.06em;
}

/* Keep nickname chip metrics identical to chat/feed chips inside alerts. */
.notification-list > .notification-item .notif-msg-primary .username-tag {
    height: 24px;
    line-height: 24px;
    align-items: center;
    vertical-align: middle;
}

.notification-list > .notification-item .notif-msg-primary .username-tag.forum-user-tag,
.alerts-history-list > .notification-item .notif-msg-primary .username-tag.forum-user-tag {
    align-self: center;
}

/* Group badges inherit .group-badge-pile .group-badge (same HTML as lists/forum). Only reset FA slot width. */
.notification-list > .notification-item .notif-msg-primary .username-tag .group-badge-pile .group-badge i,
.alerts-history-list > .notification-item .notif-msg-primary .username-tag .group-badge-pile .group-badge i {
    margin-right: 0 !important;
}

.notification-list > .notification-item > .notification-item-body > .msg .username-tag,
.notification-list > .notification-item > .notification-item-body > .msg a {
    vertical-align: middle;
}

/* No global link glow inside alerts — keeps the panel calm */
.notification-list > .notification-item > .notification-item-body > .msg a {
    text-shadow: none !important;
}

.notification-list > .notification-item > .notification-item-body > .msg a:hover {
    text-shadow: none !important;
}

/* File / resource title in alerts — shared typography */
.notification-list > .notification-item > .notification-item-body > .msg a.notif-entity-title {
    display: block;
    margin: 0.32rem 0 0 0;
    padding: 0.15rem 0 0;
    text-align: left;
    line-height: 1.35;
    box-sizing: border-box;
    color: rgba(220, 228, 238, 0.94) !important;
    font-weight: 600;
    text-decoration: none !important;
}

/*
 * Legacy flat HTML only: pull title into the icon column.
 * Compact layout puts the link in .notif-msg-compact__rest (full-width row 2) — negative margin
 * would clip text past the dropdown edge (loses to higher-specificity pull without this guard).
 */
.notification-list
    > .notification-item
    > .notification-item-body
    > .msg:not(:has(.notif-msg-compact__rest))
    a.notif-entity-title {
    margin-left: calc(-1 * var(--notif-text-pull));
    width: calc(100% + var(--notif-text-pull));
    max-width: none;
}

.notification-list
    > .notification-item
    > .notification-item-body
    > .msg
    .notif-msg-compact__rest
    a.notif-entity-title {
    margin-left: 0;
    margin-top: 0.22rem;
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    color: rgba(214, 222, 232, 0.9) !important;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

.notification-list > .notification-item > .notification-item-body > .msg a.notif-entity-title:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    text-shadow: var(--glow);
}

.notification-list > .notification-item:not(:has(.notification-kicker)) > .notification-item-body > .notification-item-meta {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.notification-list
    > .notification-item:not(:has(.notification-kicker)):has(.notif-msg-compact__rest)
    > .notification-item-body
    > .notification-item-meta {
    grid-row: 3;
}

.notification-list > .notification-item:has(.notification-kicker) > .notification-item-body > .notification-item-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.notification-list > .notification-item .notification-item-meta .notification-time-pod {
    margin: 0;
    flex-shrink: 0;
}

.notification-list > .notification-item.system-announcement-item {
    border-left: none;
    box-shadow: inset 3px 0 0 var(--primary-color);
    background: rgba(0, 255, 157, 0.04);
    transition: background 0.3s;
}

.notification-list > .notification-item.system-announcement-item:hover {
    background: transparent;
}

.notification-list > .notification-item.system-announcement-item:hover::after {
    background: rgba(0, 255, 157, 0.09);
}

.notification-list > .notification-item .notification-item-body > .notification-kicker {
    font-weight: 700;
    font-size: 0.62rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
}

.notification-list > .notification-item .notification-kicker .notification-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
    flex-shrink: 0;
}

.staff-list .notification-item .title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.staff-list .notification-item .author {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.btn-micro {
    padding: 2px 8px;
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.btn-micro:hover {
    background: var(--primary-color);
    color: #000;
}

.empty-notif {
    padding: 1.5rem var(--notification-pad-x-right) 1.5rem var(--notification-pad-x-left);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-sizing: border-box;
}

.empty-notif i {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Full-bleed hover under scrollbar: layer behind text/icons */
.notification-list > .notification-item:hover {
    background: transparent;
    border-top-color: transparent;
    transform: none !important;
}

.notification-list > .notification-item:hover::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -18px;
    background: rgba(0, 255, 157, 0.07);
    z-index: 0;
    pointer-events: none;
}

.notification-list > .notification-item:hover + .notification-item {
    border-top-color: rgba(0, 255, 157, 0.12);
}

.notification-list > .notification-item.is-unread {
    /* Subtle unread hint — same vocabulary as surface rows (no neon frame). */
    background: rgba(255, 255, 255, 0.032);
}

.alerts-history-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

.alerts-history-card {
    --notif-icon-col: 28px;
    --notif-icon-gap: 10px;
    --notif-text-pull: calc(var(--notif-icon-col) + var(--notif-icon-gap));
    --notification-pad-x-left: 12px;
    --notification-pad-x-right: 14px;
    --notification-pad-y: 10px;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.cyber-card.alerts-history-card::before,
.cyber-card.alerts-history-card::after {
    display: none !important;
}

.alerts-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.15rem 0.48rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.alerts-history-title {
    margin: 0;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.alerts-history-title i {
    margin-right: 0.42rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
}

.alerts-history-subtitle {
    margin: 0.06rem 0 0;
    color: rgba(198, 210, 226, 0.74);
    font-size: 0.76rem;
}

.alerts-mark-all-btn {
    white-space: nowrap;
}

.alerts-history-head .alerts-mark-all-btn.btn-secondary {
    border-color: rgba(0, 255, 157, 0.42);
    color: var(--primary-color);
}

.alerts-history-head .alerts-mark-all-btn.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.2);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.35);
    transform: translateY(-1px);
}

.alerts-history-list {
    min-height: 120px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* History page uses boxed rows (more app-like) instead of dropdown's dense full-bleed lines. */
.alerts-history-list > .notification-item {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
    padding: 0.72rem 0.78rem;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 0.62rem;
    width: 100%;
    overflow: visible;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.alerts-history-list > .notification-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.alerts-history-list > .notification-item > .icon-box {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    margin-top: 0.08rem;
}

.alerts-history-list > .notification-item > .notification-item-body {
    display: block;
    min-width: 0;
}

.alerts-history-list > .notification-item > .notification-item-body > .msg {
    display: block !important;
    min-width: 0;
}

.alerts-history-list > .notification-item > .notification-item-body > .msg .notif-msg-compact {
    display: block !important;
    min-width: 0;
}

.alerts-history-list > .notification-item > .notification-item-body > .msg .notif-msg-compact__title,
.alerts-history-list > .notification-item > .notification-item-body > .msg .notif-msg-compact__rest {
    display: block !important;
    width: 100%;
    min-width: 0;
}

.alerts-history-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title,
.alerts-history-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.24rem;
    row-gap: 0.1rem;
    white-space: normal;
    overflow: visible;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Must override generic notif-entity-title block styles (declared above) for like/comment inline sentence layout. */
.notification-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title,
.notification-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title,
.alerts-history-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title,
.alerts-history-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    font-size: inherit !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.alerts-history-list > .notification-item.notif-like > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title,
.alerts-history-list > .notification-item.notif-comment > .notification-item-body > .msg .notif-msg-compact__title a.notif-entity-title {
    display: inline !important;
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    line-height: inherit;
    overflow: visible;
    vertical-align: baseline;
}

.alerts-history-list > .notification-item > .notification-item-body > .notification-item-meta {
    display: flex !important;
    margin-top: 0.36rem;
}

.alerts-history-list > .notification-item > .notification-item-body > .msg a.notif-entity-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
}

.alerts-history-list > .notification-item:not(.is-unread):hover {
    border-color: rgba(0, 255, 157, 0.28);
    background: rgba(0, 255, 157, 0.055);
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.1), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.alerts-history-list > .notification-item.is-unread:hover {
    border-color: rgba(0, 255, 157, 0.34);
    background: rgba(0, 255, 157, 0.09);
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.12), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.alerts-history-list > .notification-item:hover::after {
    display: none;
}

/* Unread: soft tint + even border (no left stripe). */
.alerts-history-list > .notification-item.is-unread {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 255, 157, 0.055);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.07);
}

@media (max-width: 640px) {
    .alerts-history-head {
        flex-direction: column;
        align-items: stretch;
    }

    .alerts-mark-all-btn {
        width: 100%;
    }
}

.notification-content {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.notification-user-link {
    color: rgba(222, 230, 240, 0.95);
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.notification-user-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.45);
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {}
}





/* Scrollbar for dropdown */
.notification-dropdown-scroll::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown-scroll::-webkit-scrollbar-track {
    background: var(--notif-panel-bg, #151515);
}

.notification-dropdown-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 3px;
}

/* Corner brackets sit on the card edges; on short panels they read as stray UI — keep flat panel */
.notification-dropdown .cyber-card::before,
.notification-dropdown .cyber-card::after {
    display: none !important;
}

/* Normalizing button vs a tags */
button.btn,
a.btn {
    box-sizing: border-box;
    line-height: 1.5;
    /* Explicit line-height */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
}

/* Ensure icons are centered similarly */
/* Modal File Viewer */
.modal-overlay {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    /* v31: Revert to standard Flexbox */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    /* v27: Remove padding from overlay, handle safe zone via container width */
}

.modal-overlay.active {
    display: flex;
    /* v31: Revert to Flexbox */
    opacity: 1;
    visibility: visible;
    /* CRITICAL FIX: Override hidden visibility */
}

.modal-container {
    background: var(--surface-color);
    border: 1px solid var(--primary-color);
    padding: 0;
    /* Remove padding from container, handle in header/body */
    border-radius: 0;
    /* Square corners for Cyber aesthetic */

    width: 92%;
    /* v31: Clean percentage width */
    max-width: 900px;
    min-width: 300px;

    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.1);

    margin: auto;
    /* v31: Standard centering */
    /* Clean reset, removed nuclear overrides */

    /* Removed margin:auto as flex centers it */
    /* Removed transform scale to avoid blurring/layout issues on small screens */
    display: flex;
    /* Flex layout to handle scrolling better */
    flex-direction: column;
    min-width: 0;
    /* max-width: 100%; <- Removed to respect max-width: 900px */
}

/* Consolidate Modal Styling for Cyber Card look */
.modal-container.cyber-card {
    background-color: var(--surface-color);
    border: 1px solid var(--surface-border);
    /* Grey Border */
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
    position: relative;
    /* Clip to rounded cyber-card; scroll lives on #modal-content-area */
    overflow: hidden;
}

/* Specific Auth/Upload Modal overrides (Must be after main definition) */
.modal-container.auth-modal {
    max-width: 380px;
    /* Increased from 320px to fit headers better */
    width: 95%;
    /* Ensure mobile safety */
}

@media (max-width: 480px) {
    .modal-container.auth-modal .modal-header h2 {
        font-size: 1.25rem !important;
        /* Scale down long headers */
    }

    .modal-container.auth-modal .modal-body {
        padding: 1.5rem !important;
    }

    .modal-container.auth-modal .modal-body div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        /* Stack buttons */
    }
}

.modal-container.upload-modal-container {
    max-width: 540px;
}

.upload-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.upload-modal-file-chip {
    margin-bottom: 1.05rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 255, 157, 0.22);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.upload-modal-file-chip-main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.upload-modal-file-name {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-modal-file-size {
    font-size: 0.7rem;
}

.upload-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.upload-modal-preview-wrap {
    min-height: auto;
}

/* .file-custom-btn in modal: unified via .upload-modal-body rules above */

.upload-modal-format-hint {
    font-size: 0.75rem;
    margin-top: 0.4rem;
    opacity: 0.9;
}

.upload-modal-advanced-toggle-wrap {
    margin: 0.95rem 0 0.8rem;
}

/* Drop-modal preview: row 1 = choose + filename; row 2 = full-width thumbnail (avoids cramped wrap) */
.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-custom-btn {
    flex: 0 0 auto;
}

.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-name-display {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
    order: 0;
    margin-top: 0.2rem;
    min-height: 3.75rem !important;
    box-sizing: border-box;
}

.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-preview-thumb-slot.has-image img {
    max-height: 10.5rem;
}

.upload-modal-body .file-upload-preview-zone.upload-image-preview-zone .file-upload-paste-hint {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.modal-container.upload-modal-container .upload-modal-advanced-toggle-wrap .btn.btn-secondary {
    border-radius: var(--modern-rounded-sm, 8px);
    min-height: 42px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Modal shell: match rounded card; inner panels align with outer radius (no square overlap / clipped corners) */
.modal-container.cyber-card > #modal-content-area {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal-container.cyber-card > #modal-content-area > .modal-header:first-child {
    border-radius: var(--modern-rounded-lg) var(--modern-rounded-lg) 0 0 !important;
}

.modal-container.cyber-card > #modal-content-area > :last-child {
    border-radius: 0 0 var(--modern-rounded-lg) var(--modern-rounded-lg) !important;
}

/* Re-apply corners explicitly to modal container to ensure specificity */
.modal-container.cyber-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--corner-line-color);
    border-left: 1px solid var(--corner-line-color);
    z-index: 10;
    /* Ensure on top of borders */
}

.modal-container.cyber-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid var(--corner-line-color);
    border-right: 1px solid var(--corner-line-color);
    z-index: 10;
}

/* Ensure inner content has background but doesn't overlap corners incorrectly */
.modal-container.cyber-card .modal-body,
.modal-container.cyber-card .modal-header {
    background-color: var(--surface-color);
    position: relative;
    z-index: 5;
}

/* Ensure perfectly square inner elements to match container */
.modal-container .modal-header,
.modal-container .modal-body {
    border-radius: 0 !important;
}

/* Compact rules for Auth Modals */
.auth-modal .modal-header {
    padding: 0.8rem 1.2rem;
}

.auth-modal .modal-body {
    padding: 1rem 1.2rem;
}

.auth-modal .mb-4 {
    margin-bottom: 1rem;
}

.auth-modal h2 {
    font-size: 1.2rem;
}

.auth-modal .modal-close-btn {
    font-size: 1rem;
}

.auth-modal .btn {
    padding: 0.5rem 1rem;
}


.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(20, 20, 20, 0.95);
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.modal-close-btn:hover {
    color: var(--error-color);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Safety net for overflow */
    flex: 1;
}

/* Crypto checkout modal (file purchase + VIP subscribe) */
.crypto-checkout-header {
    border-bottom: 1px solid rgba(0, 255, 157, 0.2);
    background:
        linear-gradient(180deg, rgba(0, 255, 157, 0.08) 0%, rgba(0, 0, 0, 0) 100%),
        rgba(15, 17, 21, 0.96);
}

.crypto-checkout-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 1.12rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.crypto-checkout-title i {
    color: var(--accent-color);
}

.crypto-checkout-body {
    padding: 1.35rem 1.5rem 1.5rem;
}

.crypto-checkout-subtitle {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.04rem;
    color: var(--text-primary);
}

.crypto-checkout-subtitle strong {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

.crypto-currency-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.crypto-currency-btn {
    min-height: 84px;
    border-radius: 12px;
    border-color: rgba(0, 255, 157, 0.5) !important;
    background: linear-gradient(180deg, rgba(0, 255, 157, 0.07), rgba(0, 255, 157, 0.02)) !important;
    padding: 0.95rem 0.8rem !important;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    text-align: left;
}

.crypto-currency-btn:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.16);
    transform: translateY(-1px);
}

.crypto-currency-icon {
    min-width: 1.85rem;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--accent-color);
}

.crypto-currency-label {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1.32rem;
    text-transform: uppercase;
    color: var(--primary-color);
}

.crypto-symbol {
    font-family: var(--font-mono);
    font-size: 1.72rem;
    font-weight: 700;
}

.crypto-symbol--usdt {
    min-width: 4.2rem;
    font-size: 1.26rem;
    letter-spacing: 0.04em;
}

.crypto-checkout-status {
    margin-top: 0.95rem;
    text-align: center;
    color: var(--primary-color);
    font-size: 0.94rem;
}

@media (max-width: 560px) {
    .crypto-currency-grid {
        grid-template-columns: 1fr;
    }
    .crypto-currency-btn {
        min-height: 72px;
    }
    .crypto-currency-label {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .modal-body {
        padding: 1rem;
    }
}

.modal-meta {
    margin-bottom: 1rem;
}

.file-content-scroll {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.3);
}

/* Custom scrollbar for modal content */
.file-content-scroll::-webkit-scrollbar {
    width: 8px;
}

.file-content-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.file-content-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 4px;
}

.file-content-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Custom Cyber Checkboxes */
.cyber-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--surface-border);
    border-radius: 4px;
    /* More modern than 3px */
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    margin: 0;
    vertical-align: middle;
}

.cyber-checkbox:hover {
    border-color: var(--primary-color);
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}

.cyber-checkbox:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.4);
}

.cyber-checkbox:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 11px;
}

.selectable-row:has(.cyber-checkbox:checked) {
    background: rgba(0, 255, 157, 0.05) !important;
}


/* Upload Modal Specifics */
.upload-file-display {
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-mono);
}

.upload-file-display i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.upload-modal-confirm-btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.8rem;
}

/* Ensure modal input within body matches theme */
.modal-body .cyber-input {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* --- Real-time Chat Widget --- */
#chat-widget-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

/* Dimmer for mobile sheet; desktop never shows (see @media below). */
.chat-backdrop {
    display: none !important;
}

.chat-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--surface-color);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* For badge positioning */
}

.chat-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.5);
    background: rgba(0, 255, 157, 0.1);
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--error-color);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface-color);
    /* Cutout effect */
    box-shadow: 0 0 5px rgba(255, 51, 102, 0.5);
    animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-badge.hidden {
    display: none;
    animation: none;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Chat Window - Unified Style with Modals */
.chat-window {
    width: 380px;
    height: 500px;
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom right;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 9001;
    isolation: isolate;
}

@media (max-width: 768px) {
    .chat-window {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        bottom: 0 !important;
        right: 0 !important;
        border: none;
        border-radius: 0;
        transform: none !important;
    }

    .chat-header {
        padding: 0.45rem 0.7rem;
    }
}

/* Chat Corners - Unified Style */
.chat-window::before {
    display: none;
}

.chat-window::after {
    display: none;
}

.chat-window.hidden {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    pointer-events: none;
    height: 0;
    /* Restore height collapse */
    margin: 0;
    visibility: hidden;
}

.chat-header {
    padding: 0.3rem 0.58rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    color: var(--primary-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
}

.chat-header::after {
    display: none;
}

.chat-title {
    font-size: 0.8rem;
    letter-spacing: 0.2px;
}

.chat-title .icon {
    margin-right: 0.3rem;
    font-size: 0.8em;
}

.chat-close {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid var(--surface-border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.chat-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.chat-messages {
    flex: 1;
    padding: 0.55rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface-color);
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 2px;
}

.chat-msg {
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-msg-header {
    font-size: 0.75rem;
    margin-bottom: 4px;
}

/* chat-username removed as it's replaced by username-tag */
.chat-username {
    color: inherit;
}

.chat-time {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.chat-text {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 0.8rem;
    border-radius: 0 8px 8px 8px;
    color: var(--text-primary);
    display: inline-block;
}

/* My messages styled differently */
.chat-msg.mine {
    align-self: flex-end;
    align-items: flex-end;
    text-align: right;
}

.chat-msg.mine .chat-text {
    background: rgba(0, 255, 157, 0.15);
    border-radius: 8px 0 8px 8px;
    border: 1px solid rgba(0, 255, 157, 0.2);
}

/* .chat-msg.mine .chat-msg-header { flex-direction: row-reverse; } Removed for consistent button placement */

/* Chat Input & Emoji */
.chat-input-area {
    padding: 0.38rem;
    border-top: 1px solid var(--surface-border);
    display: flex;
    gap: 0.4rem;
    background: var(--surface-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: relative;
}

.chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border);
    padding: 0 0.65rem;
    height: 34px;
    color: white;
    border-radius: 6px;
    font-family: var(--font-main);
    box-sizing: border-box;
}

.chat-input-area input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.chat-action-btn {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--surface-border);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Unified Send Button */
.btn-send {
    background: var(--primary-color);
    color: black;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-send:hover {
    background: var(--accent-color);
    color: black !important;
    transform: none;
}

.btn-send i {
    color: black !important;
    /* Force icon color */
}


/* Emoji Picker */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
    width: 100%;
    max-height: 200px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 5px;
    overflow-y: auto;
    z-index: 20;
    backdrop-filter: blur(10px);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
}

.emoji-picker::-webkit-scrollbar {
    width: 4px;
}

.emoji-picker::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 2px;
}

.emoji-btn {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    transition: transform 0.1s;
}

.emoji-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

.emoji-picker.hidden {
    display: none;
}

.chat-system-msg {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0.5rem 0;
}

/* Delete Button */
.chat-delete-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0;
    visibility: hidden;
    /* Ensure it's really gone */
    transition: all 0.2s;
    padding: 0 5px;
}

.chat-msg:hover .chat-delete-btn {
    opacity: 1;
    visibility: visible;
}

.chat-delete-btn:hover {
    color: var(--error-color);
}

.chat-login-prompt {
    width: 100%;
    text-align: center;
    padding: 0.5rem;
}

.btn-link {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-link:hover {
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
    color: white;
}

/* Unification of Action Buttons */
.comment-actions {
    float: right;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.8rem;
    margin-bottom: 0.2rem;
    z-index: 10;
}

.action-btn {
    padding: 0;
    width: 20px;
    height: 20px;
    min-width: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: all 0.2s;
    cursor: pointer;
}

.delete-comment-btn,
.delete-btn {
    /* Unified action style */
    color: var(--text-secondary);
}

.delete-btn:hover {
    color: var(--error-color) !important;
    text-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
    transform: scale(1.1);
}

.reply-btn {
    color: var(--text-secondary);
}

.edit-btn {
    color: var(--text-secondary);
}

.edit-btn:hover {
    color: var(--primary-color) !important;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.35);
    transform: scale(1.08);
}

.reply-btn:hover {
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.4);
    transform: scale(1.1);
}

.forum-post-like-toggle {
    width: auto !important;
    min-width: 28px;
    padding: 0 6px !important;
    gap: 4px;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.forum-post-like-toggle.is-liked {
    color: var(--error-color);
}

.forum-post-like-toggle.is-liked:hover {
    color: var(--error-color) !important;
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.35);
}

.forum-post-like-count {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    opacity: 0.9;
}

/* Match file-like color intensity for "has likes but not mine" state. */
.forum-post-like-toggle.has-likes:not(.is-liked) i.fa-heart {
    color: var(--error-color) !important;
}

/* Mobile Improvement Support Classes */
.admin-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    min-height: 80vh;
}

.admin-sidebar {
    width: 280px;
    position: sticky;
    top: 2rem;
    flex-shrink: 0;
    padding: 1rem !important;
}

.admin-sidebar h2 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    padding: 0 0.5rem;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-main {
    flex: 1;
    min-width: 0;
}

.file-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.7rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--surface-border);
    flex-wrap: wrap;
    /* Prevent squeezing by allowing wrap */
    gap: 0.7rem;
    overflow: visible;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .file-view-header {
        flex-direction: column;
        gap: 0.8rem;
    }

    .file-view-header h1 {
        font-size: 1.2rem;
        word-break: break-word;
        line-height: 1.3;
    }

    .header-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .header-actions .btn {
        flex: 1;
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

.header-main-info {
    flex: 1 1 100%;
    /* Take full width to force buttons to next line */
    min-width: 0;
    max-width: 100%;
}

.file-view-header h1 {
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-bottom: 0.35rem;
    width: 100%;
    /* Ensure title takes full available width */
    font-size: clamp(1.08rem, 1.25vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: 0.02em;
    text-transform: none;
}

.meta-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.header-actions {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.header-actions .btn {
    min-height: 2.15rem;
    padding: 0.4rem 0.72rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.header-actions .btn i {
    font-size: 0.82rem;
}

.meta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.meta-date,
.meta-expiry {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.meta-expiry {
    color: var(--primary-color);
}


.comment-item {
    display: flow-root;
    position: relative;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    overflow: visible !important;
}

.comment-item:hover .action-btn,
.comment-item:hover .delete-comment-btn,
.comment-item:hover .reply-btn {
    opacity: 1 !important;
}

/* --- Mobile Navigation Visibility (Standard) --- */
.mobile-toggle,
.mobile-menu-overlay {
    display: none;
}

/* --- Mobile Responsiveness --- */
.profile-link-btn .username {
    display: none;
}

/* --- Hamburger Toggle --- */
.mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 255, 157, 0.05);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.hamburger {
    width: 18px;
    height: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    border-radius: 1px;
    transition: all 0.3s;
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.98);
    z-index: 10001;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: flex-end;
}

.mobile-menu-overlay.active {
    right: 0;
}

.mobile-menu-inner {
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: var(--bg-color);
    border-left: 1px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-menu-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    color: var(--primary-color);
    font-weight: bold;
}

.close-mobile-menu {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.mobile-nav {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s;
}

.mobile-nav-item i {
    width: 20px;
    text-align: center;
    color: var(--primary-color);
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    background: rgba(0, 255, 157, 0.05);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.admin-link {
    border-color: rgba(255, 71, 87, 0.3);
}

.admin-link i {
    color: var(--error-color);
}

.logout-link {
    margin-top: auto;
    border-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--surface-border);
}

.system-status {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.chat-toggle-btn {
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
}

/* --- Expandable Header Search --- */
.search-expandable {
    position: relative;
    display: flex;
    align-items: center;
}

#header-search-form {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#header-search-form:focus-within,
#header-search-form.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--surface-border);
    box-shadow: var(--glow);
}

.header-search-field-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#header-search-form:focus-within .header-search-field-wrap,
#header-search-form.active .header-search-field-wrap {
    width: min(220px, 42vw);
}

#header-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: white;
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
    transition: padding 0.3s;
    overflow: hidden;
}

#header-search-form.active #header-search-input,
#header-search-input:focus {
    padding: 0 0.15rem 0 0.65rem;
}

.header-search-clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 2px 0 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.header-search-clear:hover {
    color: var(--accent-color);
    background: rgba(0, 255, 157, 0.08);
}

.header-search-clear:focus-visible {
    outline: 1px solid var(--accent-color);
    outline-offset: 1px;
}

.header-search-clear[hidden] {
    display: none !important;
}

#search-toggle-btn {
    cursor: pointer;
    /* Removed transparent overrides to use .nav-btn-icon styles */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#search-toggle-btn:hover {
    /* Default: same soft hover as other header icon tiles (overridden on old UAs by .site-header rules) */
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {

    #header-search-form:focus-within .header-search-field-wrap,
    #header-search-form.active .header-search-field-wrap {
        width: min(168px, 52vw);
    }
}


/* Floating Bulk Action Bar */
.bulk-bar-floating {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(18, 18, 20, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--surface-border);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity: 0;
    /* Opacity alone leaves an invisible hit target on mobile (tap bottom → toggles Select all). */
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 157, 0.1);
}

.bulk-bar-floating.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.bulk-bar-floating::before,
.bulk-bar-floating::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--accent-color);
}

.bulk-bar-floating::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.bulk-bar-floating::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

@media (max-width: 600px) {
    .bulk-bar-floating {
        width: 90%;
        bottom: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
}

/* Profile Redesign: Dashboard Layout */
.profile-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.5rem;
}

.profile-sidebar {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
}

.compact-avatar-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 157, 0.05);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    box-shadow: var(--glow);
    position: relative;
    overflow: hidden;
}

.compact-avatar-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(0, 255, 157, 0.1), transparent);
    animation: scan 3s infinite linear;
}

@keyframes scan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.compact-avatar-box i {
    font-size: 2rem;
    color: var(--primary-color);
    z-index: 1;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 255, 157, 0.05);
    border: 1px solid rgba(0, 255, 157, 0.2);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-color);
    text-transform: uppercase;
}

.profile-repo-title {
    font-size: 0.9rem;
    border-bottom: 1px solid var(--surface-border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.file-repo-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

.repo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.repo-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.repo-file-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    /* CRITICAL: Enables truncation in flex child */
    flex: 1;
}

.repo-file-name {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.repo-file-name:hover {
    color: var(--primary-color);
}

.repo-file-meta {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.repo-actions {
    display: flex;
    gap: 0.4rem;
}

/* Scrollbar styling for file list */
.file-repo-list::-webkit-scrollbar {
    width: 4px;
}

.file-repo-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.file-repo-list::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 10px;
}

.file-repo-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        max-width: 100%;
        /* Ensure grid doesn't overflow container */
    }

    .profile-sidebar {
        position: static !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }

    .compact-avatar-box {
        width: 56px !important;
        height: 56px !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cyber Buttons - Added for consistency */
.btn-cyber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    height: 36px;
    border-radius: var(--radius);
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    text-decoration: none;
    gap: 0.5rem;
}

.btn-cyber:hover {
    background: rgba(0, 255, 157, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    transform: translateY(-1px);
    color: var(--primary-color);
    text-decoration: none;
}

.btn-cyber-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--surface-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-cyber-ghost:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

/* Global Avatar Border Style (Standardized) */
.user-avatar-circle {
    border-radius: 50% !important;
    object-fit: cover;
    border: 1px solid #222222;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background-color: #1a1a1a;
    box-sizing: border-box;

    /* Cyberpunk Pop-out Sizing */
    width: 24px !important;
    height: 24px !important;
    margin-left: -10px !important;
    margin-right: 4px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    z-index: 5;
}

/* Hover Effect for Avatar in Username Tag */
.username-tag:hover .user-avatar-circle {
    transform: scale(1.25) translateX(-2px);
    box-shadow: 0 0 12px currentColor;
    border-color: currentColor;
    z-index: 20;
}



/* =========================================
   CYBERPUNK PROFILE REDESIGN (v40)
   ========================================= */

/* 1. Identity Header */
.profile-identity-header {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(0, 255, 157, 0.05) 0%, transparent 100%);
    border-bottom: 1px solid var(--surface-border);
}

.profile-avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
}

.profile-avatar-hexagon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    /* Circular */
    /* clip-path removed for standard look */
    font-size: 2rem;
    color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
    overflow: hidden;
    /* Ensure image stays inside circle */
}

.profile-avatar-container.admin .profile-avatar-hexagon {
    border-color: var(--error-color);
    color: var(--error-color);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

.profile-avatar-container.moderator .profile-avatar-hexagon {
    border-color: var(--warning-color);
    color: var(--warning-color);
    box-shadow: 0 0 15px rgba(255, 184, 108, 0.2);
}

.profile-custom-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Standardized Border */
    border: 2px solid #1a1a1a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.profile-identity-header-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.profile-hidden-upload-form {
    display: none !important;
}

.profile-bg-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100% - 20px);
}

.profile-bg-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.55);
    color: var(--primary-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    padding: 0;
    line-height: 1;
}

.profile-bg-action-btn:hover {
    transform: scale(1.06);
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.68);
}

.profile-bg-action-btn-danger {
    color: var(--error-color);
    border-color: rgba(255, 77, 77, 0.45);
}

.profile-bg-action-btn-danger:hover {
    border-color: var(--error-color);
}

.profile-avatar-delete-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--surface-color, #111);
    background: rgba(0, 0, 0, 0.78);
    color: var(--error-color);
    z-index: 12;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, background 0.15s ease;
}

.profile-avatar-delete-btn:hover {
    transform: scale(1.08);
    background: rgba(40, 0, 0, 0.9);
}

.profile-avatar-container.admin .profile-avatar-delete-btn,
.profile-avatar-container.moderator .profile-avatar-delete-btn {
    border-color: var(--surface-color, #111);
}

.profile-identity-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.profile-username-display {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Role chip: same box metrics as global .username-tag (24px strip); look matches nickname pod */
.profile-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    height: 24px;
    padding: 0 6px;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.profile-role-badge-icon {
    font-size: 0.62rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.95;
}

.profile-role-badge-label {
    line-height: 1;
}

.profile-role-badge.admin {
    background: rgba(255, 51, 102, 0.08);
    border-color: rgba(255, 51, 102, 0.15);
    color: var(--error-color) !important;
}

.profile-role-badge.moderator {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.15);
    color: var(--primary-color) !important;
}

.profile-role-badge.user {
    color: var(--text-primary);
}

.profile-role-badge.vip {
    background: linear-gradient(
        135deg,
        rgba(255, 236, 180, 0.14) 0%,
        rgba(245, 197, 66, 0.09) 50%,
        rgba(90, 55, 20, 0.12) 100%
    );
    border-color: rgba(255, 210, 120, 0.38);
    color: #fff0c8 !important;
    text-shadow: 0 0 10px rgba(255, 200, 90, 0.25);
}

.profile-role-badge.vip .profile-role-badge-icon {
    color: #f5c542;
    filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.55));
}

/* 2. Stats row — same language as file-card telemetry pods */
.profile-stats-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0;
    background: transparent;
    border: none;
}

.profile-stats-telemetry {
    display: inline-flex;
    height: auto;
    min-height: 20px;
    padding: 0;
    overflow: visible;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.profile-stats-telemetry .telemetry-pod {
    cursor: default;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem;
    min-height: 26px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    cursor: help;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.stat-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
}

.stat-item i {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 1;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-item.likes:not(.has-likes) i {
    color: var(--text-muted);
}

.stat-item.likes:not(.has-likes) .stat-value {
    color: var(--text-secondary);
}

.stat-item.likes.has-likes i,
.stat-item.likes.has-likes .stat-value {
    color: var(--error-color);
}

/* Admin-only trust / verification chips (profile header) */
.profile-admin-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-trust-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    pointer-events: none;
    line-height: 1.2;
}

.profile-trust-chip--muted {
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

.profile-trust-chip--verified {
    color: var(--primary-color);
    border-color: rgba(0, 255, 157, 0.28);
    background: rgba(0, 255, 157, 0.06);
}

.profile-trust-chip--trusted {
    color: var(--accent-color);
    border-color: rgba(0, 255, 157, 0.28);
    background: rgba(0, 255, 157, 0.06);
}

.profile-trust-chip--pending {
    color: var(--warning-color);
    border-color: rgba(250, 184, 108, 0.3);
    background: rgba(250, 184, 108, 0.06);
}

/* 3. Tabs Interface */
.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--surface-border);
    margin-top: 0;
}

.profile-tab-btn {
    flex: 1;
    padding: 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.profile-tab-btn:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.02);
}

.profile-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(0, 255, 157, 0.05);
}

/* 3.1 Quick action buttons (Telegram / Channel / Settings) */
.profile-quick-actions {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.profile-quick-actions.profile-quick-actions-modal {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Flat controls aligned with telemetry / btn-secondary (no gradients or pulse) */
.profile-quick-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04) !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.profile-quick-btn::before,
.profile-quick-btn::after {
    display: none !important;
}

.profile-quick-btn i {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    color: var(--accent-color);
    opacity: 0.92;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: none;
}

.profile-quick-btn:hover {
    transform: none;
    filter: none;
    border-color: var(--accent-color);
    background: rgba(0, 255, 157, 0.08) !important;
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.12);
}

.profile-quick-btn:active {
    transform: scale(0.96);
}

.profile-quick-btn-telegram i,
.profile-quick-btn-channel i,
.profile-quick-btn-group i,
.profile-quick-btn-settings i {
    color: var(--accent-color);
}

.profile-quick-btn-settings:hover i {
    transform: rotate(90deg);
}

.profile-quick-btn-admin {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035) !important;
}

.profile-quick-btn-admin:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
}

.profile-quick-btn-admin i {
    color: var(--text-secondary);
}

.profile-quick-btn-warning i {
    color: var(--warning-color);
}

.profile-quick-btn-accent i {
    color: var(--accent-color);
}

.profile-quick-btn-danger i {
    color: var(--error-color);
}

.profile-quick-btn-success i {
    color: var(--primary-color);
}

.profile-quick-btn-admin[disabled],
.profile-quick-btn-admin:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

/* 4. Content Area */
.profile-content-area {
    padding: 0;
    height: 300px;
    /* Fixed height for scrollable content */
    overflow-y: auto;
    position: relative;
}

.profile-tab-pane {
    display: none;
    padding: 1rem;
}

.profile-tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Invoice status chips (profile, modal, checkout) */
.invoice-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.invoice-status-chip.status-pending {
    color: var(--warning-color);
    border-color: rgba(255, 204, 0, 0.32);
    background: rgba(255, 204, 0, 0.12);
}

.invoice-status-chip.status-processing {
    color: var(--accent-color);
    border-color: rgba(0, 255, 157, 0.32);
    background: rgba(0, 255, 157, 0.12);
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.15);
    animation: pulse 2s infinite;
}

.invoice-status-chip.status-paid {
    color: var(--primary-color);
    border-color: rgba(0, 255, 157, 0.35);
    background: rgba(0, 255, 157, 0.14);
    box-shadow: 0 0 16px rgba(0, 255, 157, 0.14);
}

.invoice-status-chip.status-expired {
    color: var(--error-color);
    border-color: rgba(255, 71, 87, 0.35);
    background: rgba(255, 71, 87, 0.14);
}

/* List Items */
/* List Items */
.data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    /* Space between items */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    /* Card look */
    transition: all 0.2s ease;
    max-width: 100%;
    /* Prevent overflow */
    overflow: hidden;
    /* Contain content */
}

.data-item:last-child {
    margin-bottom: 0;
}

.data-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
    transform: translateX(2px);
}

.data-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
    /* Text truncation fix */
    max-width: 100%;
    /* Prevent overflow */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.data-title {
    font-size: 0.9rem;
    color: var(--text-color);
    overflow-wrap: anywhere;
    /* Allow breaking long words */
    word-break: break-word;
    /* Break long words */
    text-decoration: none;
    max-width: 100%;
    /* Prevent overflow */
}

.data-title:hover {
    color: var(--primary-color);
}

.data-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.2rem;
    width: 100%;
    /* Ensure metadata takes full width */
    overflow: hidden;
    /* Prevent overflow on narrow screens */
}

.data-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

/* Global Loader */
#global-loader {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 0.8rem;
    background: rgba(13, 17, 23, 0.95);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
    backdrop-filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#global-loader.active {
    display: flex !important;
    animation: slideUpFadeIn 0.3s ease forwards;
}

.loader-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 255, 157, 0.1);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideUpFadeIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Like Button Styles */
/* Like Button Styles */
.like-btn-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

span.like-btn-container {
    cursor: pointer;
}

button.like-btn-container {
    cursor: pointer;
}

/* Container hover effect for interactive buttons */
button.like-btn-container:hover .like-btn {
    transform: scale(1.2);
    color: var(--error-color);
}

.like-btn {
    cursor: pointer;
    /* Fallback */
    color: var(--text-secondary);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
    font-size: 1rem;
}

/* Remove direct hover if container hover is used, or keep for list views if they were interactive */
/* .like-btn:hover { ... } logic handled by container now for detail views */

.like-btn.fas,
.is-liked i.fa-heart,
.is-liked .like-btn {
    color: var(--error-color) !important;
}

/* Red outline for items with likes, but not necessarily liked by the current user */
.has-likes i.fa-heart,
.has-likes .like-btn {
    color: var(--error-color) !important;
}

.like-btn {
    cursor: pointer;
    color: var(--text-secondary);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
    font-size: 1rem;
}

.like-btn:hover {
    transform: scale(1.2);
    color: var(--error-color);
    /* Red on hover */
}

.like-btn.fas {
    color: var(--error-color);
    /* Red when liked */
}

.like-anim {
    animation: like-bounce 0.4s;
}

@keyframes like-bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.like-count {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: bold;
}

/* Override for small telemetry pods in metadata rows */
.telemetry-pod .like-count {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

.telemetry-pod .like-btn {
    font-size: 0.75rem;
    color: inherit;
    /* Initial color matches pod text */
}

/* Ensure red heart if the container has likes (Specific overrides) */
.telemetry-pod.has-likes i.fa-heart,
.btn.has-likes i.fa-heart,
.stat-item.has-likes i.fa-heart,
.like-btn-container.has-likes i.fa-heart {
    color: var(--error-color) !important;
}

/* --- Rounded UI Experiment (easy rollback: remove this block) --- */
:root {
    --modern-rounded-lg: 12px;
    --modern-rounded-md: 10px;
    --modern-rounded-sm: 8px;
    --filter-chip-height: 40px;
}

.cyber-card {
    border-radius: var(--modern-rounded-lg) !important;
}

.file-item,
a.forum-category-card,
.forum-topic-list-card,
.forum-category-card-main,
.forum-category-card-inner {
    border-radius: var(--modern-rounded-md) !important;
}

.telemetry-pod {
    border-radius: var(--modern-rounded-sm) !important;
}

/*
 * File/resource list + view headers: keep meta row corners identical (category, date pod, stats group).
 * Must follow the global .telemetry-pod 8px rule so standalone pods here use the same 6px as .telemetry-group.
 */
.file-item .file-meta > .telemetry-pod,
.file-item .file-meta > .telemetry-group,
.resource-item .file-meta > .telemetry-pod,
.resource-item .file-meta > .telemetry-group,
.file-view-header .file-meta > .telemetry-pod,
.file-view-header .file-meta > .telemetry-group,
.forum-topic-header .file-meta > .telemetry-pod,
.forum-topic-header .file-meta > .telemetry-group {
    border-radius: 6px !important;
}

.file-item .file-meta > a.category-badge.telemetry-pod.forum-topic-category-pill,
.resource-item .file-meta > a.category-badge.telemetry-pod.forum-topic-category-pill,
.file-view-header .file-meta > a.category-badge.telemetry-pod.forum-topic-category-pill,
.forum-topic-list-card-category-row a.telemetry-pod.forum-topic-category-pill {
    border-radius: 6px !important;
}

/* Global: disable decorative green corner clamps everywhere */
.cyber-card::before,
.cyber-card::after,
.file-item::before,
.file-item::after,
a.forum-category-card::before,
a.forum-category-card::after,
.forum-topic-list-card::before,
.forum-topic-list-card::after,
.modal-container.cyber-card::before,
.modal-container.cyber-card::after {
    display: none !important;
    content: none !important;
}


/* --- Typing Indicator (Minimalist) --- */
.typing-indicator-container {
    min-height: 18px;
    margin-bottom: 4px;
    z-index: 100;
    padding: 0 12px;
}

.typing-indicator-container:empty {
    display: none;
}

.typing-bubble {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
    font-family: 'Inter', sans-serif;
}

.typing-name {
    font-weight: 600;
    color: #00ff9d;
}

.typing-dots {
    display: inline-flex;
    gap: 2px;
}

.typing-dots span {
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.3;
    }

    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Fix for iOS Safari auto-zoom on input focus (needs ≥16px on the focused control; includes Quill contenteditable). */
@media screen and (max-width: 768px) {

    input,
    textarea,
    select,
    .chat-input,
    #comment-input,
    #chat-input,
    .ql-editor,
    .ql-container .ql-editor,
    .discussion-composer-frame .ql-editor,
    .rich-editor-wrap .ql-editor {
        font-size: 16px !important;
    }
}

/* --- Minimalist Tooltips --- */
.modern-tooltip {
    position: absolute;
    background: #111;
    color: #eee;
    border: 1px solid #333;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: inherit;
    pointer-events: none;
    z-index: 12000;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.modern-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}

.modern-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    left: 50%;
    transform: translateX(-50%);
}

.modern-tooltip[data-pos="top"]::after {
    bottom: -5px;
    border-width: 5px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
}

.modern-tooltip[data-pos="bottom"]::after {
    top: -5px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #333 transparent;
}

.modern-tooltip.tooltip--wrap {
    white-space: normal;
    max-width: min(300px, calc(100vw - 24px));
    line-height: 1.45;
    text-align: left;
}

/* =========================================
   Edit profile (aligned with upload / add resource)
   ========================================= */

.edit-profile-page .edit-profile-hint {
    font-size: 0.78rem;
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    opacity: 0.88;
}

.edit-profile-page .edit-profile-media-cell {
    gap: 0.45rem;
}

/* Edit profile: stack “current” preview inside the dashed upload zone */
.edit-profile-page .edit-profile-zone-server {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex: 0 0 auto;
    pointer-events: none;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.edit-profile-page .edit-profile-zone-server__tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    opacity: 0.9;
}

.edit-profile-page .edit-profile-zone-server__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--modern-rounded-sm, 8px);
    border: 1px solid rgba(0, 255, 157, 0.16);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.edit-profile-page .edit-profile-zone-server--avatar .edit-profile-zone-server__media {
    width: 76px;
    height: 76px;
    margin-left: 0;
    margin-right: auto;
    border-radius: 12px;
}

.edit-profile-page .edit-profile-zone-server--avatar .edit-profile-zone-server__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edit-profile-page .edit-profile-zone-server--bg .edit-profile-zone-server__media {
    width: 100%;
    max-width: min(100%, 272px);
    margin-left: 0;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    max-height: 108px;
}

.edit-profile-page .edit-profile-zone-server--bg .edit-profile-zone-server__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.edit-profile-page .upload-files-pair .upload-grid-cell > .file-upload-preview-zone.edit-profile-upload-zone {
    min-height: 10.75rem;
}

@media (max-width: 768px) {
    .edit-profile-page .upload-files-pair {
        grid-template-columns: 1fr !important;
    }
}

/* Custom File Upload Styling for Profile Settings */
.cyber-file-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
}

.cyber-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.cyber-file-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Admin Select Input */
.adm-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--adm-border);
    color: var(--adm-text-main);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: var(--font-main);
    transition: all 0.2s;
    appearance: auto;
}

.adm-input:focus {
    outline: none;
    border-color: var(--adm-primary);
    box-shadow: 0 0 5px rgba(0, 255, 157, 0.2);
}

/* Icon Picker Grid */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border: 1px solid var(--adm-border);
    border-radius: 4px;
    max-height: min(42vh, 380px);
    overflow-y: auto;
}

.icon-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
}

.icon-picker-btn:hover {
    background: rgba(0,255,157,0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.icon-picker-btn.active {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0,255,157,0.4);
}

.cyber-file-label:hover {
    border-color: var(--accent-color);
    background: rgba(0, 255, 157, 0.05);
    color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
}

.cyber-file-label i {
    font-size: 1.1rem;
    color: var(--accent-color);
}

.cyber-file-btn {
    padding: 0.3rem 0.8rem;
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Avatar Upload Overlay */
.profile-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 12px;
    cursor: pointer;
    z-index: 10;
    /* Max priority */
    line-height: 0;
}

.profile-avatar-container:hover .profile-avatar-overlay {
    opacity: 1 !important;
}

.profile-avatar-overlay i {
    color: var(--primary-color);
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px var(--primary-color));
    font-weight: 900;
    margin: 0 !important;
    padding: 0 !important;
}

.profile-avatar-container.admin .profile-avatar-overlay i {
    color: var(--error-color);
    filter: drop-shadow(0 0 8px var(--error-color));
}

.profile-avatar-container.moderator .profile-avatar-overlay i {
    color: var(--warning-color);
    filter: drop-shadow(0 0 8px var(--warning-color));
}

/* Announcement Refinements */
.announcement-link-compact {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color) !important;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 255, 157, 0.4);
    padding-bottom: 1px;
    margin-top: 6px;
    transition: all 0.2s ease;
    word-break: break-all;
    max-width: 100%;
}

.announcement-link-compact:hover {
    border-bottom-style: solid;
    border-bottom-color: var(--primary-color);
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
}

.notification-badge[data-synced="true"] {
    animation: badgePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Utility */
.hidden {
    display: none !important;
}

@keyframes badgePop {
    0% {
        transform: translate(46%, -46%) scale(0.82);
    }

    50% {
        transform: translate(46%, -46%) scale(1.12);
    }

    100% {
        transform: translate(46%, -46%) scale(1);
    }
}

/*
 * ≤768px: .header-inner uses overflow-x: hidden (y becomes clipping too). Corner translate
 * pulls badges above the nav tiles → clipped at the top of the viewport. Keep pills inside 30px tiles.
 */
@media (max-width: 768px) {
    .header-right .notification-badge {
        top: 1px;
        right: 1px;
        transform: none;
    }

    .header-right .notification-badge[data-synced="true"] {
        animation-name: badgePopMobile;
    }
}

@keyframes badgePopMobile {
    0% {
        transform: scale(0.82);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

/* Real-time Status Pile Avatars */
.pile-avatar {
    box-sizing: border-box;
    /* Force consistent sizing (v46) */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #222222;
    /* Matches dark background */
    margin-left: -12px;
    background-color: #2a2a2a;
    /* Fill for transparency */
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Slight outer ring */
    position: relative;
    z-index: 1;
}

.avatar-pile img:first-child,
.avatar-pile span:first-child {
    margin-left: 0 !important;
}

.pile-avatar:hover {
    transform: translateY(-4px) scale(1.1);
    z-index: 10;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
    /* Primary glow */
}

.pile-overflow {
    box-sizing: border-box;
    background: rgba(0, 255, 157, 0.1) !important;
    color: var(--primary-color);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: bold;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid #222222 !important;
    /* Match normal avatar border */
    /* Matches thickness of normal avatar */
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pile-overflow:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-4px) scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}

/* Avatar Pile Styles */
.avatar-pile {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.avatar-pile:empty {
    display: none !important;
}

/* Shared Filter Chips (Directory & Main) */
.filter-chip {
    padding: 0.28rem 0.7rem;
    height: var(--filter-chip-height);
    min-height: var(--filter-chip-height);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--surface-border);
    border-radius: var(--modern-rounded-sm, 8px);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

.filter-chip:hover {
    color: var(--primary-color);
    background: rgba(0, 255, 157, 0.07);
    border-color: rgba(0, 255, 157, 0.35);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 255, 157, 0.12);
    text-shadow: 0 0 9px rgba(0, 255, 157, 0.45);
    z-index: 3;
    transform: translateY(-1px);
}

.filter-chip:hover i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.5));
}

/* Outer: overflow visible for chip hovers / badges inside the scroll strip. */
.directory-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    padding: 4px 2px 6px 0;
    box-sizing: border-box;
}

/*
 * Horizontal scroll; flex-grow: 0 so the strip does not stretch flush to the row’s trailing CTA.
 */
.directory-tabs-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Room for translateY(-1px) on chips without clipping against overflow-y */
    padding-block: 3px;
    box-sizing: border-box;
}

.directory-tabs-scroll::-webkit-scrollbar {
    height: 5px;
}

.directory-tabs-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 3px;
}

.directory-tabs-scroll .filter-chip,
.directory-tabs-scroll .forum-index-context {
    flex-shrink: 0;
}

.filter-chip.active {
    border-color: rgba(0, 255, 157, 0.35);
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.12), rgba(255, 255, 255, 0.04));
    color: #eafff6;
    box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.12);
}

.filter-chip.active:hover {
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.35);
    border-color: rgba(0, 255, 157, 0.48);
    transform: translateY(-1px);
}

.filter-chip.active:hover i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.45));
}

/* VIP category chip: gem — same gold as role badge / mobile nav (not generic filter-chip green). */
.filter-chip.filter-chip--vip i.icon,
.filter-chip.filter-chip--vip > i,
.page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip i,
.page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip .icon,
.page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip > i {
    color: #f5c542 !important;
    /* Beats toolbar strip `filter: none !important` on chip icons (Unified Shell v7). */
    filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.55)) !important;
}

.filter-chip.filter-chip--vip:hover i.icon,
.filter-chip.filter-chip--vip:hover > i,
.filter-chip.filter-chip--vip.active i.icon,
.filter-chip.filter-chip--vip.active > i,
.filter-chip.filter-chip--vip.active:hover i.icon,
.filter-chip.filter-chip--vip.active:hover > i {
    color: #f5c542 !important;
    filter: drop-shadow(0 0 4px rgba(245, 197, 66, 0.65));
}

/* VIP chip: same box model as other filter chips (no extra padding); badge is inset in the corner */
.filter-chip.filter-chip--vip {
    z-index: auto;
}

.filter-chip.filter-chip--vip.active,
.filter-chip.filter-chip--vip:hover {
    z-index: auto;
}

.filter-chip--vip:hover .filter-chip__badge {
    color: #eafff6;
    border-color: rgba(0, 255, 157, 0.52);
    box-shadow:
        0 0 0 1px rgba(18, 18, 18, 0.92),
        0 2px 5px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(0, 255, 157, 0.26);
}

.filter-chip--vip.active .filter-chip__badge {
    background: linear-gradient(
        165deg,
        rgba(0, 255, 157, 0.34) 0%,
        rgba(0, 255, 157, 0.16) 50%,
        rgba(0, 220, 140, 0.2) 100%
    );
    border-color: rgba(0, 255, 157, 0.48);
    box-shadow:
        0 0 0 1px rgba(10, 24, 18, 0.96),
        0 0 10px rgba(0, 255, 157, 0.22);
}

.filter-chip__badge.filter-chip__badge--empty,
.filter-chip__badge:empty {
    display: none !important;
}

/* File/Resource detail action row: visually synced with filter chips. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.header-actions.detail-actions-compact {
    gap: 0.42rem;
}

.header-actions.detail-actions-compact .filter-chip,
.header-actions.detail-actions-compact .btn:not(.btn-special-glitch),
.header-actions.detail-actions-compact .forum-cat-back {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0.22rem 0.55rem !important;
    font-size: 0.76rem !important;
}

.header-actions.detail-actions-compact .forum-cat-back,
.header-actions.detail-actions-compact .btn.like-btn-container {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
}

.header-actions.detail-actions-compact .btn.like-btn-container .like-count {
    display: none !important;
}

.header-actions .btn:not(.btn-special-glitch) {
    padding: 0.28rem 0.7rem;
    height: var(--filter-chip-height);
    min-height: var(--filter-chip-height);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--modern-rounded-sm, 8px);
    color: var(--text-primary);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
}

.header-actions .btn:not(.btn-special-glitch):hover {
    background: rgba(0, 255, 157, 0.08) !important;
    border-color: rgba(0, 255, 157, 0.35) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 255, 157, 0.12) !important;
    text-shadow: 0 0 9px rgba(0, 255, 157, 0.45);
    z-index: 3;
    transform: translateY(-1px);
}

/* Like chip on file/resource detail: rose/coral hover — not site green */
.header-actions .btn.like-btn-container:hover {
    background: rgba(255, 71, 87, 0.11) !important;
    border-color: rgba(255, 99, 118, 0.52) !important;
    color: #ffeef1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.32), 0 0 16px rgba(255, 71, 87, 0.22) !important;
    text-shadow: 0 0 10px rgba(255, 130, 150, 0.4);
    z-index: 3;
    transform: translateY(-1px);
}

.header-actions .btn.like-btn-container:hover .like-count {
    color: #ffeef1 !important;
}

.header-actions .btn.like-btn-container:hover .like-btn,
.header-actions .btn.like-btn-container:hover i.fa-heart {
    color: #ff7b8c !important;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.65)) !important;
}

.header-actions .btn.like-btn-container.is-liked:hover .like-btn,
.header-actions .btn.like-btn-container.is-liked:hover i.fa-heart {
    color: var(--error-color) !important;
    filter: drop-shadow(0 0 7px rgba(255, 71, 87, 0.75)) !important;
}

/* Keep icon-only controls compact/square-like. */
.header-actions .btn:not(.btn-special-glitch):not(:has(.icon)) {
    min-width: var(--filter-chip-height);
    padding: 0.28rem 0.6rem;
}

/* Make detail-row actions match top filter chips typography/spacing exactly. */
.header-actions .filter-chip {
    /* Hard-sync with forum "All topics" chip metrics/typography */
    padding: 0.28rem 0.7rem !important;
    height: var(--filter-chip-height, 36px) !important;
    min-height: var(--filter-chip-height, 36px) !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    font-family: var(--font-mono) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    gap: 0.32rem !important;
}

.header-actions .filter-chip i {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/*
 * Back in file/resource detail: square chip; default gray (rich-editor), hover green — no green at rest.
 */
.header-actions .forum-cat-back {
    flex-shrink: 0;
    width: var(--filter-chip-height);
    min-width: var(--filter-chip-height);
    max-width: var(--filter-chip-height);
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.header-actions .forum-cat-back:hover {
    background: rgba(0, 255, 157, 0.08) !important;
    border-color: rgba(0, 255, 157, 0.35) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 255, 157, 0.12) !important;
    text-shadow: 0 0 9px rgba(0, 255, 157, 0.45);
    transform: translateY(-1px);
}

.header-actions .forum-cat-back:hover i {
    color: var(--primary-color) !important;
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.5)) !important;
}

.cyber-card.detail-main-card .header-actions {
    align-items: center;
    position: relative;
    z-index: 4;
}

/*
 * Detail header: gray “Login to download / visit” — same language as Files “Login to upload” (.btn-toolbar.btn-locked).
 * Beats .header-actions .btn generic + green hover.
 */
.header-actions .btn.btn-toolbar.btn-locked,
.header-actions a.btn.btn-toolbar.btn-locked {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.header-actions .btn.btn-toolbar.btn-locked:hover,
.header-actions a.btn.btn-toolbar.btn-locked:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
    transform: translateY(-1px);
}

.header-actions .btn.btn-toolbar.btn-locked i,
.header-actions .btn.btn-toolbar.btn-locked .icon,
.header-actions a.btn.btn-toolbar.btn-locked i,
.header-actions a.btn.btn-toolbar.btn-locked .icon {
    color: #fff !important;
    filter: none !important;
}

.header-actions .btn.btn-toolbar.btn-locked:hover i,
.header-actions .btn.btn-toolbar.btn-locked:hover .icon,
.header-actions a.btn.btn-toolbar.btn-locked:hover i,
.header-actions a.btn.btn-toolbar.btn-locked:hover .icon {
    color: #fff !important;
    filter: none !important;
}

/* Detail pages: if liked by others (not me), keep outlined red heart only. */
.header-actions .like-btn-container.has-likes:not(.is-liked) .like-btn,
.header-actions .like-btn-container.has-likes:not(.is-liked) i.fa-heart {
    color: var(--error-color) !important;
}

/* Ensure active chip gradient is not overridden by generic header-actions button background. */
.header-actions .filter-chip.active {
    border-color: rgba(0, 255, 157, 0.35) !important;
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.12), rgba(255, 255, 255, 0.04)) !important;
    color: #eafff6 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.12) !important;
}

.header-actions .filter-chip.active:hover {
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.12), rgba(255, 255, 255, 0.04)) !important;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.35);
    border-color: rgba(0, 255, 157, 0.48) !important;
}

/*
 * ≤768px: primary CTA (Add / New topic) on first row; category chips / breadcrumbs on second row.
 * Files & Resources: .page-toolbar-page:not(.forum-page). Forum: labeled breadcrumbs + action row.
 */
@media (max-width: 768px) {
    :root {
        --filter-chip-height: 40px;
        --page-toolbar-band-min-height: 2.65rem;
    }

    /* ---- Files & Resources ---- */
    .page-toolbar-page:not(.forum-page) .page-toolbar-row {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        row-gap: 0.5rem !important;
        column-gap: 0.55rem !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row > .directory-tabs {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 2 !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-page:not(.forum-page) .page-toolbar-row > a.btn.btn-toolbar {
        order: 1 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: var(--filter-chip-height) !important;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.28rem 0.65rem !important;
        gap: 0.32rem !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row .directory-tabs-scroll > .filter-chip {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: var(--filter-chip-height) !important;
        max-height: none !important;
        padding: 0.26rem 0.55rem !important;
        gap: 0.3rem !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row .directory-tabs-scroll > .filter-chip > i {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row > .btn.btn-toolbar > i,
    .page-toolbar-page:not(.forum-page) .page-toolbar-row > .btn.btn-toolbar > .icon,
    .page-toolbar-page:not(.forum-page) .page-toolbar-row > a.btn.btn-toolbar > i,
    .page-toolbar-page:not(.forum-page) .page-toolbar-row > a.btn.btn-toolbar > .icon {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* ---- Forum index: row 1 = New topic; row 2 = breadcrumbs with text ---- */
    .forum-page .page-toolbar-row {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        row-gap: 0.5rem !important;
        column-gap: 0.55rem !important;
    }

    .forum-page .page-toolbar-row > .directory-tabs {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 2 !important;
    }

    .forum-page .page-toolbar-row > .forum-index-actions {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        order: 1 !important;
        margin-left: 0 !important;
    }

    .forum-page .page-toolbar-row .directory-tabs-scroll {
        max-width: 100%;
    }

    .forum-page .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip,
    .forum-page .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        min-height: var(--filter-chip-height) !important;
        height: auto !important;
        max-height: none !important;
        padding: 0.28rem 0.55rem !important;
        gap: 0.28rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        /* Glass strip paints chrome; chip stays a segment (see unified block below) */
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .forum-page .forum-index-context .forum-index-scope-sep {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.62rem !important;
        opacity: 0.45 !important;
        margin: 0 0.06rem !important;
        flex-shrink: 0 !important;
    }

    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-hit {
        flex: 0 1 auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.12rem 0.22rem !important;
        margin: 0 !important;
        gap: 0.28rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-radius: var(--modern-rounded-sm, 8px) !important;
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-hit span {
        display: inline !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: min(100%, 42vw) !important;
    }

    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-hit i {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-current.forum-index-crumb-hit {
        font-weight: 600 !important;
    }

    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: var(--filter-chip-height) !important;
        max-height: none !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
        align-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.28rem 0.65rem !important;
        gap: 0.32rem !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar > i,
    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar > .icon,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar > i,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar > .icon {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* ---- Mobile: same glass toolbar as desktop (compact strip + unified hover/active) ---- */
    .page-toolbar-page .directory-tabs-scroll {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 2px !important;
        border-radius: 10px !important;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        border: 0 !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: calc(var(--filter-chip-height) + 4px) !important;
        height: auto !important;
        align-self: center !important;
    }

    .forum-page .page-toolbar-row .directory-tabs-scroll:has(> .filter-chip.forum-index-breadcrumb-chip) {
        width: max-content !important;
        max-width: 100% !important;
    }

    .page-toolbar-page:not(.forum-page) .page-toolbar-row > .directory-tabs {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip {
        flex: 0 0 auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(245, 250, 255, 0.88) !important;
        text-shadow: none !important;
        transform: none !important;
        transition:
            background var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:first-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:first-child {
        border-radius: 7px 0 0 7px !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:last-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:last-child {
        border-radius: 0 7px 7px 0 !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:only-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:only-child {
        border-radius: 7px !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:hover {
        background: var(--header-hover-fill) !important;
        color: var(--header-hover-text) !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        border: 0 !important;
        color: var(--header-hover-text) !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active .icon,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active i {
        color: var(--primary-color) !important;
        filter: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip.active i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip.active .icon,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip:hover i {
        color: #f5c542 !important;
        filter: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.forum-index-breadcrumb-chip {
        justify-content: flex-start !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        border-radius: 7px !important;
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        align-self: flex-start !important;
    }

    .page-toolbar-page .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar,
    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        color: var(--header-hover-text) !important;
        text-shadow: none !important;
        transform: none !important;
    }

    .page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover,
    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        border: 0 !important;
        color: var(--header-hover-text) !important;
        box-shadow:
            var(--header-glass-edge),
            inset 0 0 0 9999px var(--header-hover-fill),
            var(--header-glass-drop) !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover i,
    .page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover i,
    .forum-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover i,
    .forum-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover i {
        color: inherit !important;
        filter: none !important;
    }
}

/* Resource detail screenshot: neat preview + click-to-zoom via rich lightbox. */
.resource-detail-unified-card {
    margin-top: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    padding: 0;
    font-size: 0; /* remove anonymous whitespace line-boxes in grid container */
}

.resource-detail-unified-card.has-image {
    display: grid;
    grid-template-columns: fit-content(560px) minmax(260px, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.resource-detail-media-card {
    border: none;
    border-radius: var(--modern-rounded-md, 10px);
    background: transparent !important;
    text-align: left;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    align-self: start;
    margin-top: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.resource-detail-media-image {
    max-width: min(100%, 520px);
    width: auto;
    max-height: 300px;
    height: auto;
    display: block !important;
    margin: 0;
    object-fit: contain;
    border-radius: var(--modern-rounded-sm, 8px);
    cursor: zoom-in;
}

.resource-detail-description-card {
    font-size: 0.98rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--modern-rounded-md, 10px);
    background: rgba(255, 255, 255, 0.015);
    white-space: normal;
    font-family: var(--font-main, 'Inter', sans-serif);
    font-size: 0.98rem;
    line-height: 0;
    color: var(--text-secondary);
    text-align: left;
    min-height: 0;
    align-self: start;
    margin-top: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.resource-detail-description-text {
    display: inline;
    line-height: 1.45;
    max-width: 100%;
    -webkit-user-select: text;
    user-select: text;
}

/* Hide accidental selection paint on resource description containers. */
.resource-detail-unified-card::selection,
.resource-detail-media-card::selection,
.resource-detail-description-card::selection {
    background: transparent;
    color: inherit;
}

.resource-detail-unified-card::-moz-selection,
.resource-detail-media-card::-moz-selection,
.resource-detail-description-card::-moz-selection {
    background: transparent;
    color: inherit;
}

/* Keep visible selection only on actual description text. */
.resource-detail-description-text::selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.resource-detail-description-text::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

@media (max-width: 980px) {
    .resource-detail-unified-card.has-image {
        display: block;
    }

    .resource-detail-description-card {
        margin-top: var(--detail-inner-section-gap);
    }
}


@keyframes flashGreen {
    0% {
        background-color: rgba(0, 255, 157, 0.5);
        box-shadow: 0 0 20px rgba(0, 255, 157, 1);
        transform: scale(1.1);
    }

    100% {
        background-color: rgba(0, 255, 157, 0.1);
        box-shadow: none;
        transform: scale(1);
    }
}

/* --- Auth Buttons Group --- */
.auth-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Header: tablet / small laptop (avoids horizontal overflow between ~770px and desktop) --- */
@media (max-width: 1240px) {
    .header-inner {
        padding: 0 0.85rem;
        gap: 0.75rem;
    }

    .header-right {
        gap: 0.38rem;
    }

    .desktop-nav {
        gap: 0;
        min-width: 0;
    }

    .nav-item {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
        gap: 0.32rem;
    }

    .nav-btn-icon,
    .profile-link-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .profile-link-btn .avatar-tiny {
        width: 30px;
        height: 30px;
    }

    .terminal-logo .logo-text {
        font-size: 1rem;
    }

    .terminal-logo .prompt {
        font-size: 1.08rem;
    }

    #header-search-form:focus-within .header-search-field-wrap,
    #header-search-form.active .header-search-field-wrap {
        width: min(175px, 34vw);
    }
}

@media (max-width: 1060px) and (min-width: 769px) {
    .desktop-nav .nav-text {
        display: none !important;
    }

    .desktop-nav .nav-item {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        padding: 0 !important;
        justify-content: center;
        gap: 0 !important;
        color: transparent !important;
        text-shadow: none !important;
    }

    .desktop-nav .nav-item i {
        color: #fff !important;
        margin: 0 !important;
    }

    .desktop-nav .nav-item:hover {
        color: transparent !important;
        text-shadow: none !important;
    }

    .desktop-nav .nav-item:hover i {
        color: var(--primary-color) !important;
    }

    .desktop-nav .nav-item.active {
        color: transparent !important;
    }

    .desktop-nav .nav-item.active i {
        color: var(--primary-color) !important;
        filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.55));
    }

    .desktop-nav .nav-item.active:hover i {
        color: var(--primary-color) !important;
    }

    .terminal-logo .cursor {
        display: none;
    }
}

/* Mobile: fixed panel (avoids .header-inner overflow-x clip). */
@media (max-width: 768px) {
    /*
     * Panel flush under the header (desktop-like). Tune with --notif-mobile-panel-top if header height changes.
     * Bridge vars: bell sits left of VIP/profile/admin/logout — inset counts from viewport right (see base.html order).
     */
    .notification-container {
        /* Match body padding / stacked header (two rows of chrome when header-inner wraps). */
        --notif-mobile-panel-top: var(--header-mobile-stack-h, 72px);
        /* Distance from viewport right to bridge’s right edge; bell moves right when .shield-btn is present. */
        --notif-mobile-bridge-inset: 118px;
        --notif-mobile-bridge-width: 68px;
    }

    body:has(.header-right .shield-btn) .notification-container {
        --notif-mobile-bridge-inset: 92px;
    }

    body:has(.header-right .admin-btn) .notification-container {
        --notif-mobile-bridge-inset: calc(var(--notif-mobile-bridge-inset) + 34px);
    }

    /*
     * backdrop-filter on .header-right creates a containing block for position:fixed descendants.
     * Without this, .notification-dropdown sizes only to the icon rail (~narrow strip on screen).
     */
    .site-header .header-right:has(.notification-container.notifications-open) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .notification-dropdown {
        position: fixed;
        top: var(--notif-mobile-panel-top);
        left: max(0.5rem, env(safe-area-inset-left, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        transform: none;
        z-index: 12600 !important;
        padding-top: 0;
        isolation: auto;
    }

    .notification-dropdown .cyber-card {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    /* Taller list: use viewport under fixed header (custom props inherit from .notification-container). */
    .notification-container .notification-dropdown-scroll {
        max-height: min(68vh, calc(100vh - var(--notif-mobile-panel-top) - 96px));
    }

    /* Full-width bridge blocked clicks on search/shield/VIP — disabled on mobile. */
    .notification-dropdown::before {
        display: none;
    }

    .notification-container.notifications-open .notification-dropdown {
        animation: notifDropdownInMobile 0.3s ease-out;
    }

    /*
     * Narrow fixed column under the bell only (z between header 12400 and panel 12500).
     * Keeps hover from bell → panel without covering neighbour header icons.
     */
    .notification-container.notifications-open::after {
        position: fixed;
        top: 0;
        left: auto;
        right: calc(0.5rem + env(safe-area-inset-right, 0px) + var(--notif-mobile-bridge-inset));
        width: var(--notif-mobile-bridge-width);
        height: calc(var(--notif-mobile-panel-top) + 28px);
        pointer-events: auto;
        z-index: 12599;
    }
}

@keyframes notifDropdownInMobile {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Mobile Nav Visibility Enforcement --- */
/* --- Unified Mobile UI: Header & Chat (Final Consolidation) --- */
@media (max-width: 768px) {

    :root {
        /* ~two chip rows + padding; keep tight so less dead band under fixed header vs body padding */
        --header-mobile-stack-h: 70px;
        --sticky-header-offset: calc(var(--header-mobile-stack-h) + 0.45rem);
    }

    body {
        padding-top: var(--header-mobile-stack-h) !important;
        scroll-padding-top: var(--header-mobile-stack-h) !important;
    }

    /* Less dead space below fixed header (toolbar pages + container top padding). */
    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0.2rem !important;
        --page-toolbar-row-gap: 1rem;
    }

    main .container,
    .container {
        padding: 0.28rem 0.5rem 0.65rem !important;
    }

    /* Admin specific overlap protection if inside admin-root */
    main.admin-root {
        padding-top: 0 !important;
    }

    #site-header-wrapper {
        z-index: 12400 !important;
        --header-mobile-chip-size: 34px;
        background: transparent !important;
        border-bottom: 0 !important;
        /* Fixed .notification-dropdown must not be clipped by this wrapper (overflow clips fixed descendants). */
        overflow: visible !important;
        pointer-events: none !important;
    }

    /*
     * Hit-testing: pass events through the shell so (a) flex gaps between pills / icons don't eat clicks and
     * (b) any transparent band under the real chrome still reaches page content. Re-enable on real controls only.
     */
    .site-header {
        height: auto !important;
        min-height: 0 !important;
        padding: 0.2rem 0 !important;
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
        align-items: stretch !important;
        pointer-events: none !important;
    }

    .site-header .mobile-menu-overlay:not(.active) {
        pointer-events: none !important;
    }

    .site-header .mobile-menu-overlay.active {
        pointer-events: auto !important;
    }

    .header-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        align-content: center !important;
        padding: 0 !important;
        padding-top: 1px !important;
        padding-left: calc(0.5rem + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(0.5rem + env(safe-area-inset-right, 0px)) !important;
        column-gap: 0.5rem !important;
        row-gap: 0.4rem !important;
        /* body already overflow-x: hidden — here visible so alerts panel (position:fixed) is not clipped */
        overflow: visible !important;
        pointer-events: none !important;
    }

    /*
     * Cluster glass: shell ignores hits so flex seams / padding between logo and tabs pass through to the page.
     * Logo + .desktop-nav re-enable hits (scroll still works from the nav strip).
     */
    .site-header .header-nav-cluster {
        pointer-events: none !important;
    }

    .site-header .header-nav-cluster .header-left,
    .site-header .header-nav-cluster .header-center .desktop-nav {
        pointer-events: auto !important;
    }

    /*
     * Logo + main nav = one glass cluster — hug intrinsic width (no empty stretch). When the row is too tight,
     * .header-inner wraps: cluster on first line, .header-right on second (margin-left:auto keeps rail right).
     * overflow-x:auto — if cluster is wider than the viewport segment, scroll inside the pill.
     */
    .header-nav-cluster {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: var(--header-mobile-chip-size) !important;
        height: var(--header-mobile-chip-size) !important;
        max-height: var(--header-mobile-chip-size) !important;
        order: 1 !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        border: 0 !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }

    .header-nav-cluster::-webkit-scrollbar {
        display: none;
    }

    .header-left {
        flex: 0 0 auto !important;
        order: 0 !important;
    }

    .site-header .header-nav-cluster .header-left {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        align-self: center !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
        height: var(--header-mobile-chip-size) !important;
        max-height: var(--header-mobile-chip-size) !important;
        padding: 0 8px !important;
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: background var(--header-hover-ms) ease !important;
    }

    .site-header .header-nav-cluster .header-left .terminal-logo {
        display: flex !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;
    }

    .site-header .header-nav-cluster .header-left .logo-link {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .site-header .header-nav-cluster .header-left:hover {
        background: var(--header-hover-fill) !important;
        box-shadow: none !important;
    }

    /* Tabs: intrinsic width only — no flex-grow empty lane inside the cluster */
    .header-center {
        order: 0 !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        align-self: center !important;
        height: var(--header-mobile-chip-size) !important;
        max-height: var(--header-mobile-chip-size) !important;
        min-height: 0 !important;
        /* Horizontal scroll lives on .header-nav-cluster so logo+tabs scroll as one strip */
        overflow-x: visible !important;
        overflow-y: visible !important;
        pointer-events: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .header-right {
        flex: 0 0 auto !important;
        order: 2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        position: relative !important;
        /* Above nav cluster (backdrop-filter stacking); bell/dropdown stay clickable */
        z-index: 30 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        padding: 2px 4px !important;
        min-height: var(--header-mobile-chip-size) !important;
        max-height: var(--header-mobile-chip-size) !important;
        box-sizing: border-box !important;
        align-self: center !important;
        /* Gaps between icon tiles pass through to content */
        pointer-events: none !important;
    }

    .site-header .header-right {
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        border: 0 !important;
        border-radius: 10px !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
    }

    .site-header .header-right > * {
        pointer-events: auto !important;
    }

    /* Bridge padding from desktop hovers — creates ~12px dead hit strip under the bell on mobile */
    .site-header .header-right .notification-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Wrapper is flex chrome only; form + toggle are the real hit targets (gaps pass through). */
    .site-header .header-right > .search-expandable {
        pointer-events: none !important;
    }

    .site-header .header-right .search-expandable #header-search-form {
        pointer-events: auto !important;
    }

    /* Keep search expansion from growing the action rail taller than nav chips */
    .site-header .header-right .search-expandable,
    .site-header .header-right #header-search-form {
        max-height: var(--header-mobile-chip-size) !important;
        align-items: center !important;
    }

    .site-header .header-right #header-search-form:focus-within,
    .site-header .header-right #header-search-form.active {
        max-height: var(--header-mobile-chip-size) !important;
    }

    .header-right .nav-btn-icon,
    .header-right .profile-link-btn,
    .header-right .logout-btn,
    .header-right .admin-btn {
        display: flex !important;
        width: var(--header-mobile-chip-size) !important;
        height: var(--header-mobile-chip-size) !important;
        min-width: var(--header-mobile-chip-size) !important;
        min-height: var(--header-mobile-chip-size) !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        transition:
            background var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
    }

    .header-right .nav-btn-icon:hover,
    .header-right .profile-link-btn:hover,
    .header-right .logout-btn:hover,
    .header-right .admin-btn:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
    }

    .header-right .logout-btn:hover {
        color: var(--error-color) !important;
    }

    .header-right .nav-btn-vip:hover {
        color: #f5c542 !important;
    }

    .header-right .nav-btn-icon i {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    .header-right .profile-link-btn .avatar-tiny {
        width: calc(var(--header-mobile-chip-size) - 6px) !important;
        height: calc(var(--header-mobile-chip-size) - 6px) !important;
        max-width: calc(var(--header-mobile-chip-size) - 6px) !important;
        max-height: calc(var(--header-mobile-chip-size) - 6px) !important;
    }

    .site-header .header-right .profile-link-btn .avatar-tiny {
        border-width: 0 !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    }

    .site-header .header-right #search-toggle-btn:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        color: var(--header-hover-text) !important;
    }

    /* Admin/mod: extra icons on the right — shave padding/gap so primary nav keeps more width */
    body:has(.site-header .header-right .shield-btn) .site-header .header-right,
    body:has(.site-header .header-right .admin-btn) .site-header .header-right {
        gap: 1px !important;
        padding: 1px 3px !important;
    }

    .terminal-logo .logo-text {
        display: none !important;
    }

    .terminal-logo .prompt {
        font-size: 1.2rem !important;
    }

    .terminal-logo .prompt {
        font-size: 1.1rem !important;
    }

    .header-center .desktop-nav,
    .header-center .desktop-nav a {
        pointer-events: auto !important;
    }

    .site-header .header-nav-cluster .desktop-nav {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: max-content !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Fixed icon slots — never shrink below chip size (prevents overlap at ~768px) */
    .site-header .desktop-nav .nav-item {
        display: flex !important;
        flex: 0 0 var(--header-mobile-chip-size) !important;
        width: var(--header-mobile-chip-size) !important;
        min-width: var(--header-mobile-chip-size) !important;
        max-width: var(--header-mobile-chip-size) !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        padding: 0 !important;
        font-size: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        color: transparent !important;
        text-shadow: none !important;
        transition: background var(--header-hover-ms) ease !important;
    }

    .site-header .desktop-nav .nav-item:hover,
    .site-header .desktop-nav .nav-item:focus-visible {
        transform: none !important;
        background: var(--header-hover-fill) !important;
    }

    .site-header .desktop-nav .nav-item.active,
    .site-header .desktop-nav .nav-item.active:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: transparent !important;
    }

    .site-header .desktop-nav .nav-item i {
        margin: 0 !important;
        color: #fff !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    .site-header .desktop-nav .nav-item.active i {
        color: var(--primary-color) !important;
        filter: none !important;
    }

    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child:hover,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child:focus-visible,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child.active,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child.active:hover {
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child:hover,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child:focus-visible,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child.active,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child.active:hover {
        border-radius: 10px !important;
    }

    /* Outer pill = cluster glass radius; segment hovers use matching inner radius (see desktop ≥769px block). */

    .desktop-nav .nav-item span,
    .desktop-nav .nav-item .nav-text {
        display: none !important;
    }

    /*
     * 4. Chat: bottom sheet + dimmer (not full-viewport opaque container).
     * Previously: 0×0 wrapper + separately fixed FAB — WebKit/iOS often “drifts” that FAB toward mid-screen on scroll
     * when the dynamic toolbar resizes the visual viewport. Anchor one fixed flex box at the corner instead.
     */
    #chat-widget-container {
        position: fixed !important;
        inset: auto 0 0 auto !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: min(100vw, 100%) !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 11000 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        gap: 1rem !important;
        padding: 0 max(1rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) 0 !important;
        box-sizing: border-box !important;
    }

    #chat-toggle-btn {
        pointer-events: auto !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
    }

    .chat-backdrop:not(.hidden) {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10998 !important;
        background: rgba(0, 0, 0, 0.48) !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    .chat-window {
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 82dvh !important;
        max-height: 82vh !important;
        min-height: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        border: 1px solid var(--surface-border) !important;
        border-bottom: none !important;
        transform: none !important;
        background: var(--bg-color) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
        z-index: 11001 !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .chat-window .chat-messages {
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        overflow-y: auto !important;
    }

    .chat-window .chat-input-area {
        padding-bottom: max(0.38rem, env(safe-area-inset-bottom, 0px)) !important;
        touch-action: auto !important;
    }

    .chat-window.hidden {
        display: none !important;
    }

    .chat-header {
        height: 64px !important;
        padding: 0 1.5rem !important;
    }

    .chat-messages {
        padding: 1.5rem !important;
    }

    /* 5. Cleanup Hide Desktop Elements */
    .profile-link-btn .username,
    .mobile-toggle {
        display: none !important;
    }
}

/*
 * Very narrow phones: hide terminal logo; category chips start at the left edge; smaller header icons.
 * (< 442px per design)
 */
@media (max-width: 441px) {
    #site-header-wrapper {
        --header-mobile-chip-size: 32px;
    }

    .header-inner {
        column-gap: 0.35rem !important;
    }

    .header-left {
        display: none !important;
    }

    .header-center {
        order: 1 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: max-content !important;
        max-width: 100% !important;
    }

    .header-right {
        order: 2 !important;
        flex-shrink: 0 !important;
        gap: 0.12rem !important;
    }

    .desktop-nav {
        gap: 0.22rem !important;
    }

    .desktop-nav .nav-item i {
        font-size: 0.8rem !important;
    }

    .header-right .nav-btn-icon i {
        font-size: 0.8rem !important;
    }
}

/* 6. Extra Compact Mobile View (v47) */
@media (max-width: 380px) {
    #site-header-wrapper {
        --header-mobile-chip-size: 30px;
    }

    body {
        padding-top: var(--header-mobile-stack-h, 72px) !important;
        scroll-padding-top: var(--header-mobile-stack-h, 72px) !important;
    }

    .site-header {
        padding: 0.2rem 0 !important;
        /* Maximum compactness */
    }

    .terminal-logo .logo-text {
        font-size: 0.95rem !important;
        /* Prevent row wrapping */
    }

    .header-right {
        gap: 0.15rem !important;
    }

    .header-right .nav-btn-icon,
    .header-right .profile-link-btn,
    .header-right .logout-btn,
    .header-right .admin-btn {
        width: var(--header-mobile-chip-size) !important;
        height: var(--header-mobile-chip-size) !important;
        min-width: var(--header-mobile-chip-size) !important;
        min-height: var(--header-mobile-chip-size) !important;
    }

    .site-header .header-center {
        padding: 0 !important;
        margin-top: 0 !important;
    }

    .desktop-nav {
        gap: 0.4rem !important;
    }

    .desktop-nav .nav-item {
        width: var(--header-mobile-chip-size) !important;
        height: var(--header-mobile-chip-size) !important;
        min-width: var(--header-mobile-chip-size) !important;
        min-height: var(--header-mobile-chip-size) !important;
        padding: 0 !important;
        font-size: 0 !important;
        gap: 0 !important;
    }
}

/* Locked Button Styling (v43) */
.btn-locked {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.8;
}

.btn-locked:hover {
    background: rgba(0, 255, 157, 0.05) !important;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
    opacity: 1;
    transform: translateY(-1px);
}

.btn-locked i.fa-lock {
    margin-right: 8px;
    font-size: 0.9em;
    filter: drop-shadow(0 0 5px var(--primary-color));
}

/* Locked CTAs in toolbar rows: look like filter chips, not neon green .btn-locked */
.btn.btn-toolbar.btn-locked,
a.btn.btn-toolbar.btn-locked,
button.btn.btn-toolbar.btn-locked {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.btn.btn-toolbar.btn-locked:hover,
a.btn.btn-toolbar.btn-locked:hover,
button.btn.btn-toolbar.btn-locked:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
    transform: translateY(-1px);
}

.btn.btn-toolbar.btn-locked i,
.btn.btn-toolbar.btn-locked .icon {
    color: #fff !important;
    filter: none !important;
    margin-right: 0 !important;
}

.btn.btn-toolbar.btn-locked i.fa-lock {
    margin-right: 0 !important;
}

/*
 * List toolbars (Files / Resources / Discussions): Add file, Add resource, New topic, etc.
 * Global so mobile + desktop always beat .btn.btn-toolbar / .btn:hover / .btn-toolbar.btn-locked defaults.
 */
.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar,
.page-toolbar-page .page-toolbar-row > button.btn.btn-toolbar,
.page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
.page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar,
.page-toolbar-page .page-toolbar-row .forum-index-actions button.btn.btn-toolbar,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar,
.page-toolbar-page .forum-cat-actions button.btn.btn-toolbar {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--header-glass-bg) !important;
    backdrop-filter: var(--header-glass-blur) !important;
    -webkit-backdrop-filter: var(--header-glass-blur) !important;
    box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
    color: var(--header-hover-text) !important;
    text-shadow: none !important;
    transform: none !important;
    transition:
        box-shadow var(--header-hover-ms) ease,
        color var(--header-hover-ms) ease,
        background var(--header-hover-ms) ease !important;
}

.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover,
.page-toolbar-page .page-toolbar-row > button.btn.btn-toolbar:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions button.btn.btn-toolbar:hover,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar:hover,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar:hover,
.page-toolbar-page .forum-cat-actions button.btn.btn-toolbar:hover {
    border: 0 !important;
    color: var(--header-hover-text) !important;
    background: var(--header-glass-bg) !important;
    box-shadow:
        var(--header-glass-edge),
        inset 0 0 0 9999px var(--header-hover-fill),
        var(--header-glass-drop) !important;
    transform: none !important;
    text-shadow: none !important;
}

.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover i,
.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover .icon,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover i,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover .icon,
.page-toolbar-page .page-toolbar-row > button.btn.btn-toolbar:hover i,
.page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover i,
.page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover i,
.page-toolbar-page .page-toolbar-row .forum-index-actions button.btn.btn-toolbar:hover i,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar:hover i,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar:hover .icon,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar:hover i,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar:hover .icon,
.page-toolbar-page .forum-cat-actions button.btn.btn-toolbar:hover i {
    color: inherit !important;
    filter: none !important;
}

.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar.btn-locked,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar.btn-locked,
.page-toolbar-page .page-toolbar-row > button.btn.btn-toolbar.btn-locked,
.page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar.btn-locked,
.page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar.btn-locked,
.page-toolbar-page .page-toolbar-row .forum-index-actions button.btn.btn-toolbar.btn-locked,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar.btn-locked,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar.btn-locked,
.page-toolbar-page .forum-cat-actions button.btn.btn-toolbar.btn-locked {
    color: var(--text-secondary) !important;
}

.page-toolbar-page .page-toolbar-row > .btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .page-toolbar-row > button.btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .page-toolbar-row .forum-index-actions button.btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .forum-cat-actions .btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .forum-cat-actions a.btn.btn-toolbar.btn-locked:hover,
.page-toolbar-page .forum-cat-actions button.btn.btn-toolbar.btn-locked:hover {
    color: var(--header-hover-text) !important;
}

/* Like/comment keywords — same accent language as the rest of the UI */
.notif-liked {
    color: var(--error-color) !important;
    font-weight: 700;
}

.notif-commented {
    color: var(--primary-color) !important;
    font-weight: 700;
}

/* Tinted chips — align with site neon palette */
.notification-list > .notification-item.notif-like > .icon-box {
    background: rgba(255, 71, 87, 0.1) !important;
    border-color: rgba(255, 71, 87, 0.28) !important;
    color: #ff4757 !important;
}

.notification-list > .notification-item.notif-comment > .icon-box {
    background: rgba(0, 255, 157, 0.08) !important;
    border-color: rgba(0, 255, 157, 0.28) !important;
    color: var(--primary-color) !important;
}

.notification-list > .notification-item.notif-system > .icon-box {
    background: rgba(0, 255, 157, 0.1) !important;
    border-color: rgba(0, 255, 157, 0.3) !important;
    color: var(--primary-color) !important;
}

.notification-list > .notification-item.notif-payment > .icon-box {
    background: rgba(250, 204, 21, 0.12) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
    color: #facc15 !important;
}

.notification-list > .notification-item.notif-mention > .icon-box {
    background: rgba(0, 255, 157, 0.1) !important;
    border-color: rgba(0, 255, 157, 0.28) !important;
    color: var(--accent-color) !important;
}

.notification-list > .notification-item.notif-moderation > .icon-box {
    background: rgba(167, 139, 250, 0.12) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
    color: #a78bfa !important;
}

.notification-list > .notification-item:hover > .icon-box {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.notification-list > .notification-item.notif-like:hover > .icon-box {
    background: rgba(255, 71, 87, 0.14) !important;
    border-color: rgba(255, 71, 87, 0.38) !important;
}

.notification-list > .notification-item.notif-comment:hover > .icon-box {
    background: rgba(0, 255, 157, 0.12) !important;
    border-color: rgba(0, 255, 157, 0.38) !important;
}

.notification-list > .notification-item.notif-system:hover > .icon-box {
    background: rgba(0, 255, 157, 0.14) !important;
    border-color: rgba(0, 255, 157, 0.4) !important;
}

.notification-list > .notification-item.notif-payment:hover > .icon-box {
    background: rgba(250, 204, 21, 0.16) !important;
    border-color: rgba(250, 204, 21, 0.42) !important;
}

.notification-list > .notification-item.notif-mention:hover > .icon-box {
    background: rgba(0, 255, 157, 0.14) !important;
    border-color: rgba(0, 255, 157, 0.38) !important;
}

.notification-list > .notification-item.notif-moderation:hover > .icon-box {
    background: rgba(167, 139, 250, 0.16) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
}

/* Group-badge alerts: real badge colors in the icon column; inner badge matches .group-badge-pile ring + hover scale. */
.notification-list > .notification-item > .icon-box.icon-box--group-badge {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0;
    width: var(--notif-icon-col);
    height: var(--notif-icon-col);
    min-width: var(--notif-icon-col);
    min-height: var(--notif-icon-col);
    max-width: var(--notif-icon-col);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* default icon-box is hidden — clips .group-badge:hover scale */
    flex-shrink: 0;
}

.notification-list > .notification-item > .icon-box.icon-box--group-badge .notification-list-group-badge {
    margin-left: 0;
    cursor: help;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex: 0 0 24px;
    box-shadow: none;
}

.notification-list > .notification-item > .icon-box.icon-box--group-badge .notification-list-group-badge.group-badge--admin-border {
    box-shadow: none;
}

.notification-list > .notification-item > .icon-box.icon-box--group-badge .notification-list-group-badge[style*='border'],
.notification-list > .notification-item > .icon-box.icon-box--group-badge .notification-list-group-badge[style*='Border'] {
    box-shadow: none;
}

.notification-list > .notification-item.notif-group_badge:hover::after {
    background: rgba(255, 255, 255, 0.035);
}

.notification-list > .notification-item.notif-group_badge:hover + .notification-item {
    border-top-color: rgba(255, 255, 255, 0.045);
}

.notification-list > .notification-item.notif-group_badge > .notification-item-body > .msg strong {
    text-shadow: none !important;
    font-weight: 600;
}

.notification-list > .notification-item.notif-group_badge > .icon-box.icon-box--group-badge:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.chat-input-area .chat-cancel-edit-btn {
    margin-left: 0;
    border: 1px solid var(--surface-border);
    color: var(--text-secondary);
    background: transparent;
}

/* Resource card: make description stand out from background */
.resource-description-box {
    border: none;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-input-area .chat-cancel-edit-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Universal content/actions split for file/resource cards */
.item-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    align-items: start;
    width: 100% !important;
    min-width: 0 !important;
}

.item-main-row > div:first-child {
    min-width: 0 !important;
}

.file-actions-container,
.item-actions-container {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .item-main-row {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .item-main-row > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    .file-actions-container,
    .item-actions-container {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-top: 0.42rem !important;
        gap: 0.34rem !important;
    }
}

/* Profile: pick which group badges show next to username (classic + shared) */
.profile-showcase-editor {
    margin-bottom: 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--surface-border);
    background: var(--surface-color);
}

.profile-showcase-editor-head {
    margin-bottom: 0.5rem;
}

.profile-showcase-editor-head .profile-ach-heading {
    margin: 0 0 0.2rem 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-showcase-editor-head .profile-ach-hint {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.profile-ach-heading--classic {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
}

.profile-ach-hint--classic {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.88;
}

.profile-ach-hint--status {
    margin: 0.4rem 0 0 0;
    font-size: 0.75rem;
    opacity: 0.82;
    min-height: 1.15em;
}

.profile-showcase-toolbar {
    --profile-showcase-bar-height: 36px;
    --profile-showcase-tile-height: 42px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    overflow: visible;
}

.profile-showcase-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    overflow: visible;
}

.profile-showcase-toolbar-row .profile-showcase-actions {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.profile-showcase-toolbar .profile-showcase-tiles {
    flex: none;
    width: 100%;
    margin-bottom: 0;
    min-width: 0;
}

.profile-showcase-toolbar .profile-showcase-actions .btn.btn-sm {
    height: var(--profile-showcase-bar-height);
    min-height: var(--profile-showcase-bar-height);
    box-sizing: border-box;
    padding: 0 0.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.profile-showcase-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px dashed rgba(0, 255, 157, 0.28);
    background: rgba(0, 0, 0, 0.22);
}

/* Inline preview strip inside toolbar (label + mock in one row) */
.profile-showcase-preview--bar {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.45rem;
    margin-bottom: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: var(--profile-showcase-bar-height, 36px);
    box-sizing: border-box;
    border-radius: 8px;
    overflow: visible;
}

.profile-showcase-preview-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    flex-shrink: 0;
    opacity: 0.9;
}

.profile-showcase-preview--bar .profile-showcase-preview-label {
    line-height: 1.2;
    max-width: 3.2rem;
}

/* Match file/resource/forum author row; overflow visible so avatar hover matches site (scale / glow) */
.profile-showcase-preview-mock {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
}

.profile-showcase-preview-mock .profile-showcase-preview-author.username-tag {
    font-size: 0.75rem;
    max-width: none;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    z-index: 0;
}

.profile-showcase-preview-mock .profile-showcase-preview-author.username-tag:hover {
    z-index: 2;
}

.profile-showcase-preview-inner {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.profile-showcase-preview-mock .profile-showcase-preview-inner {
    flex-wrap: nowrap;
}

.profile-showcase-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    align-items: center;
}

.profile-showcase-tile {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    min-width: 0;
    max-width: 12rem;
    height: var(--profile-showcase-tile-height, 42px);
    min-height: var(--profile-showcase-tile-height, 42px);
    max-height: var(--profile-showcase-tile-height, 42px);
    padding: 0 0.55rem 0 0.42rem;
    border-radius: 9px;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
}

.profile-showcase-tile:hover {
    border-color: rgba(0, 255, 157, 0.38);
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.06);
}

.profile-showcase-tile.is-selected {
    border-color: rgba(0, 255, 157, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.12);
}

.profile-showcase-tile__order {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 3px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    border-radius: 4px;
    background: var(--primary-color);
    color: #0a0a0a;
}

.profile-showcase-tile__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--tile-bg);
    color: var(--tile-icon);
    font-size: 0.82rem;
}

.profile-showcase-tile__icon i {
    line-height: 1;
}

.profile-showcase-tile__name {
    font-size: 0.68rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
    padding-right: 0.95rem;
}

@keyframes showcaseTileShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.profile-showcase-tile--shake {
    animation: showcaseTileShake 0.4s ease;
}

.profile-showcase-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 540px) {
    .profile-showcase-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-showcase-toolbar-row .profile-showcase-preview--bar {
        max-width: none;
    }

    .profile-showcase-toolbar-row .profile-showcase-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Compact badge detail rows (profile achievements tab) */
.profile-ach-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.profile-ach-list--classic {
    margin-top: 0.65rem;
}

.profile-ach-card {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius, 8px);
    border: 1px solid rgba(0, 255, 157, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
    box-shadow: 0 1px 0 rgba(0, 255, 157, 0.06);
}

.profile-ach-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    background: var(--badge-bg);
    color: var(--badge-icon-color);
    font-size: 0.9rem;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}

.profile-ach-card__icon i {
    line-height: 1;
}

.profile-ach-card__body {
    min-width: 0;
    flex: 1;
}

.profile-ach-card__title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
}

.profile-ach-card__desc {
    margin: 0.2rem 0 0 0;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-ach-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-ach-card__meta .profile-ach-card__reason,
.profile-ach-card__meta .profile-ach-card__when {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.profile-ach-card__note-text {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.profile-ach-card__reason--empty .profile-ach-card__note-text {
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.65;
}

.telemetry-pod--granted {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}

.profile-ach-card__meta-sep {
    color: var(--text-secondary);
    opacity: 0.45;
    user-select: none;
    font-size: 0.7rem;
}

.profile-ach-card__vip-until {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.profile-ach-k--inline {
    display: inline;
    margin-right: 0.2rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    opacity: 0.9;
}

/* Realtime: one-shot pulse on stat <i> — variants set animation-name (like=red, download=muted green, comment=blue). */
@keyframes ulp-rt-stat-neutral-icon-pulse-kf {
    0%,
    100% {
        transform: scale(1);
        filter: none;
        color: inherit;
    }
    55% {
        transform: scale(1.06);
        filter: brightness(1.08);
    }
}

@keyframes ulp-rt-stat-like-icon-pulse-kf {
    0%,
    100% {
        transform: scale(1);
        color: inherit;
        filter: none;
    }
    50% {
        transform: scale(1.1);
        color: #ff7a8c;
        filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 90, 110, 0.55));
    }
}

@keyframes ulp-rt-stat-download-icon-pulse-kf {
    0%,
    100% {
        transform: scale(1);
        color: inherit;
        filter: none;
    }
    50% {
        transform: scale(1.07);
        color: #5cbf96;
        filter: brightness(1.06) drop-shadow(0 0 4px rgba(55, 150, 115, 0.32));
    }
}

@keyframes ulp-rt-stat-comment-icon-pulse-kf {
    0%,
    100% {
        transform: scale(1);
        color: inherit;
        filter: none;
    }
    50% {
        transform: scale(1.08);
        color: #7ec8ff;
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(90, 175, 255, 0.45));
    }
}

@keyframes ulp-rt-stat-comment-count-pulse-kf {
    0%,
    100% {
        color: inherit;
        text-shadow: none;
    }
    50% {
        color: #7ec8ff;
        text-shadow: 0 0 8px rgba(90, 175, 255, 0.4);
    }
}

.ulp-rt-stat-pulse-icon {
    display: inline-block;
    vertical-align: middle;
    transform-origin: center;
    animation: ulp-rt-stat-neutral-icon-pulse-kf 0.7s ease-out 1;
}

.ulp-rt-stat-pulse-icon--like {
    animation-name: ulp-rt-stat-like-icon-pulse-kf;
}

.ulp-rt-stat-pulse-icon--download {
    animation-name: ulp-rt-stat-download-icon-pulse-kf;
}

.ulp-rt-stat-pulse-icon--comment {
    animation-name: ulp-rt-stat-comment-icon-pulse-kf;
}

.ulp-rt-stat-pulse-count--comment {
    display: inline;
    animation: ulp-rt-stat-comment-count-pulse-kf 0.7s ease-out 1;
}

/* Footer: brand + compact live-online control (popover list) */
footer.footer--site-meta {
    padding: 0.45rem 2rem 1.65rem;
    margin-top: 0;
}

.ulp-footer-brand-line {
    margin: 0 0 0.2rem;
    color: var(--text-secondary);
}

.ulp-online-footer-slot {
    margin: 0.25rem 0 0;
}

/* Stretch to .container width; center only the pill — otherwise the popover shrinks to button width. */
.ulp-online-footer-slot--stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

.ulp-online-anchor {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Above .forum-reply-area (z-index 10 in rich-editor.css) so “Recently active” clears the composer. */
    z-index: 55;
    overflow: visible;
}

/* Passive = same chrome as list cards / open state (no green outline). */
.ulp-online-dot-btn {
    --ulp-online-btn-pill-r: 999px;
    position: relative;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 10px;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--surface-border);
    border-radius: var(--ulp-online-btn-pill-r);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #aaa);
    font-family: var(--font-main, 'Share Tech Mono', monospace);
    font-size: 0.78rem;
    line-height: 1.2;
    vertical-align: middle;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    direction: ltr;
    unicode-bidi: isolate;
}

.ulp-online-dot-btn:hover {
    border-color: var(--surface-border);
    background: rgba(255, 255, 255, 0.06);
}

.ulp-online-dot-btn:focus-visible {
    outline: 2px solid var(--surface-border);
    outline-offset: 2px;
}

/* Fetch in flight — label/dot hidden, text centered on pill until popover opens */
.ulp-online-dot-btn--loading {
    pointer-events: none;
    cursor: wait;
}

.ulp-online-dot-btn--loading .ulp-online-dot-btn__dot,
.ulp-online-dot-btn--loading .ulp-online-dot-btn__label {
    visibility: hidden;
}

.ulp-online-dot-btn--loading::after {
    content: 'Loading…';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.78rem;
    color: var(--text-secondary, #aaa);
    white-space: nowrap;
    pointer-events: none;
}

.ulp-online-dot-btn__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff9d;
    box-shadow: 0 0 8px #00ff9d;
    flex-shrink: 0;
}

.ulp-online-dot-btn--with-count {
    padding-left: 11px;
    padding-right: 13px;
}

/* Symmetric horizontal padding whenever open — uneven L/R made the bottom arc read “crooked”. */
.ulp-online-dot-btn.ulp-online-dot-btn--attached {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.ulp-online-dot-btn__label {
    font-size: 0.78rem;
}

/*
 * Popover open: pill becomes the bottom cap of the same surface as the list card + stem
 * (flat edge meets the connector — reads as one flowing shape).
 */
.ulp-online-dot-btn.ulp-online-dot-btn--attached {
    position: relative;
    /* Above .ulp-online-popover (z-index 3): overlap hides only the centre segment of the card edge on the seam. */
    z-index: 4;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Do not animate border-radius — tweening 1-value vs 4-value radii yields lopsided corners in some engines. */
    transition: border-color 0.2s ease, background 0.2s ease;
}

/*
 * Attached to popover: flat edge meets card; bottom keeps pill caps.
 * Drop top border + add 1px padding so box height matches closed state (no label jump).
 * !important + literal radii: beats UA button styles / WebKit radius glitches with transparent borders.
 */
.ulp-online-dot-btn.ulp-online-dot-btn--attached[data-ulp-popover-placement='above'] {
    border-top-width: 0 !important;
    padding-top: 6px;
    padding-bottom: 5px;
    border-top-style: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
    /* Pull up over the card’s bottom border — masks that segment; corners stay visible beyond pill width. */
    margin-top: -1px;
}

.ulp-online-dot-btn.ulp-online-dot-btn--attached[data-ulp-popover-placement='below'] {
    border-bottom-width: 0 !important;
    padding-top: 5px;
    padding-bottom: 6px;
    border-bottom-style: none !important;
    border-top-left-radius: 999px !important;
    border-top-right-radius: 999px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: -1px;
}

.ulp-online-dot-btn.ulp-online-dot-btn--attached:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--surface-border) !important;
}

.ulp-online-dot-btn.ulp-online-dot-btn--attached[data-ulp-popover-placement='above']:hover {
    border-top-width: 0 !important;
}

.ulp-online-dot-btn.ulp-online-dot-btn--attached[data-ulp-popover-placement='below']:hover {
    border-bottom-width: 0 !important;
}

.ulp-online-popover[hidden] {
    display: none !important;
}

/*
 * Absolute to .ulp-online-anchor; horizontal size/offset set in JS to match main.container inner width
 * (footer nests a second .container — anchor alone is narrower than the file list column).
 */
.ulp-online-popover {
    position: absolute;
    left: 0;
    right: auto;
    width: 100%;
    max-width: none;
    z-index: 3;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

.ulp-online-popover[data-placement='above'] {
    bottom: 100%;
    top: auto;
}

.ulp-online-popover[data-placement='below'] {
    top: 100%;
    bottom: auto;
}

/* Card fills the popover shell (anchor width); placement only affects animation direction. */
.ulp-online-popover__card {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: min(72vh, 620px);
    display: flex;
    flex-direction: column;
    border-radius: var(--modern-rounded-md, 10px);
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: visible;
    transform-origin: center bottom;
}

/*
 * Above the pill: full border on the card (incl. bottom); bottom corners rounded.
 * The seam line is hidden only where the pill overlaps — see margin-top on .ulp-online-dot-btn--attached.
 */
.ulp-online-popover__card[data-placement='above'] {
    --ulp-popover-enter-y: 12px;
    border-bottom-left-radius: var(--modern-rounded-md, 10px);
    border-bottom-right-radius: var(--modern-rounded-md, 10px);
}

.ulp-online-popover__card[data-placement='below'] {
    --ulp-popover-enter-y: -12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}

.ulp-online-popover:not([hidden]) .ulp-online-popover__card[data-placement] {
    animation: ulp-online-popover-reveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ulp-online-popover-reveal {
    from {
        opacity: 0;
        transform: translateY(var(--ulp-popover-enter-y, 10px));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ulp-online-popover:not([hidden]) .ulp-online-popover__card[data-placement] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.ulp-online-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0;
}

.ulp-online-popover__head-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

.ulp-online-popover__guest-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary, #7a7a7a);
    white-space: nowrap;
}

.ulp-online-popover__guest-meta:not([hidden])::before {
    content: '·';
    margin: 0 0.45em 0 0.15em;
    color: rgba(255, 255, 255, 0.22);
    font-weight: 300;
}

.ulp-online-popover__title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(0, 255, 157, 0.88);
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
}

.ulp-online-popover__close {
    margin: 0;
    padding: 0.15rem 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #777);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s ease;
    flex-shrink: 0;
}

.ulp-online-popover__close:hover {
    color: var(--text-primary, #ccc);
}

.ulp-online-popover__body {
    padding: 0.45rem 0.55rem 0.55rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ulp-online-popover__body::-webkit-scrollbar {
    width: 6px;
}

.ulp-online-popover__body::-webkit-scrollbar-track {
    background: transparent;
}

.ulp-online-popover__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.ulp-online-popover__empty {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
    text-align: center;
    padding: 0.35rem 0;
}

/* User chips flow in rows and wrap — same idea as the legacy widget tag row. */
.ulp-online-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.ulp-online-popover__list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
    flex: 0 1 auto;
    max-width: 100%;
}

.ulp-online-popover__list .username-tag {
    font-size: 0.88rem;
}

.ulp-online-popover__guest-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #aaa);
    font-size: 0.8rem;
}

.ulp-online-popover__user-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/*
 * Admin — forum prefix modal: one scroll surface for body; category listbox has its own height + overflow.
 */
#forum-prefix-modal.modal-overlay .modal-container {
    min-height: 0;
    max-height: min(92vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#forum-prefix-modal .modal-header {
    flex-shrink: 0;
}

#forum-prefix-modal #forum-prefix-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

#forum-prefix-modal #forum-prefix-form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#forum-prefix-modal #forum-prefix-form > div:last-child {
    flex-shrink: 0;
}

/*
 * Safari/WebKit: inner scroll on <select multiple> is flaky. Template sets size ≈ option count so the
 * listbox grows to full height; this wrapper scrolls instead (stable wheel / trackpad).
 */
.forum-prefix-categories-wrap {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
    max-height: min(44vh, 300px);
    min-height: 152px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#forum-prefix-modal .forum-prefix-categories-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    border: none !important;
    box-shadow: none !important;
    display: block;
    margin: 0;
    padding: 0.35rem 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* -------------------------------------------------------------------------- */
/* Global Desktop Redesign: seamless app shell (header + page rails)          */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    :root {
        --shell-bg: rgba(12, 13, 15, 0.94);
        --shell-border: rgba(255, 255, 255, 0.12);
        --shell-radius: 14px;
    }

    body {
        padding-top: 62px;
    }

    #site-header-wrapper {
        border-bottom: 1px solid var(--shell-border);
        /* Solid so scrolling content never shows through the fixed header */
        background: var(--bg-color) !important;
    }

    .site-header {
        height: 62px;
        border-bottom: 0 !important;
        background: var(--bg-color) !important;
        box-shadow: none !important;
    }

    .header-inner {
        position: relative;
    }

    /* Main top tabs: visually docked into the global shell */
    .desktop-nav {
        gap: 0 !important;
        padding: 2px !important;
        background: var(--shell-bg) !important;
        border: 1px solid var(--shell-border) !important;
        border-bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        position: relative;
        top: 1px;
    }

    .desktop-nav .nav-item {
        border: 1px solid transparent !important;
        border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-bottom-color: transparent !important;
        border-radius: 9px 9px 0 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        margin-bottom: -1px;
    }

    .desktop-nav .nav-item:last-child {
        border-right-color: transparent !important;
    }

    .desktop-nav .nav-item:hover {
        background: rgba(255, 255, 255, 0.035) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        border-bottom-color: transparent !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.12) !important;
    }

    .desktop-nav .nav-item.active,
    .desktop-nav .nav-item.active:hover {
        background: rgba(18, 18, 18, 0.98) !important;
        border-color: rgba(0, 255, 157, 0.34) !important;
        border-bottom-color: rgba(18, 18, 18, 0.98) !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.22), 0 0 10px rgba(0, 255, 157, 0.12) !important;
    }

    /* Remove visual gap under header; first rail now docks to shell */
    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0.22rem !important;
    }

    .page-toolbar-row {
        margin-top: 0 !important;
        margin-bottom: var(--page-toolbar-row-gap);
        padding: 0.38rem 0.44rem;
        border: 1px solid var(--shell-border);
        border-radius: var(--shell-radius);
        background: var(--shell-bg);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    /* Filter/context tabs inside content rail */
    .page-toolbar-row > .directory-tabs {
        padding: 0 !important;
        margin: 0 !important;
        align-self: stretch;
    }

    .page-toolbar-row .directory-tabs-scroll {
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.02);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip {
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip:first-child,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:first-child {
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip:last-child,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:last-child {
        border-right: 0 !important;
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:hover {
        background: rgba(255, 255, 255, 0.04) !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.1) !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active {
        background: rgba(0, 255, 157, 0.14) !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.26) !important;
        color: #eafff6 !important;
    }

    /* CTA in same language as rail */
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        box-shadow: none !important;
    }

    .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        border-color: rgba(0, 255, 157, 0.32) !important;
        background: rgba(0, 255, 157, 0.08) !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.12) !important;
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Seamless Shell v2: header -> toolbar -> content (desktop)                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    :root {
        --shell-surface: rgba(10, 11, 14, 0.96);
        --shell-stroke: rgba(255, 255, 255, 0.11);
        --shell-glow: rgba(0, 255, 157, 0.12);
    }

    body {
        padding-top: 60px !important;
    }

    /* One continuous top surface */
    #site-header-wrapper {
        border-bottom: 0 !important;
        background: transparent !important;
    }

    .site-header {
        height: 60px !important;
        background: var(--shell-surface) !important;
        border-bottom: 1px solid var(--shell-stroke) !important;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.26) !important;
    }

    /* Bridge under fixed header so first toolbar "grows" from it */
    body::before {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        height: 24px;
        pointer-events: none;
        z-index: 9988;
        background: linear-gradient(to bottom, rgba(10, 11, 14, 0.92), rgba(10, 11, 14, 0));
    }

    /* Header top tabs use same shell geometry (not capsule-in-capsule) */
    .desktop-nav {
        background: transparent !important;
        border: 1px solid var(--shell-stroke) !important;
        border-bottom: 0 !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 2px !important;
        top: 1px !important;
    }

    .desktop-nav .nav-item.active,
    .desktop-nav .nav-item.active:hover {
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.24), 0 0 10px var(--shell-glow) !important;
    }

    /* Dock first toolbar into the header plane */
    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .page-toolbar-page > .page-toolbar-row:first-child {
        margin-top: -1px !important; /* stitch to header bottom stroke */
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .page-toolbar-row {
        background: var(--shell-surface) !important;
        border: 1px solid var(--shell-stroke) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025),
            0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    }

    .page-toolbar-row .directory-tabs-scroll {
        background: rgba(255, 255, 255, 0.015) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active {
        background: rgba(0, 255, 157, 0.16) !important;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 157, 0.28), 0 0 10px rgba(0, 255, 157, 0.1) !important;
    }

    /* CTA should not feel detached from segmented tabs */
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        background: rgba(255, 255, 255, 0.02) !important;
        border-color: rgba(255, 255, 255, 0.11) !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Seamless Shell v3: softer transitions + unified color language             */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    :root {
        --ui-surface-0: rgba(10, 11, 14, 0.96);
        --ui-surface-1: rgba(14, 15, 19, 0.92);
        --ui-surface-2: rgba(255, 255, 255, 0.022);
        --ui-border-soft: rgba(255, 255, 255, 0.08);
        --ui-border-active: rgba(0, 255, 157, 0.28);
        --ui-hover-bg: rgba(0, 255, 157, 0.08);
        --ui-hover-ring: rgba(0, 255, 157, 0.16);
        --ui-active-bg: rgba(0, 255, 157, 0.14);
    }

    /* One continuous top surface with no hard seam */
    #site-header-wrapper {
        background: linear-gradient(to bottom, var(--ui-surface-0), rgba(10, 11, 14, 0.9)) !important;
    }

    .site-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    }

    body::before {
        height: 34px !important;
        background: linear-gradient(
            to bottom,
            rgba(10, 11, 14, 0.82) 0%,
            rgba(10, 11, 14, 0.48) 48%,
            rgba(10, 11, 14, 0) 100%
        ) !important;
    }

    .page-toolbar-page > .page-toolbar-row:first-child {
        margin-top: -2px !important;
    }

    .page-toolbar-row {
        background: linear-gradient(to bottom, var(--ui-surface-1), rgba(14, 15, 19, 0.86)) !important;
        border-color: var(--ui-border-soft) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.018),
            0 10px 24px rgba(0, 0, 0, 0.12) !important;
    }

    /* Unify top nav + toolbar tabs + CTA colors/hover */
    .desktop-nav .nav-item,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip,
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        color: var(--text-primary) !important;
        border-color: var(--ui-border-soft) !important;
        background: transparent !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            box-shadow 0.18s ease,
            color 0.18s ease !important;
    }

    .desktop-nav .nav-item:hover,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:hover,
    .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        background: var(--ui-hover-bg) !important;
        border-color: var(--ui-hover-ring) !important;
        box-shadow: inset 0 0 0 1px var(--ui-hover-ring) !important;
        color: #eafff6 !important;
    }

    .desktop-nav .nav-item.active,
    .desktop-nav .nav-item.active:hover,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover {
        background: var(--ui-active-bg) !important;
        border-color: var(--ui-border-active) !important;
        box-shadow: inset 0 0 0 1px var(--ui-border-active), 0 0 10px rgba(0, 255, 157, 0.1) !important;
        color: #eafff6 !important;
    }

    .desktop-nav .nav-item i,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip i,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip i,
    .page-toolbar-row > .btn.btn-toolbar i,
    .page-toolbar-row > a.btn.btn-toolbar i,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar i,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar i {
        color: inherit !important;
        filter: none !important;
    }

    .page-toolbar-row .directory-tabs-scroll {
        background: var(--ui-surface-2) !important;
        border-color: var(--ui-border-soft) !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Unified Shell v4 (clean): full cohesive redesign desktop                   */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    :root {
        --app-shell-bg: #101217;
        --app-shell-surface: #151922;
        --app-shell-surface-2: #171c27;
        --app-shell-border: rgba(255, 255, 255, 0.1);
        --app-shell-border-soft: rgba(255, 255, 255, 0.07);
        --app-shell-hover: rgba(0, 255, 157, 0.09);
        --app-shell-active: rgba(0, 255, 157, 0.16);
        --app-shell-active-border: rgba(0, 255, 157, 0.34);
    }

    body {
        padding-top: 62px !important;
    }

    /* Remove faux dark bridges; rely on real geometry only */
    body::before {
        display: none !important;
    }

    #site-header-wrapper {
        background: transparent !important;
        border-bottom: 0 !important;
    }

    .site-header {
        height: 62px !important;
        background: var(--app-shell-surface) !important;
        border-bottom: 1px solid var(--app-shell-border) !important;
        box-shadow: none !important;
    }

    .header-inner {
        gap: 0.9rem;
    }

    /* Primary nav tabs */
    .desktop-nav {
        background: var(--app-shell-bg) !important;
        border: 1px solid var(--app-shell-border) !important;
        border-radius: 11px !important;
        padding: 2px !important;
        gap: 2px !important;
        position: static !important;
    }

    .desktop-nav .nav-item {
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        background: transparent !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        border-right: 1px solid transparent !important;
    }

    .desktop-nav .nav-item:hover {
        background: var(--app-shell-hover) !important;
        border-color: rgba(0, 255, 157, 0.2) !important;
    }

    .desktop-nav .nav-item.active,
    .desktop-nav .nav-item.active:hover {
        background: var(--app-shell-active) !important;
        border-color: var(--app-shell-active-border) !important;
        color: #eafff6 !important;
    }

    .desktop-nav .nav-item i {
        color: inherit !important;
        filter: none !important;
    }

    /* Toolbar should visually belong to header system */
    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0.4rem !important;
    }

    .page-toolbar-row {
        background: var(--app-shell-surface) !important;
        border: 1px solid var(--app-shell-border) !important;
        border-radius: 12px !important;
        padding: 0.42rem !important;
        box-shadow: none !important;
        margin-bottom: var(--page-toolbar-row-gap);
    }

    .page-toolbar-row > .directory-tabs {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Secondary tabs (files/forums/resources filters) */
    .page-toolbar-row .directory-tabs-scroll {
        background: var(--app-shell-bg) !important;
        border: 1px solid var(--app-shell-border-soft) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip {
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        margin: 0 !important;
        border-right: 1px solid transparent !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:hover {
        background: var(--app-shell-hover) !important;
        border-color: rgba(0, 255, 157, 0.2) !important;
        color: #eafff6 !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover {
        background: var(--app-shell-active) !important;
        border-color: var(--app-shell-active-border) !important;
        color: #eafff6 !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip i,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip i {
        color: inherit !important;
        filter: none !important;
    }

    /* CTA in same family */
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        background: var(--app-shell-bg) !important;
        border: 1px solid var(--app-shell-border-soft) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        background: var(--app-shell-hover) !important;
        border-color: rgba(0, 255, 157, 0.22) !important;
        color: #eafff6 !important;
    }

    /* Unify icon colors inside CTA */
    .page-toolbar-row > .btn.btn-toolbar i,
    .page-toolbar-row > a.btn.btn-toolbar i,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar i,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar i {
        color: inherit !important;
        filter: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Unified Shell v5 (site-native): one continuous element, native palette     */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    body {
        padding-top: 62px !important;
    }

    body::before {
        display: none !important;
    }

    #site-header-wrapper {
        background: transparent !important;
        border: 0 !important;
    }

    .site-header {
        height: 62px !important;
        background: var(--surface-color) !important;
        border-bottom: 1px solid var(--surface-border) !important;
        box-shadow: none !important;
    }

    /* Dock content rail to header: visually one shell */
    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .page-toolbar-page > .page-toolbar-row:first-child {
        margin-top: -1px !important;
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .page-toolbar-row {
        background: var(--surface-color) !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: none !important;
        padding: 0.42rem !important;
    }

    /* Primary nav as native segmented control */
    .desktop-nav {
        background: transparent !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .desktop-nav .nav-item {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--text-primary) !important;
    }

    .desktop-nav .nav-item:hover {
        background: rgba(0, 255, 157, 0.06) !important;
        border-color: rgba(0, 255, 157, 0.18) !important;
        color: #eafff6 !important;
    }

    .desktop-nav .nav-item.active,
    .desktop-nav .nav-item.active:hover {
        background: rgba(0, 255, 157, 0.12) !important;
        border-color: rgba(0, 255, 157, 0.28) !important;
        color: #eafff6 !important;
    }

    /* Toolbar tabs should be part of same shell, not extra cards */
    .page-toolbar-row .directory-tabs-scroll {
        background: transparent !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--text-primary) !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:hover {
        background: rgba(0, 255, 157, 0.06) !important;
        border-color: rgba(0, 255, 157, 0.18) !important;
        color: #eafff6 !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover {
        background: rgba(0, 255, 157, 0.12) !important;
        border-color: rgba(0, 255, 157, 0.28) !important;
        color: #eafff6 !important;
    }

    /* CTA aligned with same visual system */
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        background: transparent !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        color: var(--text-primary) !important;
    }

    .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        background: rgba(0, 255, 157, 0.06) !important;
        border-color: rgba(0, 255, 157, 0.2) !important;
        color: #eafff6 !important;
    }
}

/* Discussions breadcrumb chip (structural lock to match Files/Resources chips) */
.forum-index-breadcrumb-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.32rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.forum-index-breadcrumb-chip .forum-index-scope-sep {
    opacity: 0.7 !important;
}

.forum-index-breadcrumb-chip .forum-index-crumb-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.32rem !important;
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.forum-index-breadcrumb-chip .forum-index-crumb-link i,
.forum-index-breadcrumb-chip .forum-index-crumb-link span {
    color: inherit !important;
}

/* -------------------------------------------------------------------------- */
/* Unified Shell v6: one-piece look + equal heights across sections           */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    :root {
        --unified-toolbar-height: 40px;
        --unified-shell-radius: 12px;
    }

    .site-header {
        border-bottom-color: var(--surface-border) !important;
    }

    .page-toolbar-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .page-toolbar-page > .page-toolbar-row:first-child {
        margin-top: -1px !important;
    }

    /* One-piece shell block */
    .page-toolbar-row {
        min-height: calc(var(--unified-toolbar-height) + 12px) !important;
        align-items: center !important;
        background: var(--surface-color) !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: var(--unified-shell-radius) !important;
        padding: 6px !important;
        gap: 8px !important;
    }

    /* Shared segmented rail for Files/Resources/Forums chips */
    .page-toolbar-row .directory-tabs {
        min-height: var(--unified-toolbar-height) !important;
        display: flex !important;
        align-items: center !important;
    }

    .page-toolbar-row .directory-tabs-scroll {
        min-height: var(--unified-toolbar-height) !important;
        height: var(--unified-toolbar-height) !important;
        display: inline-flex !important;
        align-items: stretch !important;
        background: transparent !important;
        border: 1px solid var(--surface-border) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip {
        height: calc(var(--unified-toolbar-height) - 6px) !important;
        min-height: calc(var(--unified-toolbar-height) - 6px) !important;
        max-height: calc(var(--unified-toolbar-height) - 6px) !important;
        padding: 0 14px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active {
        font-size: 0.8rem !important;
        font-family: var(--font-mono) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* CTA same exact visual height as chips */
    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        height: var(--unified-toolbar-height) !important;
        min-height: var(--unified-toolbar-height) !important;
        max-height: var(--unified-toolbar-height) !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        border: 1px solid var(--surface-border) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Keep right action container aligned on forum page too */
    .forum-page .page-toolbar-row > .forum-index-actions {
        min-height: var(--unified-toolbar-height) !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Unified Shell v7: final frame parity + header->toolbar stitch              */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    /* Kill container top offset only for toolbar-based pages */
    .page-toolbar-page {
        margin-top: -0.65rem !important; /* compensates .container top padding */
        padding-top: 0 !important;
    }

    /* Seamless docking line: header chrome transparent; controls are opaque islands */
    #site-header-wrapper {
        background: transparent !important;
        border-bottom: 0 !important;
    }

    .site-header {
        border-bottom: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Glass: icon rail keeps blur on the shell (unchanged). */
    .site-header .header-right {
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        border: 0 !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        box-sizing: border-box !important;
    }

    /*
     * Chrome: text + backdrop-filter on the same composited box often shimmers from a fixed x onward
     * (which letter “starts” it moves when you resize). Blur lives on ::underlay; labels sit above it.
     */
    .site-header .header-nav-cluster {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        gap: 0 !important;
        padding: 2px !important;
        border-radius: 12px !important;
        position: relative !important;
        overflow: visible !important;
        isolation: isolate !important;
        border: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .site-header .header-nav-cluster::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
    }

    .site-header .header-nav-cluster > .header-left,
    .site-header .header-nav-cluster > .header-center {
        position: relative !important;
        z-index: 1 !important;
    }

    .site-header .header-nav-cluster .header-left,
    .site-header .header-nav-cluster .desktop-nav {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .site-header .header-nav-cluster .header-left {
        display: flex !important;
        align-items: stretch !important;
        /* Left end of the glass pill: inner radius ≈ outer 12px − padding 2px (hover must not stay square here). */
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding: 0 12px !important;
        flex-shrink: 0 !important;
        border: 0 !important;
        transition: background var(--header-hover-ms) ease !important;
    }

    .site-header .header-nav-cluster .header-left .terminal-logo,
    .site-header .header-nav-cluster .header-left .logo-link {
        flex: 1 1 auto !important;
        align-self: stretch !important;
        min-height: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .site-header .header-nav-cluster .header-left .logo-link {
        justify-content: center !important;
    }

    .site-header .header-nav-cluster .header-left:hover {
        background: var(--header-hover-fill) !important;
    }

    .site-header .header-nav-cluster .header-left:hover .logo-text {
        color: var(--header-hover-text) !important;
    }

    .site-header .header-nav-cluster .terminal-logo:hover .logo-link {
        transform: none !important;
    }

    /* Primary nav: segmented row inside the cluster (no second glass shell) */
    .site-header .header-nav-cluster .header-center {
        display: flex !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .site-header .header-nav-cluster .desktop-nav {
        display: flex !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        top: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .site-header .header-right {
        border-radius: 12px !important;
        padding: 3px 6px !important;
        gap: 2px !important;
        /* Own layer: bell/badge/icon repaints should not thrash the nav-cluster text raster in Chrome. */
        isolation: isolate !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .site-header .desktop-nav .nav-item {
        flex: 1 1 auto !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
        color: rgba(245, 250, 255, 0.88) !important;
        text-shadow: none !important;
        position: relative !important;
        filter: none !important;
        /* One composited tile per tab (Chrome: avoids vertical “split” through label over glass::before). */
        transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        transition:
            background-color var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    .site-header .header-nav-cluster .desktop-nav .nav-item .nav-text {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /*
     * Right end of the glass pill: same inner 10px radius as .header-left (cluster 12px − 2px padding).
     * Do not rely on overflow:hidden to clip hovers — backdrop-filter on the cluster makes clipping inconsistent.
     */
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child:hover,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child:focus-visible,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child.active,
    .site-header .header-nav-cluster .desktop-nav .nav-item:last-child.active:hover {
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child:hover,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child:focus-visible,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child.active,
    .site-header .header-nav-cluster .desktop-nav .nav-item:only-child.active:hover {
        border-radius: 10px !important;
    }

    .site-header .desktop-nav .nav-item i {
        color: inherit !important;
        filter: none !important;
    }

    .site-header .desktop-nav .nav-item:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
        text-shadow: none !important;
        filter: none !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .site-header .desktop-nav .nav-item:hover i {
        color: inherit !important;
        filter: none !important;
        transform: none !important;
    }

    .site-header .desktop-nav .nav-item.active,
    .site-header .desktop-nav .nav-item.active:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
        text-shadow: none !important;
        filter: none !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .site-header .desktop-nav .nav-item.active i,
    .site-header .desktop-nav .nav-item.active:hover i {
        color: var(--primary-color) !important;
        filter: none !important;
        transform: none !important;
    }

    /* Kill legacy inset rings / borders on segments — one shell, no inner hairlines */
    .site-header .header-nav-cluster .desktop-nav .nav-item,
    .site-header .header-nav-cluster .desktop-nav .nav-item:hover,
    .site-header .header-nav-cluster .desktop-nav .nav-item:focus-visible,
    .site-header .header-nav-cluster .desktop-nav .nav-item.active,
    .site-header .header-nav-cluster .desktop-nav .nav-item.active:hover {
        border: 0 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .site-header .header-nav-cluster .desktop-nav .nav-item:focus-visible {
        outline: 2px solid rgba(0, 255, 157, 0.38) !important;
        outline-offset: 1px !important;
    }

    /* Icon rail: same hover fill + timing as logo pill + nav (no per-control green shift) */
    .site-header .header-right .nav-btn-icon,
    .site-header .header-right .profile-link-btn,
    .site-header .header-right .mobile-toggle {
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        transition:
            background var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
    }

    .site-header .header-right .nav-btn-icon:hover,
    .site-header .header-right .profile-link-btn:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
    }

    .site-header .header-right .nav-btn-icon:hover i,
    .site-header .header-right .profile-link-btn:hover i {
        color: inherit !important;
        filter: none !important;
    }

    .site-header .header-right .logout-btn:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--error-color) !important;
    }

    .site-header .header-right .logout-btn:hover i {
        color: inherit !important;
    }

    .site-header .header-right .nav-btn-icon:focus-visible,
    .site-header .header-right .profile-link-btn:focus-visible,
    .site-header .header-right .mobile-toggle:focus-visible {
        outline: 1px solid rgba(0, 255, 157, 0.45) !important;
        outline-offset: 2px !important;
    }

    /* #search-toggle-btn uses ID rules elsewhere — match icon-rail hover here (desktop) */
    .site-header .header-right #search-toggle-btn:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
    }

    .site-header .header-right #header-search-form:focus-within,
    .site-header .header-right #header-search-form.active {
        border-color: transparent !important;
        background: rgba(255, 255, 255, 0.05) !important;
        box-shadow: var(--header-glass-edge) !important;
    }

    .site-header .header-right #header-search-form:focus-within #search-toggle-btn,
    .site-header .header-right #header-search-form.active #search-toggle-btn {
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
    }

    .site-header .header-right .notification-container.notifications-open .notification-trigger {
        border: 0 !important;
        box-shadow: none !important;
    }

    .site-header .header-right .profile-link-btn .avatar-tiny {
        border-width: 0 !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    }

    .page-toolbar-page > .page-toolbar-row:first-child {
        margin-top: 0 !important;
        border-top-color: transparent !important;
    }

    /* Discussions looked more "inside" header than Files/Resources — keep it flush below header */
    .forum-page.page-toolbar-page {
        margin-top: -0.65rem !important; /* same offset as Files/Resources */
    }

    .forum-page .page-toolbar-row:first-child {
        margin-top: 0 !important;
    }

    /* Toolbar: same glass segmented track + hover/active as header Files/Discussions/Resources */
    .page-toolbar-row,
    .forum-page .page-toolbar-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        min-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-toolbar-row .directory-tabs,
    .forum-page .page-toolbar-row .directory-tabs {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
        align-self: center !important;
        display: flex !important;
        align-items: stretch !important;
    }

    /* Pill width follows labels; scroll only if many chips exceed viewport */
    .page-toolbar-page .directory-tabs-scroll {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 2px !important;
        border-radius: 10px !important;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        border: 0 !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        box-sizing: border-box !important;
        flex: 0 1 auto !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        min-height: calc(var(--unified-toolbar-height, 40px) + 4px) !important;
        height: auto !important;
        max-height: none !important;
        align-self: center !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
        color: rgba(245, 250, 255, 0.88) !important;
        text-shadow: none !important;
        transform: none !important;
        min-height: calc(var(--unified-toolbar-height, 40px) - 2px) !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 10px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        transition:
            background var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:first-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:first-child {
        border-radius: 7px 0 0 7px !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:last-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:last-child {
        border-radius: 0 7px 7px 0 !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:only-child,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:only-child {
        border-radius: 7px !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip .icon,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip i {
        color: inherit !important;
        filter: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:hover {
        background: var(--header-hover-fill) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip:hover i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip:hover .icon,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip:hover i {
        color: inherit !important;
        filter: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--header-hover-text) !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active .icon,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.active:hover i,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active i,
    .page-toolbar-page .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover i {
        color: var(--primary-color) !important;
        filter: none !important;
    }

    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip.active i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip.active .icon,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip.active:hover i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip:hover i,
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.filter-chip--vip:hover .icon {
        color: #f5c542 !important;
        filter: none !important;
    }

    /* Forum index: chip hugs breadcrumb text (same as Files strip), not full scroll width */
    .page-toolbar-page .directory-tabs-scroll > .filter-chip.forum-index-breadcrumb-chip {
        justify-content: flex-start !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        border-radius: 7px !important;
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        align-self: flex-start !important;
    }

    .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar {
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--header-glass-bg) !important;
        backdrop-filter: var(--header-glass-blur) !important;
        -webkit-backdrop-filter: var(--header-glass-blur) !important;
        box-shadow: var(--header-glass-edge), var(--header-glass-drop) !important;
        color: var(--header-hover-text) !important;
        text-shadow: none !important;
        transform: none !important;
        padding: 0 14px !important;
        min-height: calc(var(--unified-toolbar-height, 40px) + 4px) !important;
        height: auto !important;
        align-self: stretch !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition:
            box-shadow var(--header-hover-ms) ease,
            color var(--header-hover-ms) ease !important;
    }

    .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        border: 0 !important;
        color: var(--header-hover-text) !important;
        box-shadow:
            var(--header-glass-edge),
            inset 0 0 0 9999px var(--header-hover-fill),
            var(--header-glass-drop) !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .page-toolbar-row > .btn.btn-toolbar:hover i,
    .page-toolbar-row > a.btn.btn-toolbar:hover i,
    .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover i,
    .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover i,
    .page-toolbar-row > .btn.btn-toolbar:hover .icon,
    .page-toolbar-row > a.btn.btn-toolbar:hover .icon {
        color: inherit !important;
        filter: none !important;
    }

    /* Inner breadcrumb links must not introduce a second visual style */
    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-hit,
    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-current.forum-index-crumb-hit {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .forum-page .forum-index-context .forum-index-scope-sep {
        opacity: 0.7 !important;
        color: inherit !important;
    }

    /* Keep forum crumb content from stretching chip box differently */
    .forum-page .forum-index-context .forum-index-crumb-link.forum-index-crumb-hit {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        line-height: 1 !important;
    }
}