/* --------------------------------- */
        /* 1. 기본 및 테마 설정 (Root & Theme) */
        /* --------------------------------- */
        :root {
            --hb-blue: #4f8fcf;
            --hb-indigo: #6610f2;
            --hb-purple: #6f42c1;
            --hb-pink: #d63384;
            --hb-red: #dc3545;
            --hb-orange: #fd7e14;
            --hb-yellow: #ffca5f;
            --hb-green: #198754;
            --hb-teal: #20c997;
            --hb-cyan: #0dcaf0;
        }

        /* --- 라이트 모드 (기본값) --- */
        [data-bs-theme="light"] {
            --bs-primary: var(--hb-blue);
            --bs-primary-rgb: 79, 143, 207;
            --bs-secondary: #6e7e8f;
            --bs-secondary-rgb: 110, 126, 143;
            --bs-body-bg: #f8fbff;
            --bs-body-color: #1f2e3f;
            --bs-tertiary-bg: #eef4fb;
            --bs-tertiary-bg-rgb: 238, 244, 251;
            --bs-border-color: #d8e2ee;
            --bs-link-color: var(--hb-blue);
            --bs-link-hover-color: #3f79b7;
        }

        /* --- 다크 모드 --- */
        [data-bs-theme="dark"] {
            --bs-primary: #6aa6df;
            --bs-primary-rgb: 106, 166, 223;
            --bs-secondary: #96a6b8;
            --bs-secondary-rgb: 150, 166, 184;
            --bs-body-bg: #0b0f17;
            --bs-body-color: #e6edf5;
            --bs-tertiary-bg: #121a27;
            --bs-border-color: #223044;
            --bs-link-color: var(--hb-blue);
            --bs-link-hover-color: #8fc0ef;
        }

        /* --------------------------------- */
        /* 2. 전역 스타일 (Global Styles)    */
        /* --------------------------------- */
        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        html.theme-transitioning *,
        html.theme-transitioning *::before,
        html.theme-transitioning *::after {
            transition: background-color 0.35s ease,
                        color 0.35s ease,
                        border-color 0.35s ease,
                        box-shadow 0.35s ease,
                        fill 0.35s ease,
                        stroke 0.35s ease !important;
        }

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

        /* --------------------------------- */
        /* 3. 컴포넌트 오버라이드 (Components) */
        /* --------------------------------- */

        /* 1. 페이지 로드 시 부드러운 Fade-in 효과 */

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

        /* 콘텐츠 영역에만 애니메이션 적용 */
        .page-content {
            animation: fadeIn 0.4s ease-in-out;
        }

        /* 모든 상호작용 요소에 부드러운 전환 효과 적용 (이전과 동일) */
        a, .btn, .nav-link, .dropdown-item, .accordion-button, .form-control,
        .card, .sale-card, .sale-list-item, .anime-poster, .event-item {
            transition: color 0.2s ease-in-out,
                        background-color 0.2s ease-in-out,
                        border-color 0.2s ease-in-out,
                        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 공통 호버 효과 (이전과 동일) */
        .card:hover, .sale-card:hover, .sale-list-item:hover, .anime-poster:hover, .event-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.12);
        }

        /* --- 네비게이션 바 --- */
        .navbar {
            background-color: rgba(var(--bs-tertiary-bg-rgb), 0.85); /* 반투명 배경 */
            backdrop-filter: blur(10px); /* 배경 블러 효과 */
            border-bottom: 1px solid var(--bs-border-color);
        }

        .navbar-nav .nav-link {
            position: relative; /* ::after 유사 요소를 위한 기준점 */
            padding: 0.75rem 0;
            margin: 0 0.75rem;
            font-weight: 500;
            color: var(--bs-secondary);
            background-color: transparent;
            border: none;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        /* ::after 유사 요소를 사용하여 밑줄 생성 */
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--bs-secondary);
            transform: scaleX(0); /* 처음에는 밑줄 숨기기 */
            transform-origin: center;
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* 부드러운 전환 효과 */
        }

        /* 마우스 올렸을 때 스타일 */
        .navbar-nav .nav-link:hover {
            color: var(--bs-body-color);
            transform: translateY(-3px) scale(1); /* 위로 떠오르며 커지는 효과 */
        }
        .navbar-nav .nav-link:hover::after {
             transform: scaleX(1); /* 마우스를 올리면 밑줄 나타나기 */
        }

        /* 현재 활성화된 메뉴 스타일 */
        .navbar-nav .nav-link.active {
            color: var(--bs-body-color);
            font-weight: 700;
        }
        .navbar-nav .nav-link.active::after {
            transform: scaleX(1); /* 활성 메뉴는 항상 밑줄 표시 */
        }

        .navbar .admin-nav-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar .admin-nav-toggle__content {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
        }

        .navbar .admin-nav-toggle__identity {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
        }

        .navbar .admin-nav-toggle__name {
            white-space: nowrap;
        }

        .navbar .admin-nav-toggle__badge {
            flex-shrink: 0;
            line-height: 1;
        }

        /* ▼▼▼▼▼ [수정] 드롭다운 호버 기능 제거 ▼▼▼▼▼ */
        /* @media (min-width: 992px) {
            .navbar .nav-item.dropdown:hover .dropdown-menu {
                display: block;
                margin-top: 0;
                opacity: 0;
                animation: fadeIn 0.3s forwards;
            }
        } */
        /* ▲▲▲▲▲ 수정 완료 ▲▲▲▲▲ */


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

        .navbar-logo {
            /* 실제 색상은 배경색으로 칠합니다. */
            background-color: var(--bs-body-color);
            margin-left: 20px;
            /* SVG 파일은 모양(마스크)으로만 사용합니다. */
            -webkit-mask-image: var(--logo-url);
            mask-image: var(--logo-url);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        .navbar-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            margin: 0 0 0 12px;
            line-height: 1;
        }

        /* --- 버튼 & 페이지네이션 스타일 --- */
        .btn {
            border-radius: 50px;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.2s ease-in-out;
            border-width: 2px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.12);
        }
        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.8rem;
        }
        .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
        .btn-primary:hover { background-color: #3f79b7; border-color: #3f79b7; color: #fff; }
        .btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
        .btn-outline-primary:hover { background-color: var(--bs-primary); color: #fff; }
        .btn-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
        .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; color: #fff; }
        .btn-outline-secondary { color: var(--bs-secondary); border-color: var(--bs-secondary); }
        .btn-outline-secondary:hover { background-color: var(--bs-secondary); color: var(--bs-tertiary-bg); }

        .share-toolbar [data-share-network],
        .share-toolbar [data-share-copy] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
        }

        .share-toolbar .share-icon-mask {
            width: 14px;
            height: 14px;
            display: inline-block;
            background-color: currentColor;
            -webkit-mask-image: var(--share-icon);
            mask-image: var(--share-icon);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            vertical-align: middle;
        }

        .share-toolbar [data-share-copy] .share-icon-mask {
            width: 13px;
            height: 13px;
        }

        #toast-stack,
        #runtime-toast-stack {
            z-index: 3200;
            width: min(92vw, 360px);
            pointer-events: none;
        }

        #toast-stack .toast,
        #runtime-toast-stack .toast {
            pointer-events: auto;
        }

        .toast-stack-modern {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .toast-modern {
            border-radius: 14px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
            border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
            backdrop-filter: blur(4px);
        }

        .toast-modern .toast-body {
            font-weight: 600;
            letter-spacing: .01em;
            padding: .72rem .85rem;
        }

        @media (max-width: 575.98px) {
            #toast-stack,
            #runtime-toast-stack {
                left: .75rem !important;
                right: .75rem !important;
                bottom: .75rem !important;
                width: auto;
            }
        }
        .btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff; }
        .btn-danger:hover { background-color: #c82333; border-color: #bd2130; color: #fff; }
        .btn-warning { background-color: #ffc107; border-color: #ffc107; color: #212529; }
        .btn-warning:hover { background-color: #e0a800; border-color: #d39e00; color: #212529; }
        .btn-success { background-color: #198754; border-color: #198754; color: #fff; }
        .btn-success:hover { background-color: #157347; border-color: #146c43; color: #fff; }
        .btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #000; }
        .btn-info:hover { background-color: #31d2f2; border-color: #25cff2; color: #000; }

        [data-bs-theme="light"] .btn-primary { background-color: #4f8fcf; border-color: #4f8fcf; }
        [data-bs-theme="light"] .btn-primary:hover { background-color: #3f79b7; border-color: #3f79b7; }
        [data-bs-theme="light"] .btn-outline-primary { color: #4f8fcf; border-color: #4f8fcf; }
        [data-bs-theme="light"] .btn-outline-primary:hover { background-color: #4f8fcf; color: #fff; }

        .navbar-brand-logo {
            display: block;
            object-fit: contain;
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }
        
        .pagination { gap: 0.5rem; }
        .pagination .page-link {
            border-radius: 50px !important;
            border: 2px solid var(--bs-border-color);
            color: var(--bs-secondary);
            font-weight: 600;
            padding: 0.5rem 1rem;
            min-width: 44px;
            text-align: center;
            transition: all 0.2s ease-in-out;
        }
        .pagination .page-link:hover {
            background-color: var(--bs-tertiary-bg);
            border-color: var(--bs-primary);
            color: var(--bs-primary);
            transform: translateY(-2px);
        }
        .pagination .page-item.active .page-link {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
        }
        .pagination .page-item.disabled .page-link {
            background-color: transparent;
            border-color: var(--bs-border-color);
            color: var(--bs-border-color);
            pointer-events: none;
        }
        .pagination .page-item.disabled .page-link:hover { transform: none; }

        /* --- 카드 & 폼 --- */
        .card, .form-control, .form-select, .bg-light {
            background-color: var(--bs-tertiary-bg) !important;
            border: 1px solid var(--bs-border-color);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
        }

        /* --- 테마 토글 스위치 --- */
        .theme-switch-wrapper { display: flex; align-items: center; gap: 8px; }
        .theme-switch { display: inline-block; height: 24px; position: relative; width: 50px; }
        .theme-switch input { display:none; }
        .slider { background-color: #555; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
        .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; }
        input:checked + .slider:before { transform: translateX(26px); }
        .slider.round { border-radius: 34px; }
        .slider.round:before { border-radius: 50%; }
        .theme-switch-wrapper .fa-sun,
        .theme-switch-wrapper .fa-moon {
            color: var(--bs-secondary); /* 아이콘 색상을 부드러운 회색 계열로 통일 */
            transition: color 0.2s ease-in-out;
        }

        .navbar-logo {
            background-color: var(--bs-body-color);
            -webkit-mask-image: var(--logo-url);
            mask-image: var(--logo-url);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        [data-bs-theme="light"] .navbar-logo {
            filter: brightness(0%);
        }
        .site-footer {
            padding: 3rem 0;
            margin-top: 3rem;
            border-top: 1px solid var(--bs-border-color);
        }
        .footer-logo {
            height: 28px;
            width: auto;
            margin-bottom: 0.5rem;
        }
        .site-footer h5 {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .footer-links {
            list-style: none;
            padding: 0;
        }
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        .footer-links a {
            text-decoration: none;
            color: var(--bs-secondary);
            transition: color 0.2s ease-in-out;
        }
        .footer-links a:hover {
            color: var(--bs-primary);
        }
        .footer-links a .fa-fw {
            margin-right: 0.5rem;
        }

        .footer-controls {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-direction: column;
    height: 100%;
        }
        .footer-social-links {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 0.35rem;
            gap: 10px;
        }
        .footer-social-link {
            width: 38px;
            height: 38px;
            border: 1px solid var(--bs-border-color);
            border-radius: 10px;
            background: var(--bs-tertiary-bg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .footer-social-link:hover {
            border-color: var(--bs-primary);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
        }
        .footer-social-icon {
            width: 16px;
            height: 16px;
            object-fit: contain;
            filter: brightness(0) saturate(100%);
        }
        [data-bs-theme="dark"] .footer-social-icon {
            filter: brightness(0) invert(1);
        }
        .footer-theme-switcher-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .footer-lang-dropdown {
            position: relative;
            width: 162px;
        }
        .footer-lang-header {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            margin-bottom: 0.32rem;
            color: var(--bs-secondary);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .footer-lang-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid var(--bs-border-color);
            background: var(--bs-tertiary-bg);
            color: var(--bs-body-color);
            border-radius: 12px;
            padding: 0.42rem 0.56rem;
            font-size: 0.84rem;
            font-weight: 600;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .footer-lang-toggle:hover {
            border-color: var(--bs-primary);
            transform: translateY(-1px);
        }
        .footer-lang-dropdown.open .footer-lang-toggle {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
        }
        .footer-lang-toggle .chevron {
            color: var(--bs-secondary);
            font-size: 0.78rem;
            transition: transform 0.2s ease;
        }
        .footer-lang-dropdown.open .footer-lang-toggle .chevron {
            transform: rotate(180deg);
        }
        .footer-lang-menu {
            position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    bottom: calc(100% + 8px);
    min-width: 162px;
            width: max-content;
            border: 1px solid var(--bs-border-color);
            background: var(--bs-body-bg);
            border-radius: 12px;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
            padding: 0.28rem;
            z-index: 20;
            display: none;
        }
        .footer-lang-dropdown.open .footer-lang-menu {
            display: block;
        }
        .footer-lang-option {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--bs-body-color);
            border-radius: 8px;
            padding: 0.4rem 0.5rem;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.84rem;
            font-weight: 500;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .footer-lang-option:hover {
            background-color: var(--bs-tertiary-bg);
        }
        .footer-lang-option .check {
            opacity: 0;
            color: var(--bs-primary);
            font-size: 0.82rem;
        }
        .footer-lang-option.is-active {
            background-color: rgba(var(--bs-primary-rgb), 0.12);
            color: var(--bs-primary);
            font-weight: 700;
        }
        .footer-lang-option.is-active .check {
            opacity: 1;
        }

        /* 모바일 화면에서 중앙 정렬 */
        @media (max-width: 767px) {
            .site-footer .row > div {
                text-align: center;
                margin-bottom: 2rem;
            }
            .footer-links {
                margin-top: 1rem;
            }
            .footer-social-links {
                justify-content: center;
            }
            /* 모바일에서 테마 스위처를 중앙으로 정렬 */
            .footer-theme-switcher-container {
                justify-content: center;
                align-items: center;
            }
            .footer-controls {
                align-items: center;
            }
            .footer-lang-dropdown {
                margin: 0 auto;
                width: 156px;
            }
            .footer-lang-header {
                justify-content: center;
            }
        }

        /* 모달 디자인 스타일 */
        #hb-modal .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            text-align: center;
            padding: 2rem;
        }
        #hb-modal .modal-header,
        #hb-modal .modal-footer {
            border: none;
            padding: 0;
            justify-content: center;
        }
        #hb-modal .modal-header {
            flex-direction: column;
            margin-bottom: 1rem;
        }
        #hb-modal .modal-icon-wrapper {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2.5rem;
        }
        #hb-modal .modal-title {
            font-weight: bold;
            font-size: 1.5rem;
        }
        #hb-modal .modal-body {
            padding: 0;
            margin-bottom: 2rem;
            color: var(--bs-secondary);
        }
        #hb-modal .modal-footer {
            gap: 1rem;
        }
        #hb-modal .modal-dialog.hb-merge-preview-dialog {
            max-width: min(1280px, 92vw);
        }
        #hb-modal .modal-body.hb-merge-preview-body {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: min(72vh, 900px);
            padding: 0;
        }
        #hb-modal .hb-merge-comparison-grid {
            --bs-gutter-x: 1rem;
            margin-left: 0;
            margin-right: 0;
        }
        #hb-modal .hb-merge-comparison-panel {
            min-height: 220px;
            max-height: min(56vh, 680px);
            overflow-y: auto;
            overflow-x: hidden;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
            font-size: 0.95rem;
            line-height: 1.55;
        }
        #hb-modal.modal-success .modal-icon-wrapper { background-color: var(--bs-green); }
        #hb-modal.modal-success .btn-primary { background-color: var(--bs-green); border-color: var(--bs-green); }
        #hb-modal.modal-error .modal-icon-wrapper { background-color: var(--bs-danger); }
        #hb-modal.modal-error .btn-primary { background-color: var(--bs-danger); border-color: var(--bs-danger); }
        #hb-modal.modal-warning .modal-icon-wrapper { background-color: var(--bs-yellow); }
        #hb-modal.modal-warning .btn-primary { background-color: var(--bs-yellow); border-color: var(--bs-yellow); color: #000; }
        #hb-modal.modal-confirm .modal-icon-wrapper { background-color: var(--bs-primary); }

        .fade.in { opacity: 1; }
        .modal.fade .modal-dialog {
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.2s ease-in-out;
        }
        .modal.show .modal-dialog {
            transform: scale(1);
            opacity: 1;
        }
    .pagination-mobile {
        display: none; /* 모바일용은 기본적으로 숨김 */
    }

    @media (max-width: 576px) {
        .pagination-desktop {
            display: none; /* 모바일 화면에서 데스크톱용 숨김 */
        }
        .pagination-mobile {
            display: flex; /* 모바일 화면에서 모바일용 표시 */
        }
    }
        /* --------------------------------- */
        /* Admin List UI                     */
        /* --------------------------------- */
        .admin-ui {
            --admin-accent: #ff7a59;
            --admin-accent-strong: #ff5a3d;
            --admin-bg: linear-gradient(120deg, rgba(255, 226, 205, 0.45), rgba(210, 238, 246, 0.55));
            --admin-surface: rgba(255, 255, 255, 0.9);
            --admin-border: rgba(15, 23, 42, 0.08);
            --admin-muted: #6c6f75;
            --admin-chip-bg: #f1f3f5;
            --admin-chip-text: #2f3337;
            --admin-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
        }

        [data-bs-theme="dark"] .admin-ui {
            --admin-accent: #ff8c6a;
            --admin-accent-strong: #ff6a47;
            --admin-bg: linear-gradient(120deg, rgba(33, 38, 45, 0.7), rgba(25, 28, 34, 0.85));
            --admin-surface: rgba(22, 26, 31, 0.9);
            --admin-border: rgba(255, 255, 255, 0.08);
            --admin-muted: #a4a8ae;
            --admin-chip-bg: rgba(255, 255, 255, 0.08);
            --admin-chip-text: #e6e9ed;
            --admin-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }

        .admin-ui .admin-hero {
            background: var(--admin-bg);
            border-radius: 26px;
            padding: 1.6rem 1.8rem;
            box-shadow: var(--admin-shadow);
            border: 1px solid var(--admin-border);
        }

        .admin-ui .admin-hero h2 {
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .admin-ui .admin-hero p {
            color: var(--admin-muted);
            margin-bottom: 0;
        }

        .admin-ui .admin-card {
            background: var(--admin-surface);
            border-radius: 22px;
            border: 1px solid var(--admin-border);
            box-shadow: var(--admin-shadow);
        }

        .admin-ui .admin-card .card-header {
            background: transparent;
            border-bottom: 1px solid var(--admin-border);
            font-weight: 600;
        }

        .admin-ui .admin-filter {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 0.9rem 1rem;
            align-items: end;
        }

        .admin-ui .admin-filter .form-control,
        .admin-ui .admin-filter .form-select {
            border-radius: 12px;
            border: 1px solid var(--admin-border);
            box-shadow: none;
        }

        .admin-ui .admin-actions {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            justify-content: flex-end;
        }

        .admin-ui .admin-btn {
            border-radius: 999px;
            padding: 0.45rem 1.1rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            box-shadow: none;
        }

        .admin-ui .admin-btn--primary {
            background: var(--admin-accent);
            border-color: var(--admin-accent);
            color: #fff;
        }

        .admin-ui .admin-btn--primary:hover {
            background: var(--admin-accent-strong);
            border-color: var(--admin-accent-strong);
            color: #fff;
        }

        .admin-ui .admin-btn--ghost {
            background: transparent;
            border: 1px solid var(--admin-border);
            color: var(--admin-muted);
        }

        .admin-ui .admin-table {
            border-collapse: separate;
            border-spacing: 0 12px;
            margin-bottom: 0;
        }

        .admin-ui .admin-table thead th {
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--admin-muted);
            border-bottom: none;
            word-break: keep-all;
        }

        .admin-ui .admin-table tbody tr {
            background: var(--admin-surface);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
        }

        [data-bs-theme="dark"] .admin-ui .admin-table tbody tr {
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
        }

        .admin-ui .admin-table tbody td {
            border-top: none;
            vertical-align: middle;
        }

        .admin-ui .admin-table tbody tr td:first-child {
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
        }

        .admin-ui .admin-table tbody tr td:last-child {
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
        }

        .admin-ui .admin-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: var(--admin-chip-bg);
            color: var(--admin-chip-text);
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .admin-ui .admin-chip--blue { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; }
        .admin-ui .admin-chip--purple { background: rgba(147, 51, 234, 0.16); color: #7e22ce; }
        .admin-ui .admin-chip--teal { background: rgba(13, 148, 136, 0.16); color: #0f766e; }
        .admin-ui .admin-chip--orange { background: rgba(249, 115, 22, 0.18); color: #c2410c; }
        .admin-ui .admin-chip--pink { background: rgba(236, 72, 153, 0.16); color: #be185d; }
        .admin-ui .admin-chip--green { background: rgba(34, 197, 94, 0.16); color: #15803d; }
        .admin-ui .admin-chip--red { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
        .admin-ui .admin-chip--yellow { background: rgba(245, 158, 11, 0.18); color: #b45309; }
        .admin-ui .admin-chip--gray { background: rgba(107, 114, 128, 0.2); color: #374151; }

        .admin-ui .admin-translation-tooltip {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: help;
            border-bottom: 1px dashed rgba(107, 114, 128, 0.45);
        }

        .admin-ui .admin-translation-tooltip-box {
            position: absolute;
            left: 50%;
            bottom: calc(100% + 10px);
            transform: translateX(-50%);
            background: rgba(17, 24, 39, 0.94);
            color: #fff;
            padding: 8px 10px;
            border-radius: 8px;
            font-size: 0.75rem;
            line-height: 1.45;
            white-space: normal;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: 20;
            min-width: 118px;
        }

        .admin-ui .admin-translation-line {
            display: block;
            font-weight: 600;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .admin-ui .admin-translation-line + .admin-translation-line {
            margin-top: 2px;
        }

        .admin-ui .admin-translation-line.is-on {
            color: rgba(255, 255, 255, 0.96);
        }

        .admin-ui .admin-translation-line.is-off {
            color: rgba(148, 163, 184, 0.75);
        }

        .admin-ui .admin-translation-tooltip::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: calc(100% + 4px);
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(17, 24, 39, 0.94);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: 20;
        }

        .admin-ui .admin-translation-tooltip:hover .admin-translation-tooltip-box,
        .admin-ui .admin-translation-tooltip:hover::before,
        .admin-ui .admin-translation-tooltip:focus-visible .admin-translation-tooltip-box,
        .admin-ui .admin-translation-tooltip:focus-visible::before {
            opacity: 1;
            visibility: visible;
        }

        [data-bs-theme="dark"] .admin-ui .admin-chip--blue { color: #93c5fd; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--purple { color: #d8b4fe; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--teal { color: #99f6e4; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--orange { color: #fdba74; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--pink { color: #f9a8d4; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--green { color: #86efac; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--red { color: #fca5a5; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--yellow { color: #fcd34d; }
        [data-bs-theme="dark"] .admin-ui .admin-chip--gray { color: #d1d5db; }

        .admin-ui .admin-meta {
            font-size: 0.85rem;
            color: var(--admin-muted);
        }

        .admin-ui .admin-table .btn {
            text-transform: none;
            letter-spacing: 0;
            box-shadow: none;
            white-space: nowrap;
            font-size: 0.76rem;
        }

        .admin-ui .admin-table td.text-end {
            white-space: nowrap;
        }

        .admin-ui .admin-table .admin-country-nowrap {
            white-space: nowrap;
        }

        .platform-icon-list {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .platform-icon {
            height: 20px;
            filter: brightness(0) saturate(100%);
        }

        [data-bs-theme="dark"] .platform-icon {
            filter: brightness(0) saturate(100%) invert(1);
        }

        .admin-ui .card:hover {
            transform: none;
            box-shadow: var(--admin-shadow);
        }

        @media (max-width: 992px) {
            .admin-ui .admin-hero {
                padding: 1.2rem 1.3rem;
            }
            .admin-ui .admin-actions {
                justify-content: flex-start;
                flex-wrap: wrap;
            }
        }

        @media (max-width: 991.98px) {
            .navbar .navbar-collapse {
                max-height: calc(100vh - 72px);
                overflow-y: auto;
                padding-bottom: 1rem;
            }

            .navbar .navbar-nav.align-items-center {
                align-items: stretch !important;
            }

            .navbar .nav-item.dropdown {
                width: 100%;
            }

            .navbar .nav-item.dropdown .nav-link.dropdown-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
            }

            .navbar .nav-item.dropdown .nav-link.dropdown-toggle.admin-nav-toggle {
                gap: 0.75rem;
            }

            .navbar .nav-item.dropdown .nav-link.dropdown-toggle.admin-nav-toggle .admin-nav-toggle__content {
                justify-content: space-between;
                width: 100%;
            }

            .navbar .dropdown-menu,
            .navbar .dropdown-menu-end,
            .navbar .dropdown-menu-end[data-bs-popper] {
                position: static !important;
                inset: auto !important;
                transform: none !important;
                width: 100%;
                max-height: min(52vh, 360px);
                overflow-y: auto;
                margin-top: 0.5rem;
                padding: 0.5rem;
                border-radius: 16px;
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
            }

            .navbar .dropdown-menu .dropdown-item {
                white-space: normal;
                padding-top: 0.7rem;
                padding-bottom: 0.7rem;
                border-radius: 10px;
            }
        }

        .link-card-embed {
            margin: .8rem 0;
            border: 1px solid var(--bs-border-color);
            border-radius: 12px;
            background: var(--bs-body-bg);
            overflow: hidden;
            white-space: normal;
        }

        .link-card-anchor {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
            color: inherit;
            text-decoration: none;
            white-space: normal;
            text-align: left;
        }

        .link-card-anchor:hover {
            text-decoration: none;
            color: inherit;
        }

        .link-card-body {
            padding: .75rem .85rem;
            min-width: 0;
            white-space: normal;
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: left;
        }

        .link-card-meta-row {
            display: flex;
            justify-content: flex-start;
            gap: .5rem;
            margin-bottom: .35rem;
            font-size: .74rem;
            color: var(--bs-secondary-color);
            white-space: normal;
        }

        .link-card-site {
            font-size: inherit;
            color: inherit;
        }

        .link-card-title {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.35;
            margin-bottom: .35rem;
            word-break: break-word;
            white-space: normal;
        }

        .link-card-desc {
            font-size: .88rem;
            color: var(--bs-secondary-color);
            line-height: 1.4;
            word-break: break-word;
            margin-bottom: .3rem;
            white-space: normal;
        }

        .link-card-url {
            font-size: .77rem;
            color: var(--bs-secondary-color);
            word-break: break-all;
            white-space: normal;
            margin-top: auto;
        }

        .link-card-thumb-wrap {
            min-height: 100%;
            background: var(--bs-tertiary-bg);
        }

        .link-card-thumb,
        .news-content .link-card-thumb {
            width: 100%;
            height: 100%;
            min-height: 100px;
            object-fit: cover;
            display: block;
            margin: 0;
            border-radius: 0;
        }

        .link-card-badge {
            display: none;
        }

        .link-card-embed.is-internal {
            border-color: rgba(var(--bs-success-rgb), .4);
        }

        @media (max-width: 768px) {
            .link-card-anchor {
                grid-template-columns: 1fr;
            }

            .link-card-thumb,
            .news-content .link-card-thumb {
                min-height: 140px;
            }
        }

        .comments-section {
            border-top: 1px solid var(--bs-border-color);
            margin-top: 3rem;
        }

        .comments-head {
            margin-bottom: 1rem;
        }

        .comments-head__desc {
            color: var(--bs-secondary);
            margin-bottom: 0;
        }

        .comment-compose {
            border: 1px solid var(--bs-border-color);
            border-radius: 14px;
            background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-tertiary-bg));
            padding: 1rem 1rem .75rem;
        }

        .comment-compose__title {
            margin-bottom: .8rem;
            font-weight: 700;
        }

        .comment-thread {
            border-bottom: 1px dashed var(--bs-border-color);
            padding: 1rem 0;
        }

        .comment-thread--reply {
            margin-left: 1.25rem;
            padding-left: 1rem;
            border-left: 2px solid color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color));
        }

        .comment-thread__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            flex-wrap: wrap;
            margin-bottom: .5rem;
        }

        .comment-thread__meta {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .35rem;
            color: var(--bs-secondary);
            font-size: .92rem;
        }

        .comment-thread__author {
            color: var(--bs-body-color);
        }

        .comment-thread__dot {
            opacity: .65;
        }

        .comment-thread__actions .btn {
            text-transform: none;
            letter-spacing: 0;
        }

        .comment-content {
            white-space: pre-line;
            line-height: 1.65;
            color: var(--bs-body-color);
        }

        .comment-inline-form {
            border: 1px solid var(--bs-border-color);
            border-radius: 10px;
            padding: .75rem;
            background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-tertiary-bg));
        }

        @media (max-width: 767.98px) {
            .comment-thread--reply {
                margin-left: .4rem;
                padding-left: .7rem;
            }
        }

        .comment-v2 {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--bs-border-color);
        }

        .comment-v2__headline h4 {
            margin-bottom: .35rem;
            font-weight: 800;
        }

        .comment-v2__headline p {
            color: var(--bs-secondary);
            margin-bottom: 1rem;
        }

        .comment-v2__composer {
            border: 1px solid var(--bs-border-color);
            border-radius: 14px;
            padding: 1rem;
            background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-tertiary-bg));
            margin-bottom: 1rem;
        }

        .comment-v2__item {
            padding: 1rem 0;
            border-bottom: 1px dashed var(--bs-border-color);
        }

        .comment-v2__item--child {
            margin-left: 1.25rem;
            padding-left: .9rem;
            border-left: 2px solid color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
        }

        .comment-v2__meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: .6rem;
            margin-bottom: .55rem;
        }

        .comment-v2__author-wrap {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .45rem;
            color: var(--bs-secondary);
            font-size: .92rem;
        }

        .comment-v2__avatar {
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
            color: var(--bs-primary);
            font-size: .75rem;
        }

        .comment-v2__author {
            color: var(--bs-body-color);
            font-weight: 700;
        }

        .comment-v2__edited {
            color: var(--bs-secondary);
            font-size: .86rem;
        }

        .comment-v2__tools .btn {
            text-transform: none;
            letter-spacing: 0;
        }

        .comment-v2__body {
            white-space: pre-line;
            line-height: 1.7;
            color: var(--bs-body-color);
        }

        .comment-v2__panel {
            margin-top: .75rem;
        }

        .comment-v2__form-inline {
            border: 1px solid var(--bs-border-color);
            border-radius: 10px;
            padding: .75rem;
            background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
        }

        .comment-v2__empty {
            border: 1px dashed var(--bs-border-color);
            border-radius: 12px;
            padding: 2rem 1rem;
            text-align: center;
            color: var(--bs-secondary);
        }

        .comment-v2__empty i {
            font-size: 1.5rem;
            margin-bottom: .45rem;
        }

        @media (max-width: 767.98px) {
            .comment-v2__item--child {
                margin-left: .35rem;
                padding-left: .6rem;
            }

            .comment-v2__tools {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: .3rem;
            }
        }

        .comment-n3 {
            margin-top: 3.25rem;
            border-top: 1px solid var(--bs-border-color);
            padding-top: 1.35rem;
        }

        .comment-n3__title {
            margin: 0;
            font-weight: 800;
            letter-spacing: -.01em;
        }

        .comment-n3__subtitle {
            margin: .45rem 0 1rem;
            color: var(--bs-secondary);
        }

        .comment-n3__composer {
            border: 1px solid var(--bs-border-color);
            border-radius: 16px;
            padding: 1rem;
            background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-tertiary-bg));
            box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
            margin-bottom: 1.05rem;
        }

        .comment-n3__item {
            border: 1px solid var(--bs-border-color);
            border-radius: 14px;
            padding: .9rem .95rem;
            margin-bottom: .75rem;
            background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-tertiary-bg));
        }

        .comment-n3-item--reply {
            margin-left: 1rem;
            margin-top: .55rem;
            border-left: 3px solid color-mix(in srgb, var(--bs-primary) 36%, transparent);
        }

        .comment-n3-item__head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: .55rem;
            margin-bottom: .5rem;
        }

        .comment-n3-item__identity {
            display: inline-flex;
            flex-wrap: wrap;
            gap: .45rem;
            align-items: center;
            color: var(--bs-secondary);
            font-size: .92rem;
        }

        .comment-n3-item__avatar {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .72rem;
            color: var(--bs-primary);
            background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
        }

        .comment-n3-item__author {
            color: var(--bs-body-color);
            font-weight: 700;
        }

        .comment-n3-item__edited {
            font-size: .85rem;
        }

        .comment-n3-item__actions {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .3rem;
        }

        .comment-n3-item__actions .btn {
            text-transform: none;
            letter-spacing: 0;
        }

        .comment-n3-item__body {
            line-height: 1.7;
            white-space: pre-line;
            color: var(--bs-body-color);
            word-break: break-word;
        }

        .comment-n3-item__panel {
            margin-top: .7rem;
        }

        .comment-n3-inline-form {
            border: 1px solid var(--bs-border-color);
            border-radius: 12px;
            padding: .75rem;
            background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-tertiary-bg));
        }

        .comment-n3__empty {
            border: 1px dashed var(--bs-border-color);
            border-radius: 12px;
            text-align: center;
            color: var(--bs-secondary);
            padding: 1.9rem 1rem;
        }

        .comment-n3__empty i {
            font-size: 1.5rem;
            margin-bottom: .45rem;
        }

        @media (max-width: 767.98px) {
            .comment-n3__composer {
                border-radius: 13px;
                padding: .85rem;
            }

            .comment-n3-item--reply {
                margin-left: .42rem;
            }

            .comment-n3-item__actions {
                width: 100%;
            }
        }

        .cmtx {
            margin-top: 2.25rem;
            padding-top: 1rem;
            border-top: none;
        }

        .cmtx__title {
            margin: 0;
            font-weight: 800;
        }

        .cmtx__subtitle {
            margin: .4rem 0 1rem;
            color: var(--bs-secondary);
        }

        .cmtx__count {
            margin-top: .3rem;
            color: var(--bs-secondary);
            font-weight: 700;
            letter-spacing: .03em;
        }

        .cmtx-compose {
            border: none;
            border-radius: 6px;
            background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-tertiary-bg));
            padding: .9rem;
            margin-bottom: 1rem;
        }

        .cmtx-compose__shell {
            display: grid;
            grid-template-columns: 40px 1fr;
            column-gap: .72rem;
            align-items: start;
        }

        .cmtx-compose__avatar {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: color-mix(in srgb, var(--bs-secondary) 88%, var(--bs-body-color));
            background: color-mix(in srgb, var(--bs-body-bg) 70%, var(--bs-tertiary-bg));
            border: none;
            font-size: .95rem;
            margin-top: .1rem;
        }

        .cmtx-compose__meta {
            font-size: .88rem;
            color: var(--bs-secondary);
            margin-bottom: .42rem;
        }

        .cmtx-compose__textarea {
            min-height: 120px;
            resize: vertical;
        }

        .cmtx-compose__counter {
            margin-top: .35rem;
            margin-bottom: .58rem;
        }

        .cmtx-compose__bottom {
            display: flex;
            gap: .55rem;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .cmtx-compose__guest-fields {
            display: grid;
            grid-template-columns: minmax(150px, 220px) minmax(170px, 240px);
            gap: .5rem;
            flex: 1 1 auto;
        }

        .cmtx-compose__submit {
            white-space: nowrap;
        }

        .cmtx-item {
            display: grid;
            grid-template-columns: 40px 1fr;
            column-gap: .75rem;
            background: transparent;
            padding: .68rem 0;
            margin-bottom: .32rem;
        }

        .cmtx-item--reply {
            margin-left: calc(var(--cmtx-depth, 1) * 1rem);
            padding-left: .25rem;
            border-left: none;
        }

        .cmtx-item__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            margin-bottom: .16rem;
        }

        .cmtx-item__avatar-col {
            padding-top: .05rem;
        }

        .cmtx-item__identity {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            flex-wrap: wrap;
            color: var(--bs-secondary);
            font-size: .9rem;
            min-width: 0;
        }

        .cmtx-item__copy-link {
            border: 1px solid color-mix(in srgb, var(--bs-border-color) 92%, transparent);
            background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
            color: var(--bs-secondary);
            padding: .2rem .55rem;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 600;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            box-shadow: none;
            text-transform: none;
            letter-spacing: 0;
            flex-shrink: 0;
            transition: opacity .18s ease, visibility .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
        }

        .cmtx-item__copy-link:hover,
        .cmtx-item__copy-link:focus-visible {
            color: var(--bs-primary);
            border-color: color-mix(in srgb, var(--bs-primary) 34%, var(--bs-border-color));
            background: color-mix(in srgb, var(--bs-primary-bg-subtle) 54%, var(--bs-body-bg));
            transform: none;
            box-shadow: none;
        }

        @media (hover: hover) and (pointer: fine) {
            .cmtx-item__copy-link {
                opacity: 0;
                visibility: hidden;
            }

            .cmtx-item:hover .cmtx-item__copy-link,
            .cmtx-item:focus-within .cmtx-item__copy-link {
                opacity: 1;
                visibility: visible;
            }
        }

        .cmtx-item__avatar {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: color-mix(in srgb, var(--bs-secondary) 88%, var(--bs-body-color));
            background: color-mix(in srgb, var(--bs-body-bg) 70%, #bfc7d4);
            border: 1px solid var(--bs-border-color);
            font-size: .95rem;
        }

        .cmtx-item__avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 999px;
            display: block;
        }

        .cmtx-item__author {
            color: var(--bs-body-color);
            font-weight: 700;
        }

        .cmtx-item__time,
        .cmtx-item__edited {
            font-size: .84rem;
        }

        .cmtx-item__text {
            color: var(--bs-body-color);
            line-height: 1.46;
            white-space: normal;
            word-break: break-word;
            margin-bottom: .14rem;
        }

        .cmtx-item--focus {
            border-radius: 10px;
            background: color-mix(in srgb, var(--bs-primary-bg-subtle) 80%, transparent);
            transition: background .22s ease;
        }

        .cmtx-item__actions {
            display: inline-flex;
            gap: .65rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .cmtx-action {
            border: none;
            background: transparent;
            color: var(--bs-secondary);
            padding: 0;
            font-size: .9rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            gap: .25rem;
        }

        .cmtx-action:hover {
            color: var(--bs-primary);
            transform: none;
            box-shadow: none;
        }

        .cmtx-action--danger:hover {
            color: var(--bs-danger);
        }

        .cmtx-action--like.is-active {
            color: var(--bs-danger);
        }

        .cmtx-item__panel {
            margin-top: .32rem;
        }

        .cmtx-inline-form {
            border: none;
            border-radius: 6px;
            background: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-tertiary-bg));
            padding: .7rem;
        }

        .cmtx-empty {
            border: none;
            border-radius: 12px;
            text-align: center;
            color: var(--bs-secondary);
            padding: 1.6rem 1rem;
            background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-tertiary-bg));
        }

        .cmtx-empty i {
            font-size: 1.4rem;
            margin-bottom: .45rem;
        }

        @media (max-width: 767.98px) {
            .cmtx-compose__shell {
                grid-template-columns: 1fr;
                row-gap: .5rem;
            }

            .cmtx-compose__avatar {
                display: none;
            }

            .cmtx-compose__guest-fields {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .cmtx-compose__submit {
                width: 100%;
            }

            .cmtx-item--reply {
                margin-left: calc(var(--cmtx-depth, 1) * .55rem);
                padding-left: .15rem;
            }

            .cmtx-item {
                grid-template-columns: 34px 1fr;
                column-gap: .55rem;

            .cmtx-item__head {
                align-items: flex-start;
            }

            .cmtx-item__copy-link span {
                display: none;
            }
            }
        }