* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding-top: 120px;
            font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
            background-color: #0a0a0a;
            background-image:
                radial-gradient(120% 140% at 0% 0%, rgba(140, 140, 140, 0.14) 0%, rgba(140, 140, 140, 0) 56%),
                radial-gradient(120% 140% at 100% 100%, rgba(70, 70, 70, 0.16) 0%, rgba(70, 70, 70, 0) 60%),
                linear-gradient(145deg, #121212 0%, #0f0f0f 46%, #090909 100%),
                repeating-linear-gradient(
                    120deg,
                    rgba(255, 255, 255, 0.015) 0px,
                    rgba(255, 255, 255, 0.015) 1px,
                    rgba(255, 255, 255, 0) 1px,
                    rgba(255, 255, 255, 0) 9px
                );
            background-attachment: fixed;
            background-size: cover;
            transition: all 0.4s ease;
            overflow-x: hidden;
            position: relative;
        }

        @media (max-width: 768px) {
            body {
                padding-top: 90px;
            }
        }

       /* Səhifə scrollbar - dark/minimal */
        html {
            scrollbar-width: thin;
            scrollbar-color: rgba(88, 96, 110, 0.65) #0c0d11;
        }

        /* Chrome, Edge, Safari */
        body::-webkit-scrollbar {
            width: 9px;
        }

        body::-webkit-scrollbar-track {
            background: #0c0d11;
        }

        body::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #505866, #3f4754);
            border-radius: 999px;
            border: 2px solid #0c0d11;
            transition: background 0.3s ease;
        }

        body::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #636d7d, #4a5362);
        }

        body::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, #727d8e, #566072);
        }
        
        /* Sakura Canvas */
        #sakuraCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .content-wrapper {
            position: relative;
            z-index: 2;
        }

        .topbar {
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 42px;
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            backdrop-filter: blur(0);
            -webkit-backdrop-filter: blur(0);
            background: transparent;
            border-bottom: 1px solid transparent;
            overflow: visible;
            isolation: isolate;
            box-shadow: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .topbar::before,
        .topbar::after {
            content: '';
            position: absolute;
            bottom: 0;
            height: 1px;
            width: 50%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.18));
            pointer-events: none;
            opacity: 0;
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            transition: transform 0.72s cubic-bezier(0.2, 0.82, 0.24, 1), opacity 0.3s ease, box-shadow 0.5s ease;
        }

        .topbar::before {
            left: 0;
            transform: translateX(-100%);
        }

        .topbar::after {
            right: 0;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.18));
            transform: translateX(100%);
        }

        .topbar.scrolled {
            height: 82px;
            background: rgba(15, 15, 15, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid transparent;
            box-shadow: none;
        }

        .topbar.scrolled::before,
        .topbar.scrolled::after {
            opacity: 1;
            transform: translateX(0);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.16), 0 0 18px rgba(255, 255, 255, 0.08);
        }
        
        .topbar:not(.scrolled) .right .btn {
            border-color: transparent;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        
        .topbar:not(.scrolled) .logo img {
            height: 135px;
            margin-top: -35px;
        }

        .topbar:not(.scrolled) .right .register {
            background: rgba(255, 59, 59, 0.12);
            border-color: rgba(255, 98, 98, 0.18);
        }

        .topbar:not(.scrolled) .mobile-menu-toggle {
            background: transparent;
            box-shadow: none;
        }


.logo {
    cursor: pointer;
    transition: transform 0.1s ease;
}

.logo:hover {
    filter: drop-shadow(0 0 6px rgba(255, 59, 59, 0.4));
}

.logo:active {
    transform: scale(0.96);
}

        .left .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s ease;
        }

        .left .logo:hover {
            transform: translateY(-2px);
        }

        .logo img {
            height: 135px;
            margin-left: 2px;
            margin-top: -35px;
            display: block;
            transition: all 0.3s ease;
        }

        

        .logo-text {
            font-size: 28px;
            font-weight: 800;
            color: white;
            line-height: 22px;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        .logo:hover .logo-text {
            color: #ff3b3b;
            text-shadow: 0 0 15px rgba(255, 59, 59, 0.3);
        }

        .logo-text span {
            font-size: 14px;
            font-weight: 600;
            color: #bdbdbd;
            transition: color 0.3s ease;
        }

        .logo:hover .logo-text span {
            color: #fff;
        }

        .center {
            display: flex;
            align-items: center;
            gap: 28px;
            margin-left: 30px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 7px;
            color: white;
            text-decoration: none;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
            position: relative;
            padding: 8px 10px;
            border-radius: 6px;
            transition: background 0.18s ease;
        }

        .nav-item::after {
            display: none;
        }

        .nav-item:hover::after {
            display: none;
        }

        .nav-item:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
        }

        .nav-item .icon {
            height: 20px;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .nav-item i.icon,
        .nav-more-link i.icon {
            display: inline-flex;
            width: 20px;
            align-items: center;
            justify-content: center;
            color: currentColor;
            font-size: 18px;
            line-height: 1;
        }

        .nav-item:hover .icon {
            opacity: 0.8;
            transform: none;
        }

        .more {
            font-size: 25px;
            margin-top: -4px;
            transition: transform 0.3s ease;
        }

        .nav-item:hover .more {
            transform: rotate(180deg);
        }

        .nav-more {
            position: relative;
            display: flex;
            align-items: center;
        }

        .nav-more-toggle {
            cursor: pointer;
            min-width: 34px;
            justify-content: center;
            padding: 8px 4px;
        }

        .nav-dots-toggle::after {
            display: none;
        }

        .nav-dots {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 3px;
            width: 20px;
            height: 10px;
            transform: rotate(90deg);
            transform-origin: center;
            transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
        }

        .nav-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #e9eef8;
            opacity: 0.9;
            transition: transform 0.22s ease, opacity 0.22s ease, background 0.22s ease;
        }

        .nav-more.open .nav-dots span {
            background: #ffffff;
            opacity: 1;
        }

        .nav-more.open .nav-dots {
            transform: rotate(0deg);
        }

        .nav-more-panel {
            position: absolute;
            top: calc(100% + 18px);
            right: 0;
            width: 280px;
            padding: 14px;
            border-radius: 18px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.38);
            display: grid;
            gap: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px);
            pointer-events: none;
            overflow: hidden;
            isolation: isolate;
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
            z-index: 1120;
        }

        .nav-more-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: rgba(10, 12, 18, 0.34);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 0;
        }

        .nav-more.open .nav-more-panel {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nav-more-panel > * {
            position: relative;
            z-index: 1;
        }

        .nav-more-link {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 48px;
            padding: 11px 14px;
            border-radius: 14px;
            text-decoration: none;
            color: #dce1ea;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            background: transparent;
            border: 1px solid transparent;
            opacity: 0;
            transform: translateY(6px);
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.24s ease, color 0.2s ease, opacity 0.22s ease;
        }

        .nav-more.open .nav-more-link {
            opacity: 1;
            transform: translateY(0);
        }

        .nav-more.open .nav-more-link:nth-child(1) { transition-delay: 0.02s; }
        .nav-more.open .nav-more-link:nth-child(2) { transition-delay: 0.05s; }
        .nav-more.open .nav-more-link:nth-child(3) { transition-delay: 0.08s; }

        .nav-more-link .icon {
            width: 17px;
            height: 17px;
            opacity: 0.9;
            filter: brightness(1.8) grayscale(1);
        }

        .nav-more-link:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.12);
            color: #fff;
            transform: translateX(2px);
        }

        .nav-more-link.is-active {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.18);
            color: #ffffff;
        }

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

        .right .search-toggle {
            flex: 0 0 auto;
        }

        .right .btn {
            font-weight: 700;
        }

        .mobile-menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            border: none;
            background: transparent;
            color: #fff;
            padding: 0;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 4px;
            transition: all 0.25s ease;
            box-shadow: none;
            outline: none;
        }

        .mobile-menu-toggle:hover {
            background: transparent;
        }

        .mobile-menu-toggle span {
            width: 18px;
            height: 2px;
            border-radius: 999px;
            background: #f3f6ff;
            transition: transform 0.24s ease, opacity 0.24s ease, width 0.24s ease, background 0.25s ease, box-shadow 0.25s ease;
        }

        .mobile-menu-toggle span:nth-child(2) {
            width: 14px;
        }

        .mobile-menu-toggle:hover span {
            background: #ff9f9f;
            box-shadow: 0 0 10px rgba(255, 104, 104, 0.45);
        }

        body.drawer-open .mobile-menu-toggle span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        body.drawer-open .mobile-menu-toggle span:nth-child(2) {
            opacity: 0;
        }

        body.drawer-open .mobile-menu-toggle span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        .mobile-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
            z-index: 1100;
        }

        .mobile-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: min(340px, 88vw);
            height: 100vh;
            background:
                radial-gradient(120% 90% at 110% 100%, rgba(70, 40, 40, 0.25), transparent 60%),
                linear-gradient(180deg, rgba(14, 15, 22, 0.98), rgba(8, 8, 12, 0.98));
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: -18px 0 42px rgba(0, 0, 0, 0.58);
            transform: translateX(100%);
            transition: transform 0.3s ease;
            z-index: 1101;
            padding: 16px 14px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .mobile-drawer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 4px 6px;
        }

        .mobile-drawer-title {
            color: #fff;
            font-size: 28px;
            font-weight: 800;
            line-height: 1.05;
        }

        .mobile-drawer-close {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.07);
            color: #fff;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
        }

        .mobile-drawer-search {
            padding: 2px 2px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-drawer-search-input {
            width: 100%;
            height: 44px;
            border-radius: 13px;
            border: 1px solid rgba(255, 255, 255, 0.17);
            background: rgba(255, 255, 255, 0.08);
            color: #e9edf4;
            padding: 0 14px;
            font-size: 15px;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .mobile-drawer-search-input::placeholder {
            color: rgba(233, 237, 244, 0.55);
        }

        .mobile-drawer-search-input:focus {
            border-color: rgba(255, 59, 59, 0.55);
            box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.15);
        }

        .mobile-drawer-search-results {
            display: none;
            max-height: 44vh;
            overflow-y: auto;
            padding: 8px 2px 2px;
            margin-top: -2px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .mobile-drawer-search-results.active {
            display: grid;
            gap: 6px;
        }

        .mobile-drawer-result {
            display: grid;
            grid-template-columns: 42px 1fr;
            align-items: center;
            gap: 10px;
            min-height: 50px;
            padding: 6px 4px;
            text-decoration: none;
            border-radius: 10px;
            color: #e7ebf1;
            transition: background 0.2s ease;
            opacity: 0;
            transform: translateY(8px);
            animation: drawerResultIn 0.42s ease forwards;
            animation-delay: calc(var(--result-index, 0) * 80ms);
        }

        .mobile-drawer-result:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .mobile-drawer-result img {
            width: 38px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: #111;
        }

        .mobile-drawer-result span {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.25;
            color: #e1e6ef;
        }

        .mobile-drawer-empty {
            padding: 6px 2px 10px;
            color: rgba(230, 235, 244, 0.65);
            font-size: 14px;
            font-weight: 600;
            opacity: 0;
            transform: translateY(6px);
            animation: drawerResultIn 0.34s ease forwards;
        }

        @keyframes drawerResultIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .mobile-drawer-nav {
            display: grid;
            gap: 4px;
            padding-top: 2px;
        }

        .mobile-drawer-nav .nav-item {
            font-size: 16px;
            font-weight: 700;
            padding: 10px 8px;
            border-radius: 10px;
            background: transparent;
            color: #d7dde7;
        }

        .mobile-drawer-nav .nav-item::after {
            display: none;
        }

        .mobile-drawer-nav .nav-item .icon {
            width: 17px;
            height: 17px;
            opacity: 0.9;
            filter: brightness(1.9) grayscale(1);
        }

        .mobile-drawer-actions {
            margin-top: 4px;
            display: grid;
            gap: 10px;
        }

        .mobile-drawer-profile-card {
            position: relative;
            display: grid;
            gap: 12px;
            padding-top: 6px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .mobile-drawer-profile-link {
            display: flex;
            align-items: center;
            gap: 14px;
            min-height: 54px;
            padding: 10px 6px;
            text-decoration: none;
            color: #f2f4f8;
            position: relative;
            z-index: 1;
            border-radius: 14px;
            transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
        }

        .mobile-drawer-profile-link.has-banner {
            display: block;
            position: relative;
            left: auto;
            right: auto;
            bottom: auto;
            margin-top: 0;
            padding: 0;
            text-align: left;
            min-height: auto;
            z-index: 2;
        }

        .mobile-drawer-profile-link:hover {
            background: rgba(255,255,255,0.04);
            box-shadow: 0 8px 18px rgba(0,0,0,0.18);
        }

        .mobile-drawer-profile-link:active {
            transform: scale(0.97);
            filter: brightness(1.04);
        }

        .mobile-drawer-profile-banner {
            width: 100%;
            height: 62px;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            margin-bottom: 0;
        }

        .mobile-drawer-profile-banner-img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        .mobile-drawer-profile-avatar {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #6f3159, #2d2141 55%, #12131a);
            border: 1px solid rgba(255,255,255,0.16);
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            overflow: hidden;
            box-shadow: 0 8px 18px rgba(0,0,0,0.28);
        }

        .mobile-drawer-profile-avatar.has-image {
            background: rgba(255,255,255,0.06);
        }

        .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-avatar,
        .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-copy {
            position: absolute;
            z-index: 2;
        }

        .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-avatar {
            left: 12px;
            bottom: 8px;
        }

        .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-copy {
            left: 64px;
            bottom: 18px;
        }

        .mobile-drawer-profile-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .mobile-drawer-profile-copy {
            font-size: 16px;
            font-weight: 800;
            color: #f3f4f7;
        }

        .mobile-drawer-profile-action {
            appearance: none;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 46px;
            padding: 8px 6px;
            border: none;
            background: transparent;
            color: #d9dde6;
            font: inherit;
            font-size: 15px;
            font-weight: 700;
            text-align: left;
            text-decoration: none;
        }

        .mobile-drawer-profile-action:hover {
            transform: none;
            filter: none;
        }

        .mobile-drawer-profile-action.is-logout {
            color: #ff6d6d;
        }

        .mobile-drawer-profile-action-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            display: block;
            opacity: 0.95;
        }

        .mobile-drawer-profile-action.is-logout .mobile-drawer-profile-action-icon {
            filter: brightness(0) saturate(100%) invert(61%) sepia(67%) saturate(3022%) hue-rotate(326deg) brightness(102%) contrast(102%);
        }

        .mobile-drawer-profile-action.is-notify .mobile-drawer-profile-action-icon {
            filter: brightness(0) saturate(100%) invert(100%);
        }

        .mobile-drawer-profile-action-chevron {
            margin-left: auto;
            width: 8px;
            height: 8px;
            border-right: 2px solid rgba(255,255,255,0.7);
            border-bottom: 2px solid rgba(255,255,255,0.7);
            transform: rotate(45deg);
        }

        .mobile-drawer-actions .btn {
            width: 100%;
            justify-content: center;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
        }

        .mobile-drawer-actions .btn.login {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .mobile-drawer-actions .btn.register {
            background: #a61b1b;
            border: 1px solid rgba(255, 72, 72, 0.4);
        }

        .mobile-drawer-actions .btn:hover {
            transform: none;
            box-shadow: none;
        }

        .mobile-drawer.active {
            transform: translateX(0);
        }

        .mobile-drawer-backdrop.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.drawer-open {
            overflow: hidden;
        }

        body.fragment-modal-open {
            overflow: hidden;
        }

        .btn {
            background: #1b1b1e;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 15px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn:hover {
            background: #2a2a2d;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .btn:active {
            transform: translateY(-1px) scale(0.98);
            transition: transform 0.1s ease;
        }

        .btn .icon {
            height: 18px;
            transition: transform 0.3s ease;
        }

        .btn:hover .icon {
            transform: scale(1.2);
        }

        .login, .register {
            background: #2a2d31;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.login:hover, .register:hover {
            background: linear-gradient(135deg, #3b3f45, #919191);
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(255, 59, 59, 0.2);
        }

        /* Topbar auth buttons - minimalist variant */
        .right .btn {
            min-height: 40px;
            padding: 9px 15px;
            border-radius: 11px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.15px;
            color: rgba(244, 244, 244, 0.96);
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.24);
            transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
        }

        .right .btn::before {
            display: none;
        }

        .right .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.12) 45%, transparent 70%);
            transform: translateX(-130%);
            transition: transform 0.45s ease;
            pointer-events: none;
        }

        .right .btn .icon {
            height: 16px;
            opacity: 0.9;
            transition: opacity 0.2s ease, filter 0.2s ease;
            transform: none !important;
        }

        .right .login {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
        }

        .right .register {
            background: linear-gradient(180deg, rgba(255, 59, 59, 0.2), rgba(255, 59, 59, 0.1));
            border-color: rgba(255, 98, 98, 0.42);
            box-shadow: inset 0 1px 0 rgba(255, 210, 210, 0.12), 0 8px 16px rgba(130, 0, 0, 0.26);
        }

        .right .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            color: #ffffff;
        }

        .right .btn:hover::after {
            transform: translateX(130%);
        }

        .right .login:hover {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
            border-color: rgba(255, 255, 255, 0.28);
        }

        .right .register:hover {
            background: linear-gradient(180deg, rgba(255, 59, 59, 0.26), rgba(255, 59, 59, 0.14));
            border-color: rgba(255, 126, 126, 0.56);
            box-shadow: inset 0 1px 0 rgba(255, 218, 218, 0.16), 0 12px 20px rgba(140, 0, 0, 0.32);
        }

        .right .btn:hover .icon {
            opacity: 1;
            filter: drop-shadow(0 0 4px rgba(255, 59, 59, 0.32));
        }

        .right .btn:active {
            transform: translateY(0) scale(0.98);
        }

        .auth-header-cluster {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .auth-header-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(0, 0, 0, 0.24);
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }

        .auth-header-icon:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.24);
        }

        .auth-header-icon-img {
            width: 18px;
            height: 18px;
            object-fit: contain;
        }

        .auth-profile-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .auth-profile-arrow {
            width: 8px;
            height: 8px;
            border-right: 2px solid rgba(255,255,255,0.76);
            border-bottom: 2px solid rgba(255,255,255,0.76);
            transform: rotate(45deg) translateY(-1px);
            opacity: 0.9;
        }

        .auth-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255,255,255,0.34);
            outline: 2px solid rgba(255, 114, 182, 0.35);
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,0.34), transparent 32%),
                linear-gradient(135deg, #5f294e, #2c203d 54%, #16171f);
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.08em;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
}

/* List page */
body.list-page {
    min-height: 100vh;
    padding-top: 0;
    background-color: #0a0a0a;
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(140, 140, 140, 0.14) 0%, rgba(140, 140, 140, 0) 56%),
        radial-gradient(120% 140% at 100% 100%, rgba(70, 70, 70, 0.16) 0%, rgba(70, 70, 70, 0) 60%),
        linear-gradient(145deg, #121212 0%, #0f0f0f 46%, #090909 100%),
        repeating-linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.015) 0px,
            rgba(255, 255, 255, 0.015) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 9px
        );
    background-attachment: fixed;
    background-size: cover;
    color: #f7f7fb;
    font-family: "Inter", "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body.list-page.home-page {
    padding-top: 0;
}

body.list-page .nav-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.user-list-shell {
    width: min(calc(100% - 36px), 1240px);
    margin: 0 auto;
    padding: 104px 0 64px;
}

.user-list-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 22px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.user-list-hero-copy {
    min-width: 0;
}

.user-list-kicker {
    display: inline-flex;
    align-items: center;
    color: #ff9bd3;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.user-list-hero h1 {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: 0;
    font-weight: 760;
}

.user-list-hero p {
    margin: 0;
    color: rgba(247, 247, 251, 0.64);
    font-size: 15px;
    font-weight: 650;
}

.user-list-info {
    display: grid;
    gap: 16px;
    margin-top: 8px;
    color: #ffffff;
}

.user-list-info[hidden] {
    display: none;
}

.user-list-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(247, 247, 251, 0.84);
    font-size: 15px;
    font-weight: 580;
    line-height: 1.2;
}

.user-list-info-by {
    color: #ffffff;
    font-weight: 680;
}

.user-list-owner-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1684ff;
    text-decoration: none;
    font-weight: 650;
}

.user-list-owner-link:hover {
    color: #5cadff;
}

.user-list-owner-avatar {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7dc6, #6978ff);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.user-list-owner-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.user-list-info-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
}

.user-list-privacy-lock {
    position: relative;
    width: 16px;
    height: 15px;
    display: inline-block;
    border: 2px solid rgba(247, 247, 251, 0.78);
    border-radius: 3px;
    transform: translateY(1px);
}

.user-list-privacy-lock::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(247, 247, 251, 0.78);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    transform: translateX(-50%);
}

.user-list-info-count {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.user-list-info:not([hidden]) + p {
    margin-top: 14px;
}

.user-list-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.user-list-hero-actions[hidden] {
    display: none;
}

.user-list-hero-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
    font-size: 13px;
    font-weight: 680;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.user-list-hero-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-1px);
}

.user-list-like-btn.is-liked {
    border-color: rgba(255, 99, 118, 0.42);
    background: linear-gradient(135deg, rgba(255, 99, 118, 0.95), rgba(255, 77, 129, 0.86));
    box-shadow: 0 12px 24px rgba(255, 77, 129, 0.18);
}

.user-list-like-btn.is-liked:hover {
    border-color: rgba(255, 118, 138, 0.5);
    background: linear-gradient(135deg, rgba(255, 112, 130, 0.98), rgba(255, 86, 139, 0.92));
}

.user-list-like-count {
    min-width: 1ch;
    opacity: 0.82;
}

.user-list-hero-btn[hidden] {
    display: none;
}

.user-list-hero-btn-icon {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    filter: brightness(1.9) grayscale(1);
}

.user-list-like-btn .user-list-hero-btn-icon {
    filter: none !important;
    -webkit-filter: none !important;
}

.user-list-side {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 14px;
    width: min(100%, 430px);
}

.user-list-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 10px;
    width: min(100%, 390px);
}

.user-list-stat {
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.user-list-stat strong {
    display: block;
    color: #ffffff;
    font-size: 25px;
    font-weight: 720;
    line-height: 1;
}

.user-list-stat span {
    display: block;
    margin-top: 8px;
    color: rgba(247, 247, 251, 0.58);
    font-size: 12px;
    font-weight: 620;
}

.user-list-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(170px, 210px) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 0 22px;
}

.user-list-search,
.user-list-sort {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.user-list-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 13px;
}

.user-list-search img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    opacity: 0.65;
}

.user-list-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 560;
}

.user-list-search input::placeholder {
    color: rgba(247, 247, 251, 0.42);
}

.user-list-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.user-list-filters::-webkit-scrollbar {
    display: none;
}

.user-list-filter {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(247, 247, 251, 0.52);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition:
        background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.24s ease;
}

.user-list-filter:hover,
.user-list-filter.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

.user-list-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    position: relative;
    overflow: visible;
}

.user-list-sort-label {
    color: rgba(247, 247, 251, 0.48);
    font-size: 12px;
    font-weight: 620;
}

.user-list-sort-toggle {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px;
    align-items: center;
    gap: 9px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.user-list-sort-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-list-sort-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(247, 247, 251, 0.7);
    border-bottom: 2px solid rgba(247, 247, 251, 0.7);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease;
}

.user-list-sort.is-open .user-list-sort-arrow {
    border-color: #ffffff;
    transform: translateY(2px) rotate(225deg);
}

.user-list-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: min(100%, 230px);
    min-width: 190px;
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(10, 10, 12, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    transform: translateY(-7px) scale(0.98);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.2s;
}

.user-list-sort.is-open .user-list-sort-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.user-list-sort-option {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(247, 247, 251, 0.64);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    padding: 0 10px;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        color 0.2s ease,
        background 0.22s ease,
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.user-list-sort.is-open .user-list-sort-option {
    opacity: 1;
    transform: translateY(0);
}

.user-list-sort.is-open .user-list-sort-option:nth-child(2) {
    transition-delay: 0.03s;
}

.user-list-sort.is-open .user-list-sort-option:nth-child(3) {
    transition-delay: 0.06s;
}

.user-list-sort.is-open .user-list-sort-option:nth-child(4) {
    transition-delay: 0.09s;
}

.user-list-sort-option:hover,
.user-list-sort-option.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

.user-list-view-switch {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.user-list-view-btn {
    width: 50px;
    min-height: 42px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: rgba(247, 247, 251, 0.56);
    cursor: pointer;
    transition:
        background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.24s ease,
        filter 0.24s ease;
}

.user-list-view-btn:last-child {
    border-right: 0;
}

.user-list-view-btn:hover,
.user-list-view-btn.is-active {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    filter: brightness(1.05);
}

.user-list-view-icon {
    width: 22px;
    height: 22px;
    display: grid;
    gap: 3px;
}

.user-list-view-icon i {
    display: block;
    border: 2px solid currentColor;
}

.user-list-view-icon-poster {
    grid-template-columns: repeat(2, 1fr);
}

.user-list-view-icon-banner,
.user-list-view-icon-compact {
    grid-template-rows: repeat(3, 1fr);
}

.user-list-view-icon-banner i {
    border-width: 2px 4px;
}

.user-list-view-icon-compact i {
    position: relative;
    border-width: 2px;
}

.user-list-view-icon-compact i::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 2px;
    top: 50%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.user-list-content {
    min-height: 360px;
}

.user-list-grid {
    display: grid;
    gap: 12px;
}

.user-list-grid.is-poster-view {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 22px 14px;
}

.user-list-grid.is-banner-view {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.user-list-grid.is-compact-view {
    grid-template-columns: 1fr;
}

.user-list-poster-card {
    position: relative;
    min-width: 0;
    animation: listCardIn 0.28s ease both;
}

.user-list-poster-card a {
    color: inherit;
    text-decoration: none;
}

.user-list-grid.is-poster-view .user-list-poster-card .img {
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
}

.user-list-grid.is-poster-view .user-list-poster-card .name {
    height: 40px;
    margin-top: 9px;
    padding: 0 2px;
    text-align: left;
    color: #f3f5f8;
    font-size: 14px;
    font-weight: 750;
}

.user-list-poster-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(12, 13, 18, 0.78);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.user-list-poster-card:hover .user-list-poster-remove,
.user-list-poster-remove:focus-visible {
    opacity: 1;
}

.user-list-poster-remove:hover {
    background: rgba(255, 98, 128, 0.82);
    transform: translateY(-1px);
}

.user-list-poster-remove img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.user-list-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    min-height: 156px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.052);
    animation: listCardIn 0.28s ease both;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.user-list-banner-media {
    display: none;
}

.user-list-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

@keyframes listCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-list-card-link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.user-list-poster {
    position: relative;
    width: 96px;
    aspect-ratio: 0.72;
    overflow: hidden;
    border-radius: 7px;
    background: #17191f;
}

.user-list-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.22s ease;
}

.user-list-card:hover .user-list-poster img {
    transform: scale(1.035);
}

.user-list-grid.is-banner-view .user-list-card {
    min-height: 210px;
    overflow: hidden;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.12);
    background: #101117;
}

.user-list-grid.is-banner-view .user-list-card-link {
    position: relative;
    min-height: 210px;
    display: block;
    padding: 22px;
}

.user-list-grid.is-banner-view .user-list-banner-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.user-list-grid.is-banner-view .user-list-banner-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.1), rgba(5, 6, 10, 0.88));
}

.user-list-grid.is-banner-view .user-list-banner-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.24s ease;
}

.user-list-grid.is-banner-view .user-list-card:hover .user-list-banner-media img {
    transform: scale(1.04);
}

.user-list-grid.is-banner-view .user-list-poster {
    display: none;
}

.user-list-grid.is-banner-view .user-list-copy {
    position: relative;
    z-index: 1;
    min-height: 166px;
    align-content: end;
    max-width: 92%;
}

.user-list-grid.is-banner-view .user-list-copy strong {
    font-size: 20px;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.72);
}

.user-list-grid.is-banner-view .user-list-progress {
    width: min(100%, 300px);
}

.user-list-grid.is-banner-view .user-list-card-side {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 0;
    pointer-events: none;
}

.user-list-grid.is-banner-view .user-list-actions,
.user-list-grid.is-banner-view .user-list-status,
.user-list-grid.is-banner-view .user-list-progress-text {
    pointer-events: auto;
}

.user-list-format {
    position: absolute;
    left: 7px;
    bottom: 7px;
    max-width: calc(100% - 14px);
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.user-list-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
}

.user-list-meta,
.user-list-genre,
.user-list-progress-text {
    color: rgba(247, 247, 251, 0.52);
    font-size: 12px;
    font-weight: 700;
}

.user-list-copy strong {
    min-width: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.user-list-progress {
    width: min(100%, 360px);
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.user-list-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7dc6, #61d6a6);
}

.user-list-card-side {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 10px;
    min-width: 156px;
}

.user-list-status {
    max-width: 156px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.user-list-status[data-status="watching"] {
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
}

.user-list-status[data-status="completed"] {
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
}

.user-list-status[data-status="paused"] {
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
}

.user-list-status[data-status="dropped"] {
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
}

.user-list-status[data-status="plan"] {
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
}

.user-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.user-list-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.user-list-action img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.user-list-action:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.user-list-remove {
    color: #ffd9d9;
}

.user-list-empty {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 300px;
    padding: 34px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(247, 247, 251, 0.68);
    text-align: center;
}

.user-list-empty[hidden] {
    display: none;
}

.user-list-empty strong {
    color: #ffffff;
    font-size: 18px;
}

.user-list-empty a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 6px;
    background: rgba(255, 125, 198, 0.17);
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

@media (max-width: 980px) {
    .user-list-shell {
        width: min(calc(100% - 28px), 1240px);
        padding-top: 92px;
    }

    .user-list-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .user-list-side {
        width: 100%;
        justify-items: start;
    }

    .user-list-hero-actions {
        justify-content: flex-start;
    }

    .user-list-stats {
        width: 100%;
    }

    .user-list-toolbar {
        grid-template-columns: 1fr;
    }

    .user-list-sort {
        width: 100%;
        max-width: 320px;
    }

    .user-list-view-switch {
        width: max-content;
    }
}

@media (max-width: 680px) {
    .user-list-shell {
        width: min(calc(100% - 22px), 1240px);
        padding-top: 84px;
    }

    .user-list-hero h1 {
        font-size: 32px;
    }

    .user-list-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .user-list-stat {
        min-height: 68px;
        padding: 12px 10px;
    }

    .user-list-stat strong {
        font-size: 21px;
    }

    .user-list-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .user-list-grid.is-poster-view {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 18px 12px;
    }

    .user-list-grid.is-banner-view {
        grid-template-columns: 1fr;
    }

    .user-list-grid.is-banner-view .user-list-card,
    .user-list-grid.is-banner-view .user-list-card-link {
        min-height: 190px;
    }

    .user-list-grid.is-banner-view .user-list-card-side {
        align-items: flex-start;
        gap: 8px;
    }

    .user-list-grid.is-banner-view .user-list-actions {
        justify-content: flex-end;
        width: auto;
    }

    .user-list-card-link {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .user-list-poster {
        width: 78px;
    }

    .user-list-copy strong {
        font-size: 15px;
    }

    .user-list-card-side {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-items: start;
        min-width: 0;
    }

    .user-list-status {
        max-width: 100%;
    }

    .user-list-progress-text {
        justify-self: end;
    }

    .user-list-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: stretch;
    }

    .user-list-action {
        flex: 1 1 0;
    }

    .user-list-grid.is-banner-view .user-list-actions {
        grid-column: auto;
        width: auto;
        justify-content: flex-end;
    }

    .user-list-grid.is-banner-view .user-list-action {
        flex: 0 0 auto;
    }
}

/* ===== Final overrides: animes discover page ===== */
body.animes-page {
    padding-top: 0 !important;
    background: #050505 !important;
}

body.animes-page .discover-page {
    display: block !important;
    min-height: 100vh;
    background: #050505;
}

body.animes-page .discover-hero {
    min-height: 310px !important;
    padding: 142px clamp(18px, 4vw, 46px) 0 !important;
}

body.animes-page .discover-controls,
body.animes-page .discover-genre-tabs,
body.animes-page .discover-grid-section {
    width: 100%;
}

body.animes-page .discover-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr 1.15fr 1.15fr 1.15fr 38px;
}

body.animes-page .discover-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 30px 18px !important;
    align-items: start !important;
}

body.animes-page .discover-grid .anime-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

body.animes-page .discover-grid .anime-box .img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 0.72 !important;
    border-radius: 7px !important;
}

body.animes-page .discover-grid .anime-box .name {
    display: block !important;
    height: auto !important;
    margin-top: 10px !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
}

@media (max-width: 920px) {
    body.animes-page .discover-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 38px !important;
    }

    body.animes-page .discover-grid {
        grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body.animes-page .discover-filter-row {
        grid-template-columns: 1fr !important;
    }

    body.animes-page .discover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 12px !important;
    }
}

.auth-profile-avatar.has-image {
  padding: 0;
  overflow: hidden;
  background: #17181e;
  color: transparent;
}

.auth-profile-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.auth-profile-pill:hover .auth-profile-avatar {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.34);
            outline-color: rgba(255, 114, 182, 0.55);
        }

        .auth-profile-pill:hover .auth-profile-arrow {
            opacity: 1;
        }

       .anime-section {
           padding: 20px 25px; 
           animation: fadeIn 0.8s ease-out;
           max-width: 1400px; /* Maksimum en əlavə etdim */
           margin: 0 auto; /* Mərkəzə aldım */
        } 

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

       .section-title {
           color: white;
           font-size: 24px;
           font-weight: 700;
           margin-bottom: 20px;
           border-left: 4px solid #ff3b3b;
           padding-left: 12px;
           margin-left:0; 
           position: relative;
           transition: all 0.3s ease;
           text-align: left; 
           width: fit-content;
           border-radius: 2px; 
           margin-right: 15px;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #ff3b3b, #ff3b3b);
            transition: width 0.5s ease;
        }

        .section-title:hover::before {
            width: 100%;
        }

        .section-title:hover {
            color: #ff3b3b;
            padding-left: 15px;
        }

/* Anime qutuları sırası - ORTALANMIŞ VERSİYA */
        .anime-row {
            display: flex;
            flex-wrap: wrap; /* Sarma aktiv */
            justify-content: center; /* MƏRKƏZƏ ALDIQ */
            gap: 18px; /* Qutular arası məsafə optimal */
            padding-bottom: 15px;
            padding-left: 10px;
            padding-right: 10px;
            overflow-x: visible; /* Üfüqi scroll-u söndürdük */
            scroll-behavior: smooth;
        }

        .anime-row::-webkit-scrollbar {
            height: 8px;
        }

        .anime-row::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }

        .anime-row::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, #ff3b3b, #ff3b3b);
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .anime-row::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, #ff6b6b, #ff5a5a);
        }

        .anime-box {
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            flex-shrink: 0;
        }
        .anime-box:hover {
            transform: translateY(-10px) scale(1.06);
            filter: brightness(1.15) saturate(1.2);
        }

        .anime-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to bottom,
                transparent 50%,
                rgba(255, 59, 59, 0.1) 100%
            );
            border-radius: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .anime-box:hover::after {
            opacity: 1;
        }

       .anime-box .img {
            position: relative;
            width: 100%;
            height: 225px; /* Optimallaşdırılmış hündürlük */
            border-radius: 14px;
            overflow: hidden;
            background: #111;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        .anime-box .img > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .anime-box:hover .img > img {
            transform: scale(1.08) rotateX(2deg);
        }

        .ep {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(8, 10, 16, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 12px;
            color: #fff;
            font-weight: 700;
            letter-spacing: 0.2px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(5px);
            opacity: 0.9;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
       }


        .anime-box:hover .ep {
            transform: translateY(0);
            opacity: 1;
            background: rgba(12, 14, 22, 0.82);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.34);
        }

        .name {
            margin-top: 10px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: hidden;
            transition: all 0.3s ease;
        }

        .anime-box .name {
            font-size: 14px;
            margin-top: 8px;
            color: #ddd;
            transition: all 0.3s ease;
            line-height: 1.3;
            height: 36px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: center; /* Mətni mərkəzə aldım */
            padding: 0 5px; /* Yan padding əlavə etdim */
        }

        .anime-box:hover .name {
            color: #ff3b3b;
            text-shadow: 0 0 10px rgba(255, 59, 59, 0.3);
        }

        .logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

/* Logo hover effekti */
.logo-link:hover .logo {
    transform: scale(1.05);
}

.logo-link:active .logo {
    transform: scale(0.95);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

/* Logo hover effekti */
.logo-link:hover .logo {
    transform: scale(1.05);
}

.logo-link:active .logo {
    transform: scale(0.95);
}

/* Mobil tap highlight-i söndür + custom tap animasiyası */
a,
button,
.anime-box,
.hero-btn,
.row-nav,
.nav-item,
.btn {
    -webkit-tap-highlight-color: transparent;
}

@keyframes tapPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    60% {
        transform: scale(0.97);
        filter: brightness(1.08);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@media (hover: none) and (pointer: coarse) {
    .btn:active,
    .hero-btn:active,
    .nav-item:active,
    .anime-box:active,
    .row-nav:active,
    .arrow:active {
        animation: tapPulse 0.22s ease-out;
    }
}

/* AXTARIŞ PANELİ - SADƏ VERSİYA */
.search-panel {
    display: none;
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: 340px;
    max-height: 75vh;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1205;
    border-radius: 16px;
    border: 1px solid rgba(255, 59, 59, 0.25);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 59, 59, 0.1);
    animation: searchSlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

@keyframes searchSlideDown {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.search-panel.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* BAŞLIQ */
.search-header {
    padding: 18px 20px;
    background: rgba(255, 59, 59, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-title-text {
    color: white;
    font-size: 17px;
    font-weight: 700;
}

.search-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 3px;
}

/* BAĞLAMA DÜYMƏSİ */
.close-search {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.close-search:hover {
    background: rgba(255, 59, 59, 0.15);
    border-color: #ff3b3b;
    color: white;
    transform: rotate(90deg);
}

/* AXTARIŞ INPUTU */
.search-input-container {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff3b3b;
    box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.15);
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* NƏTİCƏLƏR - ÖLÇÜYƏ UYĞUN */
.search-results {
    height: calc(75vh - 160px);
    overflow-y: auto;
    padding: 15px 20px;
}

/* ANİME BOX-LARI - PANEL ÖLÇÜSÜNƏ UYĞUN */
.search-result-item {
    width: 100%;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #ff3b3b;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 59, 59, 0.15);
}

/* ŞƏKİL HİSSƏSİ - ÖLÇÜYƏ UYĞUN */
.search-result-item .img {
    height: 100px; /* PANEL ENİNƏ UYĞUN OLARAQ AZALDIRILDI */
    width: 50%;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
}
.search-result-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.search-result-item:hover img {
    transform: scale(1.05);
}

/* BÖLÜM ETİKETİ */
.search-result-item .ep {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(8, 10, 16, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* ANİME ADI */
.search-result-item .name {
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    margin: 0;
    color: #ddd;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.search-result-item:hover .name {
    color: #ff3b3b;
}

/* BOŞ NƏTİCƏ */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

.no-results-icon {
    font-size: 40px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* SCROLLBAR */
.search-results::-webkit-scrollbar {
    width: 4px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 122, 122, 0.3);
    border-radius: 999px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 122, 122, 0.45);
}
/* MOBİL */
@media (max-width: 768px) {
    .search-panel {
        width: 90%;
        max-width: 320px;
        max-height: 80vh;
        top: 70px;
    }
    
    .search-results {
        height: calc(80vh - 150px);
    }
    
    .search-result-item .img {
        height: 100px; /* MOBİL ÜÇÜN DAHA AZ */
    }
}

.search-button {
    display: none;
}

/* ===== Home slider kateqoriyalari ===== */
.home-categories {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.anime-section.home-categories {
    padding: 0;
    max-width: none;
    overflow-x: clip;
}

.category-block {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.category-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-left: 0;
    padding-right: 6px;
}

.category-row-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ana konteynerin kənarlarında oxlar üçün yer açırıq */
.category-row-wrap {
    position: relative;
    --row-side-pad: clamp(42px, 4vw, 56px);
    padding: 0 var(--row-side-pad);
}

/* Oxların ümumi stili (Nümunə olaraq) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 10px;
}

.slider-btn.next {
    right: 0; /* Oxu sağ küncə, padding hissəsinə atır */
}

.slider-btn.prev {
    left: 0;
}

.anime-card {
    min-width: calc((100% / var(--cards-per-view)) - (12px * (var(--cards-per-view) - 1) / var(--cards-per-view)));
}

.home-categories .anime-row {
    display: flex;
    --cards-per-view: 7;
    --card-gap: clamp(8px, 1.1vw, 12px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--card-gap);
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 4px 0 10px 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slides {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.home-categories .anime-box {
    width: auto;
    flex: 0 0 calc((100% - (var(--cards-per-view) - 1) * var(--card-gap)) / var(--cards-per-view));
    min-width: calc((100% - (var(--cards-per-view) - 1) * var(--card-gap)) / var(--cards-per-view));
    max-width: calc((100% - (var(--cards-per-view) - 1) * var(--card-gap)) / var(--cards-per-view));
    scroll-snap-align: start;
    animation: cardEnter 0.38s ease both;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.home-categories .anime-box .img {
    aspect-ratio: 2 / 3;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.home-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: grid;
    gap: 7px;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-card-action-menu{display:grid;gap:7px}.home-card-menu-toggle,.home-card-action-label{display:none}

@media(max-width:768px),(hover:none) and (pointer:coarse){
 .anime-box .home-card-actions{top:7px!important;right:7px!important;display:block!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
 .anime-box:has(.home-card-actions.is-menu-open){z-index:40!important}
 .home-card-menu-toggle{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(9,10,14,.8);box-shadow:0 7px 18px rgba(0,0,0,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 .home-card-menu-toggle span{width:3px;height:3px;border-radius:50%;background:#fff;pointer-events:none}
 .home-card-action-menu{position:absolute;top:38px;right:0;width:158px;padding:6px;display:grid;gap:3px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(13,14,19,.96);box-shadow:0 16px 38px rgba(0,0,0,.58);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.96);transform-origin:top right;transition:opacity .2s ease,visibility .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
 .home-card-actions.is-menu-open .home-card-action-menu{opacity:1;visibility:visible;transform:none}
 .home-card-action-menu .home-card-action{width:100%;height:39px;padding:0 10px;display:flex;align-items:center;justify-content:flex-start;gap:9px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#eee}
 .home-card-action-menu .home-card-action:active{transform:scale(.97);background:rgba(255,255,255,.08)}
 .home-card-action-menu .home-card-action img{width:17px;height:17px;flex:0 0 17px}
 .home-card-action-menu .home-card-action-label{display:block;color:inherit;font-size:11px;font-weight:750;white-space:nowrap}
 .home-card-action-menu .home-card-like.is-liked{color:#ff7185;background:rgba(255,92,116,.1)}
}

.home-categories .anime-box:hover .home-card-actions,
body.animes-page .discover-grid .anime-box:hover .home-card-actions,
.home-card-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.home-card-action {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(12, 13, 18, 0.78);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        filter 0.18s ease;
}

.home-card-action:hover,
.home-card-action:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.home-card-action img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.home-card-list img {
    width: 19px;
    height: 19px;
}

.home-card-like.is-liked {
    background: rgba(255, 92, 116, 0.84);
    border-color: rgba(255, 255, 255, 0.2);
}

.home-card-like.is-liked img {
    filter: none;
}

.home-categories .anime-box:hover {
    transform: translateY(-5px) scale(1.01);
    filter: brightness(1.04) saturate(1.05);
}

.home-categories .anime-box::after {
    display: none;
}

.home-categories .anime-box .name {
    margin-top: 10px;
    padding: 0 2px;
    text-align: left;
    color: #f3f5f8;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.home-categories .anime-box:hover .name {
    color: #ff9f9f;
    text-shadow: 0 0 10px rgba(255, 104, 104, 0.45);
}

.home-categories .anime-box .name.is-clicked {
    color: rgba(255, 110, 110, 0.95);
    text-shadow: 0 0 8px rgba(255, 88, 88, 0.35);
}

.home-categories .anime-box .name .name-text {
    display: inline-block;
    transform: translateX(0);
    will-change: transform;
}

.home-categories .anime-box:hover .name.is-overflow .name-text {
    animation: nameMarquee var(--name-scroll-duration, 5.5s) ease-in-out infinite alternate;
}

@keyframes nameMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--name-scroll-distance, 0px))); }
}

.home-categories .anime-box a {
    text-decoration: none;
}

/* Kateqoriya başlıqları üçün animasiyalar ləğv edildi */
.home-categories .section-title,
.home-categories .section-title::before {
    transition: none !important;
    animation: none !important;
}

.home-categories .section-title::before,
.home-categories .section-title:hover::before {
    width: 0 !important;
}

.home-categories .section-title:hover {
    color: white !important;
    padding-left: 12px !important;
}

.home-categories .ep {
    left: 7px;
    bottom: 7px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    transform: translateX(-30px);
    box-shadow: none;
}

.home-categories .anime-view-pill {
    top: 7px;
    left: 7px;
    right: auto;
    bottom: auto;
    min-height: 0;
    padding: 4px 7px;
    gap: 4px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.home-categories .anime-upload-time {
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 14px);
    min-height: 20px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(8, 10, 16, .72);
    color: rgba(255, 255, 255, .9);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: none;
}

.home-categories .anime-upload-time-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #ff4d67;
    box-shadow: 0 0 7px rgba(255, 77, 103, .72);
}

.home-categories .anime-view-icon {
    width: 12px;
    height: 12px;
    opacity: .82;
}

.home-categories .anime-score-pill {
    gap: 4px;
    border: 1px solid rgba(255, 201, 40, .28);
    background: rgba(68, 49, 8, .78);
    color: #ffd45e;
    box-shadow: 0 5px 14px rgba(255, 190, 35, .12);
}

.home-categories .anime-score-star {
    color: #ffc928;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 0 9px rgba(255, 190, 35, .42);
}

.home-categories .anime-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.row-nav {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.row-nav:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.22);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    --arrow-size: 45px;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.arrow:disabled,
.arrow[data-edge="1"] {
    opacity: 0.35;
    cursor: default;
    transform: translateY(-50%);
    box-shadow: none;
}

.arrow.left {
    left: calc(var(--row-side-pad) - (var(--arrow-size) / 2) + var(--pc-arrow-offset, 0px));
}

.arrow.right {
    right: calc(var(--row-side-pad) - (var(--arrow-size) / 2) + var(--pc-arrow-offset, 0px));
}

/* Yalniz desktop ucun ox yerlesimi */
@media (min-width: 1101px) and (max-width: 1366px) {
    .category-row-wrap {
        --pc-arrow-offset: 0px;
    }
}

@media (min-width: 1367px) and (max-width: 1599px) {
    .category-row-wrap {
        --pc-arrow-offset: 2px;
    }
}

@media (min-width: 1600px) {
    .category-row-wrap {
        --pc-arrow-offset: 4px;
    }
}

.anime-view-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    font-size: 11px;
    color: #ffe8e8;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 3px 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.anime-view-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.95;
    flex-shrink: 0;
}

.anime-4k-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    min-width: 35px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 226, 128, .72);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(12, 13, 17, .94), rgba(76, 55, 12, .9));
    color: #ffe58c;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .42), 0 0 15px rgba(255, 203, 70, .18);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .08em;
    text-align: center;
    text-shadow: 0 1px 7px rgba(255, 212, 91, .34);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}

.anime-box:hover .anime-4k-badge {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .48), 0 0 19px rgba(255, 203, 70, .28);
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1500px) {
    .home-categories .anime-row { --cards-per-view: 6; }
}

@media (max-width: 1240px) {
    .home-categories .anime-row { --cards-per-view: 5; }
}

@media (max-width: 920px) {
    .home-categories .anime-row { --cards-per-view: 4; }
}

@media (max-width: 700px) {
    .home-categories .anime-row { --cards-per-view: 2; }
}

@media (max-width: 576px) {
    .home-categories .anime-row { --cards-per-view: 2; }
}

@media (max-width: 430px) {
    .home-categories .anime-row { --cards-per-view: 2; }
}

@media (max-width: 350px) {
    .home-categories .anime-row { --cards-per-view: 2; }
}

/* ===== Hero banner slider ===== */
body.home-page {
    padding-top: clamp(118px, 12vw, 146px);
}

.hero-section {
    position: relative;
    max-width: 1400px;
    min-height: 470px;
    margin: -20px auto 26px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.hero-section img,
.hero-section video {
    -webkit-user-drag: none;
}

.hero-section.is-swipe-dragging {
    cursor: grabbing;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    filter: saturate(1) contrast(1) brightness(1);
    transition: filter .45s ease;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    filter: saturate(1.03) brightness(0.96);
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1), filter .9s ease;
    will-change: opacity;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(1.04) brightness(0.95);
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), filter .8s ease;
    will-change: opacity;
    pointer-events: none;
}

.hero-video.is-visible {
    opacity: 1;
    filter: saturate(1.1) brightness(1);
}

.hero-backdrop.is-visible {
    opacity: 1;
    filter: saturate(1.1) brightness(1);
}

.hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(6, 9, 16, 0.9) 0%, rgba(6, 9, 16, 0.65) 38%, rgba(6, 9, 16, 0.3) 70%, rgba(6, 9, 16, 0.15) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 55px 50px;
    animation: heroReveal 0.55s ease-out;
}

.hero-kicker,
.hero-title,
.hero-themes {
    opacity: 0;
    transform: translateY(14px);
}

.hero-inner:not(.is-leave) .hero-title,
.hero-inner:not(.is-leave) .hero-themes {
    opacity: 1;
    transform: translateY(0);
}

.hero-inner.is-enter .hero-kicker {
    animation: heroTextIn 0.42s ease forwards;
}

.hero-inner.is-enter .hero-title {
    animation: heroTextIn 0.52s ease forwards;
    animation-delay: 0.08s;
}

.hero-inner.is-enter .hero-themes {
    animation: heroTextIn 0.52s ease forwards;
    animation-delay: 0.14s;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #ffd2d2;
    background: rgba(255, 59, 59, 0.16);
    border: 1px solid rgba(255, 59, 59, 0.35);
    border-radius: 999px;
    padding: 6px 12px;
    margin-bottom: 18px;
}

.hero-title {
    color: #fff;
    font-size: clamp(34px, 5.2vw, 68px);
    line-height: 1.05;
    margin: 0 0 12px;
    text-shadow: 0 3px 25px rgba(0, 0, 0, 0.35);
}

.hero-meta {
    color: rgba(255, 233, 233, 0.9);
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 26px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-btn {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    padding: 15px 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

.hero-btn-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-btn-primary .hero-btn-icon {
    width: 26px;
    height: 26px;
    fill: #08090b;
}

.hero-btn-icon-only {
    min-width: 62px;
    padding-left: 15px;
    padding-right: 15px;
}

.hero-btn-icon-only .hero-btn-icon {
    width: 26px;
    height: 26px;
}

.hero-btn-primary {
    color: #08090b;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.hero-btn-primary:hover {
    color: #08090b;
    background: #f0f1f4;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.38);
}

.hero-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.hero-btn-ghost .hero-btn-icon {
    filter: none;
}

.hero-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

@media (max-width: 900px) {
    .hero-section {
        min-height: 420px;
        border-radius: 14px;
    }

    .hero-inner {
        padding: 36px 24px;
    }

    .hero-meta {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    body.home-page {
        padding-top: 76px;
    }

    body.home-page .topbar,
    body.anime-detail-page .topbar {
        top: 0;
        height: 78px;
        padding-left: 14px;
        padding-right: 14px;
    }

    body.home-page .topbar.scrolled,
    body.anime-detail-page .topbar.scrolled {
        height: 72px;
    }

    body.anime-detail-page .topbar.scrolled {
        height: 78px;
    }

    body.home-page .topbar:not(.scrolled) .logo img,
    body.anime-detail-page .topbar:not(.scrolled) .logo img {
        height: 128px;
        margin-top: -58px !important;
        transform: translateY(16px);
    }

    body.home-page .topbar.scrolled .logo img,
    body.anime-detail-page .topbar.scrolled .logo img {
        height: 128px;
        margin-top: -58px !important;
        transform: translateY(20px);
    }

    body.anime-detail-page .topbar.scrolled .logo img {
        transform: translateY(16px);
    }

    .hero-section {
        min-height: 300px; /* Mobildə daha kompakt banner */
        margin-top: 6px;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: auto;
        max-width: 100%;
    }

    .hero-btn {
        padding: 8px 10px;
        text-align: center;
        font-size: 13px;
        border-radius: 10px;
        width: auto;
        white-space: nowrap;
    }
}

@media (max-width: 620px) {
    body.home-page {
        padding-top: 72px;
    }

    .hero-section {
        margin-bottom: 18px;
    }

    .hero-actions {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-btn {
        width: auto;
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ===== Fix: topbar button underline ===== */
.btn,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus,
.right .btn,
.right a.btn {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ===== Fix: search panel restored layout ===== */
.search-panel {
    transform: translateX(-50%) translateY(-12px) scale(0.93) !important;
    width: clamp(320px, 38vw, 460px) !important;
    max-height: 76vh !important;
    background: rgba(9, 12, 20, 0.62) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 102, 102, 0.26) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(255, 96, 96, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    animation: searchSlideDown 0.25s ease-out !important;
    transform-origin: top center !important;
    transition: transform 0.32s ease, opacity 0.28s ease, width 0.28s ease !important;
}

.search-panel.active {
    transform: translateX(-50%) translateY(0) scale(0.97) !important;
}

.search-panel.active.is-expanded {
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

.search-box {
    position: relative;
    padding: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}

.close-search {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transform-origin: center;
    width: 28px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 116, 116, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    line-height: 0;
    font-family: Arial, "Segoe UI", sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.close-search:hover,
.close-search:active,
.close-search:focus-visible {
    background: rgba(255, 99, 99, 0.16);
    border-color: rgba(255, 99, 99, 0.42);
    color: #ffdddd;
    transform: translateY(-50%) !important;
}

.search-input {
    width: 100%;
    padding: 10px 42px 10px 12px;
    font-size: 14px;
    background: rgba(8, 12, 22, 0.4);
    border: 1px solid rgba(255, 118, 118, 0.22);
    border-radius: 10px;
    color: #ffe8e8;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    background: rgba(8, 12, 22, 0.55);
    border-color: rgba(255, 110, 110, 0.78);
    box-shadow: 0 0 0 2px rgba(255, 110, 110, 0.18), 0 0 20px rgba(255, 98, 98, 0.18);
}

.search-results {
    max-height: 0;
    opacity: 0;
    overflow-y: auto;
    padding: 0 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 122, 122, 0.3) transparent;
    transition: max-height 0.36s ease, opacity 0.22s ease, padding 0.22s ease;
}

.search-panel.has-results .search-results {
    max-height: var(--search-results-h, 180px);
    opacity: 1;
    padding: 10px;
}

.search-result-item {
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 120, 120, 0.13);
    transition: border-color 0.2s ease, background 0.2s ease;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
}

.search-result-item.result-enter {
    animation: searchResultEnter 0.34s ease forwards;
}

@keyframes searchResultEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-result-item:hover {
    background: rgba(255, 104, 104, 0.09);
    border-color: rgba(255, 104, 104, 0.58);
}

.search-results .anime-box.search-result-item:hover {
    transform: none;
    box-shadow: none;
}

.search-result-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
}

.search-result-item .img {
    width: 54px;
    height: 72px;
    border-radius: 8px;
    flex-shrink: 0;
}

.search-result-item .ep {
    display: none !important;
}

.search-results .search-result-item::after {
    display: none;
}

.search-result-item .name {
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .search-panel {
        width: 92% !important;
        max-width: 360px !important;
        max-height: 66vh !important;
        top: 76px;
    }

    .search-results {
        height: calc(66vh - 72px);
    }

    .search-result-item .img {
        width: 48px;
        height: 64px;
    }
}

/* Search result markup compatibility */
.search-result-link {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px !important;
}

.search-result-thumb {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.search-result-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    align-content: center;
}

.search-result-title {
    margin: 0;
    color: #f3f6ff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.search-result-episode {
    display: none;
}

@media (max-width: 768px) {
    .search-result-link {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px;
    }

    .search-result-title {
        font-size: 11px;
    }
}

/* ===== Fluid responsive safety layer ===== */
:root {
    --fluid-gutter: clamp(12px, 2.8vw, 32px);
    --fluid-max: 1360px;
}

body {
    padding-top: clamp(88px, 9vw, 104px);
}

body.home-page {
    padding-top: 74px;
}

body.home-page .topbar {
    top: 6px;
    height: 92px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-12px);
    transition:
        top 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease,
        backdrop-filter 0.4s ease;
}

body.home-page .topbar:not(.scrolled) .left {
    margin-top: 0;
}

body.home-page .topbar.scrolled {
    top: 0;
    align-items: center;
    padding-top: 0;
    transform: translateY(0);
}

body.home-page .topbar:not(.scrolled) .center,
body.home-page .topbar:not(.scrolled) .right {
    padding-top: 0;
}

.topbar {
    padding-left: clamp(20px, 4vw, 52px);
    padding-right: clamp(20px, 4vw, 52px);
    gap: clamp(8px, 1.5vw, 20px);
    justify-content: flex-start;
}

.topbar:not(.scrolled) {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.topbar:not(.scrolled)::before,
.topbar:not(.scrolled)::after {
    opacity: 0 !important;
    box-shadow: none !important;
}

/* Fit the square KaiyoCode logo neatly inside the horizontal header. */
.topbar .logo img {
    width: 210px;
    height: 82px !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center 40%;
}

body.home-page .hero-section {
    margin-top: 8px;
}

body.home-page .topbar:not(.scrolled) .logo img {
    height: 135px;
    margin-top: -63px !important;
    transform: translateY(18px);
}

body.home-page .topbar.scrolled .logo img {
    height: 135px;
    margin-top: -63px !important;
    transform: translateY(23px);
}

.left,
.center,
.right,
.anime-box,
.hero-inner {
    min-width: 0;
}

.hero-section,
.anime-section {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    margin-left: auto;
    margin-right: auto;
}

.hero-inner {
    padding: clamp(20px, 4.5vw, 50px);
}

.home-categories .anime-box .name {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .topbar {
        justify-content: space-between;
    }

    .topbar > .center {
        display: none;
    }

    .topbar > .right {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .nav-more-panel {
        display: none !important;
    }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .category-row-wrap {
        padding: 0 12px;
    }

    .home-categories .anime-row {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 4px;
        touch-action: auto;
        scroll-snap-type: x proximity;
    }

    .row-nav,
    .arrow {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .category-row-wrap {
        padding: 0 10px;
    }
}

/* ===== Home footer redesign ===== */
.footer {
    width: 100%;
    margin: clamp(24px, 3.2vw, 38px) 0 0;
    padding: clamp(14px, 1.8vw, 22px) var(--fluid-gutter) clamp(10px, 1.2vw, 12px);
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 59, 0.12), transparent 72%);
    opacity: 0.55;
    pointer-events: none;
}

.footer-content {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(240px, 1fr);
    gap: clamp(10px, 1.4vw, 16px);
    justify-content: start;
    align-items: start;
    position: relative;
    z-index: 1;
}

.footer-side {
    justify-self: end;
    width: 100%;
    max-width: clamp(360px, 38vw, 500px);
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(170px, 1fr);
    gap: clamp(10px, 1.1vw, 14px);
    align-items: flex-start;
}

.footer-brand {
    display: grid;
    gap: clamp(5px, 0.8vw, 8px);
    max-width: clamp(320px, 42vw, 430px);
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    width: clamp(188px, 16.5vw, 220px);
    height: clamp(76px, 6.8vw, 90px);
    overflow: hidden;
    text-decoration: none;
    margin-top: -10px;
}

.footer-logo {
    width: clamp(180px, 17vw, 235px);
    height: clamp(72px, 7vw, 92px);
    max-width: none;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    transform: translateX(-12.5%);
    transform-origin: left center;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.footer-text {
    color: rgba(230, 237, 247, 0.82);
    font-size: clamp(13px, 0.95vw, 14px);
    line-height: 1.5;
    max-width: 430px;
}

.footer-text-strong {
    font-size: clamp(13px, 0.95vw, 14px);
    font-weight: 400;
    color: rgba(230, 237, 247, 0.82);
    margin-top: -12px;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(7px, 1vw, 10px);
    margin-top: 1px;
}

.footer-badges span {
    position: relative;
    padding: 0 0 0 14px;
    border-radius: 0;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 600;
    color: rgba(255, 214, 214, 0.92);
    background: transparent;
    border: none;
    line-height: 1.3;
}

.footer-badges span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7b7b, #ff6e6e);
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(255, 110, 110, 0.45);
}

.footer-side h4 {
    font-size: clamp(14px, 1.25vw, 18px);
    color: rgba(255, 228, 228, 0.9);
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: left;
    width: auto;
    margin-left: 0;
    margin-top: 0;
}

.footer-socials {
    display: flex;
    justify-content: flex-start;
    gap: clamp(8px, 0.9vw, 12px);
    margin-bottom: 0;
    width: auto;
    margin-left: 0;
}

.footer-social-link {
    width: clamp(42px, 3.1vw, 50px);
    height: clamp(42px, 3.1vw, 50px);
    border-radius: clamp(11px, 0.9vw, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: rgba(168, 168, 168, 0.95);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(120, 120, 120, 0.28);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    animation: footerSocialIn 0.45s ease forwards;
    animation-delay: calc(var(--stagger, 0) * 0.07s + 0.04s);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.footer-social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, rgba(255, 110, 110, 0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.footer-social-link:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(120, 120, 120, 0.28);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
    color: #d8d8d8;
}

.footer-social-link[aria-label="Instagram"]:hover {
    color: #e1306c;
}

.footer-social-link[aria-label="TikTok"]:hover {
    color: #25f4ee;
}

.footer-social-link[aria-label="Discord"]:hover {
    color: #5865f2;
}

.footer-social-link:hover::before {
    opacity: 1;
}

.footer-social-link:active {
    transform: translateY(-1px) scale(0.95);
}

.footer-social-svg {
    width: clamp(19px, 1.45vw, 23px);
    height: clamp(19px, 1.45vw, 23px);
    display: block;
    fill: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease, color 0.22s ease;
}

.footer-social-link:hover .footer-social-svg {
    transform: scale(1.08);
}

.footer-social-link[aria-label="Instagram"]:hover .footer-social-svg {
    filter: drop-shadow(0 0 5px rgba(225, 48, 108, 0.35));
}

.footer-social-link[aria-label="TikTok"]:hover .footer-social-svg {
    filter: drop-shadow(0 0 5px rgba(37, 244, 238, 0.35));
}

.footer-social-link[aria-label="Discord"]:hover .footer-social-svg {
    filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.35));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes footerSocialIn {
    from {
        transform: translateY(8px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.footer-links-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px 8px;
    margin-left: 0;
}

.footer-follow {
    justify-self: start;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 170px;
}

.footer-follow h4 {
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 800;
    letter-spacing: 0.2px;
    margin-bottom: 12px;
}

.footer-col {
    text-align: left;
}

.footer-col h5 {
    text-align: left;
    font-size: clamp(12px, 0.9vw, 13px);
    color: rgba(230, 237, 247, 0.92);
    margin: 0 0 4px;
    letter-spacing: 0.2px;
    font-weight: 700;
}

.footer-col a {
    display: block;
    text-align: left;
    text-decoration: none;
    color: rgba(220, 228, 239, 0.76);
    font-size: clamp(11px, 0.85vw, 12px);
    margin: 3px 0;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #ff8686;
}

.footer-bottom {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    color: rgba(216, 225, 236, 0.72);
    font-size: clamp(11px, 0.85vw, 12px);
}

.footer-bottom .footer-disclaimer {
    margin-left: auto;
    color: rgba(216, 225, 236, 0.34);
    font-size: clamp(10px, 0.74vw, 11px);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: right;
}

.footer-mobile-links {
    display: none;
}

@media (max-width: 900px) {
    .footer {
        padding: 18px var(--fluid-gutter) 12px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .footer-side {
        max-width: none;
        margin-left: 0;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .footer-side h4,
    .footer-col h5 {
        text-align: left;
    }

    .footer-socials {
        justify-content: flex-start;
        width: auto;
        margin-left: 0;
    }

    .footer-side h4 {
        width: auto;
        margin-left: 0;
    }

    .footer-links-wrap {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .footer-follow {
        justify-self: start;
        align-self: start;
        align-items: flex-start;
        min-width: 0;
    }

    .footer-follow h4 {
        font-size: 16px;
    }

    .footer-logo-link {
        width: 194px;
        height: 82px;
        margin-top: -6px;
    }

    .footer-logo {
        width: 198px;
        transform: translateX(-30px);
    }
}

@media (max-width: 560px) {
    .footer {
        margin-top: 26px;
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .footer-content {
        width: min(100%, 360px);
        grid-template-columns: 1fr;
        gap: 14px;
        justify-items: center;
    }

    .footer-brand {
        justify-items: start;
        text-align: left;
        max-width: 320px;
        gap: 8px;
    }

    .footer-logo-link {
        width: 210px;
        height: 86px;
        margin-top: 0;
        justify-content: flex-start;
    }

    .footer-logo {
        width: 205px;
        transform: translateX(-30px);
    }

    .footer-text {
        max-width: 300px;
        text-align: left;
        line-height: 1.55;
    }

    .footer-text-strong {
        margin-top: -6px;
    }

    .footer-badges {
        display: none;
    }

    .footer-side {
        width: 100%;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .footer-links-wrap {
        display: none;
    }

    .footer-follow {
        justify-self: center;
        align-items: center;
        min-width: 0;
    }

    .footer-follow h4 {
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .footer-socials {
        justify-content: center;
        gap: 12px;
    }

    .footer-bottom {
        width: min(100%, 360px);
        margin-top: 14px;
        padding-top: 12px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .footer-bottom p {
        text-align: center;
    }

    .footer-bottom .footer-disclaimer {
        max-width: 320px;
        margin-left: 0;
        line-height: 1.55;
        text-align: center;
    }

    .footer-mobile-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .footer-mobile-links a {
        text-decoration: none;
        color: rgba(176, 176, 176, 0.9);
        font-size: 12px;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .footer-mobile-links a:hover {
        color: #ffffff;
    }
}

/* ===== Global chat page ===== */
body.chat-page.home-page {
    padding-top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.chat-page .search-panel {
    top: 16px !important;
}

body.chat-page .nav-more-link.is-active,
body.chat-page .mobile-drawer-nav .nav-item.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.global-chat-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}

.global-chat-layout {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr) 300px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(22, 24, 31, 0.88), rgba(10, 11, 15, 0.96)),
        rgba(12, 13, 18, 0.96);
    box-shadow: none;
}

.global-chat-rail,
.global-chat-members {
    min-width: 0;
    background: rgba(255, 255, 255, 0.035);
}

.global-chat-rail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: 18px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.global-chat-dm-box {
    display: grid;
    gap: 8px;
    padding: 0 4px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.global-chat-mode-switch {
    display: grid;
    gap: 7px;
}

.global-chat-mode-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(238, 242, 249, 0.76);
    font: inherit;
    font-size: 14px;
    font-weight: 780;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.global-chat-mode-btn:hover,
.global-chat-mode-btn.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(255, 255, 255, 0.1);
}

.global-chat-mode-btn:hover {
    transform: translateX(2px);
}

.global-chat-mode-btn > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-chat-mode-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ff9bad;
    font-size: 16px;
    font-weight: 850;
}

.global-chat-mode-btn.is-active .global-chat-mode-icon {
    background: linear-gradient(135deg, #ff6b8a, #6f9cff);
    color: #ffffff;
}

.global-chat-mode-icon img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    filter: brightness(2) grayscale(1);
}

.global-chat-panel[hidden] {
    display: none;
}

.global-chat-dm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.global-chat-dm-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 820;
    letter-spacing: 0;
}

.global-chat-dm-head p {
    margin: 4px 0 0;
    color: rgba(235, 239, 247, 0.56);
    font-size: 12px;
    font-weight: 650;
}

.global-chat-dm-new {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 95, 124, 0.32);
    border-radius: 8px;
    background: rgba(255, 77, 109, 0.13);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.global-chat-dm-new span {
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
}

.global-chat-dm-new:hover {
    background: rgba(255, 77, 109, 0.22);
    border-color: rgba(255, 129, 150, 0.44);
    transform: translateY(-1px);
}

.global-chat-dm-search {
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.global-chat-dm-search img {
    width: 15px;
    height: 15px;
    opacity: 0.62;
    object-fit: contain;
    filter: brightness(1.8) grayscale(1);
}

.global-chat-dm-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.global-chat-dm-search input::placeholder {
    color: rgba(235, 239, 247, 0.42);
}

.global-chat-dm-list {
    display: grid;
    gap: 5px;
}

.global-chat-dm-item {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(238, 242, 249, 0.74);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.global-chat-dm-item:hover,
.global-chat-dm-item.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.08);
}

.global-chat-dm-avatar {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b8a, #6f9cff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
}

.global-chat-dm-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-dm-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.global-chat-dm-copy strong,
.global-chat-dm-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-chat-dm-copy strong {
    color: inherit;
    font-size: 13px;
    font-weight: 780;
}

.global-chat-dm-copy small {
    color: rgba(235, 239, 247, 0.46);
    font-size: 11px;
    font-weight: 650;
}

.global-chat-dm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #63e68f;
    box-shadow: 0 0 12px rgba(99, 230, 143, 0.64);
}

.global-chat-channel-desc,
.global-chat-message-time,
.global-chat-role {
    margin: 0;
    color: rgba(235, 239, 247, 0.58);
    font-size: 12px;
    font-weight: 650;
}

.global-chat-channel-group,
.global-chat-dm-panel {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
}

.global-chat-group-label {
    padding: 0 8px;
    color: rgba(235, 239, 247, 0.46);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0;
}

.global-chat-channel-list {
    display: grid;
    gap: 5px;
}

.global-chat-channel-btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(238, 242, 249, 0.72);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.global-chat-channel-btn:hover,
.global-chat-channel-btn.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.global-chat-channel-btn:hover {
    transform: translateX(2px);
}

.global-chat-channel-symbol {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 151, 170, 0.96);
    font-size: 15px;
    font-weight: 800;
}

.global-chat-channel-name {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 720;
}

.global-chat-channel-count {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(238, 242, 249, 0.78);
    font-size: 11px;
    font-weight: 760;
    line-height: 1;
}

.global-chat-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: rgba(5, 6, 9, 0.2);
}

.global-chat-head {
    min-width: 0;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 10, 14, 0.58);
}

.global-chat-head-title {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.global-chat-hash {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 77, 109, 0.14);
    color: #ff6b89;
    font-size: 22px;
    font-weight: 800;
}

.global-chat-head-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.12;
    font-weight: 780;
    letter-spacing: 0;
}

.global-chat-head-title p {
    margin: 5px 0 0;
    color: rgba(235, 239, 247, 0.58);
    font-size: 12px;
    font-weight: 630;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-chat-head-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.global-chat-search {
    width: min(28vw, 250px);
    min-width: 176px;
    height: 38px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.global-chat-search img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    opacity: 0.62;
}

.global-chat-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.global-chat-search input::placeholder,
.global-chat-composer textarea::placeholder {
    color: rgba(235, 239, 247, 0.44);
}

.global-chat-online {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(82, 207, 129, 0.12);
    color: rgba(198, 255, 220, 0.9);
    font-size: 12px;
    font-weight: 760;
    white-space: nowrap;
}

.global-chat-online::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #63e68f;
    box-shadow: 0 0 12px rgba(99, 230, 143, 0.68);
}

.global-chat-messages {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 108, 128, 0.62) rgba(255, 255, 255, 0.04);
}

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

.global-chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.035);
}

.global-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(98, 108, 128, 0.62);
}

.global-chat-day-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 12px;
    color: rgba(235, 239, 247, 0.4);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0;
}

.global-chat-day-divider::before,
.global-chat-day-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
}

.global-chat-message {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 9px 8px;
    border-radius: 8px;
    animation: globalChatMessageIn 0.22s ease both;
}

.global-chat-message:hover {
    background: rgba(255, 255, 255, 0.04);
}

.global-chat-message-actions {
    position: absolute;
    top: -14px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: #17181d;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.global-chat-message:hover .global-chat-message-actions,
.global-chat-message:focus-within .global-chat-message-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.global-chat-message-action {
    width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: rgba(233, 237, 246, 0.72);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.global-chat-message-action:last-child {
    border-right: 0;
}

.global-chat-message-action:hover,
.global-chat-message-action:focus-visible,
.global-chat-message-action.is-copied {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    outline: none;
}

.global-chat-message-action:disabled {
    color: rgba(233, 237, 246, 0.28);
    cursor: not-allowed;
}

.schedule-page {
    min-height: 100vh;
    background: #050506;
    color: #f5f7fb;
}

.schedule-shell {
    width: 100%;
    min-height: calc(100vh - 70px);
    margin: 70px 0 0;
    display: block;
}

.schedule-board,
.schedule-editor {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: #050506;
    box-shadow: none;
}

.schedule-board {
    min-height: calc(100vh - 70px);
    padding: 0;
}

.schedule-head {
    display: none;
}

.schedule-kicker {
    color: #ff8da1;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.schedule-head h1 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.schedule-head p {
    max-width: 560px;
    margin: 0;
    color: rgba(236, 240, 248, 0.62);
    font-size: 14px;
    line-height: 1.5;
}

.schedule-today-card {
    min-width: 132px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.schedule-today-card span,
.schedule-today-card small {
    color: rgba(236, 240, 248, 0.58);
    font-size: 12px;
    font-weight: 750;
}

.schedule-today-card strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.schedule-toolbar {
    position: fixed;
    left: 50%;
    bottom: 12px;
    z-index: 20;
    width: min(720px, calc(100% - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0;
    padding: 8px;
    border-radius: 999px;
    background: rgba(24, 24, 29, 0.86);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.schedule-search {
    min-width: 0;
    height: 42px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.schedule-search img {
    width: 17px;
    height: 17px;
    opacity: 0.74;
}

.schedule-search input,
.schedule-form input,
.schedule-form select {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
}

.schedule-status-filter {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.schedule-status-filter button,
.schedule-day-tabs button {
    border: 0;
    color: rgba(239, 243, 250, 0.68);
    font: inherit;
    font-size: 13px;
    font-weight: 760;
    cursor: pointer;
}

.schedule-status-filter button {
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    background: transparent;
}

.schedule-status-filter button.is-active,
.schedule-day-tabs button.is-active {
    background: rgba(255, 77, 109, 0.18);
    color: #ffffff;
}

.schedule-day-tabs {
    position: sticky;
    top: 70px;
    z-index: 12;
    background: rgba(5, 5, 6, 0.92);
    backdrop-filter: blur(14px);
}

.schedule-list-top {
    height: 66px;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 90px;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.schedule-list-top strong {
    color: rgba(245, 247, 251, 0.88);
    font-size: 25px;
    text-align: center;
}

.schedule-list-top button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: transparent;
    color: rgba(245, 247, 251, 0.82);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.schedule-list-top span {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.schedule-list-top [data-month-today] {
    font-size: 20px;
}

.schedule-feature {
    display: none;
}

.schedule-feature-main,
.schedule-feature-empty {
    position: relative;
    min-width: 0;
    min-height: 230px;
    overflow: hidden;
    display: grid;
    align-items: end;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(8, 10, 15, 0.92), rgba(8, 10, 15, 0.28)),
        var(--schedule-feature-bg),
        rgba(255, 255, 255, 0.045);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-decoration: none;
}

.schedule-feature-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 10, 15, 0.9), transparent 58%);
}

.schedule-feature-copy {
    position: relative;
    z-index: 1;
    max-width: 680px;
    padding: 24px;
}

.schedule-feature-copy small,
.schedule-feature-empty span {
    color: #ff9caf;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.schedule-feature-copy h2,
.schedule-feature-empty strong {
    margin: 7px 0;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.02;
}

.schedule-feature-copy p {
    margin: 0;
    color: rgba(245, 247, 251, 0.72);
    font-size: 14px;
    font-weight: 760;
}

.schedule-feature-strip {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.schedule-feature-thumb {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 2px 10px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    text-decoration: none;
}

.schedule-feature-thumb img {
    grid-row: 1 / 3;
    width: 58px;
    height: 72px;
    border-radius: 7px;
    object-fit: cover;
}

.schedule-feature-thumb span {
    color: #ff9caf;
    font-size: 12px;
    font-weight: 850;
}

.schedule-feature-thumb strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.schedule-grid {
    display: grid;
    gap: 22px;
    padding: 18px 0 86px;
}

.schedule-list-day {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.schedule-list-day h2 {
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.1;
}

.schedule-list-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 16px;
}

.schedule-list-card {
    position: relative;
    min-height: 136px;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px 44px 18px 16px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    background:
        linear-gradient(90deg, rgba(31, 34, 42, 0.94), rgba(31, 34, 42, 0.58) 54%, rgba(31, 34, 42, 0.2)),
        var(--schedule-list-bg),
        #1e2129;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
    transition: transform 0.18s ease, filter 0.18s ease;
}

.schedule-list-card:hover,
.schedule-list-card:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.12);
    outline: none;
}

.schedule-list-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 6, 0.1), rgba(5, 5, 6, 0.58));
}

.schedule-list-card strong,
.schedule-list-card small,
.schedule-list-card em {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.schedule-list-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 23px;
    line-height: 1.12;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.76);
}

.schedule-list-card small {
    color: rgba(245, 247, 251, 0.72);
    font-size: 17px;
    font-weight: 650;
}

.schedule-list-card em {
    position: absolute;
    right: 24px;
    bottom: 24px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(5, 5, 6, 0.44);
    font-size: 14px;
    font-style: normal;
}

.schedule-chip {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(111, 156, 255, 0.18);
    color: #bfd2ff;
}

.schedule-chip.is-released {
    background: rgba(99, 230, 143, 0.16);
    color: #aaf3c2;
}

.schedule-empty {
    min-height: 180px;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(239, 243, 250, 0.58);
    text-align: center;
}

.schedule-empty strong {
    color: #ffffff;
}

.schedule-editor {
    display: none;
    align-self: start;
    padding: 16px;
}

.schedule-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.schedule-editor-head span {
    color: rgba(239, 243, 250, 0.62);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.schedule-editor-head strong {
    color: #ffffff;
    font-size: 13px;
}

.schedule-form {
    display: grid;
    gap: 10px;
}

.schedule-form label {
    display: grid;
    gap: 7px;
    color: rgba(239, 243, 250, 0.62);
    font-size: 12px;
    font-weight: 760;
}

.schedule-form input,
.schedule-form select {
    height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.schedule-form select option {
    background: #171a22;
    color: #ffffff;
}

.schedule-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.schedule-submit,
.schedule-clear {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 820;
    cursor: pointer;
}

.schedule-submit {
    margin-top: 4px;
    background: linear-gradient(135deg, #ff4d6d, #6f9cff);
}

.schedule-clear {
    width: 100%;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(239, 243, 250, 0.7);
}

.schedule-live-panel {
    display: grid;
    gap: 12px;
}

.schedule-live-panel div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.schedule-live-panel strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.schedule-live-panel span,
.schedule-live-panel p {
    color: rgba(239, 243, 250, 0.62);
    font-size: 13px;
    line-height: 1.5;
}

.schedule-live-panel p {
    margin: 0;
}

@media (max-width: 980px) {
    .schedule-shell {
        margin-top: 70px;
    }

    .schedule-toolbar {
        grid-template-columns: 1fr;
    }

    .schedule-list-top {
        grid-template-columns: 54px minmax(0, 1fr) 94px;
        padding: 0 12px;
    }

    .schedule-list-cards {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 900px) {
    .schedule-shell {
        width: 100%;
        margin-top: 64px;
    }

    .schedule-board,
    .schedule-editor {
        padding: 0;
    }

    .schedule-list-top {
        height: 62px;
    }

    .schedule-list-top strong {
        font-size: 19px;
    }

    .schedule-list-top button {
        width: 36px;
        height: 36px;
    }

    .schedule-grid {
        gap: 18px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .schedule-list-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .schedule-list-day h2 {
        font-size: 22px;
    }

    .schedule-list-card {
        min-height: 118px;
        padding: 15px 42px 15px 12px;
    }

    .schedule-list-card strong {
        font-size: 19px;
    }

    .schedule-list-card small {
        font-size: 14px;
    }
}

/* Schedule page polish */
.schedule-page {
    --schedule-accent: #ff4967;
    --schedule-panel: rgba(17, 18, 23, 0.88);
    background:
        radial-gradient(circle at 18% 3%, rgba(255, 73, 103, 0.09), transparent 28rem),
        radial-gradient(circle at 84% 14%, rgba(116, 88, 255, 0.08), transparent 32rem),
        #070709;
}

.schedule-shell {
    width: min(1440px, 100%);
    min-height: calc(100vh - 70px);
    margin: 70px auto 0;
    padding: 30px clamp(18px, 2.4vw, 36px) 110px;
}

.schedule-board {
    min-height: 0;
    background: transparent;
}

.schedule-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
    padding: clamp(24px, 3.4vw, 42px);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 26px;
    background:
        linear-gradient(115deg, rgba(31, 18, 27, 0.96), rgba(17, 18, 25, 0.93) 56%, rgba(19, 15, 34, 0.94));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.schedule-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    right: -130px;
    top: -250px;
    border-radius: 50%;
    background: rgba(255, 73, 103, 0.22);
    filter: blur(70px);
}

.schedule-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff91a3;
    letter-spacing: 0.14em;
}

.schedule-kicker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4967;
    box-shadow: 0 0 0 5px rgba(255, 73, 103, 0.12), 0 0 18px rgba(255, 73, 103, 0.72);
}

.schedule-head h1 {
    margin: 12px 0 10px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.schedule-head p {
    max-width: 620px;
    color: rgba(239, 242, 249, 0.66);
    font-size: 15px;
}

.schedule-today-card {
    min-width: 154px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.schedule-today-card strong {
    margin: 5px 0 3px;
    color: #ff768e;
    font-size: 44px;
}

.schedule-toolbar {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 4;
    width: 100%;
    grid-template-columns: minmax(260px, 1fr) auto;
    margin: 0 0 16px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;
    background: var(--schedule-panel);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
    transform: none;
}

.schedule-search {
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.schedule-search:focus-within {
    border-color: rgba(255, 73, 103, 0.38);
    background: rgba(255, 255, 255, 0.065);
}

.schedule-search input::placeholder {
    color: rgba(232, 235, 243, 0.38);
}

.schedule-status-filter {
    border-radius: 13px;
}

.schedule-status-filter button {
    height: 38px;
    border-radius: 10px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.schedule-status-filter button.is-active {
    background: #f4f5f8;
    color: #15151a;
}

.schedule-day-tabs {
    top: 78px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;
    background: rgba(13, 13, 17, 0.9);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.schedule-list-top {
    height: 70px;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    padding: 0 14px;
    border-bottom: 0;
}

.schedule-list-top strong {
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.025em;
}

.schedule-list-top button {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    font-size: 25px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.schedule-list-top button:hover,
.schedule-list-top button:focus-visible {
    border-color: rgba(255, 73, 103, 0.34);
    background: rgba(255, 73, 103, 0.11);
    color: #ffffff;
    outline: none;
}

.schedule-month-chevron {
    width: 8px;
    height: 8px;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    font-style: normal;
}

.schedule-month-chevron.is-prev {
    transform: rotate(135deg) translate(-1px, -1px);
}

.schedule-month-chevron.is-next {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.schedule-list-top [data-month-today] {
    width: auto;
    padding: 0 13px;
    border-radius: 999px;
    color: rgba(245, 247, 251, 0.64);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.schedule-grid {
    gap: 30px;
    padding: 0 0 40px;
}

.schedule-list-day {
    gap: 14px;
}

.schedule-list-day h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 3px;
    font-size: initial;
}

.schedule-day-number {
    min-width: 46px;
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.schedule-day-copy {
    display: grid;
    gap: 1px;
}

.schedule-day-copy strong {
    color: rgba(248, 249, 252, 0.94);
    font-size: 15px;
    line-height: 1.1;
}

.schedule-day-copy small {
    color: rgba(232, 235, 243, 0.46);
    font-size: 12px;
    font-weight: 700;
}

.schedule-list-day h2 > em {
    margin-left: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 73, 103, 0.13);
    color: #ff8ca0;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.08em;
}

.schedule-list-cards {
    gap: 14px;
}

.schedule-list-card {
    min-height: 172px;
    align-content: end;
    gap: 7px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(8, 9, 12, 0.12) 8%, rgba(8, 9, 12, 0.36) 43%, rgba(8, 9, 12, 0.96) 100%),
        var(--schedule-list-bg),
        #1e2129;
    box-shadow: none;
    transition: transform 0.24s ease, border-color 0.24s ease, filter 0.24s ease, box-shadow 0.24s ease;
}

.schedule-list-card:hover,
.schedule-list-card:focus-visible {
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-4px);
    filter: brightness(1.06);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.schedule-list-shade {
    background: linear-gradient(90deg, rgba(7, 8, 11, 0.18), transparent 65%);
}

.schedule-card-top {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 13px;
    right: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.schedule-list-card .schedule-chip {
    min-height: 24px;
    padding: 0 9px;
    background: rgba(105, 133, 255, 0.17);
    color: #cbd5ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.03em;
    backdrop-filter: blur(9px);
}

.schedule-list-card .schedule-chip.is-released {
    background: rgba(57, 201, 119, 0.16);
    color: #a7f0c4;
}

.schedule-list-card .schedule-card-top em {
    position: static;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(7, 8, 11, 0.54);
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    backdrop-filter: blur(9px);
}

.schedule-list-card strong {
    padding-right: 30px;
    font-size: clamp(18px, 1.7vw, 23px);
}

.schedule-list-card small {
    color: rgba(245, 247, 251, 0.62);
    font-size: 13px;
}

.schedule-card-arrow {
    position: absolute;
    z-index: 1;
    right: 16px;
    bottom: 17px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 19px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.schedule-list-card:hover .schedule-card-arrow,
.schedule-list-card:focus-visible .schedule-card-arrow {
    color: #ffffff;
    transform: translateX(3px);
}

.schedule-empty {
    min-height: 260px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 1180px) {
    .schedule-list-cards {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
}

@media (max-width: 980px) {
    .schedule-list-cards {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 700px) {
    html,
    body.schedule-page {
        width: 100%;
        max-width: 100vw;
    }

    .schedule-shell {
        width: 100%;
        max-width: 100vw;
        margin-top: 64px;
        padding: 14px 10px 112px;
        overflow: clip;
    }

    .schedule-board,
    .schedule-head,
    .schedule-toolbar,
    .schedule-day-tabs,
    .schedule-grid,
    .schedule-list-day,
    .schedule-list-cards {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .schedule-head {
        display: block;
        margin-bottom: 12px;
        padding: 22px 18px;
        border-radius: 21px;
    }

    .schedule-head h1 {
        margin-top: 10px;
        font-size: 38px;
    }

    .schedule-head p {
        font-size: 13px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .schedule-today-card {
        min-width: 0;
        min-height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 18px;
        padding: 11px 14px;
        border-radius: 15px;
    }

    .schedule-today-card strong {
        margin-left: auto;
        font-size: 30px;
    }

    .schedule-today-card small {
        display: none;
    }

    .schedule-toolbar {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 12px;
        border-radius: 18px;
    }

    .schedule-status-filter {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .schedule-status-filter button {
        min-width: 0;
        flex: 1 1 0;
        padding: 0 4px;
        font-size: 10px;
    }

    .schedule-day-tabs {
        top: 64px;
        margin-bottom: 20px;
        border-radius: 16px;
    }

    .schedule-list-top {
        width: 100%;
        height: 62px;
        grid-template-columns: 42px minmax(0, 1fr) 106px;
        padding: 0 8px;
    }

    .schedule-list-top strong {
        font-size: 18px;
    }

    .schedule-list-top button {
        width: 34px;
        height: 34px;
    }

    .schedule-list-top span {
        gap: 6px;
    }

    .schedule-list-top [data-month-today] {
        width: auto;
        padding: 0 9px;
        font-size: 9px;
    }

    .schedule-grid {
        gap: 25px;
        padding: 0;
    }

    .schedule-list-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .schedule-day-number {
        min-width: 39px;
        font-size: 36px;
    }

    .schedule-list-card {
        width: 100%;
        max-width: 100%;
        min-height: 142px;
        padding: 14px;
        border-radius: 16px;
    }

    .schedule-list-card strong {
        font-size: 19px;
    }

    .schedule-list-card small {
        font-size: 12px;
    }
}

/* Trailer follows the same stationary interaction language as the other controls. */
body.anime-detail-page .anime-poster-trailer {
    transform: none !important;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, filter .22s ease;
}

body.anime-detail-page .anime-poster-trailer:hover,
body.anime-detail-page .anime-poster-trailer:focus-visible {
    transform: none !important;
    color: #fff;
    background: rgba(var(--anime-accent-rgb), .14);
    border-color: rgba(var(--anime-accent-rgb), .38);
    box-shadow: 0 8px 20px rgba(var(--anime-accent-rgb), .14);
    filter: brightness(1.06);
}

body.anime-detail-page .anime-poster-trailer:active {
    transform: none !important;
    filter: brightness(.96);
    box-shadow: 0 4px 12px rgba(var(--anime-accent-rgb), .1);
}

/* Center the shared footer brand on phones. */
@media (max-width: 760px) {
    footer.footer .footer-content { justify-items: center !important; }
    footer.footer .footer-brand {
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
        justify-items: center !important;
        text-align: center !important;
    }
    footer.footer .footer-logo-link {
        justify-self: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    footer.footer .footer-logo {
        transform: none !important;
        transform-origin: center !important;
    }
    footer.footer .footer-text,
    footer.footer .footer-text-strong {
        width: 100%;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    footer.footer .footer-badges { justify-content: center !important; }
}

/* Extended Premium display-name styles in comments */
.anime-comment-author .anime-comment-premium-name[data-name-style="rounded"]{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:900}
.anime-comment-author .anime-comment-premium-name[data-name-style="serif"]{font-family:Georgia,"Times New Roman",serif;font-weight:800}
.anime-comment-author .anime-comment-premium-name[data-name-style="comic"]{font-family:"Comic Sans MS","Segoe Print",cursive;font-weight:800}
.anime-comment-author .anime-comment-premium-name[data-name-style="mono"]{font-family:Consolas,"Courier New",monospace;font-weight:850}
.anime-comment-author .anime-comment-premium-name[data-name-effect="gradient"]{color:transparent!important;background:linear-gradient(90deg,var(--premium-name-color) 0%,var(--premium-name-alt) 33%,var(--premium-name-color) 66%,var(--premium-name-alt) 100%);background-clip:text;-webkit-background-clip:text;background-size:300% 100%;animation:animeCommentPremiumNameGradient 3s linear infinite}
.anime-comment-author .anime-comment-premium-name[data-name-effect="neon"]{color:#fff!important;text-shadow:0 0 4px #fff,0 0 9px var(--premium-name-color),0 0 19px var(--premium-name-color);animation:animeCommentPremiumNameNeon 2.2s ease-in-out infinite}
.anime-comment-author .anime-comment-premium-name[data-name-effect="toon"]{-webkit-text-stroke:.6px color-mix(in srgb,var(--premium-name-alt) 76%,#12141a);text-shadow:1px 1px 0 var(--premium-name-alt),2px 2px 0 rgba(0,0,0,.3)}
.anime-comment-author .anime-comment-premium-name[data-name-effect="pop"]{text-shadow:0 2px 0 var(--premium-name-alt),0 5px 10px color-mix(in srgb,var(--premium-name-color) 28%,transparent);animation:animeCommentPremiumNamePop 1.9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes animeCommentPremiumNameNeon{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.25)}}
@keyframes animeCommentPremiumNamePop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.04)}}
@keyframes animeCommentPremiumNameGradient{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Weekly account-only viewer leaderboard on the home page. */
body.home-page .weekly-viewers {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(4px, 1vw, 14px);
    padding: clamp(22px, 2.2vw, 36px);
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: clamp(16px, 1.5vw, 24px);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 60, 83, .1), transparent 25%),
        linear-gradient(145deg, rgba(20, 20, 25, .94), rgba(9, 9, 12, .98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.weekly-viewers-head {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(22px, 2vw, 32px);
}

.weekly-viewers-heading {
    min-width: 0;
}

.weekly-viewers-kicker {
    display: block;
    margin: 0 0 7px 13px;
    color: #ff5369;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

body.home-page .weekly-viewers .section-title {
    margin: 0;
    padding-left: 13px;
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.08;
}

body.home-page .weekly-viewers .section-title::before {
    display: none !important;
}

.weekly-viewers-filter {
    position: relative;
    flex: 0 0 auto;
}

.weekly-viewers-filter-toggle {
    display: inline-flex;
    min-width: 148px;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 11px;
    color: rgba(255, 255, 255, .9);
    background: rgba(8, 8, 11, .8);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    transition: border-color .22s ease, background-color .22s ease, transform .18s ease, box-shadow .22s ease;
}

.weekly-viewers-filter-toggle:hover,
.weekly-viewers-filter.is-open .weekly-viewers-filter-toggle {
    border-color: rgba(255, 86, 107, .34);
    background: rgba(24, 16, 20, .94);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 56, 85, .06);
}

.weekly-viewers-filter-toggle:active {
    transform: scale(.97);
}

.weekly-viewers-filter-toggle svg {
    width: 11px;
    height: 8px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform .25s ease;
}

.weekly-viewers-filter.is-open .weekly-viewers-filter-toggle svg {
    transform: rotate(180deg);
}

.weekly-viewers-filter-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    width: 176px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: rgba(13, 13, 17, .96);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .48);
    transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.weekly-viewers-filter.is-open .weekly-viewers-filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.weekly-viewers-filter-menu button {
    padding: 10px 11px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .6);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.weekly-viewers-filter-menu button:hover,
.weekly-viewers-filter-menu button.is-selected {
    color: #fff;
    background: rgba(255, 69, 94, .12);
}

.weekly-viewers-track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, calc((100% - 64px) / 5));
    gap: 16px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.weekly-viewers-track::-webkit-scrollbar {
    display: none;
}

.weekly-viewer-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 96px;
    grid-template-columns: 32px 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 17px 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, rgba(39, 39, 46, .9), rgba(24, 24, 29, .95));
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(10px);
    animation: weeklyViewerEnter .48s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: var(--weekly-card-delay, 0ms);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.weekly-viewer-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .055), transparent 70%);
    opacity: 0;
    transform: translateX(-45%);
    transition: opacity .3s ease, transform .55s ease;
}

.weekly-viewer-card:hover {
    z-index: 2;
    border-color: rgba(255, 255, 255, .13);
    background: linear-gradient(135deg, rgba(47, 47, 55, .96), rgba(28, 28, 34, .98));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
    transform: translateY(-4px);
}

.weekly-viewer-card:hover::after {
    opacity: 1;
    transform: translateX(45%);
}

.weekly-viewer-card.rank-1 {
    border-color: rgba(255, 204, 74, .17);
    background: linear-gradient(135deg, rgba(55, 46, 28, .95), rgba(30, 28, 26, .97));
}

.weekly-viewer-card.rank-2 {
    border-color: rgba(202, 212, 229, .14);
}

.weekly-viewer-card.rank-3 {
    border-color: rgba(222, 132, 62, .16);
}

.weekly-viewer-card.is-current-user {
    box-shadow: inset 0 0 0 1px rgba(255, 73, 98, .16), 0 12px 30px rgba(0, 0, 0, .2);
}

.weekly-viewer-rank {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, .34);
    font-size: 27px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.rank-1 .weekly-viewer-rank { color: #ffd04f; text-shadow: 0 0 18px rgba(255, 202, 62, .22); }
.rank-2 .weekly-viewer-rank { color: #cbd1dc; }
.rank-3 .weekly-viewer-rank { color: #d98a45; }

.weekly-viewer-avatar {
    position: relative;
    z-index: 2;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    color: rgba(255, 255, 255, .86);
    background: linear-gradient(145deg, #34343c, #222228);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.weekly-viewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weekly-viewer-copy {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    gap: 3px;
}

.weekly-viewer-name,
.weekly-viewer-metric,
.weekly-viewer-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-viewer-name {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.weekly-viewer-metric {
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    font-weight: 720;
}

.weekly-viewer-copy small {
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
    font-weight: 650;
}

.weekly-viewer-self {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 9px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 84, 108, .24);
    border-radius: 5px;
    color: #ff7c8e;
    background: rgba(255, 51, 79, .09);
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .08em;
}

.weekly-viewers-empty {
    display: grid;
    min-width: min(520px, calc(100vw - 72px));
    min-height: 96px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .018);
    font-size: 12px;
}

.weekly-viewer-skeleton {
    display: grid;
    grid-template-columns: 32px 50px 1fr;
    pointer-events: none;
}

.weekly-viewer-skeleton span,
.weekly-viewer-skeleton i,
.weekly-viewer-skeleton b {
    display: block;
    border-radius: 7px;
    background: linear-gradient(100deg, rgba(255,255,255,.035), rgba(255,255,255,.075), rgba(255,255,255,.035));
    background-size: 220% 100%;
    animation: weeklyViewerSkeleton 1.3s linear infinite;
}

.weekly-viewer-skeleton span { width: 22px; height: 25px; }
.weekly-viewer-skeleton i { width: 50px; height: 50px; border-radius: 50%; }
.weekly-viewer-skeleton b { width: 80%; height: 32px; }

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

@keyframes weeklyViewerSkeleton {
    to { background-position: -220% 0; }
}

@media (max-width: 1400px) {
    .weekly-viewers-track {
        grid-auto-columns: minmax(265px, calc((100% - 48px) / 4));
    }
}

@media (max-width: 900px) {
    .weekly-viewers-track {
        grid-auto-columns: minmax(255px, calc((100% - 32px) / 3));
    }
}

@media (max-width: 700px) {
    body.home-page .weekly-viewers {
        padding: 16px 12px 13px;
        overflow: hidden;
        border-radius: 16px;
        background:
            radial-gradient(circle at 0 0, rgba(255, 60, 83, .12), transparent 34%),
            linear-gradient(150deg, rgba(19, 18, 23, .97), rgba(8, 8, 11, .99));
    }

    .weekly-viewers-head {
        align-items: flex-end;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 15px;
    }

    .weekly-viewers-heading {
        flex: 1 1 auto;
    }

    body.home-page .weekly-viewers .section-title {
        padding-left: 10px;
        font-size: clamp(20px, 5.8vw, 23px);
        line-height: 1.05;
    }

    .weekly-viewers-kicker {
        margin: 0 0 6px 10px;
        font-size: 8px;
        letter-spacing: .15em;
    }

    .weekly-viewers-filter {
        align-self: flex-end;
    }

    .weekly-viewers-filter-toggle {
        min-width: 118px;
        min-height: 38px;
        gap: 10px;
        padding-inline: 11px;
        border-radius: 10px;
        font-size: 10px;
    }

    .weekly-viewers-filter-menu {
        right: 0;
        left: auto;
        width: 154px;
        transform-origin: top right;
    }

    .weekly-viewers-track {
        width: calc(100% + 12px);
        grid-auto-columns: calc(100% - 26px);
        gap: 10px;
        padding: 2px 12px 5px 1px;
        scroll-padding-inline: 1px;
        scroll-snap-type: x mandatory;
    }

    .weekly-viewer-card {
        min-height: 80px;
        grid-template-columns: 25px 46px minmax(0, 1fr);
        gap: 9px;
        padding: 11px 12px;
        border-radius: 12px;
        scroll-snap-stop: always;
    }

    .weekly-viewer-rank { font-size: 21px; }
    .weekly-viewer-avatar { width: 46px; height: 46px; font-size: 13px; }
    .weekly-viewer-name { font-size: 13px; }
    .weekly-viewer-metric { font-size: 11px; }
    .weekly-viewer-copy small { font-size: 8px; }
}

@media (max-width: 360px) {
    .weekly-viewers-head {
        align-items: stretch;
        flex-direction: column;
    }

    .weekly-viewers-filter {
        align-self: flex-start;
    }

    .weekly-viewers-filter-menu {
        right: auto;
        left: 0;
        transform-origin: top left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weekly-viewer-card,
    .weekly-viewer-skeleton span,
    .weekly-viewer-skeleton i,
    .weekly-viewer-skeleton b {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* Home card badges stay still and brighten together on hover. */
body.home-page .home-categories .anime-box .ep,
body.home-page .home-categories .anime-box .anime-view-pill,
body.home-page .home-categories .anime-box .anime-upload-time {
    transform: none !important;
    opacity: .9;
    filter: brightness(.94);
    box-shadow: none;
    transition: opacity .25s ease, background-color .25s ease, filter .25s ease, box-shadow .25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    body.home-page .home-categories .anime-box:hover .anime-view-pill,
    body.home-page .home-categories .anime-box:hover .ep,
    body.home-page .home-categories .anime-box:hover .anime-upload-time {
        transform: none !important;
        opacity: 1;
        filter: brightness(1.14);
        background: rgba(12, 14, 22, .82);
        box-shadow: 0 7px 17px rgba(0, 0, 0, .34), 0 0 12px rgba(255, 255, 255, .055);
    }

    body.home-page .home-categories .anime-box:hover .anime-score-pill {
        color: #ffe17d;
        background: rgba(91, 65, 10, .9);
        border-color: rgba(255, 210, 64, .48);
        box-shadow: 0 7px 18px rgba(255, 190, 35, .18), 0 0 13px rgba(255, 210, 64, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-page .home-categories .anime-box .ep,
    body.home-page .home-categories .anime-box .anime-view-pill,
    body.home-page .home-categories .anime-box .anime-upload-time {
        transform: none !important;
        transition: none !important;
        filter: brightness(1) !important;
    }
}

/* Desktop search dropdown anchored directly below the header search action. */
@media (min-width: 1101px) {
    .search-panel {
        top: var(--desktop-search-top, 78px) !important;
        left: var(--desktop-search-left, calc(100vw - 432px)) !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-height: min(72vh, 520px) !important;
        padding: 14px 14px 10px !important;
        border: 1px solid rgba(255, 255, 255, .11) !important;
        border-radius: 17px !important;
        background: linear-gradient(145deg, rgba(24, 24, 26, .94), rgba(10, 10, 12, .91)) !important;
        box-shadow: 0 20px 48px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .045) !important;
        backdrop-filter: blur(24px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
        transform: translateY(-9px) scale(.975) !important;
        transform-origin: top right !important;
        animation: none !important;
        transition: opacity .22s ease, visibility .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1) !important;
    }

    .search-panel.active,
    .search-panel.active.is-expanded {
        transform: translateY(0) scale(1) !important;
    }

    .search-panel.active:not(.is-closing) {
        animation: desktopSearchPanelIn .42s cubic-bezier(.16, 1, .3, 1) both !important;
    }

    @keyframes desktopSearchPanelIn {
        0% {
            opacity: 0;
            translate: 0 -12px;
            scale: .96;
            clip-path: inset(0 7% 72% 7% round 17px);
            filter: blur(7px);
        }
        58% {
            opacity: 1;
            filter: blur(0);
        }
        100% {
            opacity: 1;
            translate: 0 0;
            scale: 1;
            clip-path: inset(0 0 0 0 round 17px);
            filter: none;
        }
    }

    @keyframes desktopSearchPanelOut {
        0% {
            opacity: 1;
            translate: 0 0;
            scale: 1;
            clip-path: inset(0 0 0 0 round 17px);
            filter: none;
        }
        44% {
            opacity: .92;
            translate: 0 -2px;
            scale: .992;
            filter: blur(0);
        }
        100% {
            opacity: 0;
            translate: 0 -11px;
            scale: .965;
            clip-path: inset(0 6% 70% 6% round 17px);
            filter: blur(6px);
        }
    }

    .search-panel.active.is-closing {
        transform: translateY(0) scale(1) !important;
        animation: desktopSearchPanelOut .3s cubic-bezier(.4, 0, .2, 1) both !important;
        pointer-events: none !important;
    }

    .search-box {
        position: relative;
        height: 48px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .search-box::before {
        content: '';
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 14px;
        width: 17px;
        height: 17px;
        transform: translateY(-50%);
        background: url('../pictures/search.png') center / contain no-repeat;
        filter: grayscale(1) brightness(1.8);
        opacity: .62;
        pointer-events: none;
    }

    .search-input {
        height: 48px !important;
        padding: 0 15px 0 42px !important;
        border: 1px solid rgba(255, 255, 255, .13) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .035) !important;
        color: #f5f5f7 !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        caret-color: #ff4057;
        box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
    }

    .search-input::placeholder {
        color: rgba(255, 255, 255, .42) !important;
        font-weight: 600;
    }

    .search-input:focus {
        border-color: rgba(255, 255, 255, .23) !important;
        background: rgba(255, 255, 255, .055) !important;
        box-shadow: 0 0 0 3px rgba(255, 64, 87, .08), inset 0 1px rgba(255, 255, 255, .035) !important;
    }

    .close-search,
    .search-button {
        display: none !important;
    }

    .search-panel:not(.has-results)::after {
        content: 'Anime tapmaq üçün yaz...';
        display: block;
        padding: 12px 1px 2px;
        color: rgba(255, 255, 255, .48);
        font-size: 10px;
        font-weight: 500;
    }

    .search-results {
        width: 100%;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .search-panel.has-results .search-results {
        max-height: min(var(--search-results-h, 360px), calc(72vh - 78px)) !important;
        margin-top: 9px !important;
        padding: 5px 3px 2px !important;
        border-top: 1px solid rgba(255, 255, 255, .075) !important;
    }

    .search-result-item {
        min-height: 58px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
    }

    .search-result-item:hover {
        background: rgba(255, 255, 255, .05) !important;
    }

    .search-result-link {
        min-height: 58px;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 4px 6px !important;
    }

    .search-result-thumb {
        width: 38px !important;
        height: 50px !important;
        aspect-ratio: auto !important;
        border-radius: 7px !important;
    }

    .search-result-title {
        overflow: hidden;
        color: #eaeaee !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {
        .search-panel.active:not(.is-closing),
        .search-panel.active.is-closing {
            animation: none !important;
        }
    }
}

/* Canonical mobile bottom sheet — index is the shared source of truth. */
@media(max-width:1100px){
 .mobile-drawer{top:auto!important;left:8px!important;right:8px!important;bottom:78px!important;width:auto!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 96px)!important;margin:0!important;padding:48px 16px 16px!important;display:block!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(16,16,21,.985),rgba(8,8,12,.99))!important;box-shadow:0 -14px 50px rgba(0,0,0,.58)!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;transform:translateY(calc(100% + 94px))!important}
 .mobile-drawer.active,body.drawer-open .mobile-drawer{transform:translateY(0)!important}
 .mobile-drawer.is-dragging{transition:none!important;overflow:hidden!important}
 .mobile-drawer-drag-zone{height:48px!important}
 .mobile-drawer:before{top:11px!important;width:42px!important;height:4px!important}
 .mobile-drawer-nav{display:grid!important;gap:2px!important;margin:0!important;padding:0!important}
 .mobile-drawer-nav .nav-item{width:100%!important;min-height:43px!important;padding:10px 7px!important;margin:0!important;display:flex!important;align-items:center!important;gap:12px!important;border:0!important;border-radius:10px!important;background:transparent!important;font-size:13px!important}
 .mobile-drawer-nav .nav-item .icon{width:17px!important;height:17px!important;flex:0 0 17px!important}
 .mobile-drawer-actions{position:static!important;width:100%!important;margin:14px 0 0!important;padding:14px 0 0!important;display:grid!important;gap:8px!important;border-top:1px solid rgba(255,255,255,.075)!important;transform:none!important}
 .mobile-drawer-actions>.btn{width:100%!important;min-height:43px!important;margin:0!important;padding:10px 14px!important}
 .mobile-drawer-profile-card{width:100%!important;margin:0!important;padding:0!important;display:grid!important;gap:8px!important;border:0!important}
 .mobile-drawer-profile-link.has-banner{width:100%!important;height:72px!important;margin:0!important}
 .mobile-drawer-profile-action{min-height:40px!important;margin:0!important;padding:9px 11px!important;border-radius:10px!important}
 .mobile-drawer-backdrop{z-index:1190!important}.mobile-drawer{z-index:1195!important}.mobile-bottom-nav{z-index:1200!important}
}

.hero-mobile-poster,.hero-info-label{display:none}
@media(max-width:700px){
 body.home-page .hero-section{min-height:700px!important;height:auto!important;margin:0 0 18px!important;background:#101217!important;overflow:hidden!important}
 body.home-page .hero-backdrop{inset:-30px!important;filter:blur(25px) saturate(1.05) brightness(.42)!important;transform:scale(1.14)!important;opacity:0!important}
 body.home-page .hero-backdrop.is-visible{opacity:.7!important}
 body.home-page .hero-video{display:none!important}
 body.home-page .hero-mask{background:linear-gradient(180deg,rgba(9,11,16,.34),rgba(12,14,17,.76) 48%,#111416 88%)!important;box-shadow:none!important}
 body.home-page .hero-inner{width:100%!important;max-width:390px!important;margin:0 auto!important;padding:88px 15px 28px!important;display:grid!important;grid-template-rows:auto auto auto auto!important;grid-template-areas:"poster" "themes" "facts" "actions"!important;justify-items:center!important;align-content:start!important;gap:12px!important}
 body.home-page .hero-mobile-poster{grid-area:poster;display:block!important;width:min(72vw,280px)!important;height:auto!important;aspect-ratio:3/4!important;object-fit:cover!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:15px!important;background:#111!important;box-shadow:0 18px 34px rgba(0,0,0,.62),0 0 38px rgba(var(--anime-accent-rgb),.2)!important}
 body.home-page .hero-mobile-poster[hidden]{display:none!important}
 body.home-page .hero-title,body.home-page .hero-title-logo,body.home-page .hero-summary{display:none!important}
 body.home-page .hero-title-logo:not([hidden]){grid-area:poster!important;display:block!important;align-self:end!important;justify-self:center!important;z-index:3!important;width:min(62%,190px)!important;max-height:100px!important;margin:0 0 17px!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 3px 2px rgba(0,0,0,.9)) drop-shadow(0 8px 15px rgba(0,0,0,.75))!important;pointer-events:none!important}
 body.home-page .hero-themes{grid-area:themes!important;max-width:100%!important;max-height:none!important;margin:1px 0 0!important;display:flex!important;justify-content:center!important;gap:0!important;overflow:hidden!important}
 body.home-page .hero-themes[hidden]{display:none!important}
 body.home-page .hero-theme{min-height:22px!important;padding:1px 7px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#c5c6cc!important;font-size:11px!important;font-weight:800!important;white-space:nowrap!important;backdrop-filter:none!important}
 body.home-page .hero-theme:not(:last-child):after{content:"•";margin-left:12px;color:#64666d}
 body.home-page .hero-theme:nth-child(n+4){display:none!important}
 body.home-page .hero-theme:nth-child(3):after{content:none!important;display:none!important}
 body.home-page .hero-facts{grid-area:facts!important;margin:0!important;min-height:30px!important;justify-content:center!important;gap:8px!important}
 body.home-page .hero-fact{min-height:25px!important;padding:4px 8px!important;border-radius:5px!important;font-size:10px!important}
 body.home-page .hero-fact.is-score{padding-left:1px!important;border:0!important;background:transparent!important;font-size:13px!important}
 body.home-page .hero-actions{grid-area:actions!important;width:100%!important;margin-top:0!important;display:grid!important;grid-template-columns:1.08fr 1fr!important;gap:10px!important}
 body.home-page .hero-btn{width:100%!important;min-height:44px!important;padding:10px 14px!important;border-radius:10px!important;justify-content:center!important;font-size:12px!important}
 body.home-page .hero-btn-primary{background:#fff!important;color:#08090b!important;box-shadow:0 9px 22px rgba(0,0,0,.28)!important}
 body.home-page .hero-btn-primary .hero-btn-icon{width:18px!important;height:18px!important;fill:#08090b!important}
 body.home-page .hero-btn-ghost{border:1px solid rgba(255,255,255,.09)!important;background:rgba(255,255,255,.17)!important;color:#fff!important}
 body.home-page .hero-btn-ghost .hero-btn-icon{width:17px!important;height:17px!important;filter:brightness(0) invert(1)!important}
 body.home-page .hero-info-label{display:inline!important}
 .hero-inner.is-enter .hero-mobile-poster{animation:mobileHeroPosterIn .65s cubic-bezier(.16,1,.3,1) both}
 .hero-inner.is-enter .hero-title-logo:not([hidden]){animation:mobileHeroNameIn .65s cubic-bezier(.16,1,.3,1) .16s both!important}
 @keyframes mobileHeroPosterIn{from{opacity:0;transform:translateY(20px) scale(.94);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
 @keyframes mobileHeroNameIn{from{opacity:0;transform:translateY(13px) scale(.88);filter:blur(5px)}to{opacity:1;transform:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.9)) drop-shadow(0 8px 15px rgba(0,0,0,.75))}}
}

@media(max-width:768px){.search-panel:before{content:"";position:absolute;top:4px;left:14px;width:120px;height:40px;background:url('../pictures/logo.png?v=2') center/contain no-repeat;z-index:3}}
@media(max-width:768px){.search-panel:before{display:none!important;content:none!important}}
@media(max-width:768px){.search-panel.has-results .search-results{padding:5px 3px!important;background:#08090b!important;border-radius:12px!important}.search-result-item{min-height:58px!important;margin:0!important;border:0!important;border-radius:9px!important;background:transparent!important}.search-result-item:hover,.search-result-item:active{background:rgba(255,255,255,.045)!important}.search-result-link{min-height:58px!important;grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;padding:4px 5px!important}.search-result-thumb{width:38px!important;height:50px!important;aspect-ratio:auto!important;border-radius:7px!important}.search-result-title{font-size:12.5px!important;line-height:1.3!important;font-weight:700!important;color:#e8e8ec!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}.search-result-episode{display:none!important}.search-results::-webkit-scrollbar{width:3px!important}.search-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)!important}}
@media(max-width:768px){.close-search i{display:block;font-size:16px;line-height:1}.topbar .mobile-header-search,.close-search{transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s ease,box-shadow .14s ease!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.topbar .mobile-header-search:active{transform:scale(.82)!important;filter:brightness(1.35)!important}.topbar .mobile-header-search:active img{transform:scale(.9)}.close-search:active{transform:translateY(-50%) scale(.82)!important;filter:brightness(1.3)!important;box-shadow:inset 0 2px 7px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3)!important}}

/* Compact mobile search header */
@media(max-width:768px){
 body:has(.search-panel.active) .mobile-header-search{opacity:0!important;pointer-events:none!important}
 .search-panel,.search-panel.active,.search-panel.active.is-expanded,.search-panel.has-results{top:0!important;left:0!important;right:0!important;width:100%!important;max-height:100dvh!important;padding:49px 12px 10px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;border-radius:0 0 18px 18px!important;background:rgba(12,13,17,.98)!important;box-shadow:0 16px 36px rgba(0,0,0,.34)!important;box-sizing:border-box!important}
 .search-box{height:45px!important;padding:0 14px 0 42px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;background:#08090c!important}
 .search-box:before{left:14px!important;width:17px!important;height:17px!important;opacity:.5!important}
 .search-input{height:43px!important;font-size:13px!important;font-weight:600!important}
 .close-search{top:-42px!important;right:0!important;width:38px!important;height:38px!important;border-radius:12px!important;background:#24262d!important;color:#f0f1f4!important;box-shadow:0 5px 15px rgba(0,0,0,.28)!important;z-index:4}
 .search-results{margin-top:7px!important;max-height:min(var(--search-results-h,0px),calc(100dvh - 112px))!important}
}

/* Keep the mobile search anchored while its result list expands. */
@media(max-width:768px){
 .search-panel,.search-panel.active,.search-panel.active.is-expanded,.search-panel.has-results{left:12px!important;right:12px!important;width:auto!important;transform:none!important;transform-origin:top center!important}
 .search-panel.active{animation:mobileSearchReveal .42s cubic-bezier(.2,.8,.2,1) both!important}
 .search-panel.has-results,.search-panel.active.is-expanded{animation:none!important;opacity:1!important;visibility:visible!important}
 @keyframes mobileSearchReveal{0%{opacity:0;clip-path:inset(0 10% 88% 10% round 20px);filter:blur(7px)}100%{opacity:1;clip-path:inset(0 0 0 0 round 20px);filter:blur(0)}}
 .search-panel.active.is-closing{pointer-events:none!important;animation:mobileSearchHide .32s cubic-bezier(.4,0,1,1) both!important}
 @keyframes mobileSearchHide{0%{opacity:1;clip-path:inset(0 0 0 0 round 20px);filter:blur(0)}100%{opacity:0;clip-path:inset(0 8% 88% 8% round 20px);filter:blur(6px)}}
}

/* Home: personalized recommendation feature */
.home-personalized {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(300px, 24vw, 390px);
    margin: clamp(8px, 1vw, 18px) 0;
    border: 1px solid rgba(255, 255, 255, .105);
    border-radius: clamp(18px, 1.5vw, 26px);
    background:
        linear-gradient(105deg, rgba(14, 14, 18, .99) 0%, rgba(18, 14, 20, .97) 46%, rgba(25, 10, 18, .94) 100%);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035);
    overflow: hidden;
}

.home-personalized::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, #000 56%, transparent);
    opacity: .5;
}

.home-personalized::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -58%;
    left: -7%;
    width: min(54vw, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 53, 88, .23), rgba(129, 31, 104, .1) 42%, transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

.home-personalized-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(55%, 760px);
    min-height: inherit;
    margin-left: auto;
    padding: clamp(36px, 4vw, 72px);
}

.home-personalized-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #ff6077;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}

.home-personalized-spark {
    color: #ff4663;
    font-size: 19px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(255, 52, 87, .72);
    animation: homePersonalizedSpark 2.8s ease-in-out infinite;
}

.home-personalized-kicker small {
    padding: 5px 8px 4px;
    border: 1px solid rgba(255, 84, 112, .22);
    border-radius: 6px;
    background: rgba(255, 58, 91, .11);
    color: rgba(255, 184, 196, .84);
    font-size: 9px;
    letter-spacing: .12em;
}

.home-personalized h2 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3vw, 54px);
    font-weight: 850;
    line-height: 1.06;
    letter-spacing: -.035em;
}

.home-personalized p {
    max-width: 590px;
    margin: 18px 0 17px;
    color: rgba(255, 255, 255, .62);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.7;
}

.home-community-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.home-community-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    font-weight: 700;
    transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

.home-community-points span::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4866;
    box-shadow: 0 0 10px rgba(255, 58, 91, .78);
}

.home-personalized:hover .home-community-points span {
    border-color: rgba(255, 86, 113, .16);
    background: rgba(255, 69, 99, .05);
    color: rgba(255, 255, 255, .78);
    transform: translateY(-1px);
}

.home-personalized-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 100, 125, .34);
    border-radius: 11px;
    background: linear-gradient(135deg, #ef304f, #ba1f3a);
    color: #fff;
    box-shadow: 0 12px 34px rgba(226, 31, 66, .22), inset 0 1px rgba(255, 255, 255, .2);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, filter .28s ease;
}

.home-personalized-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}

.home-personalized-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 18px 42px rgba(226, 31, 66, .32), inset 0 1px rgba(255, 255, 255, .25);
}

.home-personalized-button:active {
    transform: translateY(0) scale(.97);
}

.home-personalized-button-arrow {
    font-size: 18px;
    transition: transform .25s ease;
}

.home-personalized-button:hover .home-personalized-button-arrow {
    transform: translateX(4px);
}

.home-personalized-note {
    margin-top: 11px;
    color: rgba(255, 255, 255, .32);
    font-size: 10px;
}

.home-personalized-art {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 52%;
    height: 100%;
    pointer-events: none;
}

.home-personalized-art::before {
    content: '';
    position: absolute;
    left: 8%;
    bottom: -28%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 45% 55% 47% 53%;
    background: linear-gradient(145deg, rgba(255, 67, 97, .16), rgba(117, 33, 118, .07));
    transform: rotate(-14deg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.home-personalized-art img {
    position: absolute;
    z-index: 3;
    left: clamp(-28px, -1.5vw, -8px);
    bottom: -18%;
    width: 110%;
    height: 146%;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .42));
    transform-origin: left bottom;
    transition: transform .65s cubic-bezier(.16, 1, .3, 1), filter .65s ease;
}

.home-personalized:hover .home-personalized-art img {
    transform: translateY(-5px) scale(1.025);
    filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .52));
}

.home-personalized-orbit {
    position: absolute;
    left: 5%;
    top: 50%;
    width: min(36vw, 500px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 88, 116, .1);
    border-radius: 50%;
    transform: translateY(-50%);
}

.home-personalized-orbit-small {
    left: 14%;
    width: min(25vw, 340px);
    border-color: rgba(184, 91, 182, .11);
}

.home-personalized-glow {
    position: absolute;
    z-index: 0;
    width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(76px);
    opacity: .18;
    pointer-events: none;
}

.home-personalized-glow-one {
    left: 11%;
    bottom: -42%;
    background: #f42d55;
}

.home-personalized-glow-two {
    left: 34%;
    top: -45%;
    background: #8c35c9;
}

@keyframes homePersonalizedSpark {
    0%, 100% { transform: rotate(0) scale(.9); opacity: .7; }
    50% { transform: rotate(16deg) scale(1.12); opacity: 1; }
}

@media (max-width: 760px) {
    .home-personalized {
        min-height: 520px;
        border-radius: 18px;
    }

    .home-personalized::after {
        top: 34%;
        left: -56%;
        width: 142vw;
    }

    .home-personalized-copy {
        width: 100%;
        min-height: 520px;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0;
        padding: 27px 18px 158px;
        text-align: center;
    }

    .home-personalized-kicker {
        justify-content: center;
        gap: 7px;
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: .13em;
    }

    .home-personalized-kicker small {
        padding: 4px 7px 3px;
        font-size: 7px;
    }

    .home-personalized h2 {
        max-width: 350px;
        font-size: clamp(31px, 9.5vw, 39px);
        line-height: 1.06;
        letter-spacing: -.04em;
    }

    .home-personalized p {
        max-width: 325px;
        margin: 14px auto 17px;
        font-size: 11.5px;
        line-height: 1.62;
    }

    .home-community-points {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
        margin-bottom: 17px;
    }

    .home-community-points span {
        min-height: 24px;
        padding: 0 7px;
        gap: 5px;
        font-size: clamp(7px, 2.15vw, 9px);
        white-space: nowrap;
    }

    .home-community-points span::before {
        width: 4px;
        height: 4px;
    }

    .home-personalized-button {
        align-self: center;
        justify-content: center;
        min-width: 176px;
        min-height: 44px;
        padding: 0 15px;
        gap: 11px;
    }

    .home-personalized-note {
        display: none;
    }

    .home-personalized-art {
        left: 0;
        right: auto;
        top: auto;
        bottom: 0;
        width: 72%;
        height: 35%;
        opacity: .98;
    }

    .home-personalized-art img {
        left: -15%;
        right: auto;
        bottom: -35%;
        width: 132%;
        height: 160%;
    }

    .home-personalized-orbit {
        left: -38%;
        width: 95vw;
    }

    .home-personalized-orbit-small {
        left: -2%;
        width: 66vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-personalized-spark {
        animation: none;
    }

    .home-personalized-art img,
    .home-personalized-button {
        transition: none;
    }
}

/* Refined mobile search */
@media(max-width:768px){
 .search-panel{top:68px!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 92px)!important;transform:translateY(-12px) scale(.97)!important;border:0!important;border-radius:20px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;opacity:0!important;visibility:hidden!important}
 .search-panel.active{transform:translateY(0) scale(1)!important;opacity:1!important;visibility:visible!important}
 .search-box{height:58px!important;padding:0 54px 0 50px!important;display:flex!important;align-items:center!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:18px!important;background:rgba(14,14,19,.94)!important;box-shadow:0 18px 44px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.045)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important}
 .search-box:before{content:"";position:absolute;left:19px;top:50%;width:20px;height:20px;transform:translateY(-50%);background:url('../pictures/search.png') center/contain no-repeat;filter:grayscale(1) brightness(2);opacity:.78}
 .search-input{height:56px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font-size:16px!important;font-weight:600!important;caret-color:#ff4057}
 .search-input::placeholder{color:#777983!important;font-weight:500!important}
 .search-input:focus{border:0!important;background:transparent!important;box-shadow:none!important}
 .search-button{display:none!important}
 .close-search{right:12px!important;top:50%!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;transform:translateY(-50%)!important;border:0!important;border-radius:11px!important;background:rgba(255,255,255,.07)!important;color:#c8c9cf!important;font-size:22px!important;line-height:1!important}
 .search-results{margin-top:8px!important;max-height:calc(100dvh - 166px)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;background:rgba(12,12,17,.96)!important;box-shadow:0 22px 52px rgba(0,0,0,.52)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;overflow-y:auto!important}
 .search-panel:not(.has-results) .search-results{border:0!important;background:transparent!important;box-shadow:none!important}
}
@media(max-width:768px){
 .search-panel{padding:6px!important;border:1px solid rgba(255,255,255,.11)!important;background:linear-gradient(145deg,rgba(20,20,27,.94),rgba(10,10,15,.96))!important;box-shadow:0 24px 65px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.045)!important;backdrop-filter:blur(28px)!important;-webkit-backdrop-filter:blur(28px)!important;transition:opacity .3s ease,transform .42s cubic-bezier(.16,1,.3,1),height .4s ease!important}
 .search-panel.active{animation:mobileSearchPanelIn .48s cubic-bezier(.16,1,.3,1) both}
 .search-box{border:0!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important}
 .search-results{margin-top:5px!important;max-height:min(var(--search-results-h,0px),calc(100dvh - 176px))!important;border:0!important;border-radius:15px!important;background:transparent!important;box-shadow:none!important;transition:max-height .48s cubic-bezier(.16,1,.3,1),opacity .28s ease,padding .35s ease!important}
 .search-panel.has-results .search-results{border-top:1px solid rgba(255,255,255,.075)!important;background:rgba(255,255,255,.018)!important}
 @keyframes mobileSearchPanelIn{0%{opacity:0;transform:translateY(-18px) scale(.94);filter:blur(7px)}65%{filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:none}}
}

@media(max-width:1100px){.mobile-bottom-nav .mobile-bottom-link,.mobile-bottom-nav .mobile-bottom-link:hover,.mobile-bottom-nav .mobile-bottom-link:focus,.mobile-bottom-nav .mobile-bottom-link:visited{text-decoration:none!important;border-bottom:0!important}.mobile-bottom-nav .mobile-bottom-link:before,.mobile-bottom-nav .mobile-bottom-link:after,.mobile-bottom-nav .mobile-bottom-link span:before,.mobile-bottom-nav .mobile-bottom-link span:after{content:none!important;display:none!important;border:0!important;text-decoration:none!important}}

/* Mobile app-style bottom navigation */
.mobile-bottom-nav{display:none}
.mobile-header-search{display:none}
@media(max-width:1100px){
 .mobile-menu-toggle,.mobile-drawer,.mobile-drawer-backdrop{display:none!important}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:8px;z-index:1200;height:64px;padding:5px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border:1px solid rgba(255,255,255,.11);border-radius:19px;background:rgba(12,12,16,.9);box-shadow:0 15px 45px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
 .mobile-bottom-link{position:relative;min-width:0;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:#767780;font-size:9px;font-weight:700;transition:color .22s ease,transform .22s ease,background .22s ease}.mobile-bottom-icon{height:23px;display:grid;place-items:center;color:#a5a6ad;font-size:21px;line-height:1;transition:.22s ease}.mobile-bottom-link.is-active{color:#fff;background:linear-gradient(180deg,rgba(255,62,83,.13),rgba(255,62,83,.025))}.mobile-bottom-link.is-active .mobile-bottom-icon{color:#ff4057;transform:translateY(-1px);filter:drop-shadow(0 0 7px rgba(255,64,87,.55))}.mobile-bottom-link.is-active:after{content:"";position:absolute;bottom:2px;width:16px;height:2px;border-radius:4px;background:#ff4057;box-shadow:0 0 9px #ff4057}.mobile-bottom-link:active{transform:scale(.92)}
}
@media(max-width:1100px){.topbar .mobile-header-search{margin-left:auto;width:42px;height:42px;display:grid!important;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(18,18,22,.62);color:#fff;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .2s ease,background .2s ease}.mobile-header-search img{width:18px;height:18px;object-fit:contain;filter:grayscale(1) brightness(2)}.mobile-header-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mobile-header-search:active{transform:scale(.92);background:rgba(255,64,87,.13)}}
@media(max-width:1100px){.topbar .mobile-header-search{width:46px;height:46px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.topbar .mobile-header-search img{width:27px!important;height:27px!important}.topbar .mobile-header-search:active{background:transparent!important}}
@media(max-width:380px){.mobile-bottom-nav{left:6px;right:6px}.mobile-bottom-link{font-size:8px}}

@media(max-width:1100px){.mobile-bottom-icon img{width:20px;height:20px;display:block;object-fit:contain;opacity:.68;filter:grayscale(1) brightness(1.7);transition:opacity .22s ease,filter .22s ease,transform .25s ease}.mobile-bottom-link.is-active .mobile-bottom-icon{filter:none}.mobile-bottom-link.is-active .mobile-bottom-icon img{opacity:1;filter:brightness(0) saturate(100%) invert(35%) sepia(99%) saturate(2486%) hue-rotate(331deg) brightness(104%) contrast(101%) drop-shadow(0 0 6px rgba(255,64,87,.65))}}
@media(max-width:1100px){.mobile-bottom-icon img.mobile-bottom-avatar{width:24px!important;height:24px!important;border-radius:50%!important;object-fit:cover!important;opacity:1!important;filter:none!important;border:1.5px solid rgba(255,255,255,.6)!important;box-shadow:0 3px 9px rgba(0,0,0,.4)!important}.mobile-bottom-link.is-active .mobile-bottom-avatar{border-color:#ff4057!important;box-shadow:0 0 8px rgba(255,64,87,.58)!important}}
@media(max-width:1100px){.mobile-bottom-avatar-fallback{display:grid;width:24px;height:24px;place-items:center;border:1.5px solid rgba(255,255,255,.62);border-radius:50%;color:#fff;font-size:10px;font-weight:900;line-height:1;box-shadow:0 3px 9px rgba(0,0,0,.4)}.mobile-bottom-link.is-active .mobile-bottom-avatar-fallback{border-color:#ff9ba8;box-shadow:0 0 8px rgba(255,64,87,.58)}}
@media(max-width:1100px){.mobile-bottom-icon i{display:block;font-size:20px;line-height:1;color:#aaa;transition:color .22s ease,filter .22s ease}.mobile-bottom-link.is-active .mobile-bottom-icon i{color:#ff4057;filter:drop-shadow(0 0 6px rgba(255,64,87,.65))}}
@media(max-width:1100px){.mobile-bottom-link[href="#mobile-menu"] .mobile-bottom-icon i{transition:transform .42s cubic-bezier(.2,.85,.2,1),color .22s ease,filter .22s ease;transform-origin:center}body.drawer-open .mobile-bottom-link[href="#mobile-menu"] .mobile-bottom-icon i{transform:rotate(180deg);color:#ff4057;filter:drop-shadow(0 0 6px rgba(255,64,87,.5))}body.drawer-open .mobile-bottom-link[href="#mobile-menu"]{color:#fff;background:linear-gradient(180deg,rgba(255,62,83,.13),rgba(255,62,83,.025))}}
@media(max-width:1100px){.mobile-bottom-link.is-active:after{display:none!important}}

/* Keep mobile bottom navigation taps reliable across touch browsers. */
@media(max-width:1100px){
 .mobile-bottom-nav{isolation:isolate;pointer-events:auto!important;touch-action:manipulation}
 .mobile-bottom-link{z-index:1;pointer-events:auto!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;cursor:pointer}
 .mobile-bottom-link>*{pointer-events:none!important}
 .mobile-bottom-link.is-pressed{transform:scale(.92)!important;filter:brightness(1.2)}
}

@media(max-width:1100px){.mobile-menu-toggle{display:none!important}.mobile-drawer{display:flex!important}.mobile-drawer-backdrop{display:block!important}.mobile-drawer-nav{margin-top:auto}.mobile-drawer-nav .nav-item{min-height:48px;padding:12px 10px}.mobile-drawer-actions{margin-top:10px}}

/* Mobile menu bottom sheet */
@media(max-width:1100px){
 .mobile-drawer{top:auto!important;left:8px!important;right:8px!important;bottom:0!important;width:auto!important;height:auto!important;max-height:min(78vh,640px);padding:38px 20px calc(20px + env(safe-area-inset-bottom))!important;border:1px solid rgba(255,255,255,.11)!important;border-bottom:0!important;border-radius:28px 28px 0 0!important;background:linear-gradient(180deg,rgba(16,16,20,.99),rgba(8,8,11,.995))!important;box-shadow:0 -22px 60px rgba(0,0,0,.62)!important;transform:translateY(110%)!important;transition:transform .42s cubic-bezier(.2,.82,.2,1)!important;overflow-y:auto;overscroll-behavior:contain}
 body.drawer-open .mobile-drawer{transform:translateY(0)!important}
 .mobile-drawer:before{content:"";position:absolute;top:11px;left:50%;width:44px;height:4px;border-radius:10px;background:rgba(255,255,255,.22);transform:translateX(-50%)}
 .mobile-drawer-head,.mobile-drawer-search,.mobile-drawer-search-results{display:none!important}
 .mobile-drawer-nav{margin:0!important;display:grid!important;gap:4px!important}
 .mobile-drawer-nav .nav-item{min-height:48px!important;padding:12px 8px!important;border-radius:12px!important;color:#d9d9df!important;font-size:14px!important}
 .mobile-drawer-nav .nav-item .icon{width:18px!important;height:18px!important;object-fit:contain;filter:grayscale(1) brightness(2)!important}
 .mobile-drawer-actions{margin-top:25px!important;gap:8px!important}
 .mobile-drawer-actions>.btn{min-height:46px;border-radius:11px!important;justify-content:center!important}
 .mobile-drawer-backdrop{background:rgba(0,0,0,.62)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important}
}
@media(max-width:1100px){.mobile-drawer{transform:translateY(var(--drawer-drag-y,110%))!important}.mobile-drawer.is-dragging{transition:none!important;user-select:none;touch-action:none}body.drawer-open .mobile-drawer{--drawer-drag-y:0px}.mobile-drawer:before{touch-action:none;cursor:grab}.mobile-drawer.is-dragging:before{cursor:grabbing;background:rgba(255,255,255,.38)}}
@media(max-width:1100px){.mobile-drawer{padding-top:62px!important}.mobile-drawer-drag-zone{position:absolute;z-index:3;top:0;left:0;right:0;height:62px;cursor:grab;touch-action:none}.mobile-drawer.is-dragging .mobile-drawer-drag-zone{cursor:grabbing}}
@media(max-width:1100px){.mobile-drawer-actions{width:100%;min-width:0}.mobile-drawer-profile-card,.mobile-drawer-profile-link{width:100%;min-width:0}.mobile-drawer-profile-link.has-banner{height:72px!important;min-height:72px!important;max-height:72px!important;padding:0!important;overflow:hidden!important}.mobile-drawer-profile-banner{width:100%!important;height:72px!important;max-height:72px!important;overflow:hidden!important}.mobile-drawer-profile-banner>img,.mobile-drawer-profile-banner-img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:72px!important;object-fit:cover!important;object-position:center!important}.mobile-drawer-profile-avatar>img,.mobile-drawer-profile-avatar-img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}}
@media(max-width:1100px){.mobile-drawer-profile-link.has-banner:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.16) 75%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 70%)!important;pointer-events:none!important}.mobile-drawer-profile-link.has-banner .mobile-drawer-profile-avatar{display:flex!important;position:absolute!important;left:10px!important;bottom:10px!important;z-index:4!important;width:42px!important;height:42px!important;border:2px solid rgba(255,255,255,.78)!important}.mobile-drawer-profile-link.has-banner .mobile-drawer-profile-copy{display:block!important;position:absolute!important;left:62px!important;right:12px!important;bottom:23px!important;z-index:4!important;color:#fff!important;font-size:14px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 2px 8px #000!important}}

/* Final mobile sheet override — must stay below every legacy drawer rule. */
@media(max-width:1100px){
 .mobile-drawer{top:auto!important;left:8px!important;right:8px!important;bottom:78px!important;width:auto!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 96px)!important;margin:0!important;padding:48px 16px 16px!important;display:block!important;overflow-x:hidden!important;overflow-y:auto!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(16,16,21,.99),rgba(8,8,12,.995))!important;transform:translateY(calc(100% + 96px))!important}
 .mobile-drawer.active,body.drawer-open .mobile-drawer{transform:translateY(0)!important}
 .mobile-drawer.is-dragging{transition:none!important}
 .mobile-drawer-drag-zone{height:48px!important}
 .mobile-drawer-nav{display:grid!important;gap:2px!important;margin:0!important;padding:0!important}
  .mobile-drawer-nav .nav-item{min-height:43px!important;padding:10px 7px!important;margin:0!important}
  .mobile-drawer-nav .nav-item.is-active{color:#fff!important;background:linear-gradient(90deg,rgba(255,64,87,.13),rgba(255,64,87,.025))!important}
  .mobile-drawer-nav .nav-item.is-active .icon{color:#ff5369!important;filter:none!important}
  .mobile-nav-notification-badge{min-width:19px;height:19px;margin-left:auto;padding:0 5px;display:inline-grid;place-items:center;border:1px solid rgba(255,105,124,.3);border-radius:999px;color:#fff;background:#e8324d;box-shadow:0 0 12px rgba(232,50,77,.34);font-size:8px;font-weight:900;line-height:1}
  .mobile-nav-notification-badge[hidden]{display:none!important}
  .mobile-drawer-profile-action .mobile-nav-notification-badge{margin-left:auto}
  .mobile-drawer-profile-action .mobile-nav-notification-badge+.mobile-drawer-profile-action-chevron{margin-left:0}
  .mobile-drawer-actions{position:static!important;margin:14px 0 0!important;padding:14px 0 0!important;display:grid!important;gap:8px!important;transform:none!important;border-top:1px solid rgba(255,255,255,.075)!important}
 .mobile-drawer-profile-card{position:static!important;margin:0!important;padding:0!important;display:grid!important;gap:8px!important;border:0!important}
 .mobile-drawer-profile-link.has-banner{position:relative!important;display:block!important;width:100%!important;height:72px!important;min-height:72px!important;max-height:72px!important;margin:0!important;padding:0!important;overflow:hidden!important}
 .mobile-drawer-profile-banner{position:absolute!important;inset:0!important;width:100%!important;height:72px!important}
 .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-avatar{display:flex!important;position:absolute!important;left:10px!important;bottom:10px!important;z-index:5!important}
 .mobile-drawer-profile-link.has-banner .mobile-drawer-profile-copy{display:block!important;position:absolute!important;left:62px!important;right:12px!important;bottom:23px!important;z-index:5!important}
}

/* Larger shared header navigation */
.topbar>.center{gap:clamp(25px,2.5vw,42px)}.topbar>.center>.nav-item,.topbar>.center>.nav-more>.nav-item{position:relative;font-size:17px;font-weight:700;letter-spacing:-.01em}.topbar>.center>.nav-item .icon{width:19px;height:19px}.topbar>.center>.nav-item.is-active:after,.topbar>.center>.nav-item.is-current-page:after{content:"";position:absolute;left:50%;bottom:-11px;width:6px;height:6px;border-radius:50%;background:#ff4057;box-shadow:0 0 12px #ff4057;transform:translateX(-50%)}

/* Shared centered footer navigation */
footer.footer{display:block;width:100%;font-size:initial}footer.footer p{display:block}footer.footer span{margin-left:0}footer.footer .footer-content{width:100%}footer.footer .footer-bottom{width:100%;margin-left:0}
.footer-content{grid-template-columns:minmax(270px,.75fr) minmax(650px,1.65fr);gap:clamp(35px,5vw,75px);max-width:none}.footer-side{justify-self:stretch;max-width:none;grid-template-columns:minmax(500px,1fr) 190px;gap:clamp(35px,4vw,65px);align-items:start}.info-footer-links{display:grid;grid-template-columns:minmax(330px,2fr) minmax(150px,1fr);gap:54px;align-items:start;margin:0}.info-footer-links .footer-col{min-width:0}.info-footer-links h5{letter-spacing:.16em}.footer-genre-columns{display:grid;grid-template-columns:1fr 1fr;gap:15px 35px}.footer-genre-columns>div{display:flex;flex-direction:column;gap:10px}.info-footer-links a{position:relative;padding-left:12px;transition:color .25s ease,transform .25s ease}.info-footer-links a:before{content:"›";position:absolute;left:0;color:#5c535e;transition:color .25s ease,transform .25s ease}.info-footer-links a:hover{color:#fff;transform:translateX(3px)}.info-footer-links a:hover:before{color:#ff6075;transform:translateX(2px)}.footer-shortcuts{display:flex;flex-direction:column;gap:10px}.footer-follow{justify-self:center;align-self:start;min-width:190px}.footer-follow h4{text-align:center;width:100%;white-space:nowrap}.footer-socials{justify-content:center;width:100%}@media(max-width:1080px){.footer-content{grid-template-columns:1fr;justify-items:center}.footer-brand{justify-items:center;text-align:center;max-width:520px}.footer-logo-link{justify-self:center}.footer-badges{justify-content:center}.footer-side{width:min(100%,760px);grid-template-columns:minmax(480px,1fr) 190px;justify-self:center}.info-footer-links{grid-template-columns:minmax(330px,2fr) minmax(140px,1fr);gap:40px}}@media(max-width:760px){.footer-side{grid-template-columns:1fr;gap:38px;width:min(100%,560px)}.info-footer-links{grid-template-columns:minmax(280px,2fr) minmax(120px,1fr);gap:25px}.footer-follow{justify-self:center}.footer-follow h4{text-align:center}.footer-socials{justify-content:center}}@media(max-width:520px){.info-footer-links{grid-template-columns:1fr;justify-items:center;text-align:center}.info-footer-links .footer-col,.info-footer-links h5{text-align:center}.footer-genre-columns{width:min(100%,340px);text-align:left}.footer-shortcuts{align-items:center}}

/* Long descriptions expand inside their own card instead of opening a popover. */
body.anime-detail-page .anime-description-popover {
    display: none !important;
}

body.anime-detail-page .anime-description-card.is-description-open .anime-description-toggle.is-collapsed p {
    display: block;
    overflow: visible;
    opacity: 1;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

body.anime-detail-page .anime-description-card.is-description-expandable .anime-description-toggle {
    border-radius: 8px;
    transition: background-color .22s ease, box-shadow .22s ease;
}

body.anime-detail-page .anime-description-card.is-description-expandable .anime-description-toggle:hover {
    background: rgba(255, 255, 255, .025);
}

body.anime-detail-page .anime-description-card.is-description-open .anime-description-toggle {
    background: transparent;
}

body.anime-detail-page .anime-description-card.is-description-animating {
    overflow: hidden;
    will-change: height;
}

/* Compact vertical anime details card inspired by the reference sidebar. */
body.anime-detail-page .anime-extra-grid > .anime-theme-panel {
    width: min(100%, 350px);
    max-width: 350px;
    justify-self: start;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.anime-detail-page .theme-details-card {
    min-height: 0;
    width: 100%;
    padding: 18px 16px;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(12, 13, 16, .88);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

body.anime-detail-page .theme-details-head {
    display: none;
}

body.anime-detail-page .theme-details-card .theme-info-grid {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

body.anime-detail-page .theme-primary-facts {
    display: grid;
    gap: 14px;
}

body.anime-detail-page .theme-stack-item {
    display: grid;
    gap: 4px;
}

body.anime-detail-page .theme-stack-item span,
body.anime-detail-page .theme-card-section h3 {
    margin: 0;
    color: rgba(255, 255, 255, .43);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.anime-detail-page .theme-stack-item strong {
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    line-height: 1.35;
}

body.anime-detail-page .theme-card-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .065);
}

body.anime-detail-page .theme-card-section h3 {
    margin-bottom: 10px;
}

body.anime-detail-page .theme-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.anime-detail-page .theme-tag-list a {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 999px;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .055);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.anime-detail-page .theme-tag-list a:hover,
body.anime-detail-page .theme-tag-list a:focus-visible {
    color: #fff;
    background: rgba(var(--anime-accent-rgb), .13);
    border-color: rgba(var(--anime-accent-rgb), .28);
}

body.anime-detail-page .theme-alt-list,
body.anime-detail-page .theme-compact-details {
    display: grid;
    gap: 8px;
}

body.anime-detail-page .theme-alt-title {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    line-height: 1.45;
}

body.anime-detail-page .theme-alt-title span {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .38);
    font-weight: 900;
}

body.anime-detail-page .theme-alt-title strong {
    min-width: 0;
    color: rgba(255, 255, 255, .66);
    font-weight: 650;
    overflow-wrap: anywhere;
}

body.anime-detail-page .theme-empty-copy {
    margin: 0;
    color: rgba(255, 255, 255, .42);
    font-size: 11px;
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-extra-grid > .anime-theme-panel {
        width: 100%;
        max-width: none;
    }

    body.anime-detail-page .theme-details-card {
        padding: 17px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.anime-detail-page .anime-description-card.is-description-animating {
        will-change: auto;
    }
}

/* Reference-led banner layout: poster controls on the left, structured facts on the right. */
body.anime-detail-page .anime-detail-hero { min-height: clamp(620px, 49vw, 700px); }
body.anime-detail-page .anime-detail-overlay {
    background: linear-gradient(180deg, rgba(7, 9, 13, .3) 0%, rgba(7, 9, 13, .58) 55%, #080a0e 100%), linear-gradient(90deg, rgba(7, 9, 13, .88) 0%, rgba(7, 9, 13, .38) 46%, rgba(7, 9, 13, .76) 100%);
}

@media (min-width: 901px) {
    body.anime-detail-page .anime-poster-wrap { transform: translateY(-20px); }
    body.anime-detail-page .anime-poster-actions { transform: translateY(-8px); }
    body.anime-detail-page .anime-poster-trailer { transform: translateY(-2px); }
    body.anime-detail-page .anime-detail-heading { transform: translateY(-20px); }
    body.anime-detail-page .anime-meta-info { transform: translateY(-10px); }
    body.anime-detail-page .anime-description-card { margin-top: 15px; padding-top: 25px; }
}

body.anime-detail-page .anime-hero-fact strong {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.anime-detail-page .anime-hero-fact strong img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    opacity: .9;
}

body.anime-detail-page .anime-hero-fact:first-child strong img {
    filter: sepia(1) saturate(4) hue-rotate(275deg) brightness(1.25);
}

body.anime-detail-page .anime-hero-fact:last-child strong img {
    filter: sepia(1) saturate(4) hue-rotate(165deg) brightness(1.25);
}
body.anime-detail-page .anime-detail-content {
    grid-template-columns: minmax(200px, 232px) minmax(0, 1fr);
    gap: clamp(38px, 4vw, 60px);
    width: min(calc(100% - 72px), 1360px);
    padding-top: 112px;
    padding-bottom: 52px;
    align-items: start;
}
body.anime-detail-page .anime-detail-card { width: 100%; align-items: stretch; gap: 10px; }
body.anime-detail-page .anime-poster-wrap { width: 100%; }
body.anime-detail-page .anime-poster { aspect-ratio: 2 / 3; border-radius: 12px; }
body.anime-detail-page .anime-poster-wrap { border-radius: 12px; }
body.anime-detail-page .anime-poster-badge { display: none; }
body.anime-detail-page .anime-poster-actions { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; width: 100%; }
body.anime-detail-page .anime-poster-actions .anime-side-watch {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 8px;
    color: #111318;
    background: #f7f8fa;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
body.anime-detail-page .anime-poster-actions .anime-side-watch img { filter: brightness(0); }
body.anime-detail-page .anime-poster-actions .anime-side-watch:hover { color: #0b0c0f; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .26); }
body.anime-detail-page .anime-poster-actions .anime-inline-bookmark { width: 46px; height: 46px; min-height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .09); }
body.anime-detail-page .anime-poster-trailer {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}
body.anime-detail-page .anime-detail-main { max-width: none; gap: 17px; padding-top: 4px; }
body.anime-detail-page .anime-detail-heading { display: grid; gap: 5px; padding-left: 18px; border-left: 4px solid rgb(var(--anime-accent-rgb)); }
body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(42px, 4vw, 64px); line-height: 1; letter-spacing: -.045em; }
body.anime-detail-page .anime-alternative-title { margin: 0; color: rgba(255, 255, 255, .56); font-size: 17px; font-weight: 700; }
body.anime-detail-page .anime-meta-info { display: block; }
body.anime-detail-page .anime-meta-line { display: none; }
body.anime-detail-page .anime-summary-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
body.anime-detail-page .anime-score-inline,
body.anime-detail-page .anime-summary-badge { min-height: 31px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 850; }
body.anime-detail-page .anime-score-inline { color: #ffd54a; border-color: rgba(255, 194, 0, .28); background: rgba(255, 194, 0, .11); }
body.anime-detail-page .anime-summary-badge-accent { color: #48d9f4; border-color: rgba(42, 205, 235, .3); background: rgba(42, 205, 235, .12); }
body.anime-detail-page .anime-summary-badge-status { color: #47e1a0; border-color: rgba(39, 206, 132, .28); background: rgba(39, 206, 132, .11); }
body.anime-detail-page .anime-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 17px 20px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)); box-shadow: 0 14px 32px rgba(0, 0, 0, .13); }
body.anime-detail-page .anime-hero-fact { display: grid; gap: 5px; }
body.anime-detail-page .anime-hero-fact span,
body.anime-detail-page .anime-description-label { color: rgba(255, 255, 255, .42); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
body.anime-detail-page .anime-hero-fact strong { color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 850; }
body.anime-detail-page .anime-info-pills { display: flex; gap: 8px; }
body.anime-detail-page .anime-info-pill { min-height: 30px; padding: 6px 15px; border-radius: 999px; color: rgba(255, 255, 255, .84); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); }
body.anime-detail-page .anime-description-card { max-width: none; padding: 17px 20px 18px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 12px; background: rgba(4, 6, 9, .68); box-shadow: none; }
body.anime-detail-page .anime-description-label { display: block; margin-bottom: 10px; }
body.anime-detail-page .anime-description-toggle { padding: 0; }
body.anime-detail-page .anime-description-card p { color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.6; }
body.anime-detail-page .anime-description-toggle.is-collapsed,
body.anime-detail-page .anime-description-toggle.is-collapsed p { -webkit-line-clamp: 3; }
body.anime-detail-page .anime-hero-actions { margin-top: -4px; }
body.anime-detail-page .anime-hero-actions .anime-action-row { gap: 7px; }
body.anime-detail-page .anime-hero-actions .anime-detail-chip { min-height: 34px; height: 34px; padding: 6px 11px; font-size: 11px; }
body.anime-detail-page .anime-hero-actions .anime-share-wrap,
body.anime-detail-page .anime-hero-actions .anime-inline-share { width: 34px; min-height: 34px; height: 34px; }

@media (max-width: 900px) {
    body.anime-detail-page .anime-detail-hero { min-height: auto; }
    body.anime-detail-page .anime-detail-content { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); gap: 28px; padding-top: 96px; }
    body.anime-detail-page .anime-detail-card { width: min(100%, 220px); }
    body.anime-detail-page .anime-detail-heading { justify-items: start; text-align: left; }
    body.anime-detail-page .anime-detail-title-row { justify-content: flex-start; text-align: left; }
    body.anime-detail-page .anime-detail-heading h1 { text-align: left; }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-content { width: calc(100% - 24px); padding-top: 86px; padding-bottom: 32px; }
    body.anime-detail-page .anime-detail-card { width: min(100%, 190px); }
    body.anime-detail-page .anime-detail-main { overflow: visible; }
    body.anime-detail-page .anime-detail-heading { padding-left: 13px; }
    body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(29px, 9vw, 38px); }
    body.anime-detail-page .anime-alternative-title { font-size: 14px; }
    body.anime-detail-page .anime-summary-badges,
    body.anime-detail-page .anime-info-pills { justify-content: flex-start; }
    body.anime-detail-page .anime-hero-facts { grid-template-columns: 1fr; gap: 13px; padding: 15px 16px; }
    body.anime-detail-page .anime-description-card { padding: 15px 16px; }
    body.anime-detail-page .anime-hero-actions { display: block; }
    body.anime-detail-page .anime-hero-actions .anime-action-row { display: flex; width: 100%; }
    body.anime-detail-page .anime-hero-actions .anime-detail-chip { width: auto; grid-column: auto; }
    body.anime-detail-page .anime-hero-actions .anime-share-wrap,
    body.anime-detail-page .anime-hero-actions .anime-inline-share { width: 34px; }
}

@keyframes globalChatMessageIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.global-chat-avatar,
.global-chat-current-avatar,
.global-chat-member-avatar {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b8a, #6f9cff);
    color: #ffffff;
    font-weight: 800;
    line-height: 1;
}

.global-chat-avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
}

.global-chat-avatar img,
.global-chat-member-avatar img,
.global-chat-current-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-message-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.global-chat-message-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.global-chat-author {
    color: #f8f9fb;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.2;
}

.global-chat-role {
    min-height: 19px;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(235, 239, 247, 0.68);
    line-height: 1;
}

.global-chat-role.is-admin {
    background: rgba(255, 89, 117, 0.16);
    color: #ff9bad;
}

.global-chat-role.is-premium {
    background: rgba(111, 162, 255, 0.16);
    color: #adcaff;
}

.global-chat-message-text {
    margin: 0;
    color: rgba(242, 245, 250, 0.86);
    font-size: 14px;
    line-height: 1.52;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.global-chat-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 260px));
    gap: 8px;
    margin-top: 5px;
}

.global-chat-attachment {
    width: 100%;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    cursor: zoom-in;
}

.global-chat-attachment img {
    width: 100%;
    max-height: 260px;
    display: block;
    object-fit: cover;
}

.global-chat-lightbox-open {
    overflow: hidden;
}

.global-chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 72px 28px 34px;
    background: rgba(0, 0, 0, 0.86);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.global-chat-lightbox[hidden] {
    display: none;
}

.global-chat-lightbox.is-open,
.global-chat-lightbox.is-closing {
    pointer-events: auto;
}

.global-chat-lightbox.is-open {
    opacity: 1;
}

.global-chat-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: zoom-out;
}

.global-chat-lightbox-top {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.global-chat-lightbox-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

.global-chat-lightbox-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b8a, #6f9cff);
    color: #ffffff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

.global-chat-lightbox-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-lightbox-info {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding-top: 1px;
}

.global-chat-lightbox-info strong {
    max-width: min(520px, calc(100vw - 116px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.1;
}

.global-chat-lightbox-info span {
    color: rgba(236, 240, 247, 0.7);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

.global-chat-lightbox-close {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: #24262e;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.global-chat-lightbox-close::before,
.global-chat-lightbox-close::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #a9adb7;
    transition: background 0.2s ease;
}

.global-chat-lightbox-close::before {
    transform: rotate(45deg);
}

.global-chat-lightbox-close::after {
    transform: rotate(-45deg);
}

.global-chat-lightbox-close:hover,
.global-chat-lightbox-close:focus-visible {
    border-color: rgba(255, 255, 255, 0.14);
    background: #2b2e36;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

.global-chat-lightbox-close:hover::before,
.global-chat-lightbox-close:hover::after,
.global-chat-lightbox-close:focus-visible::before,
.global-chat-lightbox-close:focus-visible::after {
    background: #ffffff;
}

.global-chat-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1180px);
    max-height: calc(100vh - 128px);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.global-chat-lightbox.is-open .global-chat-lightbox-top,
.global-chat-lightbox.is-open .global-chat-lightbox-stage {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.global-chat-lightbox-stage img {
    max-width: 100%;
    max-height: calc(100vh - 128px);
    display: block;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.52);
}

.global-chat-addon {
    width: min(100%, 280px);
    min-height: 116px;
    display: grid;
    align-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 16px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    isolation: isolate;
}

.global-chat-addon::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    opacity: 0.7;
    animation: globalChatAddonGlow 5.5s linear infinite;
}

.global-chat-addon strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.05;
}

.global-chat-addon span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 750;
}

.global-chat-addon-gif::before {
    background: conic-gradient(from 120deg, #ff5f7f, #6fa2ff, #76e6a5, #ffce6f, #ff5f7f);
}

@keyframes globalChatAddonGlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.global-chat-empty {
    margin: auto;
    width: min(100%, 420px);
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 18px;
    color: rgba(235, 239, 247, 0.58);
    text-align: center;
}

.global-chat-empty strong {
    color: #ffffff;
    font-size: 18px;
}

.global-chat-composer {
    position: relative;
    min-width: 0;
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 10, 14, 0.72);
}

.global-chat-tool-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.global-chat-tool,
.global-chat-send {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.global-chat-tool {
    border: 0;
    background: transparent;
    color: rgba(238, 242, 249, 0.64);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.global-chat-tool:hover,
.global-chat-tool.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

.global-chat-tool img {
    width: 17px;
    height: 17px;
    display: block;
    object-fit: contain;
    opacity: 0.58;
    filter: grayscale(1) saturate(0.45) brightness(1.16);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.global-chat-tool:hover img,
.global-chat-tool.is-active img {
    opacity: 0.86;
    filter: grayscale(1) saturate(0.55) brightness(1.38);
}

.global-chat-plus img {
    width: 21px;
    height: 21px;
}

.global-chat-gif img {
    width: 24px;
    height: 24px;
}

.global-chat-popover,
.global-chat-picker {
    position: absolute;
    z-index: 70;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(16, 18, 24, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
}

.global-chat-popover[hidden],
.global-chat-picker[hidden],
.global-chat-draft-preview[hidden] {
    display: none;
}

.global-chat-popover {
    left: 0;
    bottom: calc(100% + 10px);
    width: 220px;
    padding: 7px;
    display: grid;
    gap: 5px;
}

.global-chat-popover-action {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(238, 242, 249, 0.78);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.global-chat-popover-action:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.global-chat-popover-action img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(1.8) grayscale(1);
}

.global-chat-composer-field {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.058);
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-chat-composer-row {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 4px;
}

.global-chat-input-wrap {
    min-width: 0;
    display: block;
}

.global-chat-draft-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 0;
}

.global-chat-draft-chip {
    max-width: min(100%, 260px);
    min-height: 38px;
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px;
    padding: 4px 5px 4px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(242, 245, 250, 0.84);
    font-size: 12px;
    font-weight: 700;
}

.global-chat-draft-chip img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.global-chat-draft-chip-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.09);
    color: #ff9bad;
    font-size: 12px;
    font-weight: 850;
}

.global-chat-draft-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-chat-draft-remove {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(242, 245, 250, 0.64);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.global-chat-draft-remove:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.global-chat-composer-field:focus-within {
    border-color: rgba(255, 94, 120, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 94, 120, 0.12);
}

.global-chat-composer textarea {
    width: 100%;
    min-height: 40px;
    max-height: 128px;
    border: 0;
    outline: 0;
    resize: none;
    padding: 11px 6px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    line-height: 1.42;
    overflow-y: auto;
}

.global-chat-action-stack {
    display: flex;
    align-items: center;
    gap: 2px;
}

.global-chat-send {
    border: 0;
    background: rgba(255, 77, 109, 0.12);
}

.global-chat-send:hover {
    background: rgba(255, 77, 109, 0.22);
}

.global-chat-send:active {
    background: rgba(255, 77, 109, 0.26);
}

.global-chat-send img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.62;
    filter: grayscale(1) saturate(0.45) brightness(1.18);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.global-chat-send:hover img,
.global-chat-send:focus-visible img {
    opacity: 0.9;
    filter: grayscale(1) saturate(0.55) brightness(1.42);
}

.global-chat-picker {
    right: 18px;
    bottom: calc(100% + 10px);
    width: min(380px, calc(100vw - 36px));
    max-height: 310px;
    overflow-y: auto;
    padding: 12px;
}

.global-chat-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.global-chat-picker-head strong {
    color: #ffffff;
    font-size: 14px;
}

.global-chat-picker-head button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(242, 245, 250, 0.76);
    font-size: 19px;
    cursor: pointer;
}

.global-chat-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.global-chat-picker-item {
    min-width: 0;
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.global-chat-picker-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.17);
}

.global-chat-picker-item strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.global-chat-picker-item span {
    color: rgba(235, 239, 247, 0.58);
    font-size: 11px;
    font-weight: 700;
}

.global-chat-members {
    min-width: 0;
    padding: 18px 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.global-chat-side-nav {
    display: grid;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.global-chat-side-brand {
    min-width: 0;
    min-height: 46px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    color: #ffffff;
    text-decoration: none;
}

.global-chat-side-brand img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

.global-chat-side-brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 820;
    line-height: 1;
}

.global-chat-nav-list {
    display: grid;
    gap: 5px;
}

.global-chat-nav-link {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 9px;
    border-radius: 8px;
    color: rgba(238, 242, 249, 0.72);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.global-chat-nav-link:hover,
.global-chat-nav-link:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.global-chat-nav-link img {
    width: 17px;
    height: 17px;
    display: block;
    object-fit: contain;
    filter: brightness(1.8) grayscale(1);
    opacity: 0.86;
}

.global-chat-members-head {
    min-height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: -6px;
    color: rgba(235, 239, 247, 0.5);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}

.global-chat-members-head strong {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 12px;
}

.global-chat-member-list {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 6px;
    padding-right: 2px;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 108, 128, 0.56) rgba(255, 255, 255, 0.03);
}

.global-chat-member {
    min-width: 0;
    min-height: 44px;
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(238, 242, 249, 0.74);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.global-chat-member:hover,
.global-chat-member:focus-visible {
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    outline: none;
}

.global-chat-member-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.global-chat-member-avatar::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #14161d;
    background: #63e68f;
}

.global-chat-member-name {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.global-chat-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.global-chat-profile-modal[hidden] {
    display: none;
}

.global-chat-profile-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.global-chat-profile-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.44);
    cursor: default;
}

.global-chat-profile-card {
    position: relative;
    z-index: 1;
    width: min(378px, calc(100vw - 32px));
    max-height: min(92vh, 720px);
    overflow: hidden auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: #151619;
    color: #f4f5fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.18s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 118, 138, 0.55) rgba(255, 255, 255, 0.04);
}

.global-chat-profile-modal.is-open .global-chat-profile-card {
    transform: translateY(0) scale(1);
}

.global-chat-profile-banner {
    height: 130px;
    background: #000000;
}

.global-chat-profile-banner.has-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-profile-body {
    position: relative;
    padding: 0 20px 20px;
}

.global-chat-profile-head {
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.global-chat-profile-avatar {
    width: 86px;
    height: 86px;
    margin-top: -43px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 6px solid #151619;
    border-radius: 50%;
    background: linear-gradient(135deg, #232738, #6c7cff);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.global-chat-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-profile-status {
    width: 24px;
    height: 24px;
    margin: 18px 0 0 -28px;
    flex: 0 0 auto;
    border: 6px solid #151619;
    border-radius: 50%;
    background: #f04556;
}

.global-chat-profile-note {
    display: none !important;
}

.global-chat-profile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-chat-profile-title-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.05;
}

.global-chat-profile-open {
    width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: rgba(238, 241, 248, 0.8);
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
}

.global-chat-profile-open:hover,
.global-chat-profile-open:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.global-chat-profile-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
    color: #f0f1f7;
    font-size: 15px;
    font-weight: 700;
}

.global-chat-profile-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
}

.global-chat-profile-badge {
    color: #42dec2;
    font-size: 18px;
    line-height: 1;
}

.global-chat-profile-badge.is-green {
    color: #22d4ae;
}

.global-chat-profile-badge.is-blue {
    color: #9ca8ff;
}

.global-chat-profile-badge.is-leaf {
    color: #62d77c;
}

.global-chat-profile-bio {
    margin: 20px 0 8px;
    color: rgba(244, 246, 252, 0.9);
    font-size: 15px;
    font-weight: 620;
    line-height: 1.35;
}

.global-chat-profile-bio-link {
    display: inline-flex;
    color: #e9ebf2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 780;
}

.global-chat-profile-bio-link:hover,
.global-chat-profile-bio-link:focus-visible {
    text-decoration: underline;
}

.global-chat-profile-collection,
.global-chat-profile-activity {
    margin-top: 16px;
    border-radius: 8px;
    background: #242529;
}

.global-chat-profile-collection {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    color: #f4f5fb;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.global-chat-profile-collection:hover,
.global-chat-profile-collection:focus-visible {
    background: #2b2c31;
    transform: translateY(-1px);
    outline: none;
}

.global-chat-profile-collection > span:first-child {
    min-width: 0;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f4f5fb;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.global-chat-profile-game {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    background: #30313a;
}

.global-chat-profile-game img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-profile-game.is-orange {
    background: #ff6842;
}

.global-chat-profile-game.is-avatar {
    background: linear-gradient(135deg, #eaeef8, #938b7b);
    color: #1d1e23;
}

.global-chat-profile-game.is-cyan {
    background: #45bde7;
}

.global-chat-profile-game.is-more {
    background: #30313a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

.global-chat-profile-activity {
    display: block;
    padding: 14px;
    color: #f4f5fb;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.global-chat-profile-activity:hover,
.global-chat-profile-activity:focus-visible {
    background: #2b2c31;
    transform: translateY(-1px);
    outline: none;
}

.global-chat-profile-activity-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #f5f6fb;
    font-size: 13px;
    font-weight: 820;
}

.global-chat-profile-activity-top span:last-child {
    color: rgba(245, 246, 251, 0.45);
    letter-spacing: 2px;
}

.global-chat-profile-activity-main {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.global-chat-profile-activity-icon {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #f2f2f2;
    color: #2b2c31;
    font-size: 45px;
    font-weight: 900;
    line-height: 1;
}

.global-chat-profile-activity-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.global-chat-profile-activity-main strong {
    display: block;
    color: #e5e6ec;
    font-size: 16px;
    font-weight: 850;
}

.global-chat-profile-activity-main em {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(229, 230, 236, 0.68);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.global-chat-profile-activity-main small {
    display: block;
    margin-top: 6px;
    color: #46d184;
    font-size: 13px;
    font-weight: 760;
}

.global-chat-profile-role {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: rgba(237, 240, 247, 0.62);
    font-size: 14px;
    font-weight: 680;
    cursor: pointer;
}

.global-chat-profile-role span {
    font-size: 25px;
    line-height: 1;
}

.global-chat-profile-action {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #5865f2;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 820;
}

.global-chat-profile-action:hover,
.global-chat-profile-action:focus-visible {
    background: #6672ff;
}

.global-chat-profile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.42);
    color: rgba(255, 255, 255, 0.78);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.global-chat-profile-close:hover,
.global-chat-profile-close:focus-visible {
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
}

@media (max-width: 1120px) {
    .global-chat-layout {
        grid-template-columns: 232px minmax(0, 1fr) 260px;
    }
}

@media (max-width: 820px) {
    .global-chat-shell {
        width: 100%;
        padding: 0;
    }

    .global-chat-layout {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .global-chat-rail {
        display: grid;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .global-chat-dm-box {
        padding-bottom: 10px;
    }

    .global-chat-mode-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-chat-mode-btn {
        min-height: 40px;
    }

    .global-chat-dm-head,
    .global-chat-dm-search {
        display: none;
    }

    .global-chat-channel-list,
    .global-chat-dm-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .global-chat-channel-list::-webkit-scrollbar,
    .global-chat-dm-list::-webkit-scrollbar {
        display: none;
    }

    .global-chat-channel-btn,
    .global-chat-dm-item {
        width: auto;
        min-width: 152px;
        flex: 0 0 auto;
    }

    .global-chat-channel-btn:hover {
        transform: translateY(-1px);
    }

    .global-chat-main {
        min-height: 0;
    }

    .global-chat-members {
        max-height: 184px;
        padding: 12px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        gap: 10px;
    }

    .global-chat-side-nav {
        padding-bottom: 10px;
        gap: 8px;
    }

    .global-chat-side-brand {
        display: none;
    }

    .global-chat-nav-list {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .global-chat-nav-list::-webkit-scrollbar {
        display: none;
    }

    .global-chat-nav-link {
        min-width: auto;
        flex: 0 0 auto;
        grid-template-columns: 17px auto;
        padding: 0 11px;
    }

    .global-chat-members-head,
    .global-chat-member-list {
        display: none;
    }

    .global-chat-head {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .global-chat-head-actions {
        justify-content: space-between;
    }

    .global-chat-search {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 540px) {
    .global-chat-shell {
        width: 100%;
        padding-top: 0;
    }

    .global-chat-layout {
        border-radius: 10px;
    }

    .global-chat-head,
    .global-chat-messages,
    .global-chat-composer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .global-chat-main {
        min-height: 0;
    }

    .global-chat-head-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .global-chat-message {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .global-chat-avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .global-chat-composer {
        padding-bottom: 12px;
    }

    .global-chat-composer-row {
        min-height: 48px;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 2px;
        padding-left: 3px;
        padding-right: 4px;
    }

    .global-chat-action-stack {
        gap: 0;
    }

    .global-chat-tool,
    .global-chat-send {
        width: 38px;
        height: 38px;
    }

    .global-chat-action-stack .global-chat-tool {
        font-size: 10px;
    }

    .global-chat-action-stack .global-chat-send {
        width: 36px;
    }

    .global-chat-action-stack .global-chat-tool img {
        width: 14px;
        height: 14px;
    }

    .global-chat-picker {
        right: 8px;
        width: min(360px, calc(100vw - 22px));
    }

    .global-chat-picker-grid {
        grid-template-columns: 1fr;
    }

    .global-chat-lightbox {
        padding: 70px 12px 22px;
    }

    .global-chat-lightbox-top {
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .global-chat-lightbox-close {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .global-chat-lightbox-avatar {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    .global-chat-lightbox-info strong {
        max-width: calc(100vw - 116px);
        font-size: 16px;
    }

    .global-chat-lightbox-stage,
    .global-chat-lightbox-stage img {
        max-height: calc(100vh - 104px);
    }
}

/* ===== Anime detail page ===== */
body.anime-detail-page {
    padding-top: 0;
    --anime-accent-rgb: 114, 20, 255;
    --anime-accent-strong-rgb: 78, 16, 186;
    --anime-accent-soft-rgb: 28, 92, 188;
    --anime-accent-text: #f2eaff;
    overflow-anchor: none;
}

body.anime-detail-page button,
body.anime-detail-page a.btn,
body.anime-detail-page .anime-detail-chip,
body.anime-detail-page [role="button"] {
    transition-property: background, background-color, border-color, color, box-shadow, opacity, filter;
}

body.anime-detail-page button:hover,
body.anime-detail-page button:focus-visible,
body.anime-detail-page button:active,
body.anime-detail-page a.btn:hover,
body.anime-detail-page a.btn:focus-visible,
body.anime-detail-page a.btn:active,
body.anime-detail-page .anime-detail-chip:hover,
body.anime-detail-page .anime-detail-chip:focus-visible,
body.anime-detail-page .anime-detail-chip:active,
body.anime-detail-page [role="button"]:hover,
body.anime-detail-page [role="button"]:focus-visible,
body.anime-detail-page [role="button"]:active {
    transform: none !important;
}

body.anime-detail-page button:not(:disabled):hover,
body.anime-detail-page button:not(:disabled):focus-visible,
body.anime-detail-page a.btn:hover,
body.anime-detail-page a.btn:focus-visible,
body.anime-detail-page .anime-detail-chip:hover,
body.anime-detail-page .anime-detail-chip:focus-visible,
body.anime-detail-page [role="button"]:hover,
body.anime-detail-page [role="button"]:focus-visible {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.2);
}

body.anime-detail-page .search-box .close-search,
body.anime-detail-page .search-box .close-search:hover,
body.anime-detail-page .search-box .close-search:active,
body.anime-detail-page .search-box .close-search:focus-visible {
    transform: translateY(-50%) !important;
    filter: none;
    box-shadow: none;
}

body.anime-detail-page .topbar {
    top: 6px;
    height: 78px;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.anime-detail-page .topbar:not(.scrolled) .logo img {
    height: 135px;
    margin-top: -63px !important;
    transform: translateY(18px);
}

body.anime-detail-page .topbar.scrolled {
    top: 0;
    background: rgba(10, 10, 14, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Anime herounu yığcam və oxunaqlı saxla; headerə təsir etmir. */
body.anime-detail-page .anime-detail-hero {
    min-height: clamp(470px, 50vw, 600px);
}

body.anime-detail-page .anime-detail-content {
    grid-template-columns: minmax(230px, 276px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 42px);
    width: min(calc(100% - 64px), 1320px);
    padding-top: clamp(104px, 8vw, 122px);
    padding-bottom: clamp(22px, 2vw, 32px);
}

body.anime-detail-page .anime-poster-wrap,
body.anime-detail-page .anime-poster {
    border-radius: 18px;
}

body.anime-detail-page .anime-poster {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(var(--anime-accent-rgb), 0.16);
}

body.anime-detail-page .anime-detail-main {
    gap: 14px;
}

body.anime-detail-page .anime-meta-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

body.anime-detail-page .anime-meta-line {
    margin: 0;
}

body.anime-detail-page .anime-info-pills {
    gap: 7px;
}

body.anime-detail-page .anime-info-pill {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

body.anime-detail-page .anime-description-card {
    max-width: 740px;
}

body.anime-detail-page .anime-description-toggle.is-collapsed,
body.anime-detail-page .anime-description-toggle.is-collapsed p {
    -webkit-line-clamp: 3;
}

body.anime-detail-page .anime-action-row {
    gap: 8px;
}

body.anime-detail-page .anime-detail-chip,
body.anime-detail-page .anime-inline-bookmark {
    min-height: 38px;
    border-radius: 8px;
}

body.anime-detail-page .anime-detail-chip {
    padding: 8px 14px;
    font-size: 13px;
}

body.anime-detail-page .anime-detail-chip-secondary {
    min-width: 0;
}

body.anime-detail-page .anime-detail-chip:hover {
    transform: none;
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-hero {
        min-height: 480px;
    }

    body.anime-detail-page .anime-detail-content {
        width: calc(100% - 24px);
        padding-top: 96px;
    }

    body.anime-detail-page .anime-meta-info {
        justify-content: center;
    }
}

/* Sol poster sütunu: əsas izləmə hərəkəti posterin altında qalır. */
body.anime-detail-page .anime-detail-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

body.anime-detail-page .anime-side-watch {
    width: min(100%, 276px);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    background: linear-gradient(135deg, #d62828, #b71c1c);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(214, 40, 40, 0.34);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.anime-detail-page .anime-side-watch img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

body.anime-detail-page .anime-side-watch:hover,
body.anime-detail-page .anime-side-watch:focus-visible {
    background: linear-gradient(135deg, #ef3a3a, #c51f1f);
    box-shadow: 0 15px 34px rgba(214, 40, 40, 0.46);
    filter: brightness(1.06);
}

body.anime-detail-page .anime-side-watch[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

body.anime-detail-page .anime-detail-card .anime-action-row {
    width: min(100%, 276px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.anime-detail-page .anime-detail-card .anime-detail-chip {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(12, 15, 22, 0.64);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

body.anime-detail-page .anime-detail-card .anime-detail-chip-primary {
    grid-column: 1 / -1;
}

body.anime-detail-page .anime-detail-card .anime-detail-chip:hover,
body.anime-detail-page .anime-detail-card .anime-bookmark-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    filter: none;
}

body.anime-detail-page .anime-detail-card .anime-bookmark-btn,
body.anime-detail-page .anime-detail-card .anime-share-wrap {
    width: 100%;
    min-height: 38px;
}

body.anime-detail-page .anime-detail-card .anime-bookmark-btn {
    height: 38px;
    border-radius: 8px;
}

body.anime-detail-page .anime-detail-card .anime-share-wrap {
    display: block;
}

body.anime-detail-page .anime-detail-card .anime-share-wrap .anime-inline-share {
    width: 100%;
}

/* Tengoku tərzi: poster solda sadə qalır, actionlar banner məzmunundadır. */
body.anime-detail-page .anime-detail-card .anime-side-facts {
    display: none;
}

body.anime-detail-page .anime-detail-main .anime-side-watch {
    width: min(100%, 184px);
    min-height: 44px;
    margin-top: 2px;
}

body.anime-detail-page .anime-detail-main .anime-action-row {
    display: flex;
    width: auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body.anime-detail-page .anime-detail-main .anime-detail-chip {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 8px;
}

body.anime-detail-page .anime-detail-main .anime-inline-bookmark {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 8px;
}

body.anime-detail-page .anime-detail-main .anime-share-wrap,
body.anime-detail-page .anime-detail-main .anime-share-wrap .anime-inline-share {
    width: 36px;
    min-height: 36px;
}

body.anime-detail-page .anime-detail-main .anime-share-wrap .anime-inline-share {
    height: 36px;
}

body.anime-detail-page .anime-side-facts {
    width: min(100%, 276px);
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(8, 10, 14, 0.5);
    box-sizing: border-box;
}

body.anime-detail-page .anime-side-fact {
    display: grid;
    gap: 3px;
}

body.anime-detail-page .anime-side-fact span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.anime-detail-page .anime-side-fact strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* Senku tərzində sadə franchise/xronologiya siyahısı. */
body.anime-detail-page .anime-seasons-panel {
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.anime-detail-page .anime-seasons-head {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 14px;
}

body.anime-detail-page .anime-seasons-head h2 {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
}

body.anime-detail-page .anime-seasons-head p {
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
}

body.anime-detail-page .anime-seasons-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

body.anime-detail-page .anime-season-card {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

body.anime-detail-page .anime-season-card:hover,
body.anime-detail-page .anime-season-card:focus-visible {
    transform: none;
    border-color: rgba(var(--anime-accent-rgb), 0.52);
    background: rgba(var(--anime-accent-rgb), 0.1);
    box-shadow: none;
}

body.anime-detail-page .anime-season-card.is-active {
    border-color: rgba(var(--anime-accent-rgb), 0.52);
    background: rgba(var(--anime-accent-rgb), 0.13);
    box-shadow: none;
}

body.anime-detail-page .anime-season-card-poster {
    width: 44px;
    height: 58px;
    border-radius: 7px;
}

body.anime-detail-page .anime-season-card-copy {
    gap: 3px;
}

body.anime-detail-page .anime-season-card-copy strong {
    font-size: 14px;
    line-height: 1.25;
}

body.anime-detail-page .anime-season-card-copy span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
}

body.anime-detail-page .anime-season-card-relation {
    color: rgba(var(--anime-accent-rgb), 0.96);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.anime-detail-page .anime-season-card-arrow {
    color: rgba(255, 255, 255, 0.45);
    font-size: 26px;
    line-height: 1;
}

/* Personajlar: Senku üslubunda üfüqi, sürüşdürülə bilən xətt. */
body.anime-detail-page .anime-characters-panel {
    width: min(calc(100% - 64px), 1320px);
    margin: 24px auto 0;
}

body.anime-detail-page .anime-characters-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

body.anime-detail-page .anime-characters-head h2 {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.anime-detail-page .anime-characters-head span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
}

body.anime-detail-page .anime-characters-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

body.anime-detail-page .anime-character-card {
    width: 86px;
    flex: 0 0 86px;
    display: grid;
    gap: 5px;
    color: inherit;
    text-align: center;
}

body.anime-detail-page .anime-character-image {
    width: 86px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

body.anime-detail-page .anime-character-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.anime-detail-page .anime-character-fallback {
    color: rgba(255, 255, 255, 0.64);
    font-size: 30px;
    font-weight: 900;
}

body.anime-detail-page .anime-character-card strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.anime-detail-page .anime-character-card small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hero-dan sonrakı izləmə ardıcıllığı. */
body.anime-detail-page .anime-extra-grid {
    gap: 28px;
}

body.anime-detail-page .anime-extra-grid > .anime-seasons-panel {
    order: 1;
}

body.anime-detail-page .anime-extra-grid > .anime-comments-panel {
    order: 2;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.anime-detail-page .anime-extra-grid > .anime-theme-panel {
    order: 3;
}

body.anime-detail-page .anime-comments-panel .anime-episodes-head {
    justify-items: start;
    gap: 14px;
}

body.anime-detail-page .anime-comments-panel .anime-content-tabs {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}

body.anime-detail-page .anime-comments-panel .anime-content-tab {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 12px;
}

body.anime-detail-page .anime-comments-panel .anime-content-tab.is-active {
    box-shadow: none;
}

body.anime-detail-page .anime-comments-panel .anime-tab-panel-body {
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(9, 11, 16, 0.68);
}

body.anime-detail-page .anime-comments-panel .episode-stack {
    margin-top: 4px;
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-characters-panel {
        width: calc(100% - 24px);
    }

    body.anime-detail-page .anime-characters-head span {
        display: none;
    }
}

body.anime-detail-page .nav-more-panel::before {
    background: rgba(10, 12, 18, 0.34);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.anime-detail-page .topbar.scrolled .logo img {
    height: 135px;
    margin-top: -63px !important;
    transform: translateY(23px);
}

body.anime-detail-page .search-panel {
    top: 72px;
}

/* ===== Animes discover page ===== */
body.animes-page {
    padding-top: 0;
    background: #050505;
    color: #f4f4f5;
}

body.animes-page .topbar:not(.scrolled) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0));
}

/* Archive header follows the index header exactly. */
body.animes-page .topbar{top:6px;height:92px;align-items:center;padding-top:0;padding-bottom:0;transform:translateY(-12px);transition:top .52s cubic-bezier(.22,1,.36,1),height .52s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1),background-color .4s ease,backdrop-filter .4s ease}
body.animes-page .topbar:not(.scrolled) .left{margin-top:0}
body.animes-page .topbar:not(.scrolled) .center,body.animes-page .topbar:not(.scrolled) .right{padding-top:0}
body.animes-page .topbar:not(.scrolled) .logo img{height:135px!important;margin-top:-63px!important;transform:translateY(18px)}
body.animes-page .topbar.scrolled{top:0;align-items:center;padding-top:0;transform:translateY(0)}
body.animes-page .topbar.scrolled .logo img{height:135px!important;margin-top:-63px!important;transform:translateY(23px)}
@media(max-width:768px){body.animes-page .topbar,body.animes-page .topbar.scrolled{top:0;height:78px;padding-left:14px;padding-right:14px;transform:none}body.animes-page .topbar:not(.scrolled) .logo img{height:128px!important;margin-top:-58px!important;transform:translateY(16px)}body.animes-page .topbar.scrolled .logo img{height:128px!important;margin-top:-58px!important;transform:translateY(20px)}}

.discover-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #050505 300px),
        #050505;
    padding-bottom: 48px;
}

.discover-hero {
    --discover-banner: url("../pictures/Background.jpg");
    position: relative;
    min-height: 310px;
    padding: 142px clamp(18px, 4vw, 46px) 0;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.66) 68%, #050505 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.66) 100%),
        var(--discover-banner);
    background-size: cover;
    background-position: center 34%;
    overflow: hidden;
}

.discover-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0), #050505 78%);
    pointer-events: none;
}

.discover-hero-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 58, 70, 0.22), rgba(255, 58, 70, 0) 28%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.7));
    pointer-events: none;
}

.discover-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(86px, 1fr));
    gap: clamp(16px, 4vw, 74px);
    align-items: end;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.discover-stat {
    display: grid;
    gap: 4px;
    text-align: center;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    line-height: 1.2;
}

.discover-stat strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.discover-list-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: min(720px, 100%);
    margin: 28px auto 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.discover-list-tabs::-webkit-scrollbar,
.discover-genre-tabs::-webkit-scrollbar {
    display: none;
}

.discover-list-tab,
.discover-genre-tab {
    appearance: none;
    border: 0;
    white-space: nowrap;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.48);
    background: transparent;
    font-weight: 700;
}

.discover-list-tab {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
}

.discover-list-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.discover-controls {
    display: grid;
    gap: 16px;
    padding: 8px clamp(18px, 4vw, 46px) 0;
    background: #050505;
}

.discover-search {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(260px, 100%);
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
}

.discover-search img {
    width: 15px;
    height: 15px;
    opacity: 0.62;
    filter: brightness(0) invert(1);
}

.discover-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
}

.discover-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.discover-filter-row {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.15fr 1.15fr 1.15fr 38px;
    gap: 12px;
    align-items: center;
}

.discover-select {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #080808;
    color: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.discover-select-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 100%;
    color: #9bb0ff;
    font-size: 15px;
    opacity: 0.82;
}

.discover-select select {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 32px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.discover-select select option {
    background: #101010;
    color: #f4f4f5;
}

.discover-clear {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 93, 103, 0.16);
    color: #ff7078;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.discover-genre-tabs {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 26px clamp(18px, 4vw, 46px) 18px;
    overflow-x: auto;
    scrollbar-width: none;
    background: #050505;
}

.discover-genre-tab {
    min-height: 32px;
    padding: 0 2px;
    border-radius: 8px;
    font-size: 12px;
}

.discover-genre-tab.is-active {
    padding-inline: 17px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
}

.discover-grid-section {
    padding: 0 clamp(18px, 4vw, 46px);
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 30px 18px;
    align-items: start;
}

.discover-grid[hidden] {
    display: none;
}

body.animes-page .discover-grid[hidden] {
    display: none !important;
}

body.animes-page .discover-grid .anime-box {
    width: 100%;
    min-width: 0;
    transform: none;
    transition: filter 0.22s ease, transform 0.22s ease;
}

body.animes-page .discover-grid .anime-box:hover {
    transform: translateY(-4px);
    filter: brightness(1.08);
}

body.animes-page .discover-grid .anime-box::after {
    display: none;
}

body.animes-page .discover-grid .anime-box a {
    display: block;
    text-decoration: none;
}

body.animes-page .discover-grid .anime-box .img {
    height: auto;
    aspect-ratio: 0.72;
    border-radius: 7px;
    background: #121212;
    box-shadow: none;
}

body.animes-page .discover-grid .anime-box .img > img {
    border-radius: inherit;
}

body.animes-page .discover-grid .anime-box:hover .img > img {
    transform: scale(1.035);
}

body.animes-page .discover-grid .anime-box .ep {
    bottom: 7px;
    left: 7px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    transform: none;
    box-shadow: none;
}

body.animes-page .discover-grid .anime-box .name {
    display: block;
    height: auto;
    min-height: 18px;
    margin-top: 10px;
    padding: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
}

body.animes-page .discover-grid .anime-box:hover .name {
    color: #fff;
    text-shadow: none;
}

.discover-card-meta {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.discover-empty {
    margin: 46px 0 0;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
    font-size: 14px;
}

.discover-public-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.discover-public-lists[hidden] {
    display: none;
}

.discover-public-list-item {
    display: grid;
    gap: 7px;
}

.discover-public-list-card {
    min-height: 148px;
    position: relative;
    display: grid;
    align-content: end;
    overflow: hidden;
    border-radius: 8px;
    background: #101117;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    isolation: isolate;
    transition: transform 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}

.discover-public-list-card:hover {
    transform: translateY(-4px);
    filter: brightness(1.06);
    border-color: rgba(255, 255, 255, 0.16);
}

.discover-public-list-cover {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.discover-public-list-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.24s ease;
}

.discover-public-list-card:hover .discover-public-list-cover img {
    transform: scale(1.04);
}

.discover-public-list-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.12), rgba(5, 6, 10, 0.9));
}

.discover-public-list-copy {
    display: grid;
    gap: 5px;
    padding: 18px;
}

.discover-public-list-copy strong {
    font-size: 18px;
    line-height: 1.14;
    font-weight: 800;
}

.discover-public-list-copy span,
.discover-public-list-copy small,
.discover-public-list-loading {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.discover-public-list-like-note {
    padding-left: 2px;
    color: rgba(255, 255, 255, 0.36);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.discover-public-list-copy small {
    color: rgba(255, 255, 255, 0.58);
    font-weight: 600;
}

.discover-public-list-loading {
    padding: 22px 0;
    text-align: center;
}

@media (max-width: 920px) {
    .discover-stats {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px;
    }

    .discover-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
    }

    .discover-grid {
        grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    }
}

@media (max-width: 560px) {
    body.animes-page {
        padding-top: 0;
    }

    .discover-hero {
        min-height: 360px;
        padding-top: 118px;
    }

    .discover-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 28px;
    }

    .discover-controls {
        padding-top: 14px;
    }

    .discover-search {
        justify-self: stretch;
        width: 100%;
    }

    .discover-filter-row {
        grid-template-columns: 1fr;
    }

    .discover-clear {
        width: 100%;
    }

    .discover-genre-tabs {
        gap: 14px;
        padding-top: 20px;
    }

    .discover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }
}

.anime-detail-shell {
    width: 100%;
    margin: 0 auto;
    padding-bottom: clamp(28px, 4vw, 56px);
    position: relative;
    z-index: 2;
    padding-top: 0;
}

.anime-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(520px, 66vw, 760px);
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(10, 11, 15, 0.08), rgba(10, 11, 15, 0.82));
}

.anime-detail-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: 24px;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0), #080a0e 72%);
    pointer-events: none;
}

.anime-detail-backdrop {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0.92;
    transform: scale(1.015);
    filter: saturate(1.05);
    background-attachment: scroll;
    will-change: auto;
    z-index: 0;
}

.anime-detail-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 84% 18%, rgba(var(--anime-accent-rgb), 0.24), transparent 24%),
        linear-gradient(180deg, rgba(8, 10, 14, 0.04) 0%, rgba(8, 10, 14, 0.14) 16%, rgba(8, 10, 14, 0.48) 40%, #080a0e 100%),
        linear-gradient(90deg, rgba(8, 10, 14, 0.46) 0%, rgba(8, 10, 14, 0.2) 38%, rgba(8, 10, 14, 0.62) 100%);
    will-change: auto;
    z-index: 1;
}

.anime-detail-content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(230px, 292px) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 36px);
    width: min(calc(100% - 40px), 1220px);
    margin: 0 auto;
    padding: clamp(96px, 11vw, 132px) 0 clamp(28px, 4vw, 40px);
    align-items: start;
    overflow-anchor: none;
}

.anime-detail-card {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 6;
}

.anime-poster-wrap {
    position: relative;
    width: min(100%, 290px);
    overflow: hidden;
    border-radius: 24px;
}

.anime-poster {
    width: 100%;
    aspect-ratio: 3 / 4.3;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    background: linear-gradient(180deg, #d7d7d7, #b8b8b8);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.anime-poster-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(8, 10, 14, 0.14) 0%, rgba(8, 10, 14, 0.68) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.22s ease, background 0.22s ease;
}

.anime-poster-play-icon {
    width: clamp(58px, 6vw, 84px);
    height: clamp(58px, 6vw, 84px);
    object-fit: contain;
    transform: scale(0.88);
    transition: transform 0.22s ease, filter 0.22s ease;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.38));
}

.anime-poster-wrap:hover .anime-poster-play,
.anime-poster-wrap:focus-within .anime-poster-play {
    opacity: 1;
    pointer-events: auto;
}

.anime-poster-wrap:hover .anime-poster-play-icon,
.anime-poster-wrap:focus-within .anime-poster-play-icon {
    transform: scale(1);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.46));
}

.anime-poster-play.is-disabled {
    cursor: default;
}

.anime-poster-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: none;
}

.anime-detail-main {
    min-width: 0;
    position: relative;
    z-index: 8;
    display: grid;
    gap: 18px;
    align-content: start;
    padding-top: 0;
}

.anime-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.anime-detail-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.anime-detail-kicker,
.section-kicker,
.theme-label {
    color: rgba(var(--anime-accent-rgb), 0.88);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.anime-detail-heading h1 {
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.02;
    margin-top: 0;
}

.anime-score-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffe7a0;
    font-size: 13px;
    font-weight: 800;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    line-height: 1;
    transform: translateY(1px);
}

.anime-score-star {
    width: 12px;
    height: 12px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 6px rgba(255, 209, 92, 0.3));
}

.anime-score-value {
    display: inline-block;
}

.anime-bookmark-btn {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #f6f2f2;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.anime-bookmark-btn:hover,
.anime-bookmark-btn.is-active {
    background: rgba(var(--anime-accent-rgb), 0.16);
    border-color: rgba(var(--anime-accent-rgb), 0.42);
    box-shadow: 0 12px 28px rgba(var(--anime-accent-rgb), 0.18);
}

.anime-bookmark-btn:hover {
    transform: translateY(-2px);
}

.anime-bookmark-btn.is-active {
    transform: none;
}

.anime-bookmark-icon {
    font-size: 24px;
    line-height: 1;
}

.anime-meta-line {
    color: rgba(235, 239, 244, 0.68);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.anime-detail-section,
.anime-comments-panel,
.anime-theme-panel {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(14, 16, 20, 0.88);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.anime-description-card {
    position: relative;
    z-index: 30;
    max-width: 740px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
        rgba(14, 14, 18, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow-anchor: none;
    overflow: visible;
}

.anime-description-card p {
    color: rgba(246, 242, 237, 0.82);
    font-size: 15.5px;
    line-height: 1.56;
}

.anime-description-toggle {
    position: relative;
    width: 100%;
    padding: 13px 16px;
    background: transparent;
    border: none;
    text-align: left;
    color: inherit;
    cursor: default;
    border-radius: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.anime-description-toggle p {
    margin: 0;
    transition: color 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease;
}

.anime-description-toggle.is-collapsed p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.anime-description-card.is-description-expandable .anime-description-toggle {
    cursor: pointer;
}

.anime-description-card.is-description-expandable .anime-description-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(18, 18, 22, 0), rgba(18, 18, 22, 0.12));
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.anime-description-card.is-description-expandable .anime-description-toggle:hover p,
.anime-description-card.is-description-expandable .anime-description-toggle:focus-visible p {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.06);
}

.anime-description-card.is-description-expandable .anime-description-toggle:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(var(--anime-accent-rgb), 0.34);
}

.anime-description-card.is-description-open .anime-description-toggle.is-collapsed p {
    opacity: 0.7;
}

.anime-description-card.is-description-open .anime-description-toggle::after {
    opacity: 0;
}

.anime-description-popover {
    position: absolute;
    top: calc(100% + 12px);
    left: clamp(0px, 6vw, 80px);
    z-index: 50;
    width: min(780px, calc(100vw - 56px));
    max-height: min(48vh, 370px);
    padding: 22px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
    color: rgba(247, 247, 250, 0.92);
    background: rgba(3, 3, 4, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: 18% 0;
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.22s;
}

.anime-description-popover p {
    margin: 0;
    color: rgba(248, 248, 250, 0.9);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.55;
}

.anime-description-card.is-description-open .anime-description-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.18s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

.anime-description-popover::-webkit-scrollbar {
    width: 8px;
}

.anime-description-popover::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.anime-description-popover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.anime-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.anime-detail-chip {
    min-height: 32px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    text-transform: none;
}

.anime-detail-chip:hover {
    transform: translateY(-2px);
}

.anime-detail-chip-primary {
    color: #fff;
    background: linear-gradient(135deg, rgb(var(--anime-accent-strong-rgb)), rgb(var(--anime-accent-rgb)));
    box-shadow: 0 10px 18px rgba(var(--anime-accent-rgb), 0.2);
}

.anime-detail-chip-primary.is-active {
    background: linear-gradient(135deg, rgba(var(--anime-accent-rgb), 0.82), rgba(var(--anime-accent-strong-rgb), 0.96));
    box-shadow: 0 10px 18px rgba(var(--anime-accent-rgb), 0.22);
    transform: none;
}

.anime-detail-chip-secondary {
    min-width: 116px;
    color: #dce7ff;
    background: linear-gradient(135deg, rgba(var(--anime-accent-soft-rgb), 0.96), rgba(var(--anime-accent-rgb), 0.72));
    border-color: rgba(var(--anime-accent-rgb), 0.18);
}

.anime-detail-chip-status {
    color: #f6f2ff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.anime-detail-chip-status.is-active {
    color: #ffffff;
    background: rgba(var(--anime-accent-rgb), 0.2);
    border-color: rgba(var(--anime-accent-rgb), 0.36);
    box-shadow: 0 10px 18px rgba(var(--anime-accent-rgb), 0.16);
}

.anime-list-picker-modal[hidden] {
    display: none;
}

.anime-list-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: grid;
    place-items: center;
    padding: 18px;
}

.anime-list-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
}

.anime-list-picker-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 32px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(13, 15, 20, 0.96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
    color: #fff;
}

.anime-list-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
}

.anime-list-picker-kicker {
    display: block;
    color: rgba(var(--anime-accent-rgb), 0.9);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.anime-list-picker-head h3 {
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.22;
    letter-spacing: 0;
}

.anime-list-picker-close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.anime-list-picker-status {
    margin: 0 18px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(97, 214, 166, 0.12);
    color: #c5ffdf;
    font-size: 12px;
    font-weight: 760;
}

.anime-list-picker-status.is-error {
    background: rgba(255, 111, 111, 0.14);
    color: #ffd0d0;
}

.anime-list-picker-items {
    display: grid;
    gap: 8px;
    min-height: 0;
    padding: 0 18px 18px;
    overflow-y: auto;
}

.anime-list-picker-item {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.anime-list-picker-item:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--anime-accent-rgb), 0.32);
    background: rgba(255, 255, 255, 0.07);
}

.anime-list-picker-item.is-active {
    border-color: rgba(var(--anime-accent-rgb), 0.44);
    background: rgba(var(--anime-accent-rgb), 0.15);
}

.anime-list-picker-check {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.055);
}

.anime-list-picker-item.is-active .anime-list-picker-check {
    border-color: rgba(var(--anime-accent-rgb), 0.92);
    background:
        linear-gradient(135deg, rgb(var(--anime-accent-strong-rgb)), rgb(var(--anime-accent-rgb)));
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.12);
}

.anime-list-picker-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.anime-list-picker-copy strong {
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anime-list-picker-copy span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 12px;
    font-weight: 650;
}

.anime-list-picker-pill {
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    font-weight: 850;
}

.anime-list-picker-item.is-active .anime-list-picker-pill {
    background: rgba(var(--anime-accent-rgb), 0.2);
    color: #ffffff;
}

.anime-list-picker-empty {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.anime-list-picker-foot {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.anime-list-picker-profile-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.anime-inline-bookmark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.anime-share-wrap {
    position: relative;
    display: inline-flex;
}

.anime-inline-share:hover,
.anime-inline-share.is-active,
.anime-inline-share:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.12);
    border-color: rgba(var(--anime-accent-rgb), 0.24);
    box-shadow: 0 8px 18px rgba(var(--anime-accent-rgb), 0.12);
}

.anime-inline-share.is-copied {
    background: rgba(93, 201, 126, 0.14);
    border-color: rgba(93, 201, 126, 0.26);
    color: #dfffe8;
}

.anime-share-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    transform: none;
}

.anime-share-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 170px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(14, 16, 22, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    z-index: 1400;
    width: min(220px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    transform-origin: top right;
    animation: animeSharePanelReveal 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.anime-share-panel[hidden] {
    display: none !important;
}

.anime-share-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, 0.16);
    z-index: 1390;
}

.anime-share-backdrop[hidden] {
    display: none !important;
}

@keyframes animeSharePanelReveal {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.anime-share-option {
    min-height: 34px;
    padding: 7px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(239, 244, 251, 0.88);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.anime-share-option:hover,
.anime-share-option:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.12);
    color: #ffffff;
    transform: translateX(2px);
}

.anime-status-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: block;
    padding: 0;
    pointer-events: none;
}

.anime-status-modal[hidden] {
    display: none !important;
}

.anime-status-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: auto;
}

.anime-status-dialog {
    position: fixed;
    top: var(--anime-status-popover-top, 260px);
    left: var(--anime-status-popover-left, 50%);
    width: min(820px, calc(100vw - 28px));
    padding: 22px 20px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--anime-accent-rgb), 0.24);
    background:
        radial-gradient(circle at 50% -18%, rgba(var(--anime-accent-rgb), 0.18), transparent 44%),
        linear-gradient(180deg, rgba(14, 15, 20, 0.96), rgba(8, 9, 13, 0.96));
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.48), 0 0 36px rgba(var(--anime-accent-rgb), 0.1);
    color: #f5f5f7;
    pointer-events: auto;
    animation: animeStatusPopoverIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes animeStatusPopoverIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.anime-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
    position: relative;
}

.anime-status-head > div {
    width: 100%;
    padding: 0 46px;
    text-align: center;
}

.anime-status-kicker {
    color: rgba(var(--anime-accent-rgb), 0.92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-shadow: 0 0 18px rgba(var(--anime-accent-rgb), 0.2);
    text-transform: uppercase;
}

.anime-status-head h3 {
    margin: 6px 0 0;
    color: #ffffff;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: 0;
}

.anime-status-close {
    position: absolute;
    top: -2px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.anime-status-close:hover,
.anime-status-close:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.16);
    border-color: rgba(var(--anime-accent-rgb), 0.34);
}

.anime-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 14px;
}

.anime-status-field {
    display: grid;
    gap: 7px;
    color: rgba(245, 245, 247, 0.76);
    font-size: 14px;
    font-weight: 800;
}

.anime-status-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 8, 12, 0.86);
    color: #ffffff;
    color-scheme: dark;
    font: 800 14px "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.anime-status-input:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(10, 11, 16, 0.96);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.anime-status-input:focus {
    border-color: rgba(var(--anime-accent-rgb), 0.72);
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.16);
}

.anime-status-input[type="date"] {
    padding-right: 12px;
}

.anime-status-date {
    position: relative;
}

.anime-status-date-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.anime-status-date-btn span {
    color: rgba(255, 255, 255, 0.48);
}

.anime-status-date-btn.has-value span {
    color: #ffffff;
}

.anime-status-date-btn img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    opacity: 0.82;
    filter: invert(1);
    transition: opacity 0.18s ease;
}

.anime-status-date-btn:hover img,
.anime-status-date-btn[aria-expanded="true"] img {
    opacity: 1;
}

.anime-status-date-menu {
    position: absolute;
    z-index: 1520;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(366px, calc(100vw - 36px));
    padding: 18px 18px 0;
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 3, 5, 0.99);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
    animation: animeStatusDateIn 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.anime-status-date-menu[hidden] {
    display: none !important;
}

@keyframes animeStatusDateIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.anime-status-date-head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.anime-status-date-title {
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.anime-status-date-nav {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.84);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.anime-status-date-nav:hover,
.anime-status-date-nav:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.anime-status-date-weekdays,
.anime-status-date-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px 8px;
}

.anime-status-date-weekdays {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.anime-status-date-days {
    padding-bottom: 18px;
}

.anime-status-date-day {
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.anime-status-date-day:hover,
.anime-status-date-day:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.16);
    color: #ffffff;
}

.anime-status-date-day.is-selected {
    background: rgba(var(--anime-accent-rgb), 0.24);
    color: #ffffff;
}

.anime-status-date-day.is-today {
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(var(--anime-accent-rgb), 0.72);
}

.anime-status-date-empty {
    height: 34px;
}

.anime-status-date-clear {
    width: calc(100% + 36px);
    min-height: 56px;
    margin: 0 -18px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0 0 12px 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.36);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.anime-status-date-clear:hover,
.anime-status-date-clear:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.anime-status-select {
    position: relative;
}

.anime-status-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
}

.anime-status-select-btn::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.62);
    border-bottom: 2px solid rgba(255, 255, 255, 0.62);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.anime-status-select-btn[aria-expanded="true"]::after {
    transform: rotate(225deg) translate(-2px, -1px);
    border-color: rgba(var(--anime-accent-rgb), 0.95);
}

.anime-status-select-menu {
    position: absolute;
    z-index: 1510;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 9, 13, 0.98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
    animation: animeStatusSelectIn 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.anime-status-select-menu[hidden] {
    display: none !important;
}

@keyframes animeStatusSelectIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.anime-status-select-option {
    min-height: 38px;
    padding: 0 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font: 800 13px "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.anime-status-select-option:hover,
.anime-status-select-option:focus-visible,
.anime-status-select-option.is-active {
    background: rgba(var(--anime-accent-rgb), 0.22);
    color: #ffffff;
}

.anime-status-input::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 16px;
    padding: 5px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 0.78;
    filter: invert(1);
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

.anime-status-input::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(var(--anime-accent-rgb), 0.32);
    opacity: 1;
}

.anime-status-input option {
    background: #0a0b0f;
    color: #ffffff;
}

.anime-status-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.anime-status-delete,
.anime-status-save {
    min-height: 50px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font: 800 15px "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.anime-status-delete {
    width: 50px;
    background: rgba(255, 42, 57, 0.15);
    border: 1px solid rgba(255, 91, 104, 0.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anime-status-delete:hover,
.anime-status-delete:focus-visible {
    background: rgba(255, 42, 57, 0.22);
    border-color: rgba(255, 91, 104, 0.48);
}

.anime-status-delete img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.anime-status-save {
    min-width: 116px;
    padding: 0 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(var(--anime-accent-strong-rgb), 0.98), rgba(var(--anime-accent-rgb), 0.92));
    box-shadow: 0 12px 26px rgba(var(--anime-accent-rgb), 0.18);
}

.anime-status-save:hover,
.anime-status-save:focus-visible {
    background: linear-gradient(135deg, rgba(var(--anime-accent-rgb), 1), rgba(var(--anime-accent-soft-rgb), 0.92));
    box-shadow: 0 16px 30px rgba(var(--anime-accent-rgb), 0.24);
}

.anime-fragment-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: auto;
    opacity: 1;
}

.anime-fragment-backdrop {
    display: none;
}

.anime-fragment-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--fragment-popover-width, 700px), calc(100vw - 28px));
    max-height: min(78vh, 680px);
    overflow: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18, 20, 28, 0.72), rgba(10, 12, 18, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
    transform: translate(-50%, -50%);
    animation: animeFragmentReveal 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
}

.anime-fragment-modal.is-closing {
    pointer-events: none;
    animation: animeFragmentModalFadeOut 0.28s ease forwards;
}

.anime-fragment-modal.is-closing .anime-fragment-dialog {
    animation: animeFragmentDismiss 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes animeFragmentModalFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes animeFragmentDismiss {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 26px)) scale(0.94);
    }
}

.anime-fragment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.anime-fragment-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.anime-fragment-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--anime-accent-rgb), 0.12);
    color: rgba(var(--anime-accent-rgb), 0.88);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.anime-fragment-head h3 {
    margin: 8px 0 0;
    color: #ffffff;
    font-size: clamp(20px, 1.5vw, 26px);
}

.anime-fragment-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
}

.anime-fragment-add-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--anime-accent-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--anime-accent-rgb), 0.12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.anime-fragment-add-toggle[hidden],
.anime-fragment-admin[hidden],
.anime-fragment-player-wrap[hidden],
.anime-fragment-player[hidden],
.anime-fragment-empty[hidden] {
    display: none !important;
}

.anime-fragment-add-toggle:hover,
.anime-fragment-add-toggle:focus-visible,
.anime-fragment-add-toggle.is-active {
    background: rgba(var(--anime-accent-rgb), 0.22);
    border-color: rgba(var(--anime-accent-rgb), 0.38);
    transform: translateY(-1px);
}

.anime-fragment-body {
    display: grid;
    gap: 14px;
}

.anime-fragment-player-wrap,
.anime-fragment-sidebar {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-fragment-player-wrap {
    display: grid;
    overflow: hidden;
    min-height: 260px;
}

.anime-fragment-player {
    width: 100%;
    min-height: 260px;
    border: none;
    display: block;
}

.anime-fragment-empty {
    width: 100%;
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 72px 20px;
    text-align: center;
    grid-column: 1 / -1;
}

.anime-fragment-empty p {
    margin: 0;
    width: min(100%, 420px);
    padding: 0;
    color: rgba(244, 247, 252, 0.9);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: none;
    text-align: center;
}

.anime-fragment-sidebar {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 0;
    background: transparent;
    border: none;
}

.anime-fragment-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.anime-fragment-item,
.anime-fragment-list-empty {
    border-radius: 16px;
    padding: 0;
    background: rgba(18, 20, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.anime-fragment-item {
    text-align: left;
    display: grid;
    gap: 8px;
    color: #eef3fb;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.anime-fragment-item:hover,
.anime-fragment-item.is-active {
    background: rgba(20, 23, 31, 0.92);
    border-color: rgba(var(--anime-accent-rgb), 0.24);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.anime-fragment-item-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

.anime-fragment-item-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.04), rgba(8, 10, 14, 0.2));
    pointer-events: none;
}

.anime-fragment-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.anime-fragment-item-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    display: block;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.anime-fragment-item-play-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: scale(0.8);
    transition: transform 0.22s ease, filter 0.22s ease;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.anime-fragment-item:hover .anime-fragment-item-play-icon,
.anime-fragment-item.is-active .anime-fragment-item-play-icon {
    transform: scale(1);
}

.anime-fragment-item:hover .anime-fragment-item-play,
.anime-fragment-item.is-active .anime-fragment-item-play {
    opacity: 0.96;
}

.anime-fragment-item-badge {
    padding: 0 16px;
    color: rgba(var(--anime-accent-rgb), 0.86);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.anime-fragment-item-text,
.anime-fragment-list-empty {
    padding: 0 16px 16px;
    color: rgba(239, 243, 250, 0.82);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.anime-fragment-admin {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(12, 14, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-fragment-admin-top,
.anime-fragment-admin-actions,
.anime-fragment-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.anime-fragment-admin-title {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.anime-fragment-admin-form,
.anime-fragment-admin-list {
    display: grid;
    gap: 10px;
}

.anime-fragment-admin-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #eef3fb;
    outline: none;
}

.anime-fragment-admin-input:focus {
    border-color: rgba(var(--anime-accent-rgb), 0.34);
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.1);
}

.anime-fragment-admin-btn,
.anime-fragment-admin-soft-btn,
.anime-fragment-admin-cancel,
.anime-fragment-admin-mini {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.anime-fragment-admin-btn {
    border: none;
    background: linear-gradient(135deg, rgb(var(--anime-accent-strong-rgb)), rgb(var(--anime-accent-rgb)));
}

.anime-fragment-admin-list:empty {
    display: none;
}

.anime-fragment-admin-item {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-fragment-admin-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.anime-fragment-admin-name,
.anime-fragment-admin-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anime-fragment-admin-name {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.anime-fragment-admin-link {
    color: rgba(233, 237, 244, 0.64);
    font-size: 12px;
}

.anime-fragment-admin-mini.is-danger {
    color: #ffd7df;
    background: rgba(255, 89, 131, 0.12);
    border-color: rgba(255, 89, 131, 0.18);
}

@media (max-width: 900px) {
    .anime-fragment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .anime-fragment-dialog {
        top: 50%;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 16px);
        max-height: min(78vh, 760px);
        padding: 12px;
        border-radius: 18px;
    }

    .anime-fragment-modal.is-closing .anime-fragment-dialog {
        animation: animeFragmentDismissMobile 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .anime-fragment-head {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: -12px -12px 0;
        padding: 12px;
        background: linear-gradient(180deg, rgba(16, 18, 24, 0.98), rgba(16, 18, 24, 0.86));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .anime-fragment-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .anime-fragment-player-wrap,
    .anime-fragment-player,
    .anime-fragment-empty {
        min-height: 190px;
    }

    .anime-fragment-admin {
        padding: 12px;
    }

    .anime-fragment-admin-top,
    .anime-fragment-admin-actions,
    .anime-fragment-admin-row {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .anime-fragment-admin-btn,
    .anime-fragment-admin-soft-btn,
    .anime-fragment-admin-cancel,
    .anime-fragment-admin-mini {
        width: 100%;
        justify-content: center;
    }
}

@keyframes animeFragmentReveal {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 10px)) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes animeFragmentDismissMobile {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 18px)) scale(0.98);
    }
}

.anime-info-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.anime-info-pill {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(var(--anime-accent-rgb), 0.18);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(var(--anime-accent-rgb), 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.anime-info-pill:hover,
.anime-info-pill:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.14);
    border-color: rgba(var(--anime-accent-rgb), 0.34);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(var(--anime-accent-rgb), 0.14);
}

.anime-detail-section {
    padding: clamp(18px, 2.8vw, 28px);
    margin-top: clamp(18px, 3vw, 26px);
    width: min(calc(100% - 40px), 1180px);
    margin-left: auto;
    margin-right: auto;
}

.anime-detail-section.anime-extra-grid {
    margin-top: clamp(18px, 3vw, 26px);
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-heading-row h2 {
    color: #fff;
    font-size: clamp(22px, 2.3vw, 30px);
    margin-top: 5px;
}

.section-counter {
    color: rgba(229, 234, 241, 0.7);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.episode-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.episode-search-wrap {
    width: min(100%, 320px);
}

.episode-search-input {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #eef3fb;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.episode-search-input:focus {
    border-color: rgba(255, 88, 88, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 88, 88, 0.12);
}

.episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.episode-card,
.episode-empty {
    border-radius: 18px;
    padding: 16px;
    min-height: 124px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
        rgba(10, 12, 16, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.episode-card {
    display: grid;
    gap: 12px;
}

.episode-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.episode-card h3 {
    color: #ffffff;
    font-size: 16px;
}

.episode-subcount {
    color: #b6c8ea;
    font-size: 12px;
    font-weight: 700;
}

.episode-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.episode-link {
    padding: 9px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #eff5ff;
    font-size: 13px;
    font-weight: 700;
    background: rgba(53, 107, 221, 0.22);
    border: 1px solid rgba(115, 169, 255, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.episode-link:hover {
    transform: translateY(-2px);
    background: rgba(53, 107, 221, 0.32);
}

.episode-empty {
    display: grid;
    place-items: center;
    color: rgba(229, 235, 244, 0.7);
    text-align: center;
}

.anime-extra-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 24px);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: min(calc(100% - 40px), 1180px);
    margin-left: auto;
    margin-right: auto;
}

.anime-theme-panel,
.anime-comments-panel {
    padding: clamp(18px, 2.8vw, 28px);
}

.comment-placeholder p {
    color: rgba(233, 237, 244, 0.78);
    font-size: 15px;
    line-height: 1.75;
}

.theme-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 11, 15, 0.92);
}

.theme-banner-backdrop {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
    transform: scale(1.04);
    filter: blur(4px);
}

.theme-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.72) 42%, rgba(8, 10, 14, 0.88) 100%),
        linear-gradient(180deg, rgba(8, 10, 14, 0.12), rgba(8, 10, 14, 0.8));
}

.theme-banner-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 20px 20px;
}

.theme-content-col {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding-top: 2px;
}

.theme-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.theme-info-item {
    display: grid;
    gap: 5px;
}

.theme-info-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(var(--anime-accent-rgb), 0.9);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.theme-info-label img {
    width: 11px;
    height: 11px;
    object-fit: contain;
    opacity: 0.9;
}

.theme-info-label img.is-name-icon {
    width: 13px;
    height: 13px;
    opacity: 1;
    transform: translateY(-0.5px);
}

.theme-info-item strong {
    color: #f6f8fc;
    font-size: 14px;
    font-weight: 800;
}

.comment-placeholder {
    min-height: 210px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(5, 7, 10, 0.92), rgba(7, 8, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
    text-align: center;
}

.anime-comments-panel {
    display: grid;
    gap: 14px;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

.anime-episodes-head {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.anime-episodes-head h2 {
    display: none;
}

.anime-content-tabs {
    width: min(100%, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(11, 13, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.anime-content-tabs::-webkit-scrollbar {
    display: none;
}

.anime-content-tab {
    flex: 1 0 0;
    min-width: 160px;
    min-height: 48px;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    background: transparent;
    color: rgba(233, 238, 246, 0.72);
    font-size: 14px;
    font-weight: 900;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.24s ease, background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.anime-content-tab:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.anime-content-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--anime-accent-rgb), 0.92), rgba(var(--anime-accent-soft-rgb), 0.88));
    box-shadow: 0 14px 28px rgba(var(--anime-accent-rgb), 0.24);
}

.anime-episodes-head h2 {
    color: rgba(var(--anime-accent-rgb), 0.9);
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1;
}

.anime-episodes-line {
    width: 60px;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--anime-accent-rgb), 0.5);
}

.anime-episodes-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.anime-episodes-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.episode-search-box {
    flex: 1 1 240px;
    max-width: 340px;
}

.episode-filter-input {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 18, 0.92);
    color: #edf3ff;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.episode-filter-input:focus {
    border-color: rgba(var(--anime-accent-rgb), 0.88);
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.14);
}

.episode-filter-input::placeholder {
    color: rgba(237, 243, 255, 0.4);
}

.anime-tab-panel {
    display: none;
}

.anime-tab-panel.is-active {
    display: block;
    animation: animePanelReveal 0.28s ease;
}

.anime-tab-panel-body {
    display: grid;
    align-content: start;
    gap: 16px;
}

@keyframes animePanelReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anime-season-title {
    color: #fff;
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: 800;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    position: relative;
    padding-left: 16px;
}

.anime-season-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 24px;
    border-radius: 999px;
    background: rgba(var(--anime-accent-rgb), 0.88);
    transform: translateY(-50%);
}

.anime-season-select-wrap {
    width: min(100%, 320px);
}

.anime-season-select {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(var(--anime-accent-soft-rgb), 0.8);
    background: rgba(12, 14, 18, 0.92);
    color: #edf3ff;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    box-shadow: 0 0 0 0 rgba(var(--anime-accent-rgb), 0);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.anime-season-select:focus {
    border-color: rgba(var(--anime-accent-rgb), 0.88);
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.14);
}

.episode-stack {
    display: grid;
    gap: 12px;
}

.episode-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.episode-pagination[hidden] {
    display: none;
}

.episode-pagination-summary {
    color: rgba(233, 237, 244, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.episode-pagination-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.episode-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 18, 0.82);
    color: rgba(237, 243, 255, 0.82);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.episode-page-edge {
    min-width: 38px;
    width: 38px;
    padding: 0;
}

.episode-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
}

.episode-page-arrow img {
    width: 13px;
    height: 13px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    pointer-events: none;
}

.episode-page-btn:hover:not(:disabled),
.episode-page-btn:focus-visible {
    color: #ffffff;
    border-color: rgba(var(--anime-accent-rgb), 0.34);
    background: rgba(var(--anime-accent-rgb), 0.12);
    box-shadow: 0 10px 20px rgba(var(--anime-accent-rgb), 0.1);
    transform: translateY(-1px);
    outline: none;
}

.episode-page-btn.is-active {
    color: #ffffff;
    border-color: rgba(var(--anime-accent-rgb), 0.5);
    background: linear-gradient(135deg, rgba(var(--anime-accent-rgb), 0.88), rgba(var(--anime-accent-soft-rgb), 0.78));
    box-shadow: 0 12px 24px rgba(var(--anime-accent-rgb), 0.18);
}

.episode-page-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.episode-page-ellipsis {
    min-width: 28px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(237, 243, 255, 0.48);
    font-size: 13px;
    font-weight: 900;
}

.anime-comments-body {
    grid-template-rows: auto auto auto;
}

.anime-comments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-comments-count {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(235, 240, 246, 0.78);
    font-size: 12px;
    font-weight: 800;
}

.anime-comments-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-content: start;
}

.anime-comment-card,
.anime-comments-empty {
    padding: 18px 0;
}

.anime-comment-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-comment-card::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 20px;
    bottom: 20px;
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(var(--anime-accent-rgb), 0), rgba(var(--anime-accent-rgb), 0.68) 18%, rgba(var(--anime-accent-rgb), 0.88) 50%, rgba(var(--anime-accent-rgb), 0.42) 82%, rgba(var(--anime-accent-rgb), 0));
    box-shadow:
        0 0 0 rgba(var(--anime-accent-rgb), 0),
        0 0 0 rgba(var(--anime-accent-rgb), 0);
    opacity: 0;
    transition: opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.46s cubic-bezier(0.22, 1, 0.36, 1), filter 0.46s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.anime-comment-score-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.anime-comment-score-box.is-high {
    background: linear-gradient(180deg, #67cf45, #45aa29);
}

.anime-comment-score-box.is-mid {
    background: linear-gradient(180deg, #e0bf49, #be9626);
}

.anime-comment-score-box.is-low {
    background: linear-gradient(180deg, #db6157, #b73930);
}

.anime-comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-comment-form-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.24), transparent 36%),
        linear-gradient(135deg, rgba(var(--anime-accent-rgb), 0.95), rgba(var(--anime-accent-soft-rgb), 0.9));
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.2);
}

.anime-comment-form-avatar.has-image,
.anime-comment-avatar.has-image {
    padding: 0;
    overflow: hidden;
    background: #17181e;
    color: transparent;
}

.anime-comment-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.anime-comment-form-shell {
    overflow: hidden;
    border-radius: 16px;
    background: rgba(24, 24, 26, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.anime-comment-input {
    width: 100%;
    min-height: 72px;
    resize: none;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #edf3ff;
    padding: 15px 16px 12px;
    font-size: 14px;
    font-family: "Noto Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
    line-height: 1.55;
    outline: none;
    transition: background 0.22s ease;
}

.anime-comment-input:focus {
    background: rgba(255, 255, 255, 0.01);
}

.anime-comment-input::placeholder {
    color: rgba(236, 240, 245, 0.42);
}

.anime-comment-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 0 10px 0 12px;
    background: rgba(255, 255, 255, 0.045);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.anime-comment-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.anime-comment-rating-label,
.anime-comment-rating-value {
    color: rgba(237, 241, 246, 0.72);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.anime-comment-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex-wrap: wrap;
}

.anime-comment-star {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.18);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.anime-comment-star:hover,
.anime-comment-star.is-active {
    color: #ffd45a;
}

.anime-comment-star:hover {
    transform: scale(1.08);
}

.anime-comment-form-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.anime-comment-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(237, 241, 246, 0.82);
    font-size: 12px;
    font-weight: 700;
}

.anime-comment-check input {
    accent-color: rgb(var(--anime-accent-rgb));
}

.anime-comment-submit {
    min-height: 34px;
    border: none;
    border-radius: 10px;
    min-width: 110px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 900;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.anime-comment-cancel {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    min-width: 92px;
    padding: 8px 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 800;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.anime-comment-cancel:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
}

.anime-comment-submit:hover {
    transform: translateY(-1px);
    background: rgba(var(--anime-accent-rgb), 0.22);
    color: #ffffff;
}

.anime-comment-submit:disabled {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
    cursor: not-allowed;
    transform: none;
    opacity: 0.72;
}

.anime-comment-submit:disabled:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
}

.anime-comment-top {
    display: block;
}

.anime-comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--anime-accent-rgb), 0.96), rgba(var(--anime-accent-soft-rgb), 0.92));
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.anime-comment-main {
    min-width: 0;
    display: grid;
    gap: 9px;
    justify-items: start;
}

.anime-comment-meta {
    min-width: 0;
    display: block;
}

.anime-comment-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.anime-comment-author {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.38s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), filter 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, text-shadow, filter;
}

.anime-comment-author-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.anime-comment-author-link .anime-comment-mention {
    color: inherit;
}

.anime-comment-author.role-admin .anime-comment-mention {
    color: #ffb26a;
}

.anime-comment-author.role-superadmin .anime-comment-mention {
    color: #ff8f8f;
}

.anime-comment-author.role-moderator .anime-comment-mention {
    color: #87d3ff;
}

.anime-comment-author.role-fansub .anime-comment-mention {
    color: #8de0a8;
}

.anime-comment-author.role-team .anime-comment-mention {
    color: #c0a0ff;
}

.anime-comment-author.role-vip .anime-comment-mention {
    color: #ffd36f;
}

.anime-comment-author.role-premium .anime-comment-mention {
    color: #ffd86b;
}

.anime-comment-author .anime-comment-mention.anime-comment-premium-name {
    position: relative;
    top: -1px;
    display: inline-block;
    line-height: 1;
    color: var(--premium-name-color, #f4f6fb);
    transform-origin: left center;
}

.anime-comment-author .anime-comment-premium-name[data-name-style="bold"] { font-weight: 950; }
.anime-comment-author .anime-comment-premium-name[data-name-style="italic"] { font-style: italic; font-weight: 800; }
.anime-comment-author .anime-comment-premium-name[data-name-style="spaced"] { font-weight: 850; letter-spacing: 0.1em; }
.anime-comment-author .anime-comment-premium-name[data-name-effect="glow"] { animation: animeCommentPremiumNameGlow 2s ease-in-out infinite; }
.anime-comment-author .anime-comment-premium-name[data-name-effect="shimmer"] {
    color: transparent;
    background: linear-gradient(105deg, var(--premium-name-color) 15%, var(--premium-name-alt) 38%, #fff 50%, var(--premium-name-alt) 62%, var(--premium-name-color) 85%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 220% 100%;
    animation: animeCommentPremiumNameShimmer 2.7s linear infinite;
}
.anime-comment-author .anime-comment-premium-name[data-name-effect="pulse"] { animation: animeCommentPremiumNamePulse 1.8s ease-in-out infinite; }
@keyframes animeCommentPremiumNameGlow { 0%,100%{text-shadow:0 0 7px color-mix(in srgb,var(--premium-name-color) 44%,transparent),0 0 17px color-mix(in srgb,var(--premium-name-color) 20%,transparent)}50%{text-shadow:0 0 12px color-mix(in srgb,var(--premium-name-color) 80%,transparent),0 0 26px color-mix(in srgb,var(--premium-name-color) 40%,transparent)} }
@keyframes animeCommentPremiumNameShimmer { 0%{background-position:120% 50%}100%{background-position:-120% 50%} }
@keyframes animeCommentPremiumNamePulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.96)} }
@media (prefers-reduced-motion: reduce) { .anime-comment-author .anime-comment-premium-name { animation:none!important; } }

.anime-comment-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #eef2ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.anime-comment-role::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.anime-comment-role.role-admin {
    background: linear-gradient(180deg, rgba(122, 89, 56, 0.46), rgba(122, 89, 56, 0.22));
    border-color: rgba(255, 171, 87, 0.34);
    color: #ffe9cf;
}

.anime-comment-role.role-admin::before {
    background-image: url("/RoleTools/Admin.png");
}

.anime-comment-role.role-superadmin {
    background: linear-gradient(180deg, rgba(255, 111, 150, 0.24), rgba(255, 111, 150, 0.1));
    border-color: rgba(255, 142, 177, 0.34);
    color: #fff1f7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 14px rgba(255, 111, 150, 0.14);
}

.anime-comment-role.role-superadmin::before {
    background-image: url("/RoleTools/SuperAdmin.png");
}

.anime-comment-role.role-moderator,
.anime-comment-role.role-uploader {
    background: linear-gradient(180deg, rgba(83, 118, 215, 0.22), rgba(83, 118, 215, 0.1));
    border-color: rgba(120, 152, 255, 0.22);
    color: #eef4ff;
}

.anime-comment-role.role-moderator::before,
.anime-comment-role.role-uploader::before {
    background-image: url("/RoleTools/Uploader.png");
}

.anime-comment-role.role-fansub,
.anime-comment-role.role-team,
.anime-comment-role.role-vip {
    background: linear-gradient(180deg, rgba(255, 136, 92, 0.18), rgba(255, 136, 92, 0.08));
    border-color: rgba(255, 166, 120, 0.24);
    color: #ffeede;
}

.anime-comment-role.role-fansub::before {
    content: "\f32a";
    display: inline-grid;
    width: 10px;
    height: 10px;
    place-items: center;
    background: none;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
    color: currentColor;
    font-family: "uicons-solid-rounded";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.anime-comment-role.role-team::before {
    width: 14px;
    height: 14px;
    background: #ffffff;
    background-image: none;
    -webkit-mask-image: url("/RoleTools/Fansub.png");
    mask-image: url("/RoleTools/Fansub.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.anime-comment-role.role-vip::before {
    background-image: url("/RoleTools/Fansubber.png");
}

.anime-comment-role.role-uploader::before,
.anime-comment-role.role-moderator::before,
.anime-comment-role.role-fansub::before,
.anime-comment-role.role-admin::before,
.anime-comment-role.role-superadmin::before,
.anime-comment-role.role-team::before {
    display: inline-grid;
    width: 11px;
    height: 11px;
    place-items: center;
    background: none;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
    color: currentColor;
    filter: none;
    font-family: "uicons-solid-rounded";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.anime-comment-role.role-uploader::before,
.anime-comment-role.role-moderator::before { content: "\f4e9"; }
.anime-comment-role.role-fansub::before { content: "\f32a"; }
.anime-comment-role.role-admin::before { content: "\f53f"; }
.anime-comment-role.role-superadmin::before { content: "\e5f1"; }
.anime-comment-role.role-team::before { content: "\f555"; }

.anime-comment-role.role-premium {
    color: #fff2b7;
    border-color: rgba(246, 194, 76, 0.38);
    background: linear-gradient(180deg, rgba(246, 194, 76, 0.24), rgba(194, 126, 28, 0.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(246, 194, 76, 0.12);
}

.anime-comment-role.role-premium::before {
    content: "✦";
    width: auto;
    height: auto;
    color: #ffd86b;
    background: none;
    font-size: 11px;
}

.anime-comment-time {
    color: rgba(229, 234, 241, 0.56);
    font-size: 12px;
    white-space: nowrap;
    transition: color 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.anime-comment-bubble {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: min(100%, 600px);
    border-radius: 16px 16px 16px 8px;
    padding: 12px 16px;
    background: #15171c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        -10px 0 18px -18px rgba(255, 255, 255, 0.08),
        inset 0 2px 6px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        inset 0 -1px 0 rgba(255, 255, 255, 0.015);
    transition: border-color 0.46s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.46s cubic-bezier(0.22, 1, 0.36, 1), background 0.46s cubic-bezier(0.22, 1, 0.36, 1), filter 0.46s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, box-shadow, filter;
}

.anime-comment-bubble:hover,
.anime-comment-card:focus-within .anime-comment-bubble {
    background: #1a1d23;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        -12px 0 22px -18px rgba(255, 255, 255, 0.12),
        0 10px 26px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(var(--anime-accent-rgb), 0.12),
        0 0 18px rgba(var(--anime-accent-rgb), 0.1),
        inset 0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    filter: brightness(1.06) saturate(1.04);
}

.anime-comment-card:hover::before,
.anime-comment-card:has(.anime-comment-bubble:hover)::before,
.anime-comment-card:focus-within::before {
    opacity: 1;
    box-shadow:
        0 0 12px rgba(var(--anime-accent-rgb), 0.42),
        0 0 24px rgba(var(--anime-accent-rgb), 0.2);
    filter: brightness(1.08);
}

.anime-comment-author:hover,
.anime-comment-card:focus-within .anime-comment-author,
.anime-comment-author:focus-visible {
    color: #f7fffa;
    text-shadow: 0 0 10px rgba(var(--anime-accent-rgb), 0.16), 0 0 22px rgba(var(--anime-accent-rgb), 0.14);
    filter: saturate(1.12) brightness(1.06);
}

.anime-comment-card:hover .anime-comment-time,
.anime-comment-card:focus-within .anime-comment-time {
    color: rgba(234, 240, 246, 0.74);
}

.anime-comment-link:hover {
    color: #ffffff;
}

.anime-comment-text {
    margin: 0;
    color: rgba(241, 245, 249, 0.94);
    line-height: 1.65;
    font-size: 14px;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    white-space: pre-wrap;
    word-break: break-word;
}

.anime-comment-mention {
    color: #74d6ff;
    font-weight: 700;
}

.anime-comment-text.is-spoiler {
    filter: blur(4px);
    user-select: none;
    cursor: pointer;
}

.anime-comment-text.is-spoiler.is-open {
    filter: blur(0);
}

.anime-comment-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.anime-comment-reply-box {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.anime-comment-reply-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(12, 13, 18, 0.94);
    color: #edf3ff;
    padding: 10px 12px;
    font-size: 13px;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    outline: none;
    transition: border-color 0.26s ease, box-shadow 0.26s ease;
}

.anime-comment-reply-input:focus {
    border-color: rgba(var(--anime-accent-rgb), 0.22);
    box-shadow: 0 0 0 3px rgba(var(--anime-accent-rgb), 0.08);
}

.anime-comment-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.anime-comment-reply-send,
.anime-comment-reply-cancel {
    min-height: 32px;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    cursor: pointer;
}

.anime-comment-reply-send {
    border: none;
    background: rgba(var(--anime-accent-rgb), 0.18);
    color: #ffffff;
}

.anime-comment-reply-cancel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: rgba(229, 234, 241, 0.72);
}

.anime-comment-replies {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding-top: 4px;
}

.anime-comment-more-replies {
    justify-self: start;
    border: none;
    background: transparent;
    padding: 0 0 0 26px;
    color: rgba(var(--anime-accent-rgb), 0.82);
    font-size: 12px;
    font-weight: 800;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    cursor: pointer;
    transition: color 0.24s ease, text-shadow 0.24s ease;
}

.anime-comment-more-replies:hover,
.anime-comment-more-replies.is-open {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(var(--anime-accent-rgb), 0.12);
}

.anime-comment-reply-thread {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.anime-comment-reply-line {
    position: relative;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    justify-self: center;
}

.anime-comment-reply-line::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.anime-comment-card.is-reply {
    padding-top: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

.anime-comment-card.is-reply .anime-comment-main {
    gap: 7px;
}

.anime-comment-card.is-reply .anime-comment-bubble {
    background:
        linear-gradient(180deg, rgba(22, 23, 28, 0.98), rgba(17, 18, 24, 1)),
        rgba(255, 255, 255, 0.03);
}

.anime-comments-empty-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(245, 247, 250, 0.9);
    font-size: 12px;
    font-weight: 800;
}

.anime-comment-action,
.anime-comment-link {
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(229, 234, 241, 0.62);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    cursor: pointer;
    transition: color 0.34s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.anime-comment-action::after,
.anime-comment-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: rgba(var(--anime-accent-rgb), 0.34);
    opacity: 0;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), background 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.anime-comment-action.is-danger {
    color: rgba(255, 134, 134, 0.78);
}

.anime-comment-action.is-active {
    color: #ffb6c3;
    text-shadow: 0 0 10px rgba(255, 138, 160, 0.14);
}

.anime-comment-action.is-danger:hover {
    color: #ffb0b0;
    text-shadow: 0 0 10px rgba(255, 120, 120, 0.14);
}

.anime-comment-action:hover,
.anime-comment-link:hover,
.anime-comment-action:focus-visible,
.anime-comment-link:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(var(--anime-accent-rgb), 0.12);
}

.anime-comment-action:hover::after,
.anime-comment-link:hover::after,
.anime-comment-action:focus-visible::after,
.anime-comment-link:focus-visible::after {
    opacity: 1;
}

.anime-comment-btn-icon,
.anime-comment-action-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.92;
}

.anime-comments-empty {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 10px;
    padding: 18px 0 0;
}

.anime-comments-empty h3,
.anime-comments-empty p {
    margin: 0;
}

.anime-comments-empty h3 {
    color: #ffffff;
    font-size: 24px;
}

.anime-comments-empty p {
    color: rgba(230, 235, 242, 0.72);
    line-height: 1.7;
    max-width: 420px;
}

.episode-card {
    display: grid;
    gap: 0;
    padding: 0;
    position: relative;
    border-radius: 18px;
    min-height: 0;
    background: rgba(11, 11, 13, 0.8);
    border: 1px solid rgba(var(--anime-accent-rgb), 0.12);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.episode-card.is-watched {
    border-color: rgba(93, 201, 126, 0.22);
    box-shadow: 0 12px 26px rgba(93, 201, 126, 0.08);
}

.episode-card-summary {
    cursor: pointer;
    padding: 13px 15px;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
}

.episode-card-main {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
}

.episode-card-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16 / 9;
    text-decoration: none;
}

.episode-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.episode-card-hover-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 65px;
    height: 65px;
    display: block;
    opacity: 0;
    transition: opacity 0.18s ease;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.episode-card-hover-play-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0.78);
    transition: transform 0.22s ease, filter 0.22s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.26));
    display: block;
}

.episode-card:hover,
.episode-card.is-open {
    border-color: rgba(var(--anime-accent-rgb), 0.24);
    box-shadow: 0 14px 28px rgba(var(--anime-accent-rgb), 0.12);
}

.episode-card:hover .episode-card-hover-play,
.episode-card.is-open .episode-card-hover-play {
    opacity: 1;
}

.episode-card:hover .episode-card-hover-play-icon,
.episode-card.is-open .episode-card-hover-play-icon {
    transform: scale(1);
}

.episode-card-code {
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.episode-card-body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.episode-card-top {
    display: grid;
    gap: 8px;
}

.episode-card-top h3 {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(16px, 1.25vw, 21px);
    line-height: 1.2;
}

.episode-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.episode-meta-pill {
    color: rgba(223, 229, 238, 0.68);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.episode-meta-pill + .episode-meta-pill::before {
    content: "•";
    margin: 0 10px 0 0;
    color: rgba(223, 229, 238, 0.34);
}

.episode-card-desc {
    color: rgba(233, 237, 244, 0.72);
    font-size: 12px;
    line-height: 1.55;
    max-width: 92%;
}

.episode-watch-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 30px;
    padding: 0 10px 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 12, 16, 0.78);
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
    z-index: 2;
}

.episode-watch-toggle-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.episode-watch-toggle-text {
    color: rgba(244, 247, 251, 0.84);
    font-size: 11px;
    font-weight: 800;
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.22s ease, opacity 0.22s ease;
}

.episode-watch-toggle:hover,
.episode-watch-toggle:focus-visible {
    border-color: rgba(var(--anime-accent-rgb), 0.24);
    background: rgba(14, 16, 22, 0.92);
}

.episode-watch-toggle:hover .episode-watch-toggle-mark,
.episode-watch-toggle:focus-visible .episode-watch-toggle-mark {
    background: rgba(var(--anime-accent-rgb), 0.76);
    box-shadow: 0 0 0 4px rgba(var(--anime-accent-rgb), 0.12);
}

.episode-watch-toggle.is-watched {
    border-color: rgba(93, 201, 126, 0.24);
    background: rgba(10, 18, 13, 0.88);
    box-shadow: 0 10px 20px rgba(93, 201, 126, 0.08);
    animation: episodeWatchToggleGlow 0.3s ease;
}

.episode-watch-toggle.is-watched .episode-watch-toggle-mark {
    background: #5dc97e;
    box-shadow: 0 0 0 4px rgba(93, 201, 126, 0.14);
}

.episode-watch-toggle.is-watched .episode-watch-toggle-text {
    color: #dfffe8;
}

@keyframes episodeWatchToggleGlow {
    0% {
        box-shadow: 0 0 0 rgba(93, 201, 126, 0);
        filter: brightness(0.96);
    }
    60% {
        box-shadow: 0 0 0 6px rgba(93, 201, 126, 0.08), 0 10px 20px rgba(93, 201, 126, 0.12);
        filter: brightness(1.04);
    }
    100% {
        box-shadow: 0 10px 20px rgba(93, 201, 126, 0.08);
        filter: brightness(1);
    }
}

.episode-fansubs {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.episode-fansubs-inner {
    display: grid;
    gap: 10px;
    padding: 0 15px 15px;
}

.episode-fansubs-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(var(--anime-accent-rgb), 0.84);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.episode-fansubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    gap: 10px;
    justify-content: start;
}

.episode-fansubs-grid.is-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.fansub-card {
    width: 100%;
    min-height: 68px;
    padding: 11px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(42, 34, 38, 0.88), rgba(28, 25, 33, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: #e7f0ff;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fansub-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.fansub-card-icon-wrap,
.fansub-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fansub-card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
}

.fansub-card-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.92;
}

.fansub-card-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.fansub-card-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    color: #f4f7ff;
}

.fansub-card-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 214, 92, 0.95);
    font-size: 11px;
    font-weight: 800;
}

.fansub-card-score::before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background: url("../pictures/star.png") center / contain no-repeat;
    transform: translateY(-1px);
}

.fansub-card-arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
}

.episode-fansubs-empty {
    min-height: 150px;
    width: min(100%, 320px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    justify-self: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

.episode-fansubs-empty-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    opacity: 0.7;
}

.episode-fansubs-empty p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.anime-seasons-panel {
    margin-top: 28px;
    padding: 28px;
    border-radius: 30px;
    border: 1px solid rgba(var(--anime-accent-rgb), 0.16);
    background:
        radial-gradient(circle at top left, rgba(var(--anime-accent-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, rgba(18, 20, 25, 0.96), rgba(11, 13, 18, 0.98));
    box-shadow: 0 24px 60px rgba(var(--anime-accent-rgb), 0.08), 0 24px 60px rgba(0, 0, 0, 0.22);
}

.anime-seasons-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 22px;
}

.anime-seasons-head h2 {
    margin: 0;
    color: rgba(var(--anime-accent-rgb), 0.96);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
    text-shadow: 0 0 18px rgba(var(--anime-accent-rgb), 0.18);
}

.anime-seasons-head p {
    margin: 0;
    color: rgba(219, 229, 255, 0.78);
    font-size: 18px;
}

.anime-seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.anime-season-card {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 86px;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 20px;
    border: 1px solid rgba(var(--anime-accent-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--anime-accent-rgb), 0.04), rgba(255, 255, 255, 0.02));
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.anime-season-card:hover,
.anime-season-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(var(--anime-accent-rgb), 0.42);
    background: linear-gradient(180deg, rgba(var(--anime-accent-rgb), 0.08), rgba(255, 255, 255, 0.04));
    box-shadow: 0 18px 36px rgba(var(--anime-accent-rgb), 0.12), 0 18px 36px rgba(0, 0, 0, 0.2);
}

.anime-season-card.is-active {
    border-color: rgba(var(--anime-accent-rgb), 0.58);
    background: linear-gradient(180deg, rgba(var(--anime-accent-rgb), 0.14), rgba(var(--anime-accent-soft-rgb), 0.08));
    box-shadow: 0 18px 36px rgba(var(--anime-accent-rgb), 0.14), 0 18px 36px rgba(0, 0, 0, 0.18);
}

.anime-season-card-index {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 2px solid rgba(var(--anime-accent-rgb), 0.34);
    color: rgba(var(--anime-accent-rgb), 0.96);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    background: rgba(var(--anime-accent-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--anime-accent-rgb), 0.08);
}

.anime-season-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.anime-season-card-copy strong {
    color: #ffffff;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.18;
}

.anime-season-card-copy span {
    color: rgba(229, 238, 255, 0.82);
    font-size: 18px;
}

.anime-season-card-poster {
    width: 80px;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anime-season-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.anime-season-card-poster-fallback {
    color: rgba(var(--anime-accent-rgb), 0.96);
    font-size: 28px;
    font-weight: 800;
}

@keyframes episodeFansubReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anime-not-found {
    padding: clamp(42px, 7vw, 82px) 0;
}

/* List page view modes */
.list-page .user-list-grid.is-poster-view {
    grid-template-columns: repeat(auto-fill, minmax(148px, 176px));
    justify-content: start;
    gap: 24px 14px;
}

.list-page .user-list-poster-card {
    width: 100%;
    min-width: 0;
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.list-page .user-list-poster-card:hover {
    transform: translateY(-5px);
    filter: brightness(1.05) saturate(1.05);
}

.list-page .user-list-poster-card .img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 9px;
    background: #111;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.list-page .user-list-poster-card .img > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.24s ease;
}

.list-page .user-list-poster-card:hover .img > img {
    transform: scale(1.04);
}

.list-page .user-list-poster-card .ep {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    transform: none;
    box-shadow: none;
}

.list-page .user-list-poster-card .name {
    height: 20px;
    margin: 9px 0 0;
    padding: 0 2px;
    color: #f3f5f8;
    font-size: 14px;
    font-weight: 620;
    line-height: 1.35;
    text-align: left;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.list-page .user-list-poster-card .name .name-text {
    display: inline-block;
    transform: translateX(0);
    will-change: transform;
}

.list-page .user-list-poster-card:hover .name.is-overflow .name-text {
    animation: nameMarquee var(--name-scroll-duration, 5.5s) ease-in-out infinite alternate;
}

.list-page .user-list-poster-card .ep,
.list-page .user-list-format {
    left: 7px !important;
    bottom: 7px !important;
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.48) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.list-page .user-list-grid.is-banner-view .user-list-card {
    display: block;
    min-height: 214px;
}

.list-page .user-list-grid.is-banner-view .user-list-card-link {
    position: relative;
    display: block;
    min-height: 214px;
    padding: 22px;
}

.list-page .user-list-grid.is-banner-view .user-list-copy {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    z-index: 2;
    min-height: 0;
    max-width: none;
    display: grid;
    gap: 8px;
    align-content: end;
}

.list-page .user-list-grid.is-banner-view .user-list-copy strong {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.14;
}

.list-page .user-list-grid.is-banner-view .user-list-meta,
.list-page .user-list-grid.is-banner-view .user-list-genre {
    color: rgba(255, 255, 255, 0.76);
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.66);
}

.list-page .user-list-grid.is-banner-view .user-list-progress {
    width: min(100%, 340px);
}

.user-list-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: grid;
    place-items: center;
    padding: 20px;
}

.user-list-edit-modal[hidden] {
    display: none;
}

.user-list-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.user-list-edit-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(90vh, 680px);
    overflow-y: auto;
    padding: 22px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(22, 24, 31, 0.98), rgba(12, 13, 18, 0.98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.user-list-edit-modal.is-open .user-list-edit-backdrop,
.user-list-edit-modal.is-open .user-list-edit-dialog {
    opacity: 1;
}

.user-list-edit-modal.is-open .user-list-edit-dialog {
    transform: translateY(0) scale(1);
}

.user-list-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.user-list-edit-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.15;
}

.user-list-edit-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
}

.user-list-edit-form {
    display: grid;
    gap: 14px;
}

.user-list-edit-field {
    display: grid;
    gap: 8px;
}

.user-list-edit-field span {
    color: rgba(247, 247, 251, 0.66);
    font-size: 12px;
    font-weight: 650;
}

.user-list-edit-field input,
.user-list-edit-field select,
.user-list-edit-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    outline: 0;
}

.user-list-edit-field textarea {
    min-height: 112px;
    padding: 12px;
    resize: vertical;
}

.user-list-edit-field option {
    color: #101117;
}

.user-list-edit-field small,
.user-list-edit-status {
    color: rgba(247, 247, 251, 0.58);
    font-size: 12px;
    font-weight: 700;
}

.user-list-edit-status.is-error {
    color: #ffb8b8;
}

.user-list-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.user-list-edit-secondary,
.user-list-edit-primary {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.user-list-edit-secondary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.user-list-edit-primary {
    border: 1px solid rgba(255, 125, 198, 0.36);
    background: rgba(255, 125, 198, 0.18);
    color: #ffffff;
}

.anime-not-found .anime-detail-content {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .anime-detail-content {
        grid-template-columns: 1fr;
        width: min(calc(100% - 28px), 1220px);
        padding-top: clamp(76px, 14vw, 112px);
        align-items: start;
        justify-items: center;
    }

    .anime-description-popover {
        position: fixed;
        top: var(--anime-description-popover-top, 120px);
        left: var(--anime-description-popover-left, 14px);
        width: var(--anime-description-popover-width, min(640px, calc(100vw - 28px)));
        max-height: min(60vh, 420px);
        transform: translateY(-8px) scale(0.985);
        transform-origin: center top;
    }

    .anime-description-card.is-description-open .anime-description-popover {
        z-index: 1400;
        transform: translateY(0) scale(1);
    }

    .anime-detail-card {
        width: 100%;
        justify-content: center;
    }

    .anime-poster-wrap {
        width: min(100%, 260px);
        margin-left: auto;
        margin-right: auto;
    }

    .anime-detail-main {
        width: 100%;
        justify-items: center;
    }

    .anime-detail-heading {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .anime-detail-title-row {
        justify-content: center;
        width: 100%;
    }

    .anime-detail-heading h1,
    .anime-meta-line {
        text-align: center;
    }

    .theme-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .episode-card-main {
        grid-template-columns: 1fr;
    }

    .episode-card-desc {
        max-width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .anime-description-card.is-description-open {
        z-index: 1600;
    }

    .anime-description-card.is-description-open .anime-description-popover,
    .anime-description-popover.is-tablet-popover-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 1601;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .anime-description-popover {
        left: 0;
        width: 100%;
        max-width: 100%;
        transform-origin: 0 0;
    }
}

@media (max-width: 640px) {
    .anime-detail-shell {
        width: 100%;
        padding-top: 0;
    }

    .anime-detail-hero {
        margin-top: 0;
        min-height: 480px;
        overflow: visible;
    }

    .anime-detail-content {
        width: calc(100% - 24px);
        padding: 96px 0 18px;
        gap: 18px;
        justify-items: center;
    }

    .anime-detail-backdrop {
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
        transform: none;
        filter: saturate(1.04) brightness(1.03);
        opacity: 1;
    }

    .anime-detail-overlay {
        background:
            linear-gradient(180deg, rgba(8, 10, 14, 0.08) 0%, rgba(8, 10, 14, 0.28) 24%, #080a0e 100%),
            linear-gradient(90deg, rgba(8, 10, 14, 0.5) 0%, rgba(8, 10, 14, 0.16) 38%, rgba(8, 10, 14, 0.58) 100%);
    }

    .anime-description-card {
        width: 100%;
        max-width: none;
    }

    .anime-description-popover {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 100%;
        max-height: min(56vh, 360px);
        padding: 18px 16px;
        transform: translateY(-8px) scale(0.985);
        transform-origin: 0 0;
    }

    .anime-description-card.is-description-open .anime-description-popover {
        z-index: 120;
        transform: translateY(0) scale(1);
    }

    .anime-description-toggle {
        display: block;
    }

    .anime-description-card:not(.is-description-expandable) .anime-description-toggle:not(.is-collapsed) {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .anime-description-toggle:not(.is-collapsed) {
        max-height: 180px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }

    .anime-detail-card,
    .anime-detail-main {
        width: 100%;
        justify-items: center;
    }

    .anime-detail-card {
        justify-content: center;
    }

    .anime-poster-wrap {
        width: min(100%, 240px);
        margin-left: auto;
        margin-right: auto;
    }

    .anime-detail-heading {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .anime-detail-title-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .anime-detail-heading h1 {
        width: 100%;
        margin-bottom: 0;
        text-align: center;
    }

    .anime-score-inline {
        transform: none;
        justify-content: center;
    }

    .anime-meta-line {
        text-align: center;
    }

    .anime-action-row,
    .anime-info-pills {
        gap: 8px;
    }

    .anime-action-row {
        align-items: stretch;
    }

    .anime-detail-chip {
        width: 100%;
    }

    .anime-status-dialog {
        width: min(100%, calc(100vw - 24px));
        padding: 18px;
    }

    .anime-status-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .anime-inline-bookmark,
    .anime-share-wrap {
        width: calc(50% - 4px);
    }

    .anime-share-wrap {
        display: flex;
    }

    .anime-inline-share {
        width: 100%;
        justify-content: center;
    }

    .anime-share-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        min-width: 0;
        width: min(190px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        border-radius: 14px;
        padding: 8px;
        z-index: 1400;
        transform: translate(-50%, -50%);
        transform-origin: center;
    }

    .anime-share-option {
        min-height: 34px;
        font-size: 12px;
        padding: 7px 10px;
    }

    .section-heading-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .anime-extra-grid {
        margin-top: 22px;
    }

    .episode-toolbar {
        justify-content: stretch;
    }

    .episode-search-wrap {
        width: 100%;
    }

    .episode-grid {
        grid-template-columns: 1fr;
    }

    .anime-episodes-topbar,
    .episode-card-summary {
        padding-left: 14px;
        padding-right: 14px;
    }

    .theme-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .theme-info-item {
        gap: 4px;
    }

    .theme-info-label {
        font-size: 9px;
        letter-spacing: 0.04em;
    }

    .theme-info-item strong {
        font-size: 13px;
    }

    .anime-episodes-topbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .anime-comments-toolbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .anime-content-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 8px;
        overflow: hidden;
    }

    .anime-content-tab {
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
        padding: 12px 10px;
        font-size: 13px;
    }

    .anime-comment-form-row {
        flex-direction: column;
        align-items: center;
    }

    .anime-comment-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .anime-comment-avatar {
        grid-column: 1;
        grid-row: 2;
    }

    .anime-comment-main {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .anime-comment-rating {
        justify-content: center;
        width: 100%;
    }

    .anime-comment-form-actions {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .anime-comment-form {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .anime-comment-form-avatar {
        width: 38px;
        height: 38px;
    }

    .anime-comment-submit,
    .anime-comment-cancel {
        width: auto;
        min-width: 140px;
    }

    .anime-episodes-filters,
    .episode-search-box,
    .anime-season-select-wrap {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    .anime-comments-count,
    .anime-episodes-line {
        margin-left: auto;
        margin-right: auto;
    }

    .episode-pagination {
        justify-content: center;
        text-align: center;
    }

    .episode-pagination-summary,
    .episode-pagination-actions {
        width: 100%;
        justify-content: center;
    }

    .episode-page-edge {
        min-width: 38px;
        width: 38px;
    }

    .anime-comment-card,
    .anime-comments-empty,
    .anime-comment-form-shell {
        text-align: left;
        width: 100%;
    }

    .episode-card {
        border-radius: 16px;
    }

    .anime-seasons-panel {
        padding: 20px;
        border-radius: 24px;
    }

    .anime-seasons-grid {
        grid-template-columns: 1fr;
    }

    .anime-season-card {
        grid-template-columns: 56px minmax(0, 1fr) 72px;
        gap: 14px;
        padding: 16px;
    }

    .anime-season-card-index {
        width: 52px;
        height: 52px;
        font-size: 30px;
    }

    .anime-season-card-poster {
        width: 72px;
        height: 104px;
    }

    .anime-season-card-copy span {
        font-size: 16px;
    }

    .episode-fansubs-inner {
        padding: 0 14px 14px;
    }

    .anime-detail-section,
    .anime-extra-grid {
        width: calc(100% - 24px);
    }
}

/* ===== Home page responsive scale ===== */
:root {
    --fluid-gutter: clamp(14px, 2.8vw, 56px);
    --fluid-max: 1780px;
}

body.home-page .hero-section,
body.home-page .anime-section {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    max-width: var(--fluid-max);
}

body.home-page .home-categories {
    gap: clamp(20px, 2.1vw, 34px);
}

.home-dynamic-sections {
    display: contents;
}

.home-dynamic-sections[hidden] {
    display: none;
}

body.home-page .category-row-wrap {
    --row-side-pad: clamp(24px, 2vw, 36px);
}

body.home-page .home-categories .anime-row {
    --cards-per-view: 8;
    --card-gap: clamp(10px, 1vw, 16px);
}

body.home-page .home-categories .anime-box .name {
    font-size: clamp(14px, 0.95vw, 16px);
}

body.home-page .home-categories .ep {
    transform: none;
}

@media (max-width: 1500px) {
    body.home-page .home-categories .anime-row {
        --cards-per-view: 7;
    }
}

@media (max-width: 1240px) {
    body.home-page .home-categories .anime-row {
        --cards-per-view: 6;
    }
}

@media (max-width: 980px) {
    body.home-page .home-categories .anime-row {
        --cards-per-view: 4;
    }

    body.home-page .category-row-wrap {
        --row-side-pad: 12px;
    }
}

@media (max-width: 700px) {
    body.home-page .home-categories .anime-row {
        --cards-per-view: 3;
    }

    body.home-page .home-categories .anime-box {
        flex: 0 0 clamp(148px, 40vw, 158px);
        min-width: clamp(148px, 40vw, 158px);
        max-width: clamp(148px, 40vw, 158px);
    }
}

@media (max-width: 480px) {
    body.home-page .home-categories .anime-row {
        --cards-per-view: 2;
        --card-gap: 10px;
    }

    body.home-page .category-block,
    body.home-page .category-row-wrap,
    body.home-page .home-categories .anime-row {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.home-page .category-row-wrap {
        padding-inline: 8px;
    }

    body.home-page .home-categories .anime-box .img {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
    }

    body.home-page .home-categories .anime-box {
        flex: 0 0 calc((100% - var(--card-gap)) / 2);
        min-width: calc((100% - var(--card-gap)) / 2);
        max-width: calc((100% - var(--card-gap)) / 2);
    }
}

/* Immersive home hero: wide on desktop, compact on small screens. */
body.home-page .hero-section {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    max-width: var(--fluid-max);
    min-height: clamp(500px, 42vw, 760px);
    margin-top: 0;
    margin-bottom: clamp(24px, 2vw, 34px);
    border-radius: clamp(14px, 1.2vw, 22px);
}

body.home-page .hero-inner {
    max-width: min(46vw, 720px);
    padding: clamp(38px, 4.2vw, 76px);
}

.hero-title-logo {
    display: block;
    width: min(100%, 560px);
    max-height: clamp(96px, 13vw, 180px);
    margin: 0 0 18px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.58));
}

.hero-title-logo[hidden] {
    display: none;
}

@media (max-width: 980px) {
    body.home-page .hero-section {
        min-height: clamp(390px, 54vw, 520px);
    }

    body.home-page .hero-inner {
        max-width: min(66vw, 560px);
        padding: clamp(28px, 5vw, 46px);
    }
}

@media (max-width: 700px) {
    body.home-page .hero-section {
        min-height: clamp(310px, 86vw, 440px);
        margin-bottom: 20px;
    }

    body.home-page .hero-inner {
        max-width: 100%;
        padding: 28px 22px 74px;
    }

    body.home-page .hero-title {
        font-size: clamp(32px, 10vw, 48px);
    }
}

/* Full-bleed home hero: starts at the top edge behind the header. */
body.home-page {
    padding-top: 0;
}

body.home-page .hero-section {
    width: 100%;
    max-width: none;
    min-height: clamp(520px, 48vw, 820px);
    margin: 0 0 clamp(24px, 2vw, 36px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.home-page .hero-inner {
    max-width: min(48vw, 760px);
    padding: clamp(146px, 13vw, 230px) clamp(24px, 5vw, 96px) clamp(56px, 7vw, 120px);
}

@media (max-width: 980px) {
    body.home-page .hero-section {
        min-height: clamp(430px, 68vw, 620px);
    }

    body.home-page .hero-inner {
        max-width: min(74vw, 620px);
        padding: clamp(116px, 16vw, 156px) clamp(20px, 4vw, 42px) 72px;
    }
}

@media (max-width: 700px) {
    body.home-page .hero-section {
        min-height: clamp(360px, 104vw, 520px);
        margin-bottom: 20px;
    }

    body.home-page .hero-inner {
        max-width: 100%;
        padding: 118px 20px 76px;
    }
}

body.home-page .hero-mask {
    background:
        linear-gradient(90deg, rgba(5, 6, 10, 0.9) 0%, rgba(5, 6, 10, 0.7) 25%, rgba(5, 6, 10, 0.31) 48%, rgba(5, 6, 10, 0.08) 72%, rgba(5, 6, 10, 0.16) 100%),
        linear-gradient(0deg, rgba(8, 8, 12, 0.98) 0%, rgba(8, 8, 12, 0.74) 12%, rgba(8, 8, 12, 0.18) 38%, transparent 62%),
        linear-gradient(180deg, rgba(5, 5, 8, 0.28) 0%, transparent 28%, transparent 70%, rgba(5, 5, 8, 0.25) 100%),
        radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.32) 100%);
    box-shadow: inset 0 -90px 100px -55px rgba(0, 0, 0, 0.9);
}

body.home-page .hero-backdrop.is-visible,
body.home-page .hero-video.is-visible {
    filter: saturate(1.04) contrast(1.02) brightness(0.9);
}

@media (max-width: 700px) {
    body.home-page .hero-mask {
        background:
            linear-gradient(90deg, rgba(5, 6, 10, 0.82) 0%, rgba(5, 6, 10, 0.48) 55%, rgba(5, 6, 10, 0.18) 100%),
            linear-gradient(0deg, rgba(8, 8, 12, 0.98) 0%, rgba(8, 8, 12, 0.58) 22%, transparent 58%),
            radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%);
    }
}

.hero-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.hero-fact {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
    background: rgba(9, 12, 18, 0.68);
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-fact.is-score {
    color: #ffd35a;
    border-color: rgba(255, 211, 90, 0.38);
}

.hero-fact.is-language {
    color: #7de8ff;
    border-color: rgba(92, 219, 255, 0.4);
}

.hero-fact.is-4k {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 222, 119, .66);
    background: linear-gradient(135deg, rgba(255, 231, 150, .2), rgba(98, 67, 10, .5));
    color: #ffe58c;
    box-shadow: 0 0 18px rgba(255, 205, 66, .16);
    letter-spacing: .06em;
}

.hero-fact.is-4k::after {
    content: '';
    position: absolute;
    inset: -60% auto -60% -45%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    transform: rotate(14deg);
    animation: hero4KShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hero4KShine {
    0%, 58% { left: -45%; opacity: 0; }
    66% { opacity: 1; }
    86%, 100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fact.is-4k::after { animation: none; }
}

.hero-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
}

.hero-themes[hidden] {
    display: none;
}

.hero-summary {
    max-width: 680px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 500;
    line-height: 1.45;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.56);
}

.hero-summary[hidden] {
    display: none;
}

.hero-theme {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgba(var(--anime-accent-rgb), 0.28);
    border-radius: 999px;
    background: rgba(9, 12, 18, 0.6);
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-theme:hover,
.hero-theme:focus-visible {
    background: rgba(var(--anime-accent-rgb), 0.16);
    border-color: rgba(var(--anime-accent-rgb), 0.55);
    color: #fff;
}

/* Hər slayd üçün eyni məzmun yuvaları: fərqli loqo və mətnlər düymələri yerindən oynatmır. */
body.home-page .hero-inner {
    display: grid;
    grid-template-rows: 180px 48px 48px 68px 64px;
    grid-template-areas:
        "title"
        "facts"
        "themes"
        "summary"
        "actions";
    align-items: start;
}

body.home-page .hero-title-logo,
body.home-page .hero-title {
    grid-area: title;
    align-self: end;
    margin: 0;
}

body.home-page .hero-facts,
body.home-page .hero-themes,
body.home-page .hero-summary,
body.home-page .hero-actions {
    align-self: start;
    margin: 0;
}

body.home-page .hero-facts { grid-area: facts; }
body.home-page .hero-themes { grid-area: themes; }
body.home-page .hero-summary { grid-area: summary; }
body.home-page .hero-actions { grid-area: actions; }

body.home-page .hero-themes {
    max-height: 42px;
    overflow: hidden;
}

body.home-page .hero-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.home-page .hero-summary[hidden] {
    display: none;
}

.home-continue {
    width: min(calc(100% - (var(--fluid-gutter) * 2)), var(--fluid-max));
    margin: 8px auto 34px;
}

.home-continue[hidden] { display: none; }
.home-continue .section-title,
.home-continue .section-title::before { transition: none !important; animation: none !important; }
.home-continue .section-title::before,
.home-continue .section-title:hover::before { width: 0 !important; }
.home-continue .section-title:hover { color: #fff !important; padding-left: 12px !important; }
.home-continue-arrow-prev { left: calc(var(--row-side-pad) - (var(--arrow-size) / 2) + var(--pc-arrow-offset, 0px)); }
.home-continue-arrow-next { right: calc(var(--row-side-pad) - (var(--arrow-size) / 2) + var(--pc-arrow-offset, 0px)); }
.home-continue-row .row-nav.is-hidden,
.home-continue-row .row-nav[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.home-continue-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(340px, 450px);
    grid-template-rows: 1fr;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}
.home-continue-track::-webkit-scrollbar { display: none; }
.home-continue-card { min-width: 0; scroll-snap-align: start; }
.home-continue-card > a { display: block; color: #fff; text-decoration: none; }
.home-continue-media { position: relative; display: block; aspect-ratio: 15 / 4; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #111; box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.home-continue-media::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 20%, transparent 42%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.home-continue-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
.home-continue-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 39px; height: 39px; padding-left: 2px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(5,5,8,.62); opacity: 0; transform: translate(-50%,-43%) scale(.8); backdrop-filter: blur(8px); transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.home-continue-episode { position: absolute; z-index: 3; top: 10px; left: 12px; max-width: calc(100% - 24px); overflow: hidden; padding: 4px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: rgba(255,255,255,.9); background: rgba(20,20,24,.68); font-size: 9px; font-weight: 900; letter-spacing: .05em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(7px); }
.home-continue-name { position: absolute; z-index: 3; right: 92px; bottom: 12px; left: 13px; overflow: hidden; color: #fff; font-size: 14px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0,0,0,.8); white-space: nowrap; }
.home-continue-time { position: absolute; z-index: 3; right: 12px; bottom: 13px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,.9); white-space: nowrap; }
.home-continue-card:hover .home-continue-media img { transform: scale(1.055); filter: brightness(.72); }
.home-continue-card:hover .home-continue-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.home-continue-progress { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(255,255,255,.16); }
.home-continue-progress i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg,#ff334f,#ff687d); box-shadow: 0 0 12px rgba(255,51,79,.6); }

@media (min-width: 1100px) {
    .home-continue-track { grid-auto-columns: minmax(380px, 450px); }
}

@media (max-width: 700px) {
    .home-continue { margin-top: 2px; margin-bottom: 28px; }
    .home-continue-track { grid-auto-columns: min(82vw, 330px); gap: 10px; }
    .home-continue-media { aspect-ratio: 3 / 1; border-radius: 11px; }
    .home-continue-episode { top: 8px; left: 9px; padding: 4px 7px; font-size: 8px; }
    .home-continue-name { right: 76px; bottom: 10px; left: 10px; font-size: 12px; }
    .home-continue-time { right: 9px; bottom: 11px; font-size: 8px; }
    .home-continue-play { display: none; }
}

@media (max-width: 760px) {
    footer.footer .info-footer-links,
    footer.footer .footer-genres,
    footer.footer .footer-shortcuts {
        display: none !important;
    }

    footer.footer .footer-side {
        gap: 0;
    }
}

@media (max-width: 700px) {
    body.home-page .hero-inner {
        grid-template-rows: 108px 44px 42px 68px 60px;
    }

    body.home-page .hero-themes {
        flex-wrap: nowrap;
        max-height: 36px;
    }

    body.home-page .hero-theme:nth-child(n + 4) {
        display: none;
    }
}

/* Banner məzmunu şəkil keçidi ilə birlikdə yumşaq və ardıcıl açılır. */
@keyframes heroTitleReveal {
    from {
        opacity: 0;
        transform: translate3d(-22px, 12px, 0) scale(0.975);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroChipReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.92);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroTextReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 15px, 0);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.hero-inner.is-enter .hero-title-logo:not([hidden]),
.hero-inner.is-enter .hero-title:not([hidden]) {
    animation: heroTitleReveal .72s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-inner.is-enter .hero-themes {
    animation: none;
}

.hero-inner.is-enter .hero-fact,
.hero-inner.is-enter .hero-theme:not([hidden]),
.hero-inner.is-enter .hero-btn {
    animation: heroChipReveal .58s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-inner.is-enter .hero-summary:not([hidden]) {
    animation: heroTextReveal .64s cubic-bezier(.16, 1, .3, 1) .34s both;
}

.hero-inner.is-enter .hero-fact:nth-child(1) { animation-delay: .12s; }
.hero-inner.is-enter .hero-fact:nth-child(2) { animation-delay: .17s; }
.hero-inner.is-enter .hero-fact:nth-child(3) { animation-delay: .22s; }
.hero-inner.is-enter .hero-fact:nth-child(n + 4) { animation-delay: .27s; }
.hero-inner.is-enter .hero-theme:nth-child(1) { animation-delay: .23s; }
.hero-inner.is-enter .hero-theme:nth-child(2) { animation-delay: .28s; }
.hero-inner.is-enter .hero-theme:nth-child(3) { animation-delay: .33s; }
.hero-inner.is-enter .hero-theme:nth-child(4) { animation-delay: .38s; }
.hero-inner.is-enter .hero-theme:nth-child(n + 5) { animation-delay: .43s; }
.hero-inner.is-enter .hero-btn:nth-child(1) { animation-delay: .43s; }
.hero-inner.is-enter .hero-btn:nth-child(2) { animation-delay: .49s; }

@media (max-width: 700px) {
    .hero-inner.is-enter .hero-theme:nth-child(1) { animation-delay: .2s; }
    .hero-inner.is-enter .hero-theme:nth-child(2) { animation-delay: .25s; }
    .hero-inner.is-enter .hero-theme:nth-child(3) { animation-delay: .3s; }
    .hero-inner.is-enter .hero-fact:nth-child(1) { animation-delay: .31s; }
    .hero-inner.is-enter .hero-fact:nth-child(2) { animation-delay: .36s; }
    .hero-inner.is-enter .hero-fact:nth-child(3) { animation-delay: .41s; }
    .hero-inner.is-enter .hero-btn:nth-child(1) { animation-delay: .46s; }
    .hero-inner.is-enter .hero-btn:nth-child(2) { animation-delay: .52s; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-inner.is-enter .hero-title-logo:not([hidden]),
    .hero-inner.is-enter .hero-title:not([hidden]),
    .hero-inner.is-enter .hero-mobile-poster,
    .hero-inner.is-enter .hero-fact,
    .hero-inner.is-enter .hero-theme:not([hidden]),
    .hero-inner.is-enter .hero-summary:not([hidden]),
    .hero-inner.is-enter .hero-btn {
        animation: none !important;
    }
}

.auth-header-admin {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255, 92, 92, 0.4);
    border-radius: 10px;
    background: rgba(255, 75, 75, 0.12);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-header-admin:hover,
.auth-header-admin:focus-visible {
    background: rgba(255, 75, 75, 0.22);
    border-color: rgba(255, 112, 112, 0.74);
    box-shadow: 0 0 18px rgba(255, 75, 75, 0.2);
}

.auth-header-admin-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 16px;
    line-height: 1;
    filter: none;
}

i.mobile-drawer-profile-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 17px;
    line-height: 1;
}

.mobile-drawer-profile-action.is-admin {
    color: #ffd4d4;
    border-color: rgba(255, 92, 92, 0.28);
    background: rgba(255, 75, 75, 0.08);
    text-decoration: none;
}

/* Detal səhifəsinin headeri ana səhifə ilə eyni ölçü və keçidə malikdir. */
body.anime-detail-page .topbar {
    top: 6px;
    height: 92px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-12px);
    transition:
        top 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease,
        backdrop-filter 0.4s ease;
}

body.anime-detail-page .topbar.scrolled {
    top: 0;
    height: 92px;
    align-items: center;
    padding-top: 0;
    transform: translateY(0);
}

@media (max-width: 700px) {
    body.anime-detail-page .topbar,
    body.anime-detail-page .topbar.scrolled {
        top: 0;
        height: 78px;
        transform: none;
    }
}

/* Final anime detail layout overrides. */
body.anime-detail-page .anime-detail-hero { min-height: clamp(500px, 48vw, 620px); }
body.anime-detail-page .anime-detail-overlay { background: radial-gradient(circle at 78% 20%, rgba(var(--anime-accent-rgb), .2), transparent 30%), linear-gradient(180deg, rgba(8, 10, 14, .12) 0%, rgba(8, 10, 14, .34) 42%, #080a0e 100%), linear-gradient(90deg, rgba(8, 10, 14, .78) 0%, rgba(8, 10, 14, .28) 52%, rgba(8, 10, 14, .62) 100%); }
body.anime-detail-page .anime-detail-content { align-items: end; padding-bottom: clamp(30px, 3.5vw, 48px); }
body.anime-detail-page .anime-detail-main { max-width: 820px; padding-bottom: 4px; }
body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(34px, 4.4vw, 68px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
body.anime-detail-page .anime-score-inline { border: 1px solid rgba(255, 255, 255, .16); background: rgba(8, 10, 14, .58); }
body.anime-detail-page .anime-detail-main .anime-side-watch { width: auto; min-width: 210px; min-height: 50px; padding: 0 24px; border-radius: 12px; font-size: 15px; }
body.anime-detail-page .anime-episodes-jump { width: max-content; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; color: rgba(255, 255, 255, .58); font-size: 12px; font-weight: 750; text-decoration: none; transition: color .2s ease; }
body.anime-detail-page .anime-episodes-jump:hover,
body.anime-detail-page .anime-episodes-jump:focus-visible { color: #fff; }
body.anime-detail-page .anime-extra-grid { margin-top: clamp(26px, 4vw, 52px); gap: clamp(34px, 5vw, 64px); }
body.anime-detail-page .anime-extra-grid > .anime-comments-panel { order: 1; }
body.anime-detail-page .anime-extra-grid > .anime-seasons-panel { order: 2; }
body.anime-detail-page .anime-extra-grid > .anime-theme-panel { order: 3; }
body.anime-detail-page .anime-comments-panel .anime-episodes-head { grid-template-columns: 1fr auto; align-items: end; row-gap: 8px; }
body.anime-detail-page .anime-section-kicker { grid-column: 1 / -1; color: rgba(var(--anime-accent-rgb), .94); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
body.anime-detail-page .anime-comments-panel .anime-content-tabs { grid-column: 2; grid-row: 2; }
body.anime-detail-page .anime-comments-panel .anime-episodes-head h2 { display: block; grid-column: 1; grid-row: 2; margin: 0; color: rgba(255, 255, 255, .94); font-size: clamp(26px, 3vw, 38px); line-height: 1; letter-spacing: -.035em; text-transform: none; }
body.anime-detail-page .anime-comments-panel .anime-episodes-line { display: none; }
body.anime-detail-page .anime-comments-panel .anime-tab-panel-body { padding: clamp(18px, 2.4vw, 30px); border-color: rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(17, 19, 27, .84), rgba(8, 10, 14, .76)); }
body.anime-detail-page .anime-characters-panel { margin-top: clamp(38px, 5vw, 68px); }

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-hero { min-height: auto; overflow: hidden; }
    body.anime-detail-page .anime-detail-content { grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); align-items: start; padding-top: 92px; }
    body.anime-detail-page .anime-detail-card,
    body.anime-detail-page .anime-detail-main { min-width: 0; width: 100%; }
    body.anime-detail-page .anime-detail-heading,
    body.anime-detail-page .anime-detail-title-row,
    body.anime-detail-page .anime-description-card { min-width: 0; width: 100%; max-width: 100%; }
    body.anime-detail-page .anime-detail-heading h1 { max-width: 100%; font-size: clamp(28px, 9vw, 42px); line-height: 1.04; overflow-wrap: anywhere; word-break: break-word; }
    body.anime-detail-page .anime-detail-main .anime-side-watch { width: 100%; }
    body.anime-detail-page .anime-detail-main .anime-action-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.anime-detail-page .anime-detail-main .anime-detail-chip { width: 100%; min-width: 0; }
    body.anime-detail-page .anime-detail-main .anime-detail-chip-primary { grid-column: 1 / -1; }
    body.anime-detail-page .anime-episodes-jump { margin-left: auto; margin-right: auto; }
    body.anime-detail-page .anime-comments-panel .anime-episodes-head { grid-template-columns: 1fr; justify-items: stretch; }
    body.anime-detail-page .anime-section-kicker,
    body.anime-detail-page .anime-comments-panel .anime-episodes-head h2,
    body.anime-detail-page .anime-comments-panel .anime-content-tabs { grid-column: 1; grid-row: auto; text-align: center; }
    body.anime-detail-page .anime-comments-panel .anime-content-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.anime-detail-page .anime-comments-panel .anime-content-tab { min-width: 0; width: 100%; }
}

/* Cleaner anime banner: one hierarchy, one action group. */
body.anime-detail-page .anime-detail-hero { min-height: clamp(500px, 44vw, 570px); }
body.anime-detail-page .anime-detail-content {
    grid-template-columns: minmax(190px, 226px) minmax(0, 1fr);
    gap: clamp(30px, 3.5vw, 50px);
    width: min(calc(100% - 72px), 1280px);
    padding-top: clamp(112px, 9vw, 132px);
    padding-bottom: 42px;
}
body.anime-detail-page .anime-poster-wrap { width: min(100%, 226px); }
body.anime-detail-page .anime-poster { box-shadow: 0 18px 38px rgba(0, 0, 0, .44); }
body.anime-detail-page .anime-detail-main { gap: 11px; max-width: 790px; }
body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(38px, 4vw, 58px); line-height: 1; }
body.anime-detail-page .anime-meta-info { gap: 8px 12px; }
body.anime-detail-page .anime-description-card {
    max-width: 700px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.anime-detail-page .anime-description-toggle { padding: 2px 0; }
body.anime-detail-page .anime-description-card p { color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.55; }
body.anime-detail-page .anime-description-toggle.is-collapsed,
body.anime-detail-page .anime-description-toggle.is-collapsed p { -webkit-line-clamp: 2; }
body.anime-detail-page .anime-description-card.is-description-expandable .anime-description-toggle::after { display: none; }
body.anime-detail-page .anime-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 5px; }
body.anime-detail-page .anime-detail-main .anime-side-watch {
    flex: 0 0 auto;
    width: auto;
    min-width: 156px;
    min-height: 42px;
    justify-self: start;
    padding: 0 20px;
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(214, 40, 40, .28);
}
body.anime-detail-page .anime-detail-main .anime-action-row { display: flex; width: auto; gap: 7px; }
body.anime-detail-page .anime-detail-main .anime-detail-chip,
body.anime-detail-page .anime-detail-main .anime-inline-bookmark,
body.anime-detail-page .anime-detail-main .anime-share-wrap,
body.anime-detail-page .anime-detail-main .anime-share-wrap .anime-inline-share { min-height: 42px; height: 42px; }
body.anime-detail-page .anime-detail-main .anime-detail-chip { padding: 8px 13px; color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .13); background: rgba(13, 15, 21, .68); box-shadow: none; }
body.anime-detail-page .anime-detail-main .anime-detail-chip-primary { background: rgba(var(--anime-accent-rgb), .15); border-color: rgba(var(--anime-accent-rgb), .34); }
body.anime-detail-page .anime-detail-main .anime-detail-chip-secondary { min-width: 0; }
body.anime-detail-page .anime-detail-main .anime-inline-bookmark,
body.anime-detail-page .anime-detail-main .anime-share-wrap,
body.anime-detail-page .anime-detail-main .anime-share-wrap .anime-inline-share { width: 42px; }
body.anime-detail-page .anime-episodes-jump { display: none; }

@media (max-width: 900px) {
    body.anime-detail-page .anime-detail-content { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); padding-top: 96px; }
    body.anime-detail-page .anime-poster-wrap { width: min(100%, 210px); }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-content { width: calc(100% - 24px); gap: 22px; padding-top: 86px; padding-bottom: 30px; }
    body.anime-detail-page .anime-poster-wrap { width: min(100%, 180px); }
    body.anime-detail-page .anime-detail-main { gap: 12px; overflow: hidden; }
    body.anime-detail-page .anime-detail-main > * { min-width: 0; max-width: 100%; }
    body.anime-detail-page .anime-detail-heading h1 { width: 100%; font-size: clamp(25px, 7.6vw, 32px); overflow-wrap: anywhere; word-break: break-word; }
    body.anime-detail-page .anime-description-card p { font-size: 13.5px; overflow-wrap: anywhere; }
    body.anime-detail-page .anime-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
    body.anime-detail-page .anime-detail-main .anime-side-watch { width: 100%; min-height: 46px; }
    body.anime-detail-page .anime-detail-main .anime-action-row { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.anime-detail-page .anime-detail-main .anime-detail-chip-primary,
    body.anime-detail-page .anime-detail-main .anime-detail-chip-secondary,
    body.anime-detail-page .anime-detail-main .anime-detail-chip-status { grid-column: span 2; }
    body.anime-detail-page .anime-detail-main .anime-inline-bookmark,
    body.anime-detail-page .anime-detail-main .anime-share-wrap,
    body.anime-detail-page .anime-detail-main .anime-share-wrap .anime-inline-share { width: 100%; }
}

/* Final reference banner overrides. */
body.anime-detail-page .anime-detail-hero { min-height: 0; background: radial-gradient(circle at 70% 16%, rgba(var(--anime-accent-rgb), .18), transparent 36%), #080a0e; }
body.anime-detail-page .anime-detail-overlay { background: linear-gradient(180deg, rgba(7, 9, 13, .3) 0%, rgba(7, 9, 13, .58) 55%, #080a0e 100%), linear-gradient(90deg, rgba(7, 9, 13, .88) 0%, rgba(7, 9, 13, .38) 46%, rgba(7, 9, 13, .76) 100%); }
body.anime-detail-page .anime-detail-content { grid-template-columns: minmax(200px, 224px) minmax(0, 1fr); gap: clamp(34px, 3.8vw, 54px); width: min(calc(100% - 72px), 1360px); padding-top: 88px; padding-bottom: 34px; align-items: start; }
body.anime-detail-page .anime-detail-backdrop { background-position: center 18%; opacity: .82; filter: saturate(1.04) brightness(.72); }
body.anime-detail-page .anime-detail-card { width: 100%; align-items: stretch; gap: 10px; }
body.anime-detail-page .anime-poster-wrap { width: 100%; border-radius: 12px; }
body.anime-detail-page .anime-poster { aspect-ratio: 2 / 3; border-radius: 12px; }
body.anime-detail-page .anime-poster-badge { display: none; }
body.anime-detail-page .anime-poster-actions { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; width: 100%; }
body.anime-detail-page .anime-poster-actions .anime-side-watch { width: 100%; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: 8px; color: #111318; background: #f7f8fa; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
body.anime-detail-page .anime-poster-actions .anime-side-watch img { filter: brightness(0); }
body.anime-detail-page .anime-poster-actions .anime-side-watch:hover { color: #0b0c0f; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .26); }
body.anime-detail-page .anime-poster-actions .anime-inline-bookmark { width: 46px; height: 46px; min-height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .09); }
body.anime-detail-page .anime-poster-trailer { width: 100%; min-height: 42px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 8px; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .07); font-size: 14px; font-weight: 850; cursor: pointer; }
body.anime-detail-page .anime-detail-main { max-width: none; gap: 14px; padding-top: 4px; }
body.anime-detail-page .anime-detail-heading { display: grid; gap: 5px; padding-left: 18px; border-left: 4px solid rgb(var(--anime-accent-rgb)); }
body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(42px, 4vw, 64px); line-height: 1; letter-spacing: -.045em; }
body.anime-detail-page .anime-alternative-title { margin: 0; color: rgba(255, 255, 255, .56); font-size: 17px; font-weight: 700; }
body.anime-detail-page .anime-meta-info { display: block; }
body.anime-detail-page .anime-meta-line { display: none; }
body.anime-detail-page .anime-summary-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
body.anime-detail-page .anime-score-inline,
body.anime-detail-page .anime-summary-badge { min-height: 31px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 850; }
body.anime-detail-page .anime-score-inline { color: #ffd54a; border-color: rgba(255, 194, 0, .28); background: rgba(255, 194, 0, .11); }
body.anime-detail-page .anime-summary-badge-accent { color: #48d9f4; border-color: rgba(42, 205, 235, .3); background: rgba(42, 205, 235, .12); }
body.anime-detail-page .anime-summary-badge-status { color: #47e1a0; border-color: rgba(39, 206, 132, .28); background: rgba(39, 206, 132, .11); }
body.anime-detail-page .anime-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 17px 20px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)); box-shadow: 0 14px 32px rgba(0, 0, 0, .13); }
body.anime-detail-page .anime-hero-fact { display: grid; gap: 5px; }
body.anime-detail-page .anime-hero-fact span,
body.anime-detail-page .anime-description-label { color: rgba(255, 255, 255, .42); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
body.anime-detail-page .anime-hero-fact strong { color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 850; }
body.anime-detail-page .anime-info-pills { display: flex; gap: 8px; }
body.anime-detail-page .anime-info-pill { min-height: 30px; padding: 6px 15px; border-radius: 999px; color: rgba(255, 255, 255, .84); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); }
body.anime-detail-page .anime-description-card { max-width: none; padding: 17px 20px 18px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 12px; background: rgba(4, 6, 9, .68); box-shadow: none; }
body.anime-detail-page .anime-description-label { display: block; margin-bottom: 10px; }
body.anime-detail-page .anime-description-toggle { padding: 0; }
body.anime-detail-page .anime-description-card p { color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.6; }
body.anime-detail-page .anime-description-toggle.is-collapsed,
body.anime-detail-page .anime-description-toggle.is-collapsed p { -webkit-line-clamp: 3; }
body.anime-detail-page .anime-hero-actions { display: block; margin-top: -4px; }
body.anime-detail-page .anime-hero-actions .anime-action-row { display: flex; width: auto; gap: 7px; }
body.anime-detail-page .anime-hero-actions .anime-detail-chip { width: auto; min-height: 34px; height: 34px; padding: 6px 11px; font-size: 11px; grid-column: auto; }
body.anime-detail-page .anime-hero-actions .anime-share-wrap,
body.anime-detail-page .anime-hero-actions .anime-inline-share { width: 34px; min-height: 34px; height: 34px; }

@media (max-width: 900px) {
    body.anime-detail-page .anime-detail-hero { min-height: auto; }
    body.anime-detail-page .anime-detail-content { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); gap: 28px; padding-top: 92px; }
    body.anime-detail-page .anime-detail-card { width: min(100%, 220px); }
    body.anime-detail-page .anime-detail-heading { justify-items: start; text-align: left; }
    body.anime-detail-page .anime-detail-title-row { justify-content: flex-start; text-align: left; }
    body.anime-detail-page .anime-detail-heading h1 { text-align: left; }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-content { width: calc(100% - 24px); padding-top: 82px; padding-bottom: 28px; }
    body.anime-detail-page .anime-detail-card { width: min(100%, 190px); }
    body.anime-detail-page .anime-detail-main { overflow: visible; }
    body.anime-detail-page .anime-detail-heading { padding-left: 13px; }
    body.anime-detail-page .anime-detail-heading h1 { font-size: clamp(29px, 9vw, 38px); }
    body.anime-detail-page .anime-alternative-title { font-size: 14px; }
    body.anime-detail-page .anime-summary-badges,
    body.anime-detail-page .anime-info-pills { justify-content: flex-start; }
    body.anime-detail-page .anime-hero-facts { grid-template-columns: 1fr; gap: 13px; padding: 15px 16px; }
    body.anime-detail-page .anime-description-card { padding: 15px 16px; }
}

/* Desktop banner geometry matched to the wide reference layout. */
@media (min-width: 901px) {
    body.anime-detail-page .anime-detail-content {
        grid-template-columns: 194px minmax(0, 1fr);
        gap: clamp(72px, 5vw, 96px);
        width: calc(100% - 80px);
        max-width: none;
        padding-top: 74px;
        padding-bottom: 34px;
    }

    body.anime-detail-page .anime-poster,
    body.anime-detail-page .anime-poster-wrap {
        aspect-ratio: 194 / 331;
    }

    body.anime-detail-page .anime-detail-main {
        width: 100%;
    }

    body.anime-detail-page .anime-description-card {
        margin-top: 8px;
    }
}

body.anime-detail-page .anime-detail-backdrop {
    opacity: .68;
    filter: saturate(.88) brightness(.58);
}

body.anime-detail-page .anime-detail-overlay {
    background:
        linear-gradient(180deg, rgba(7, 9, 13, .46) 0%, rgba(7, 9, 13, .62) 52%, #080a0e 100%),
        linear-gradient(90deg, rgba(7, 9, 13, .82) 0%, rgba(7, 9, 13, .38) 46%, rgba(7, 9, 13, .72) 100%);
}

@media (min-width: 901px) {
    body.anime-detail-page .anime-poster-wrap { transform: translateY(-20px); }
    body.anime-detail-page .anime-poster-actions { transform: translateY(-8px); }
    body.anime-detail-page .anime-poster-trailer { transform: translateY(-2px); }
    body.anime-detail-page .anime-detail-heading { transform: translateY(-20px); }
    body.anime-detail-page .anime-meta-info { transform: translateY(-10px); }
    body.anime-detail-page .anime-description-card { margin-top: 15px; padding-top: 25px; }
}

body.anime-detail-page .anime-hero-fact strong { display: flex; align-items: center; gap: 7px; }
body.anime-detail-page .anime-hero-fact strong img { width: 13px; height: 13px; object-fit: contain; opacity: .9; }
body.anime-detail-page .anime-hero-fact:first-child strong img { filter: sepia(1) saturate(4) hue-rotate(275deg) brightness(1.25); }
body.anime-detail-page .anime-hero-fact:last-child strong img { filter: sepia(1) saturate(4) hue-rotate(165deg) brightness(1.25); }

/* Give the banner breathing room and a softer ending. */
body.anime-detail-page .anime-detail-hero {
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
}

body.anime-detail-page .anime-detail-hero::after {
    height: 82px;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0), rgba(8, 10, 14, .86) 58%, #080a0e 100%);
}

@media (min-width: 901px) {
    body.anime-detail-page .anime-detail-content {
        padding-top: 98px;
        padding-bottom: 68px;
    }
}

@media (max-width: 900px) {
    body.anime-detail-page .anime-detail-hero { margin-bottom: 24px; }
    body.anime-detail-page .anime-detail-content { padding-top: 108px; padding-bottom: 48px; }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-hero { margin-bottom: 18px; }
    body.anime-detail-page .anime-detail-content { padding-top: 96px; padding-bottom: 42px; }
}

/* Keep the separation visual, not spatial. */
body.anime-detail-page .anime-detail-hero { margin-bottom: 0; }
body.anime-detail-page .anime-detail-hero::after { height: 54px; }
body.anime-detail-page .anime-extra-grid { margin-top: 22px; }

@media (min-width: 901px) {
    body.anime-detail-page .anime-detail-content { padding-bottom: 20px; }
}

@media (max-width: 900px) {
    body.anime-detail-page .anime-detail-hero { margin-bottom: 0; }
    body.anime-detail-page .anime-detail-content { padding-bottom: 28px; }
    body.anime-detail-page .anime-extra-grid { margin-top: 18px; }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-hero { margin-bottom: 0; }
    body.anime-detail-page .anime-detail-content { padding-bottom: 24px; }
    body.anime-detail-page .anime-extra-grid { margin-top: 14px; }
}

/* Seamless hero-to-page transition used by the reference sites. */
body.anime-detail-page,
body.anime-detail-page .anime-detail-shell {
    background-color: #101114;
}

body.anime-detail-page .anime-detail-hero {
    margin-bottom: 0;
    border-bottom: 0;
    background-color: #101114;
}

body.anime-detail-page .anime-detail-overlay {
    background:
        linear-gradient(180deg, rgba(7, 9, 13, .46) 0%, rgba(7, 9, 13, .58) 48%, rgba(16, 17, 20, .92) 86%, #101114 100%),
        linear-gradient(90deg, rgba(7, 9, 13, .82) 0%, rgba(7, 9, 13, .38) 46%, rgba(7, 9, 13, .72) 100%);
}

body.anime-detail-page .anime-detail-hero::after {
    height: 110px;
    background: linear-gradient(180deg, rgba(16, 17, 20, 0), rgba(16, 17, 20, .78) 55%, #101114 100%);
}

body.anime-detail-page .anime-extra-grid {
    margin-top: 0;
    padding-top: 24px;
    background: #101114;
}

body.anime-detail-page .anime-characters-panel {
    background-color: #101114;
}

@media (max-width: 900px) {
    body.anime-detail-page .anime-extra-grid { margin-top: 0; padding-top: 20px; }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-extra-grid { margin-top: 0; padding-top: 16px; }
}

/* Slightly taller banner with lower-positioned content. */
@media (min-width: 901px) {
    body.anime-detail-page .anime-detail-hero {
        min-height: clamp(640px, 35vw, 690px);
    }

    body.anime-detail-page .anime-detail-content {
        padding-top: 116px;
        padding-bottom: 36px;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    body.anime-detail-page .anime-detail-content {
        padding-top: 120px;
        padding-bottom: 38px;
    }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-content {
        padding-top: 106px;
        padding-bottom: 32px;
    }
}

/* Wider poster proportions. */
@media (min-width: 901px) {
    body.anime-detail-page .anime-detail-content {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    body.anime-detail-page .anime-poster,
    body.anime-detail-page .anime-poster-wrap {
        aspect-ratio: 220 / 331;
    }
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-card {
        width: min(100%, 200px);
    }
}

/* Poster is decorative; hover only adds a soft zoom. */
body.anime-detail-page .anime-poster-wrap {
    cursor: default;
}

body.anime-detail-page .anime-poster {
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), filter .42s ease;
    transform-origin: center;
}

body.anime-detail-page .anime-poster-wrap:hover .anime-poster {
    transform: scale(1.035);
    filter: brightness(1.04) saturate(1.04);
}

@media (prefers-reduced-motion: reduce) {
    body.anime-detail-page .anime-poster { transition: none; }
    body.anime-detail-page .anime-poster-wrap:hover .anime-poster { transform: none; }
}

/* Poster utility row: list status and sharing live with the poster controls. */
body.anime-detail-page .anime-detail-card .anime-hero-actions {
    width: 100%;
    display: block;
    margin: 0;
}

body.anime-detail-page .anime-detail-card .anime-action-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 42px;
    gap: 7px;
}

body.anime-detail-page .anime-detail-card .anime-detail-chip,
body.anime-detail-page .anime-detail-card .anime-share-wrap,
body.anime-detail-page .anime-detail-card .anime-inline-share {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    margin: 0;
}

body.anime-detail-page .anime-detail-card .anime-detail-chip {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
}

body.anime-detail-page .anime-detail-card .anime-inline-share {
    border-radius: 8px;
}

@media (max-width: 640px) {
    body.anime-detail-page .anime-detail-card .anime-action-row {
        grid-template-columns: minmax(0, 1fr) 62px 38px;
        gap: 6px;
    }

    body.anime-detail-page .anime-detail-card .anime-detail-chip,
    body.anime-detail-page .anime-detail-card .anime-share-wrap,
    body.anime-detail-page .anime-detail-card .anime-inline-share {
        min-height: 38px;
        height: 38px;
    }
}

/* Final stationary trailer interaction. */
body.anime-detail-page .anime-poster-trailer {
    transform: none !important;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, filter .22s ease;
}

body.anime-detail-page .anime-poster-trailer:hover,
body.anime-detail-page .anime-poster-trailer:focus-visible {
    transform: none !important;
    color: #fff;
    background: rgba(var(--anime-accent-rgb), .14);
    border-color: rgba(var(--anime-accent-rgb), .38);
    box-shadow: 0 8px 20px rgba(var(--anime-accent-rgb), .14);
    filter: brightness(1.06);
}

body.anime-detail-page .anime-poster-trailer:active {
    transform: none !important;
    filter: brightness(.96);
    box-shadow: 0 4px 12px rgba(var(--anime-accent-rgb), .1);
}

/* Balanced mobile anime titles. */
@media (max-width: 1100px) {
    body.anime-detail-page .anime-detail-heading {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        padding-left: 0 !important;
        border-left: 0 !important;
        justify-items: center !important;
        justify-self: center !important;
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }

    body.anime-detail-page .anime-detail-title-row {
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body.anime-detail-page .anime-detail-heading h1,
    body.anime-detail-page .anime-alternative-title {
        display: block;
        width: fit-content !important;
        max-width: min(100%, calc(100vw - 32px));
        margin-left: auto;
        margin-right: auto;
        overflow-wrap: anywhere;
        text-align: center !important;
        text-wrap: balance;
    }
}