/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-layout[b-cs8ulrlcv0] {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

/* Login Page */
.login-container[b-cs8ulrlcv0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #1A365D 0%, #2D4A7C 100%);
    padding: 1rem;
}

.login-card[b-cs8ulrlcv0] {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-header[b-cs8ulrlcv0] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1[b-cs8ulrlcv0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
    margin-bottom: 0.5rem;
}

.login-header p[b-cs8ulrlcv0] {
    color: #64748b;
    font-size: 0.875rem;
}

.form-group[b-cs8ulrlcv0] {
    margin-bottom: 1.25rem;
}

.form-group label[b-cs8ulrlcv0] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input[b-cs8ulrlcv0] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
}

.form-input:focus[b-cs8ulrlcv0] {
    outline: none;
    border-color: #1A365D;
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.error-message[b-cs8ulrlcv0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.btn-login[b-cs8ulrlcv0] {
    width: 100%;
    padding: 0.875rem;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-login:hover[b-cs8ulrlcv0] {
    background: #2D4A7C;
}

.btn-login:disabled[b-cs8ulrlcv0] {
    background: #64748b;
    cursor: not-allowed;
}

.login-footer[b-cs8ulrlcv0] {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.login-footer a[b-cs8ulrlcv0] {
    color: #64748b;
    font-size: 0.875rem;
    text-decoration: none;
}

.login-footer a:hover[b-cs8ulrlcv0] {
    color: #1A365D;
}

/* Sidebar */
.admin-sidebar[b-cs8ulrlcv0] {
    width: 260px;
    background: #1A365D;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
}

.sidebar-header[b-cs8ulrlcv0] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header .logo[b-cs8ulrlcv0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-icon[b-cs8ulrlcv0] {
    width: 36px;
    height: 36px;
    background: #D69E2E;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #1F2937; /* Dark text for better contrast with gold background */
    font-size: 1.25rem;
}

.logo-text[b-cs8ulrlcv0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.sidebar-nav[b-cs8ulrlcv0] {
    flex: 1;
    padding: 1rem 0;
}

.nav-item[b-cs8ulrlcv0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: all 0.2s;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.nav-item:hover[b-cs8ulrlcv0] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-item.active[b-cs8ulrlcv0] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-left: 3px solid #D69E2E;
}

.sidebar-footer[b-cs8ulrlcv0] {
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-btn[b-cs8ulrlcv0] {
    color: rgba(255, 255, 255, 0.6);
}

.logout-btn:hover[b-cs8ulrlcv0] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

/* Main Content */
.admin-main[b-cs8ulrlcv0] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
}

.admin-header[b-cs8ulrlcv0] {
    height: 64px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.header-actions[b-cs8ulrlcv0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title[b-cs8ulrlcv0] {
    color: #64748b;
    font-size: 0.875rem;
}

.header-title strong[b-cs8ulrlcv0] {
    color: #1A365D;
}

.admin-content[b-cs8ulrlcv0] {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 992px) {
    .admin-sidebar[b-cs8ulrlcv0] {
        width: 70px;
    }

    .sidebar-header .logo-text[b-cs8ulrlcv0],
    .nav-item span[b-cs8ulrlcv0] {
        display: none;
    }

    .admin-main[b-cs8ulrlcv0] {
        margin-left: 70px;
    }

    .nav-item[b-cs8ulrlcv0] {
        justify-content: center;
        padding: 1rem;
    }

    .nav-item.active[b-cs8ulrlcv0] {
        border-left: none;
        border-bottom: 3px solid #D69E2E;
    }
}

@media (max-width: 640px) {
    .admin-sidebar[b-cs8ulrlcv0] {
        display: none;
    }

    .admin-main[b-cs8ulrlcv0] {
        margin-left: 0;
    }

    .admin-content[b-cs8ulrlcv0] {
        padding: 1rem;
    }
}

/* Notification */
.notification-wrapper[b-cs8ulrlcv0] {
    position: relative;
}

.notification-btn[b-cs8ulrlcv0] {
    position: relative;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #64748b;
    border-radius: 8px;
    transition: all 0.2s;
}

.notification-btn:hover[b-cs8ulrlcv0] {
    background: #f1f5f9;
    color: #1A365D;
}

.notification-badge[b-cs8ulrlcv0] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.notification-dropdown[b-cs8ulrlcv0] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 360px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}

.notification-header[b-cs8ulrlcv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.notification-header h4[b-cs8ulrlcv0] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1A365D;
}

.mark-all-read[b-cs8ulrlcv0] {
    background: none;
    border: none;
    color: #D69E2E;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.mark-all-read:hover[b-cs8ulrlcv0] {
    text-decoration: underline;
}

.notification-list[b-cs8ulrlcv0] {
    max-height: 320px;
    overflow-y: auto;
}

.notification-empty[b-cs8ulrlcv0] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
}

.notification-item[b-cs8ulrlcv0] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    transition: background 0.2s;
    border-bottom: 1px solid #f1f5f9;
}

.notification-item:last-child[b-cs8ulrlcv0] {
    border-bottom: none;
}

.notification-item:hover[b-cs8ulrlcv0] {
    background: #f8fafc;
}

.notification-item.unread[b-cs8ulrlcv0] {
    background: #fffbeb;
}

.notification-item.unread:hover[b-cs8ulrlcv0] {
    background: #fef3c7;
}

.notification-icon[b-cs8ulrlcv0] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-content[b-cs8ulrlcv0] {
    flex: 1;
    min-width: 0;
}

.notification-message[b-cs8ulrlcv0] {
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
    color: #374151;
    line-height: 1.4;
}

.notification-time[b-cs8ulrlcv0] {
    font-size: 0.75rem;
    color: #64748b;
}
/* /Components/Layout/AuthModal.razor.rz.scp.css */
.modal-overlay[b-dx57oxfmih] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-dx57oxfmih] {
    background: white;
    border-radius: 1rem;
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    position: relative;
    animation: modalSlideIn-b-dx57oxfmih 0.2s ease-out;
}

@keyframes modalSlideIn-b-dx57oxfmih {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close[b-dx57oxfmih] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: color 0.2s, background-color 0.2s;
}

.modal-close:hover[b-dx57oxfmih] {
    color: #374151;
    background-color: #f3f4f6;
}

.modal-header[b-dx57oxfmih] {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-logo[b-dx57oxfmih] {
    display: block;
    margin: 0 auto 0.75rem auto;
}

.modal-title[b-dx57oxfmih] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    text-align: center;
    letter-spacing: -0.025em;
}

.modal-subtitle[b-dx57oxfmih] {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
    text-align: center;
}

.error-message[b-dx57oxfmih] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.social-login-container[b-dx57oxfmih] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-login-description[b-dx57oxfmih] {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.social-btn[b-dx57oxfmih] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.google-btn[b-dx57oxfmih] {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.google-btn:hover[b-dx57oxfmih] {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.kakao-btn[b-dx57oxfmih] {
    background-color: #FEE500;
    color: #000000;
    border: 1px solid #FEE500;
}

.kakao-btn:hover[b-dx57oxfmih] {
    background-color: #FDD835;
    border-color: #FDD835;
}

.social-login-notice[b-dx57oxfmih] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    margin: 1rem 0 0 0;
    line-height: 1.5;
}

.social-login-notice a[b-dx57oxfmih] {
    color: #6b7280;
    text-decoration: underline;
}

.social-login-notice a:hover[b-dx57oxfmih] {
    color: #374151;
}

.modal-divider[b-dx57oxfmih] {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: #9ca3af;
    font-size: 0.8125rem;
}

.modal-divider[b-dx57oxfmih]::before,
.modal-divider[b-dx57oxfmih]::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e5e7eb;
}

.modal-divider span[b-dx57oxfmih] {
    padding: 0 0.75rem;
}

.modal-benefits[b-dx57oxfmih] {
    display: block;
    text-align: center;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

.benefit-item[b-dx57oxfmih] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #4b5563;
    margin: 0.25rem 0.5rem;
}

.benefit-item svg[b-dx57oxfmih] {
    color: #2563eb;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
/* /Components/Layout/BottomNav.razor.rz.scp.css */
.bottom-nav[b-caiauk2izr] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: white;
    border-top: 1px solid var(--border-light);
    padding: 0.5rem 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .bottom-nav[b-caiauk2izr] {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

.bottom-nav-item[b-caiauk2izr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 64px;
}

.bottom-nav-item svg[b-caiauk2izr] {
    width: 24px;
    height: 24px;
    transition: transform 0.2s;
}

.bottom-nav-item:hover[b-caiauk2izr],
.bottom-nav-item:focus[b-caiauk2izr] {
    color: var(--primary-navy);
}

.bottom-nav-item.active[b-caiauk2izr] {
    color: var(--primary-navy);
}

.bottom-nav-item.active svg[b-caiauk2izr] {
    transform: scale(1.1);
}

/* Category Panel */
.category-panel-overlay[b-caiauk2izr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn-b-caiauk2izr 0.2s ease-out;
}

@keyframes fadeIn-b-caiauk2izr {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.category-panel[b-caiauk2izr] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 1001;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    animation: slideUp-b-caiauk2izr 0.3s ease-out;
}

@keyframes slideUp-b-caiauk2izr {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.category-panel-header[b-caiauk2izr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.category-panel-header h3[b-caiauk2izr] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-navy);
}

.category-panel-close[b-caiauk2izr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-subtle);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.category-panel-close:hover[b-caiauk2izr] {
    background: var(--bg-hover);
}

.category-panel-list[b-caiauk2izr] {
    padding: 0.5rem 0;
}

.category-panel-item[b-caiauk2izr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.category-panel-item:hover[b-caiauk2izr] {
    background: var(--bg-hover);
}

.category-dot[b-caiauk2izr] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* MobileMenu는 MobileMenu.razor.css에서 직접 숨김 처리됨 */
/* main-content 패딩은 MainLayout.razor.css에서 처리 */
/* /Components/Layout/LanguageSwitcher.razor.rz.scp.css */
/* Styles moved to app.css for global application */
/* This file intentionally left minimal to prevent CSS isolation conflicts */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Reset and Base */
.page[b-7qtvbe589i] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header[b-7qtvbe589i] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1A365D;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container[b-7qtvbe589i] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo[b-7qtvbe589i] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
}

.logo-icon[b-7qtvbe589i] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D69E2E;
}

.logo-icon svg[b-7qtvbe589i] {
    width: 32px;
    height: 32px;
}

.logo-text[b-7qtvbe589i] {
    font-size: 1.25rem;
    font-weight: 700;
}

.nav-menu[b-7qtvbe589i] {
    display: flex;
    gap: 32px;
}

.nav-link[b-7qtvbe589i] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover[b-7qtvbe589i] {
    color: #D69E2E;
}

.header-actions[b-7qtvbe589i] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-btn[b-7qtvbe589i] {
    color: rgba(255, 255, 255, 0.85);
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Touch-friendly minimum size */
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.search-btn:hover[b-7qtvbe589i] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.search-btn:active[b-7qtvbe589i] {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-menu-btn[b-7qtvbe589i] {
    display: none;
    background: none;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
}

/* Mobile Menu */
.mobile-menu[b-7qtvbe589i] {
    display: none;
    padding: 16px 24px;
    background: #0F2744;
}

.mobile-nav-link[b-7qtvbe589i] {
    display: block;
    padding: 12px 0;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-link:last-child[b-7qtvbe589i] {
    border-bottom: none;
}

/* Main Content */
.main-content[b-7qtvbe589i] {
    flex: 1;
    background: var(--bg-subtle);
}

/* Bottom navigation padding for mobile */
@media (max-width: 768px) {
    .main-content[b-7qtvbe589i] {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Footer */
.footer[b-7qtvbe589i] {
    background: var(--gray-800);
    color: var(--bg-primary);
    padding: 48px 0 24px;
}

.footer-container[b-7qtvbe589i] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.footer-section h4[b-7qtvbe589i] {
    font-size: 1rem;
    margin-bottom: 16px;
    color: var(--accent-gold);
}

.footer-section p[b-7qtvbe589i] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-section a[b-7qtvbe589i] {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 4px 0;
    transition: color 0.2s;
}

.footer-section a:hover[b-7qtvbe589i] {
    color: white;
}

/* Social Links */
.social-links[b-7qtvbe589i] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.social-link[b-7qtvbe589i] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.social-link:hover[b-7qtvbe589i] {
    background: #D69E2E;
    color: white;
    transform: translateY(-2px);
}

.footer-bottom[b-7qtvbe589i] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p[b-7qtvbe589i] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

/* Footer Responsive - Tablet */
@media (max-width: 992px) {
    .footer-container[b-7qtvbe589i] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Footer Responsive - Mobile */
@media (max-width: 768px) {
    .footer[b-7qtvbe589i] {
        padding: 32px 0 calc(80px + env(safe-area-inset-bottom));
    }

    .footer-container[b-7qtvbe589i] {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .footer-section:first-child p[b-7qtvbe589i] {
        display: none;
    }

    .footer-section h4[b-7qtvbe589i] {
        font-size: 0.9375rem;
        margin-bottom: 12px;
    }

    .footer-section a[b-7qtvbe589i] {
        display: inline-block;
        padding: 4px 8px;
    }

    .social-links[b-7qtvbe589i] {
        justify-content: center;
    }

    .footer-bottom[b-7qtvbe589i] {
        padding: 16px 24px 0;
        margin-top: 24px;
    }

    .footer-bottom p[b-7qtvbe589i] {
        font-size: 0.8125rem;
    }
}

/* Footer Responsive - Small Mobile: Simplified view */
@media (max-width: 480px) {
    .footer[b-7qtvbe589i] {
        padding: 24px 0 calc(80px + env(safe-area-inset-bottom));
    }

    /* Hide categories and quick links on small mobile, keep only brand and contact */
    .footer-container > .footer-section:nth-child(2)[b-7qtvbe589i],
    .footer-container > .footer-section:nth-child(3)[b-7qtvbe589i] {
        display: none;
    }

    .footer-container[b-7qtvbe589i] {
        gap: 20px;
    }
}

/* Error UI */
#blazor-error-ui[b-7qtvbe589i] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-7qtvbe589i] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Responsive - Tablet (nav-menu 숨김, MobileMenu 사용) */
@media (max-width: 992px) {
    .nav-menu[b-7qtvbe589i] {
        display: none;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .header[b-7qtvbe589i] {
        /* Safe area support for notched devices */
        padding-top: env(safe-area-inset-top);
    }

    .header-container[b-7qtvbe589i] {
        height: 60px;
        padding: 0 16px;
        /* Ensure enough gap for touch */
        gap: 8px;
    }

    .header-actions[b-7qtvbe589i] {
        gap: 4px;
    }

    .mobile-nav-link[b-7qtvbe589i] {
        /* Touch-friendly height */
        min-height: 44px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    .footer[b-7qtvbe589i] {
        /* Safe area support for footer */
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .footer-container[b-7qtvbe589i] {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .footer-container[b-7qtvbe589i] {
        grid-template-columns: 1fr;
    }

    .logo-text[b-7qtvbe589i] {
        display: none;
    }
}
/* /Components/Layout/MobileMenu.razor.rz.scp.css */
/* MobileMenu는 BottomNav와 중복되므로 모바일에서 숨김 */
/* BottomNav가 없는 중간 화면(769px~992px)에서만 표시 */
.mobile-menu-container[b-ewx4a81zxb] {
    display: none;
}

@media (min-width: 769px) and (max-width: 992px) {
    .mobile-menu-container[b-ewx4a81zxb] {
        display: block;
    }
}

.mobile-menu-btn[b-ewx4a81zxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum touch target for accessibility */
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary, #1a365d);
    border-radius: 8px;
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn:hover[b-ewx4a81zxb],
.mobile-menu-btn:active[b-ewx4a81zxb] {
    background-color: var(--bg-secondary, #f7fafc);
}

.mobile-menu-overlay[b-ewx4a81zxb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    /* Support for safe areas on notched devices */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.mobile-menu[b-ewx4a81zxb] {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0.5rem 0;
    /* Safe area support */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Max height with scroll */
    max-height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideDown-b-ewx4a81zxb 0.2s ease-out;
}

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

.mobile-menu-section[b-ewx4a81zxb] {
    padding: 0.5rem 0;
}

.mobile-menu-section:not(:last-child)[b-ewx4a81zxb] {
    border-bottom: 1px solid var(--gray-200, #e2e8f0);
}

.mobile-menu-label[b-ewx4a81zxb] {
    display: block;
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500, #718096);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-nav-link[b-ewx4a81zxb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: var(--text-primary, #1a365d);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.mobile-nav-link svg[b-ewx4a81zxb] {
    color: var(--gray-400, #a0aec0);
    flex-shrink: 0;
}

.mobile-nav-link:hover[b-ewx4a81zxb] {
    background-color: var(--bg-secondary, #f7fafc);
    color: var(--primary-color, #1a365d);
}

.mobile-nav-link:hover svg[b-ewx4a81zxb] {
    color: var(--primary-color, #1a365d);
}

.mobile-menu-btn.active[b-ewx4a81zxb] {
    background-color: rgba(255, 255, 255, 0.15);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-k6ps4593r2] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-k6ps4593r2] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-k6ps4593r2] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-k6ps4593r2] {
    font-size: 1.1rem;
}

.bi[b-k6ps4593r2] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-k6ps4593r2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-k6ps4593r2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-k6ps4593r2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-k6ps4593r2] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-k6ps4593r2] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-k6ps4593r2] {
        padding-bottom: 1rem;
    }

    .nav-item[b-k6ps4593r2]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-k6ps4593r2]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-k6ps4593r2]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-k6ps4593r2] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-k6ps4593r2] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-k6ps4593r2] {
        display: none;
    }

    .nav-scrollable[b-k6ps4593r2] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu-container[b-arlrakmm29] {
    position: relative;
}

.login-btn[b-arlrakmm29] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background-color: #D69E2E;
    color: #1A365D;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    /* Touch-friendly minimum size */
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
}

.login-btn:hover[b-arlrakmm29] {
    background-color: #ECC94B;
    transform: translateY(-1px);
}

.login-btn:active[b-arlrakmm29] {
    background-color: #B7791F;
    transform: translateY(0);
}

.user-btn[b-arlrakmm29] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #D69E2E;
    border: none;
    color: #1A365D;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    font-weight: 600;
}

.user-btn:hover[b-arlrakmm29] {
    background-color: #ECC94B;
    transform: translateY(-1px);
    color: #1A365D;
}

.user-btn:active[b-arlrakmm29] {
    background-color: #B7791F;
    transform: translateY(0);
}

.user-nickname[b-arlrakmm29] {
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .user-nickname[b-arlrakmm29] {
        display: none;
    }

    .login-btn span[b-arlrakmm29] {
        display: none;
    }

    .login-btn[b-arlrakmm29] {
        padding: 0.5rem;
    }

    .user-btn[b-arlrakmm29] {
        padding: 0.5rem;
    }
}
/* /Components/Pages/Admin/Categories.razor.rz.scp.css */
.categories-page[b-ui87nzx8dt] {
    padding: 0;
}

.page-header[b-ui87nzx8dt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1[b-ui87nzx8dt] {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.btn-new[b-ui87nzx8dt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-new:hover[b-ui87nzx8dt] {
    background: #2D4A6F;
}

.categories-info[b-ui87nzx8dt] {
    background: #EBF8FF;
    border: 1px solid #90CDF4;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.categories-info p[b-ui87nzx8dt] {
    margin: 0;
    font-size: 14px;
    color: #2B6CB0;
}

.alert[b-ui87nzx8dt] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success[b-ui87nzx8dt] {
    background: #C6F6D5;
    color: #276749;
    border: 1px solid #9AE6B4;
}

.alert-error[b-ui87nzx8dt] {
    background: #FED7D7;
    color: #C53030;
    border: 1px solid #FEB2B2;
}

.table-container[b-ui87nzx8dt] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.categories-table[b-ui87nzx8dt] {
    width: 100%;
    border-collapse: collapse;
}

.categories-table th[b-ui87nzx8dt] {
    background: #F7FAFC;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #E2E8F0;
}

.categories-table td[b-ui87nzx8dt] {
    padding: 16px;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.categories-table tr:last-child td[b-ui87nzx8dt] {
    border-bottom: none;
}

.category-row[b-ui87nzx8dt] {
    transition: background-color 0.15s;
}

.category-row:hover[b-ui87nzx8dt] {
    background: #F7FAFC;
}

.th-order[b-ui87nzx8dt] { width: 60px; }
.th-color[b-ui87nzx8dt] { width: 60px; }
.th-name[b-ui87nzx8dt] { width: 25%; }
.th-name-en[b-ui87nzx8dt] { width: 20%; }
.th-slug[b-ui87nzx8dt] { width: 15%; }
.th-count[b-ui87nzx8dt] { width: 80px; text-align: center; }
.th-actions[b-ui87nzx8dt] { width: 100px; text-align: center; }

.td-order[b-ui87nzx8dt] {
    text-align: center;
}

.drag-handle[b-ui87nzx8dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #A0AEC0;
    cursor: grab;
    border-radius: 4px;
    transition: all 0.15s;
}

.drag-handle:hover[b-ui87nzx8dt] {
    background: #E2E8F0;
    color: #4A5568;
}

.td-color[b-ui87nzx8dt] {
    text-align: center;
}

.color-preview[b-ui87nzx8dt] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.td-name strong[b-ui87nzx8dt] {
    display: block;
    font-weight: 600;
    color: #1a202c;
}

.td-name .description[b-ui87nzx8dt] {
    display: block;
    font-size: 13px;
    color: #718096;
    margin-top: 2px;
}

.td-slug code[b-ui87nzx8dt] {
    display: inline-block;
    padding: 4px 8px;
    background: #EDF2F7;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Consolas', monospace;
    color: #4A5568;
}

.td-count[b-ui87nzx8dt] {
    text-align: center;
}

.count-badge[b-ui87nzx8dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #E2E8F0;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
}

.td-actions[b-ui87nzx8dt] {
    text-align: center;
}

.btn-icon[b-ui87nzx8dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 2px;
}

.btn-edit[b-ui87nzx8dt] {
    background: #EBF8FF;
    color: #3182CE;
}

.btn-edit:hover[b-ui87nzx8dt] {
    background: #BEE3F8;
}

.btn-delete[b-ui87nzx8dt] {
    background: #FFF5F5;
    color: #E53E3E;
}

.btn-delete:hover:not(:disabled)[b-ui87nzx8dt] {
    background: #FED7D7;
}

.btn-delete:disabled[b-ui87nzx8dt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.empty-row[b-ui87nzx8dt] {
    text-align: center;
    padding: 40px !important;
    color: #718096;
}

.text-muted[b-ui87nzx8dt] {
    color: #A0AEC0;
}

/* Modal */
.modal-overlay[b-ui87nzx8dt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-ui87nzx8dt] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.modal-sm[b-ui87nzx8dt] {
    max-width: 400px;
}

.modal-header[b-ui87nzx8dt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.modal-header h2[b-ui87nzx8dt] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
}

.btn-close[b-ui87nzx8dt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-close:hover[b-ui87nzx8dt] {
    background: #F7FAFC;
    color: #1a202c;
}

.modal-body[b-ui87nzx8dt] {
    padding: 24px;
}

.modal-body p[b-ui87nzx8dt] {
    margin: 0 0 12px;
    color: #4A5568;
}

.text-warning[b-ui87nzx8dt] {
    color: #C05621 !important;
    font-size: 14px;
}

.form-group[b-ui87nzx8dt] {
    margin-bottom: 20px;
}

.form-group:last-child[b-ui87nzx8dt] {
    margin-bottom: 0;
}

.form-group label[b-ui87nzx8dt] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-input[b-ui87nzx8dt] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus[b-ui87nzx8dt] {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-hint[b-ui87nzx8dt] {
    margin-top: 6px;
    font-size: 12px;
    color: #718096;
}

.color-input-group[b-ui87nzx8dt] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-color[b-ui87nzx8dt] {
    width: 50px;
    height: 42px;
    padding: 4px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    cursor: pointer;
}

.color-text[b-ui87nzx8dt] {
    flex: 1;
    font-family: 'Consolas', monospace;
}

.color-presets[b-ui87nzx8dt] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.color-preset[b-ui87nzx8dt] {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.color-preset:hover[b-ui87nzx8dt] {
    transform: scale(1.1);
}

.color-preset.active[b-ui87nzx8dt] {
    border-color: #1a202c;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1a202c;
}

.modal-footer[b-ui87nzx8dt] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #E2E8F0;
    background: #F7FAFC;
    border-radius: 0 0 16px 16px;
}

.btn-cancel[b-ui87nzx8dt] {
    padding: 10px 20px;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-ui87nzx8dt] {
    background: #F7FAFC;
}

.btn-save[b-ui87nzx8dt] {
    padding: 10px 24px;
    background: #1A365D;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-save:hover:not(:disabled)[b-ui87nzx8dt] {
    background: #2D4A6F;
}

.btn-save:disabled[b-ui87nzx8dt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete-confirm[b-ui87nzx8dt] {
    padding: 10px 24px;
    background: #E53E3E;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-delete-confirm:hover[b-ui87nzx8dt] {
    background: #C53030;
}
/* /Components/Pages/Admin/Comments.razor.rz.scp.css */
.comments-page[b-em3uxi1wg2] {
    max-width: 1200px;
}

.page-header[b-em3uxi1wg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-em3uxi1wg2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
}

.comment-count[b-em3uxi1wg2] {
    font-size: 0.9375rem;
    color: #64748b;
}

/* Filters */
.filters[b-em3uxi1wg2] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-select[b-em3uxi1wg2] {
    padding: 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
    min-width: 140px;
}

.filter-select:focus[b-em3uxi1wg2] {
    outline: none;
    border-color: #1A365D;
}

/* Table */
.table-container[b-em3uxi1wg2] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.comments-table[b-em3uxi1wg2] {
    width: 100%;
    border-collapse: collapse;
}

.comments-table th[b-em3uxi1wg2] {
    text-align: left;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.comments-table td[b-em3uxi1wg2] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9375rem;
    color: #374151;
    vertical-align: top;
}

.comments-table tr:last-child td[b-em3uxi1wg2] {
    border-bottom: none;
}

.comments-table tr:hover td[b-em3uxi1wg2] {
    background: #f8fafc;
}

.comments-table tr.deleted td[b-em3uxi1wg2] {
    background: #fef2f2;
    color: #9ca3af;
}

.th-content[b-em3uxi1wg2] {
    width: 35%;
}

.th-author[b-em3uxi1wg2] {
    width: 12%;
}

.th-report[b-em3uxi1wg2] {
    width: 20%;
}

.th-date[b-em3uxi1wg2] {
    width: 12%;
}

.th-status[b-em3uxi1wg2] {
    width: 10%;
}

.th-actions[b-em3uxi1wg2] {
    width: 8%;
    text-align: center;
}

.td-content[b-em3uxi1wg2] {
    line-height: 1.5;
}

.content-preview[b-em3uxi1wg2] {
    word-break: break-word;
}

.reply-badge[b-em3uxi1wg2] {
    display: inline-block;
    margin-top: 0.375rem;
    padding: 0.125rem 0.5rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.6875rem;
    border-radius: 4px;
    font-weight: 500;
}

.td-author[b-em3uxi1wg2] {
    font-weight: 500;
}

.report-link[b-em3uxi1wg2] {
    color: #1A365D;
    text-decoration: none;
}

.report-link:hover[b-em3uxi1wg2] {
    text-decoration: underline;
}

.td-date[b-em3uxi1wg2] {
    color: #64748b;
    font-size: 0.8125rem;
}

.td-actions[b-em3uxi1wg2] {
    text-align: center;
}

.empty-row[b-em3uxi1wg2] {
    text-align: center;
    color: #94a3b8;
    padding: 3rem 1.25rem !important;
}

/* Status Badge */
.status-badge[b-em3uxi1wg2] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-em3uxi1wg2] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.deleted[b-em3uxi1wg2] {
    background: #fee2e2;
    color: #dc2626;
}

/* Action Buttons */
.btn-action[b-em3uxi1wg2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action.delete[b-em3uxi1wg2] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-action.delete:hover[b-em3uxi1wg2] {
    background: #fecaca;
}

/* Pagination */
.pagination[b-em3uxi1wg2] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.page-btn[b-em3uxi1wg2] {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-em3uxi1wg2] {
    background: #f1f5f9;
    border-color: #1A365D;
}

.page-btn:disabled[b-em3uxi1wg2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info[b-em3uxi1wg2] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Responsive */
@media (max-width: 992px) {
    .th-report[b-em3uxi1wg2],
    .comments-table td:nth-child(3)[b-em3uxi1wg2] {
        display: none;
    }
}

@media (max-width: 640px) {
    .th-status[b-em3uxi1wg2],
    .comments-table td:nth-child(5)[b-em3uxi1wg2] {
        display: none;
    }
}

/* Delete Modal */
.modal-overlay[b-em3uxi1wg2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-em3uxi1wg2 0.2s ease;
}

.modal-content[b-em3uxi1wg2] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp-b-em3uxi1wg2 0.3s ease;
}

.modal-header[b-em3uxi1wg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h4[b-em3uxi1wg2] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-em3uxi1wg2] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover[b-em3uxi1wg2] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-em3uxi1wg2] {
    padding: 1.5rem;
    text-align: center;
}

.modal-icon[b-em3uxi1wg2] {
    margin-bottom: 1rem;
}

.modal-icon.warning[b-em3uxi1wg2] {
    color: #f59e0b;
}

.modal-message[b-em3uxi1wg2] {
    font-size: 0.9375rem;
    color: #374151;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.modal-message strong[b-em3uxi1wg2] {
    color: #1e293b;
}

.modal-preview[b-em3uxi1wg2] {
    font-size: 0.8125rem;
    color: #64748b;
    font-style: italic;
    margin: 0 0 0.5rem 0;
}

.modal-warning[b-em3uxi1wg2] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}

.modal-footer[b-em3uxi1wg2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.btn-modal-cancel[b-em3uxi1wg2] {
    padding: 0.625rem 1.25rem;
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover[b-em3uxi1wg2] {
    background: #f1f5f9;
    border-color: #9ca3af;
}

.btn-modal-danger[b-em3uxi1wg2] {
    padding: 0.625rem 1.25rem;
    background: #dc2626;
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-modal-danger:hover[b-em3uxi1wg2] {
    background: #b91c1c;
}

.btn-modal-danger:disabled[b-em3uxi1wg2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-em3uxi1wg2] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-em3uxi1wg2 0.8s linear infinite;
}

@keyframes fadeIn-b-em3uxi1wg2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-em3uxi1wg2 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin-b-em3uxi1wg2 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dashboard[b-n2vs15seob] {
    max-width: 1200px;
}

.page-title[b-n2vs15seob] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
    margin-bottom: 2rem;
}

/* Stats Grid */
.stats-grid[b-n2vs15seob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-n2vs15seob] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-n2vs15seob] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.reports[b-n2vs15seob] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-icon.published[b-n2vs15seob] {
    background: #dcfce7;
    color: #16a34a;
}

.stat-icon.views[b-n2vs15seob] {
    background: #fef3c7;
    color: #d97706;
}

.stat-icon.comments[b-n2vs15seob] {
    background: #f3e8ff;
    color: #9333ea;
}

.stat-icon.users[b-n2vs15seob] {
    background: #e0f2fe;
    color: #0284c7;
}

.stat-icon.newsletter[b-n2vs15seob] {
    background: #fce7f3;
    color: #db2777;
}

.stat-content[b-n2vs15seob] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-n2vs15seob] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A365D;
}

.stat-label[b-n2vs15seob] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Chart Section */
.chart-section[b-n2vs15seob] {
    margin-bottom: 2rem;
}

.chart-body[b-n2vs15seob] {
    min-height: 250px;
    padding: 1rem !important;
}

/* Dashboard Grid */
.dashboard-grid[b-n2vs15seob] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-card[b-n2vs15seob] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header[b-n2vs15seob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.card-header h2[b-n2vs15seob] {
    font-size: 1rem;
    font-weight: 600;
    color: #1A365D;
}

.view-all[b-n2vs15seob] {
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: none;
}

.view-all:hover[b-n2vs15seob] {
    color: #1A365D;
}

.card-body[b-n2vs15seob] {
    padding: 1rem 1.5rem;
}

.empty-message[b-n2vs15seob] {
    color: #94a3b8;
    text-align: center;
    padding: 2rem 0;
}

/* Report List */
.report-list[b-n2vs15seob] {
    display: flex;
    flex-direction: column;
}

.report-item[b-n2vs15seob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background 0.2s;
}

.report-item:last-child[b-n2vs15seob] {
    border-bottom: none;
}

.report-item:hover[b-n2vs15seob] {
    background: #f8fafc;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.report-info[b-n2vs15seob] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-title[b-n2vs15seob] {
    font-size: 0.9375rem;
    color: #1e293b;
    font-weight: 500;
}

.report-meta[b-n2vs15seob] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.report-views[b-n2vs15seob] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* Category List */
.category-list[b-n2vs15seob] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.category-item[b-n2vs15seob] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-color[b-n2vs15seob] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.category-name[b-n2vs15seob] {
    flex: 1;
    font-size: 0.9375rem;
    color: #374151;
}

.category-count[b-n2vs15seob] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* Quick Actions */
.quick-actions[b-n2vs15seob] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quick-actions h2[b-n2vs15seob] {
    font-size: 1rem;
    font-weight: 600;
    color: #1A365D;
    margin-bottom: 1rem;
}

.action-buttons[b-n2vs15seob] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn[b-n2vs15seob] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #475569;
}

.action-btn:hover[b-n2vs15seob] {
    background: #e2e8f0;
}

.action-btn.primary[b-n2vs15seob] {
    background: #1A365D;
    color: white;
}

.action-btn.primary:hover[b-n2vs15seob] {
    background: #2D4A7C;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-n2vs15seob] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid[b-n2vs15seob] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .stats-grid[b-n2vs15seob] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-n2vs15seob] {
        flex-direction: column;
    }

    .action-btn[b-n2vs15seob] {
        justify-content: center;
    }
}
/* /Components/Pages/Admin/Glossary.razor.rz.scp.css */
.glossary-page[b-cf451qld8a] {
    padding: 0;
}

.page-header[b-cf451qld8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1[b-cf451qld8a] {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.btn-new[b-cf451qld8a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-new:hover[b-cf451qld8a] {
    background: #2D4A6F;
}

.glossary-info[b-cf451qld8a] {
    background: #EBF8FF;
    border: 1px solid #90CDF4;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.glossary-info p[b-cf451qld8a] {
    margin: 0;
    font-size: 14px;
    color: #2B6CB0;
}

.filter-bar[b-cf451qld8a] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.search-box[b-cf451qld8a] {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
}

.search-box svg[b-cf451qld8a] {
    color: #6B7280;
}

.search-input[b-cf451qld8a] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.category-filter[b-cf451qld8a] {
    min-width: 180px;
}

.filter-select[b-cf451qld8a] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.alert[b-cf451qld8a] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success[b-cf451qld8a] {
    background: #C6F6D5;
    color: #276749;
    border: 1px solid #9AE6B4;
}

.alert-error[b-cf451qld8a] {
    background: #FED7D7;
    color: #C53030;
    border: 1px solid #FEB2B2;
}

.table-container[b-cf451qld8a] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.glossary-table[b-cf451qld8a] {
    width: 100%;
    border-collapse: collapse;
}

.glossary-table th[b-cf451qld8a] {
    background: #F7FAFC;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #E2E8F0;
}

.glossary-table td[b-cf451qld8a] {
    padding: 16px;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.glossary-table tr:last-child td[b-cf451qld8a] {
    border-bottom: none;
}

.term-row[b-cf451qld8a] {
    transition: background-color 0.15s;
}

.term-row:hover[b-cf451qld8a] {
    background: #F7FAFC;
}

.th-term[b-cf451qld8a] { width: 15%; }
.th-term-en[b-cf451qld8a] { width: 15%; }
.th-definition[b-cf451qld8a] { width: 35%; }
.th-category[b-cf451qld8a] { width: 12%; }
.th-date[b-cf451qld8a] { width: 10%; }
.th-actions[b-cf451qld8a] { width: 100px; text-align: center; }

.td-term strong[b-cf451qld8a] {
    display: block;
    font-weight: 600;
    color: #1a202c;
}

.td-definition[b-cf451qld8a] {
    max-width: 0;
}

.definition-text[b-cf451qld8a] {
    display: block;
    font-size: 14px;
    color: #4A5568;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-category[b-cf451qld8a] {
    text-align: center;
}

.category-badge[b-cf451qld8a] {
    display: inline-block;
    padding: 4px 10px;
    background: #EDF2F7;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #4A5568;
}

.td-date[b-cf451qld8a] {
    text-align: center;
}

.date-text[b-cf451qld8a] {
    font-size: 13px;
    color: #718096;
}

.td-actions[b-cf451qld8a] {
    text-align: center;
}

.text-muted[b-cf451qld8a] {
    color: #718096;
}

.btn-icon[b-cf451qld8a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 2px;
}

.btn-edit[b-cf451qld8a] {
    background: #EBF8FF;
    color: #3182CE;
}

.btn-edit:hover[b-cf451qld8a] {
    background: #BEE3F8;
}

.btn-delete[b-cf451qld8a] {
    background: #FFF5F5;
    color: #E53E3E;
}

.btn-delete:hover[b-cf451qld8a] {
    background: #FED7D7;
}

.empty-row[b-cf451qld8a] {
    text-align: center;
    padding: 40px !important;
    color: #718096;
}

.pagination-info[b-cf451qld8a] {
    padding: 16px;
    text-align: right;
    font-size: 14px;
    color: #718096;
}

/* Modal */
.modal-overlay[b-cf451qld8a] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-cf451qld8a] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.modal-lg[b-cf451qld8a] {
    max-width: 640px;
}

.modal-sm[b-cf451qld8a] {
    max-width: 400px;
}

.modal-header[b-cf451qld8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.modal-header h2[b-cf451qld8a] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
}

.btn-close[b-cf451qld8a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-close:hover[b-cf451qld8a] {
    background: #F7FAFC;
    color: #1a202c;
}

.modal-body[b-cf451qld8a] {
    padding: 24px;
}

.modal-body p[b-cf451qld8a] {
    margin: 0 0 12px;
    color: #4A5568;
}

.text-warning[b-cf451qld8a] {
    color: #C05621 !important;
    font-size: 14px;
}

.form-row[b-cf451qld8a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group[b-cf451qld8a] {
    margin-bottom: 20px;
}

.form-group:last-child[b-cf451qld8a] {
    margin-bottom: 0;
}

.form-group label[b-cf451qld8a] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-input[b-cf451qld8a] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus[b-cf451qld8a] {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-textarea[b-cf451qld8a] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-textarea:focus[b-cf451qld8a] {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-hint[b-cf451qld8a] {
    margin-top: 6px;
    font-size: 12px;
    color: #718096;
}

.category-input-group[b-cf451qld8a] {
    position: relative;
}

.modal-footer[b-cf451qld8a] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #E2E8F0;
    background: #F7FAFC;
    border-radius: 0 0 16px 16px;
}

.btn-cancel[b-cf451qld8a] {
    padding: 10px 20px;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-cf451qld8a] {
    background: #F7FAFC;
}

.btn-save[b-cf451qld8a] {
    padding: 10px 24px;
    background: #1A365D;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-save:hover:not(:disabled)[b-cf451qld8a] {
    background: #2D4A6F;
}

.btn-save:disabled[b-cf451qld8a] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete-confirm[b-cf451qld8a] {
    padding: 10px 24px;
    background: #E53E3E;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-delete-confirm:hover[b-cf451qld8a] {
    background: #C53030;
}
/* /Components/Pages/Admin/ReportEdit.razor.rz.scp.css */
.report-edit[b-5l85pcz155] {
    max-width: 1200px;
}

.page-header[b-5l85pcz155] {
    margin-bottom: 1.5rem;
}

.back-link[b-5l85pcz155] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.back-link:hover[b-5l85pcz155] {
    color: #1A365D;
}

.page-header h1[b-5l85pcz155] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
}

/* Alerts */
.alert[b-5l85pcz155] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.alert-error[b-5l85pcz155] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success[b-5l85pcz155] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

/* Form Grid */
.form-grid[b-5l85pcz155] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

.form-main[b-5l85pcz155] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Language Tabs */
.language-tabs[b-5l85pcz155] {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
}

.lang-tab[b-5l85pcz155] {
    padding: 0.75rem 1.5rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-tab:hover[b-5l85pcz155] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.lang-tab.active[b-5l85pcz155] {
    border-color: #1A365D;
    background: #f0f4f8;
    color: #1A365D;
}

.form-sidebar[b-5l85pcz155] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Form Groups */
.form-group[b-5l85pcz155] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group > label[b-5l85pcz155] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-input[b-5l85pcz155] {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.form-input:focus[b-5l85pcz155] {
    outline: none;
    border-color: #1A365D;
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

.textarea-sm[b-5l85pcz155] {
    resize: vertical;
    min-height: 80px;
}

.textarea-lg[b-5l85pcz155] {
    resize: vertical;
    min-height: 400px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.form-hint[b-5l85pcz155] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Checkbox */
.checkbox-label[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #374151;
}

.checkbox-label input[type="checkbox"][b-5l85pcz155] {
    width: 18px;
    height: 18px;
    accent-color: #1A365D;
}

/* Sidebar Card */
.sidebar-card[b-5l85pcz155] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-card h3[b-5l85pcz155] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1A365D;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Form Actions */
.form-actions[b-5l85pcz155] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-primary[b-5l85pcz155] {
    width: 100%;
    padding: 0.875rem;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover[b-5l85pcz155] {
    background: #2D4A7C;
}

.btn-primary:disabled[b-5l85pcz155] {
    background: #94a3b8;
    cursor: not-allowed;
}

.btn-secondary[b-5l85pcz155] {
    display: block;
    width: 100%;
    padding: 0.875rem;
    background: white;
    color: #64748b;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary:hover[b-5l85pcz155] {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* Thumbnail Preview */
.thumbnail-preview[b-5l85pcz155] {
    margin-top: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.thumbnail-preview img[b-5l85pcz155] {
    width: 100%;
    height: auto;
    display: block;
}


/* Quill Editor */
.quill-container[b-5l85pcz155] {
    background: white;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    overflow: hidden;
}

[b-5l85pcz155] .quill-container .ql-toolbar {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 8px 12px;
}

[b-5l85pcz155] .quill-container .ql-container {
    border: none;
    font-size: 1rem;
}

[b-5l85pcz155] .quill-container .ql-editor {
    min-height: 400px;
    padding: 16px;
    line-height: 1.7;
    color: #1F2937;
}

[b-5l85pcz155] .quill-container .ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
}

[b-5l85pcz155] .quill-container .ql-editor h2 {
    color: #1A365D;
    font-size: 1.5em;
    font-weight: 600;
    border-bottom: 2px solid #E5E7EB;
    padding-bottom: 0.3em;
}

[b-5l85pcz155] .quill-container .ql-editor blockquote {
    border-left: 4px solid #D69E2E;
    padding-left: 1em;
    color: #4B5563;
}

[b-5l85pcz155] .quill-container .ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Draft Recovery Alert */
.draft-recovery[b-5l85pcz155] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.draft-recovery-content[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.draft-recovery-actions[b-5l85pcz155] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.draft-actions[b-5l85pcz155] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-restore[b-5l85pcz155] {
    padding: 0.375rem 0.75rem;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-restore:hover[b-5l85pcz155] {
    background: #2D4A7C;
}

.btn-discard[b-5l85pcz155] {
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: #64748b;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
}

.btn-discard:hover[b-5l85pcz155] {
    background: #f8fafc;
}

.alert-info[b-5l85pcz155] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Draft Status Indicator */
.draft-status[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: #16a34a;
}
/* Validation */
[b-5l85pcz155] .validation-message {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 992px) {
    .form-grid[b-5l85pcz155] {
        grid-template-columns: 1fr;
    }

    .form-sidebar[b-5l85pcz155] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .form-sidebar[b-5l85pcz155] {
        grid-template-columns: 1fr;
    }

    .textarea-lg[b-5l85pcz155] {
        min-height: 300px;
    }
}

/* Draft Recovery Alert */
.draft-recovery[b-5l85pcz155] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.draft-recovery p[b-5l85pcz155] {
    margin: 0;
    flex: 1;
}

.draft-actions[b-5l85pcz155] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-restore[b-5l85pcz155] {
    background: #1A365D;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-restore:hover[b-5l85pcz155] {
    background: #2D4A7C;
}

.btn-discard[b-5l85pcz155] {
    background: transparent;
    color: #64748b;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-discard:hover[b-5l85pcz155] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.alert-info[b-5l85pcz155] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #1e40af;
}

/* Draft Status Indicator */
.draft-status[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #16a34a;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.draft-status svg[b-5l85pcz155] {
    width: 16px;
    height: 16px;
}
/* Preview Button */
.btn-preview[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background: transparent;
    color: #64748b;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-preview:hover[b-5l85pcz155] {
    background: #f8fafc;
    color: #1A365D;
    border-color: #1A365D;
}

/* Preview Modal */
.preview-modal-overlay[b-5l85pcz155] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
}

.preview-modal[b-5l85pcz155] {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.preview-header[b-5l85pcz155] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.preview-header h2[b-5l85pcz155] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.preview-close[b-5l85pcz155] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.preview-close:hover[b-5l85pcz155] {
    background: #f3f4f6;
    color: #1f2937;
}

.preview-content[b-5l85pcz155] {
    padding: 2rem;
}

.preview-article[b-5l85pcz155] {
    max-width: 100%;
}

.preview-meta[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.preview-category[b-5l85pcz155] {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.preview-date[b-5l85pcz155],
.preview-author[b-5l85pcz155] {
    font-size: 0.875rem;
    color: #6b7280;
}

.preview-author[b-5l85pcz155]::before {
    content: "??;
    margin-right: 0.75rem;
}

.preview-title[b-5l85pcz155] {
    font-size: 2rem;
    font-weight: 700;
    color: #1A365D;
    line-height: 1.3;
    margin: 0 0 1rem 0;
}

.preview-summary[b-5l85pcz155] {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.preview-body[b-5l85pcz155] {
    font-size: 1rem;
    line-height: 1.8;
    color: #374151;
}

.preview-body h2[b-5l85pcz155] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1A365D;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.preview-body h3[b-5l85pcz155] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 1.5rem 0 0.75rem;
}

.preview-body p[b-5l85pcz155] {
    margin-bottom: 1rem;
}

.preview-body ul[b-5l85pcz155],
.preview-body ol[b-5l85pcz155] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.preview-body li[b-5l85pcz155] {
    margin-bottom: 0.5rem;
}

.preview-body blockquote[b-5l85pcz155] {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #D69E2E;
    background: #fefcf3;
    color: #4b5563;
    font-style: italic;
}

.preview-body img[b-5l85pcz155] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.preview-body pre[b-5l85pcz155] {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.preview-body code[b-5l85pcz155] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .preview-modal-overlay[b-5l85pcz155] {
        padding: 1rem;
    }

    .preview-content[b-5l85pcz155] {
        padding: 1.5rem;
    }

    .preview-title[b-5l85pcz155] {
        font-size: 1.5rem;
    }
}
/* Draft Recovery Alert */
.draft-recovery[b-5l85pcz155] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.draft-recovery p[b-5l85pcz155] {
    margin: 0;
    flex: 1;
}

.draft-actions[b-5l85pcz155] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-restore[b-5l85pcz155] {
    background: #1e3a5f;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-restore:hover[b-5l85pcz155] {
    background: #2d4a6f;
}

.btn-discard[b-5l85pcz155] {
    background: transparent;
    color: #64748b;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-discard:hover[b-5l85pcz155] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.alert-info[b-5l85pcz155] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #1e40af;
}

/* Draft Status Indicator */
.draft-status[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #16a34a;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.draft-status svg[b-5l85pcz155] {
    width: 16px;
    height: 16px;
}
/* Scheduled Publish */
.scheduled-publish-group[b-5l85pcz155] {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.scheduled-publish-group label[b-5l85pcz155] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.scheduled-publish-group input[type="datetime-local"][b-5l85pcz155] {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
}

.schedule-hint[b-5l85pcz155] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #D69E2E;
    font-weight: 500;
    margin-top: 0.5rem;
}

.schedule-hint svg[b-5l85pcz155] {
    flex-shrink: 0;
}

/* View Stats Chart */
.view-stats-chart[b-5l85pcz155] {
    height: 150px;
    margin-bottom: 1rem;
}

.view-stats-summary[b-5l85pcz155] {
    display: flex;
    justify-content: space-around;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.view-stats-summary .stat-item[b-5l85pcz155] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
}

.view-stats-summary .stat-item strong[b-5l85pcz155] {
    font-size: 1.125rem;
    color: #1A365D;
    font-weight: 700;
    margin-bottom: 0.125rem;
}
/* /Components/Pages/Admin/Reports.razor.rz.scp.css */
.reports-page[b-gthqhg2l2j] {
    max-width: 1200px;
}

.page-header[b-gthqhg2l2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-gthqhg2l2j] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
}

.btn-new[b-gthqhg2l2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #1A365D;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background 0.2s;
}

.btn-new:hover[b-gthqhg2l2j] {
    background: #2D4A7C;
}

/* Bulk Toolbar */
.bulk-toolbar[b-gthqhg2l2j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: #1A365D;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.bulk-count[b-gthqhg2l2j] {
    color: white;
    font-weight: 500;
    font-size: 0.9375rem;
}

.bulk-actions[b-gthqhg2l2j] {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}

.btn-bulk[b-gthqhg2l2j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-bulk.publish[b-gthqhg2l2j] {
    background: #16a34a;
    color: white;
}

.btn-bulk.publish:hover[b-gthqhg2l2j] {
    background: #15803d;
}

.btn-bulk.unpublish[b-gthqhg2l2j] {
    background: #d97706;
    color: white;
}

.btn-bulk.unpublish:hover[b-gthqhg2l2j] {
    background: #b45309;
}

.btn-bulk.delete[b-gthqhg2l2j] {
    background: #dc2626;
    color: white;
}

.btn-bulk.delete:hover[b-gthqhg2l2j] {
    background: #b91c1c;
}

.btn-bulk:disabled[b-gthqhg2l2j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-bulk-cancel[b-gthqhg2l2j] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-bulk-cancel:hover[b-gthqhg2l2j] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Filters */
.filters[b-gthqhg2l2j] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-select[b-gthqhg2l2j],
.filter-input[b-gthqhg2l2j] {
    padding: 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
}

.filter-select[b-gthqhg2l2j] {
    min-width: 160px;
}

.filter-input[b-gthqhg2l2j] {
    min-width: 250px;
}

.filter-select:focus[b-gthqhg2l2j],
.filter-input:focus[b-gthqhg2l2j] {
    outline: none;
    border-color: #1A365D;
}

/* Table */
.table-container[b-gthqhg2l2j] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.reports-table[b-gthqhg2l2j] {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th[b-gthqhg2l2j] {
    text-align: left;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.reports-table td[b-gthqhg2l2j] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9375rem;
    color: #374151;
}

.reports-table tr:last-child td[b-gthqhg2l2j] {
    border-bottom: none;
}

.reports-table tr:hover td[b-gthqhg2l2j] {
    background: #f8fafc;
}

.th-checkbox[b-gthqhg2l2j] {
    width: 40px;
    text-align: center;
}

.td-checkbox[b-gthqhg2l2j] {
    text-align: center;
}

.td-checkbox input[type="checkbox"][b-gthqhg2l2j],
.th-checkbox input[type="checkbox"][b-gthqhg2l2j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1A365D;
}

.reports-table tr.selected td[b-gthqhg2l2j] {
    background: #eff6ff;
}

.th-title[b-gthqhg2l2j] {
    width: 38%;
}

.th-category[b-gthqhg2l2j] {
    width: 15%;
}

.th-date[b-gthqhg2l2j] {
    width: 12%;
}

.th-views[b-gthqhg2l2j],
.th-comments[b-gthqhg2l2j] {
    width: 8%;
    text-align: right;
}

.th-actions[b-gthqhg2l2j] {
    width: 10%;
    text-align: center;
}

.td-title[b-gthqhg2l2j] {
    font-weight: 500;
}

.report-link[b-gthqhg2l2j] {
    color: #1e293b;
    text-decoration: none;
}

.report-link:hover[b-gthqhg2l2j] {
    color: #1A365D;
    text-decoration: underline;
}

.td-date[b-gthqhg2l2j] {
    color: #64748b;
}

.td-number[b-gthqhg2l2j] {
    text-align: right;
    color: #64748b;
}

.td-actions[b-gthqhg2l2j] {
    text-align: center;
}

.empty-row[b-gthqhg2l2j] {
    text-align: center;
    color: #94a3b8;
    padding: 3rem 1.25rem !important;
}

/* Category Badge */
.category-badge[b-gthqhg2l2j] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

/* Status Badge */
.status-badge[b-gthqhg2l2j] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.published[b-gthqhg2l2j] {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.draft[b-gthqhg2l2j] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.scheduled[b-gthqhg2l2j] {
    background: #dbeafe;
    color: #2563eb;
    cursor: help;
}

.th-status[b-gthqhg2l2j] {
    width: 8%;
}

/* Action Buttons */
.btn-action[b-gthqhg2l2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-action.edit[b-gthqhg2l2j] {
    background: #dbeafe;
    color: #2563eb;
}

.btn-action.edit:hover[b-gthqhg2l2j] {
    background: #bfdbfe;
}

.btn-action.delete[b-gthqhg2l2j] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-action.delete:hover[b-gthqhg2l2j] {
    background: #fecaca;
}

.btn-action.duplicate[b-gthqhg2l2j] {
    background: #e0e7ff;
    color: #4f46e5;
}

.btn-action.duplicate:hover[b-gthqhg2l2j] {
    background: #c7d2fe;
}

/* Pagination */
.pagination[b-gthqhg2l2j] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.page-btn[b-gthqhg2l2j] {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-gthqhg2l2j] {
    background: #f1f5f9;
    border-color: #1A365D;
}

.page-btn:disabled[b-gthqhg2l2j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info[b-gthqhg2l2j] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Responsive */
@media (max-width: 992px) {
    .filters[b-gthqhg2l2j] {
        flex-direction: column;
    }

    .filter-select[b-gthqhg2l2j],
    .filter-input[b-gthqhg2l2j] {
        width: 100%;
    }

    .th-views[b-gthqhg2l2j],
    .th-comments[b-gthqhg2l2j],
    .reports-table td:nth-child(4)[b-gthqhg2l2j],
    .reports-table td:nth-child(5)[b-gthqhg2l2j] {
        display: none;
    }
}

@media (max-width: 640px) {
    .page-header[b-gthqhg2l2j] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .btn-new[b-gthqhg2l2j] {
        justify-content: center;
    }

    .th-date[b-gthqhg2l2j],
    .reports-table td:nth-child(3)[b-gthqhg2l2j] {
        display: none;
    }
}

/* Delete Modal */
.modal-overlay[b-gthqhg2l2j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-gthqhg2l2j 0.2s ease;
}

.modal-content[b-gthqhg2l2j] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp-b-gthqhg2l2j 0.3s ease;
}

.modal-header[b-gthqhg2l2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h4[b-gthqhg2l2j] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-gthqhg2l2j] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover[b-gthqhg2l2j] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-gthqhg2l2j] {
    padding: 1.5rem;
    text-align: center;
}

.modal-icon[b-gthqhg2l2j] {
    margin-bottom: 1rem;
}

.modal-icon.warning[b-gthqhg2l2j] {
    color: #f59e0b;
}

.modal-message[b-gthqhg2l2j] {
    font-size: 0.9375rem;
    color: #374151;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.modal-message strong[b-gthqhg2l2j] {
    color: #1e293b;
}

.modal-warning[b-gthqhg2l2j] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}

.modal-footer[b-gthqhg2l2j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.btn-modal-cancel[b-gthqhg2l2j] {
    padding: 0.625rem 1.25rem;
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover[b-gthqhg2l2j] {
    background: #f1f5f9;
    border-color: #9ca3af;
}

.btn-modal-danger[b-gthqhg2l2j] {
    padding: 0.625rem 1.25rem;
    background: #dc2626;
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-modal-danger:hover[b-gthqhg2l2j] {
    background: #b91c1c;
}

.btn-modal-danger:disabled[b-gthqhg2l2j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-gthqhg2l2j] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-gthqhg2l2j 0.8s linear infinite;
}

@keyframes fadeIn-b-gthqhg2l2j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-gthqhg2l2j {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin-b-gthqhg2l2j {
    to { transform: rotate(360deg); }
}

/* Page Description */
.page-description[b-gthqhg2l2j] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

/* Manage Button */
.btn-action.manage[b-gthqhg2l2j] {
    background: #e0f2fe;
    color: #0284c7;
}

.btn-action.manage:hover[b-gthqhg2l2j] {
    background: #bae6fd;
}

/* Manage Modal */
.manage-modal[b-gthqhg2l2j] {
    max-width: 480px;
}

.manage-modal .modal-body[b-gthqhg2l2j] {
    text-align: left;
}

.manage-info[b-gthqhg2l2j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

.manage-info strong[b-gthqhg2l2j] {
    font-size: 1rem;
    color: #1e293b;
}

.manage-options[b-gthqhg2l2j] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.manage-option[b-gthqhg2l2j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manage-option > label[b-gthqhg2l2j] {
    font-weight: 500;
    color: #374151;
    font-size: 0.9375rem;
}

.checkbox-label[b-gthqhg2l2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-gthqhg2l2j] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1A365D;
}

.checkbox-label span[b-gthqhg2l2j] {
    font-weight: 500;
    color: #374151;
    font-size: 0.9375rem;
}

.option-hint[b-gthqhg2l2j] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    padding-left: 1.75rem;
}

.manage-option input[type="datetime-local"][b-gthqhg2l2j] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    width: 100%;
    box-sizing: border-box;
}

.manage-option input[type="datetime-local"]:focus[b-gthqhg2l2j] {
    outline: none;
    border-color: #1A365D;
    box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.1);
}

.btn-modal-primary[b-gthqhg2l2j] {
    padding: 0.625rem 1.25rem;
    background: #1A365D;
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-modal-primary:hover[b-gthqhg2l2j] {
    background: #2D4A7C;
}

.btn-modal-primary:disabled[b-gthqhg2l2j] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/Admin/Series.razor.rz.scp.css */
.series-page[b-l3337zdxvp] {
    padding: 1.5rem;
}

.page-header[b-l3337zdxvp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-l3337zdxvp] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-new[b-l3337zdxvp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-new:hover[b-l3337zdxvp] {
    background: var(--primary-dark);
}

/* Filters */
.filters[b-l3337zdxvp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.filter-group[b-l3337zdxvp] {
    flex: 1;
    min-width: 150px;
}

.filter-select[b-l3337zdxvp] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.filter-select:focus[b-l3337zdxvp] {
    outline: none;
    border-color: var(--primary);
}

/* Table */
.table-container[b-l3337zdxvp] {
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.series-table[b-l3337zdxvp] {
    width: 100%;
    border-collapse: collapse;
}

.series-table th[b-l3337zdxvp],
.series-table td[b-l3337zdxvp] {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.series-table th[b-l3337zdxvp] {
    background: var(--bg-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.th-title[b-l3337zdxvp] {
    min-width: 250px;
}

.th-category[b-l3337zdxvp] {
    width: 120px;
}

.th-status[b-l3337zdxvp] {
    width: 140px;
}

.th-reports[b-l3337zdxvp] {
    width: 80px;
    text-align: center;
}

.th-date[b-l3337zdxvp] {
    width: 100px;
}

.th-actions[b-l3337zdxvp] {
    width: 100px;
    text-align: center;
}

.td-title[b-l3337zdxvp] {
    font-weight: 500;
}

.title-cell[b-l3337zdxvp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.series-thumb[b-l3337zdxvp] {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-secondary);
}

.series-thumb.placeholder[b-l3337zdxvp] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.title-info[b-l3337zdxvp] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.series-link[b-l3337zdxvp] {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

.series-link:hover[b-l3337zdxvp] {
    color: var(--primary);
}

.title-en[b-l3337zdxvp] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.category-badge[b-l3337zdxvp] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-radius: 4px;
}

.status-badges[b-l3337zdxvp] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.status-badge[b-l3337zdxvp] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
}

.status-badge.active[b-l3337zdxvp] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.inactive[b-l3337zdxvp] {
    background: #fef2f2;
    color: #991b1b;
}

.status-badge.completed[b-l3337zdxvp] {
    background: #dbeafe;
    color: #1e40af;
}

.td-number[b-l3337zdxvp] {
    text-align: center;
    font-weight: 500;
    color: var(--text-primary);
}

.td-date[b-l3337zdxvp] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.td-actions[b-l3337zdxvp] {
    text-align: center;
}

.btn-action[b-l3337zdxvp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-action:hover[b-l3337zdxvp] {
    background: var(--bg-secondary);
}

.btn-action.edit:hover[b-l3337zdxvp] {
    color: var(--primary);
}

.btn-action.delete:hover[b-l3337zdxvp] {
    color: var(--error);
}

.empty-row[b-l3337zdxvp] {
    text-align: center;
    padding: 3rem 1rem !important;
    color: var(--text-secondary);
}

/* Modal */
.modal-overlay[b-l3337zdxvp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-l3337zdxvp] {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-content h3[b-l3337zdxvp] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.modal-content p[b-l3337zdxvp] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.warning-text[b-l3337zdxvp] {
    color: var(--warning);
}

.modal-actions[b-l3337zdxvp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-cancel[b-l3337zdxvp],
.btn-delete[b-l3337zdxvp] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel[b-l3337zdxvp] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-cancel:hover[b-l3337zdxvp] {
    background: var(--bg-tertiary);
}

.btn-delete[b-l3337zdxvp] {
    background: var(--error);
    color: white;
}

.btn-delete:hover[b-l3337zdxvp] {
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .series-page[b-l3337zdxvp] {
        padding: 1rem;
    }

    .page-header[b-l3337zdxvp] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .table-container[b-l3337zdxvp] {
        overflow-x: auto;
    }

    .series-table[b-l3337zdxvp] {
        min-width: 600px;
    }
}
/* /Components/Pages/Admin/SeriesEdit.razor.rz.scp.css */
.series-edit-page[b-0ufdjtx8ng] {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-header[b-0ufdjtx8ng] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.back-btn[b-0ufdjtx8ng] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.back-btn:hover[b-0ufdjtx8ng] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.page-header h1[b-0ufdjtx8ng] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Form Container */
.form-container[b-0ufdjtx8ng] {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.form-section[b-0ufdjtx8ng] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-of-type[b-0ufdjtx8ng] {
    border-bottom: none;
}

.form-section h2[b-0ufdjtx8ng] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-count[b-0ufdjtx8ng] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.form-row[b-0ufdjtx8ng] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-0ufdjtx8ng] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label[b-0ufdjtx8ng] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input[b-0ufdjtx8ng],
.form-select[b-0ufdjtx8ng],
.form-textarea[b-0ufdjtx8ng] {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color 0.2s;
}

.form-input:focus[b-0ufdjtx8ng],
.form-select:focus[b-0ufdjtx8ng],
.form-textarea:focus[b-0ufdjtx8ng] {
    outline: none;
    border-color: var(--primary);
}

.form-textarea[b-0ufdjtx8ng] {
    resize: vertical;
    min-height: 80px;
}

.checkbox-group[b-0ufdjtx8ng] {
    flex-direction: row;
    align-items: center;
}

.checkbox-label[b-0ufdjtx8ng] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"][b-0ufdjtx8ng] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* Add Report Section */
.add-report-section[b-0ufdjtx8ng] {
    margin-bottom: 1rem;
}

.search-input-wrapper[b-0ufdjtx8ng] {
    position: relative;
}

.search-results[b-0ufdjtx8ng] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
}

.search-result-item[b-0ufdjtx8ng] {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover[b-0ufdjtx8ng] {
    background: var(--bg-secondary);
}

.result-title[b-0ufdjtx8ng] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.result-category[b-0ufdjtx8ng] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Report List */
.report-list[b-0ufdjtx8ng] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-item[b-0ufdjtx8ng] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    transition: background 0.2s;
}

.report-item:hover[b-0ufdjtx8ng] {
    background: var(--bg-tertiary);
}

.drag-handle[b-0ufdjtx8ng] {
    color: var(--text-secondary);
    cursor: grab;
}

.order-input input[b-0ufdjtx8ng] {
    width: 50px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.order-input input:focus[b-0ufdjtx8ng] {
    outline: none;
    border-color: var(--primary);
}

.report-info[b-0ufdjtx8ng] {
    flex: 1;
    min-width: 0;
}

.report-info a[b-0ufdjtx8ng] {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-info a:hover[b-0ufdjtx8ng] {
    color: var(--primary);
}

.report-date[b-0ufdjtx8ng] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.btn-remove[b-0ufdjtx8ng] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove:hover[b-0ufdjtx8ng] {
    background: var(--error);
    color: white;
}

.empty-reports[b-0ufdjtx8ng] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* Form Actions */
.form-actions[b-0ufdjtx8ng] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-secondary);
}

.btn-cancel[b-0ufdjtx8ng],
.btn-submit[b-0ufdjtx8ng] {
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-cancel[b-0ufdjtx8ng] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-cancel:hover[b-0ufdjtx8ng] {
    background: var(--bg-tertiary);
}

.btn-submit[b-0ufdjtx8ng] {
    background: var(--primary);
    color: white;
}

.btn-submit:hover:not(:disabled)[b-0ufdjtx8ng] {
    background: var(--primary-dark);
}

.btn-submit:disabled[b-0ufdjtx8ng] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Validation */
:deep(.validation-message)[b-0ufdjtx8ng] {
    color: var(--error);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .series-edit-page[b-0ufdjtx8ng] {
        padding: 1rem;
    }

    .form-row[b-0ufdjtx8ng] {
        grid-template-columns: 1fr;
    }

    .form-section[b-0ufdjtx8ng] {
        padding: 1rem;
    }

    .form-actions[b-0ufdjtx8ng] {
        padding: 1rem;
    }
}
/* /Components/Pages/Admin/Tags.razor.rz.scp.css */
.tags-page[b-bc0d8ymco8] {
    padding: 0;
}

.page-header[b-bc0d8ymco8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1[b-bc0d8ymco8] {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.btn-new[b-bc0d8ymco8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #1A365D;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-new:hover[b-bc0d8ymco8] {
    background: #2D4A6F;
}

.tags-info[b-bc0d8ymco8] {
    background: #EBF8FF;
    border: 1px solid #90CDF4;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.tags-info p[b-bc0d8ymco8] {
    margin: 0;
    font-size: 14px;
    color: #2B6CB0;
}

.alert[b-bc0d8ymco8] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success[b-bc0d8ymco8] {
    background: #C6F6D5;
    color: #276749;
    border: 1px solid #9AE6B4;
}

.alert-error[b-bc0d8ymco8] {
    background: #FED7D7;
    color: #C53030;
    border: 1px solid #FEB2B2;
}

.table-container[b-bc0d8ymco8] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tags-table[b-bc0d8ymco8] {
    width: 100%;
    border-collapse: collapse;
}

.tags-table th[b-bc0d8ymco8] {
    background: #F7FAFC;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #E2E8F0;
}

.tags-table td[b-bc0d8ymco8] {
    padding: 16px;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.tags-table tr:last-child td[b-bc0d8ymco8] {
    border-bottom: none;
}

.tag-row[b-bc0d8ymco8] {
    transition: background-color 0.15s;
}

.tag-row:hover[b-bc0d8ymco8] {
    background: #F7FAFC;
}

.th-color[b-bc0d8ymco8] { width: 60px; }
.th-name[b-bc0d8ymco8] { width: 25%; }
.th-name-en[b-bc0d8ymco8] { width: 20%; }
.th-slug[b-bc0d8ymco8] { width: 15%; }
.th-count[b-bc0d8ymco8] { width: 80px; text-align: center; }
.th-date[b-bc0d8ymco8] { width: 100px; }
.th-actions[b-bc0d8ymco8] { width: 100px; text-align: center; }

.td-color[b-bc0d8ymco8] {
    text-align: center;
}

.color-preview[b-bc0d8ymco8] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.td-name strong[b-bc0d8ymco8] {
    display: block;
    font-weight: 600;
    color: #1a202c;
}

.td-slug code[b-bc0d8ymco8] {
    display: inline-block;
    padding: 4px 8px;
    background: #EDF2F7;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Consolas', monospace;
    color: #4A5568;
}

.td-count[b-bc0d8ymco8] {
    text-align: center;
}

.count-badge[b-bc0d8ymco8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #E2E8F0;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
}

.td-date[b-bc0d8ymco8] {
    text-align: center;
}

.date-text[b-bc0d8ymco8] {
    font-size: 13px;
    color: #718096;
}

.td-actions[b-bc0d8ymco8] {
    text-align: center;
}

.text-muted[b-bc0d8ymco8] {
    color: #718096;
}

.btn-icon[b-bc0d8ymco8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 2px;
}

.btn-edit[b-bc0d8ymco8] {
    background: #EBF8FF;
    color: #3182CE;
}

.btn-edit:hover[b-bc0d8ymco8] {
    background: #BEE3F8;
}

.btn-delete[b-bc0d8ymco8] {
    background: #FFF5F5;
    color: #E53E3E;
}

.btn-delete:hover:not(:disabled)[b-bc0d8ymco8] {
    background: #FED7D7;
}

.btn-delete:disabled[b-bc0d8ymco8] {
    opacity: 0.4;
    cursor: not-allowed;
}

.empty-row[b-bc0d8ymco8] {
    text-align: center;
    padding: 40px !important;
    color: #718096;
}

/* Modal */
.modal-overlay[b-bc0d8ymco8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-bc0d8ymco8] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.modal-sm[b-bc0d8ymco8] {
    max-width: 400px;
}

.modal-header[b-bc0d8ymco8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.modal-header h2[b-bc0d8ymco8] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
}

.btn-close[b-bc0d8ymco8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-close:hover[b-bc0d8ymco8] {
    background: #F7FAFC;
    color: #1a202c;
}

.modal-body[b-bc0d8ymco8] {
    padding: 24px;
}

.modal-body p[b-bc0d8ymco8] {
    margin: 0 0 12px;
    color: #4A5568;
}

.text-warning[b-bc0d8ymco8] {
    color: #C05621 !important;
    font-size: 14px;
}

.form-group[b-bc0d8ymco8] {
    margin-bottom: 20px;
}

.form-group:last-child[b-bc0d8ymco8] {
    margin-bottom: 0;
}

.form-group label[b-bc0d8ymco8] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-input[b-bc0d8ymco8] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus[b-bc0d8ymco8] {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-hint[b-bc0d8ymco8] {
    margin-top: 6px;
    font-size: 12px;
    color: #718096;
}

.color-input-group[b-bc0d8ymco8] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-color[b-bc0d8ymco8] {
    width: 50px;
    height: 42px;
    padding: 4px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    cursor: pointer;
}

.color-text[b-bc0d8ymco8] {
    flex: 1;
    font-family: 'Consolas', monospace;
}

.color-presets[b-bc0d8ymco8] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.color-preset[b-bc0d8ymco8] {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.color-preset:hover[b-bc0d8ymco8] {
    transform: scale(1.1);
}

.color-preset.active[b-bc0d8ymco8] {
    border-color: #1a202c;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1a202c;
}

.modal-footer[b-bc0d8ymco8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #E2E8F0;
    background: #F7FAFC;
    border-radius: 0 0 16px 16px;
}

.btn-cancel[b-bc0d8ymco8] {
    padding: 10px 20px;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-bc0d8ymco8] {
    background: #F7FAFC;
}

.btn-save[b-bc0d8ymco8] {
    padding: 10px 24px;
    background: #1A365D;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-save:hover:not(:disabled)[b-bc0d8ymco8] {
    background: #2D4A6F;
}

.btn-save:disabled[b-bc0d8ymco8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete-confirm[b-bc0d8ymco8] {
    padding: 10px 24px;
    background: #E53E3E;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-delete-confirm:hover[b-bc0d8ymco8] {
    background: #C53030;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
.users-page[b-36j89dy41x] {
    max-width: 1200px;
}

.page-header[b-36j89dy41x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-36j89dy41x] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A365D;
}

.user-count[b-36j89dy41x] {
    font-size: 0.9375rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}

/* Filters */
.filters[b-36j89dy41x] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-select[b-36j89dy41x],
.filter-input[b-36j89dy41x] {
    padding: 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
}

.filter-select[b-36j89dy41x] {
    min-width: 140px;
}

.filter-input[b-36j89dy41x] {
    min-width: 280px;
}

.filter-select:focus[b-36j89dy41x],
.filter-input:focus[b-36j89dy41x] {
    outline: none;
    border-color: #1A365D;
}

/* Table */
.table-container[b-36j89dy41x] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow-x: auto;
}

.users-table[b-36j89dy41x] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.users-table th[b-36j89dy41x] {
    text-align: left;
    padding: 1rem 1rem;
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.users-table td[b-36j89dy41x] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #374151;
}

.users-table tr:last-child td[b-36j89dy41x] {
    border-bottom: none;
}

.users-table tr:hover[b-36j89dy41x] {
    background: #f8fafc;
}

.inactive-row[b-36j89dy41x] {
    background: #fef3c7;
}

.inactive-row:hover[b-36j89dy41x] {
    background: #fef3c7 !important;
}

.th-id[b-36j89dy41x] { width: 60px; }
.th-email[b-36j89dy41x] { width: 220px; }
.th-nickname[b-36j89dy41x] { width: 140px; }
.th-status[b-36j89dy41x] { width: 80px; }
.th-date[b-36j89dy41x] { width: 100px; }
.th-number[b-36j89dy41x] { width: 70px; text-align: center; }
.th-actions[b-36j89dy41x] { width: 100px; text-align: center; }

.td-id[b-36j89dy41x] { color: #6B7280; font-size: 0.8125rem; }
.td-email[b-36j89dy41x] { word-break: break-all; }
.td-nickname[b-36j89dy41x] { font-weight: 500; }
.td-date[b-36j89dy41x] { color: #6b7280; font-size: 0.8125rem; }
.td-number[b-36j89dy41x] { text-align: center; }
.td-actions[b-36j89dy41x] { text-align: center; }

/* Status Badge */
.status-badge[b-36j89dy41x] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-36j89dy41x] {
    background: #DEF7EC;
    color: #03543F;
}

.status-badge.inactive[b-36j89dy41x] {
    background: #FDE8E8;
    color: #9B1C1C;
}

/* Action Buttons */
.btn-action[b-36j89dy41x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.btn-action.view[b-36j89dy41x] {
    color: #3B82F6;
}

.btn-action.view:hover[b-36j89dy41x] {
    background: #EFF6FF;
}

.btn-action.activate[b-36j89dy41x] {
    color: #10B981;
}

.btn-action.activate:hover[b-36j89dy41x] {
    background: #D1FAE5;
}

.btn-action.deactivate[b-36j89dy41x] {
    color: #F59E0B;
}

.btn-action.deactivate:hover[b-36j89dy41x] {
    background: #FEF3C7;
}

.empty-row[b-36j89dy41x] {
    text-align: center;
    color: #6B7280;
    padding: 3rem 1rem !important;
}

/* Modal */
.modal-overlay[b-36j89dy41x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-36j89dy41x] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header[b-36j89dy41x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2[b-36j89dy41x] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1A365D;
}

.btn-close[b-36j89dy41x] {
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-close:hover[b-36j89dy41x] {
    color: #374151;
    background: #f3f4f6;
}

.modal-body[b-36j89dy41x] {
    padding: 1.5rem;
}

.user-info-section[b-36j89dy41x] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-row[b-36j89dy41x] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-36j89dy41x] {
    border-bottom: none;
}

.info-row .label[b-36j89dy41x] {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}

.info-row .value[b-36j89dy41x] {
    color: #374151;
    font-size: 0.875rem;
}

.user-activity-section[b-36j89dy41x] {
    margin-bottom: 1.5rem;
}

.user-activity-section:last-child[b-36j89dy41x] {
    margin-bottom: 0;
}

.user-activity-section h3[b-36j89dy41x] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1A365D;
    margin-bottom: 0.75rem;
}

.activity-list[b-36j89dy41x] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.activity-list li[b-36j89dy41x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.activity-list li:last-child[b-36j89dy41x] {
    border-bottom: none;
}

.activity-list a[b-36j89dy41x] {
    flex: 1;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-list a:hover[b-36j89dy41x] {
    color: #1A365D;
    text-decoration: underline;
}

.activity-list .date[b-36j89dy41x] {
    font-size: 0.75rem;
    color: #6B7280;
}

.activity-list .progress[b-36j89dy41x] {
    font-size: 0.75rem;
    color: #D69E2E;
    font-weight: 500;
}

.empty-message[b-36j89dy41x] {
    color: #6B7280;
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .filters[b-36j89dy41x] {
        flex-direction: column;
    }

    .filter-input[b-36j89dy41x],
    .filter-select[b-36j89dy41x] {
        width: 100%;
        min-width: unset;
    }
}
/* /Components/Pages/Category.razor.rz.scp.css */
.loading[b-vr7e4u18s3] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    color: var(--gray-500);
}

.category-page[b-vr7e4u18s3] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header */
.category-header[b-vr7e4u18s3] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--primary-navy);
}

.breadcrumb[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.breadcrumb a[b-vr7e4u18s3] {
    color: var(--gray-600);
    text-decoration: none;
}

.breadcrumb a:hover[b-vr7e4u18s3] {
    color: var(--primary-navy);
}

.category-title-row[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.category-icon[b-vr7e4u18s3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-follow-btn[b-vr7e4u18s3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    margin-left: auto;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.category-follow-btn:hover[b-vr7e4u18s3] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
    color: var(--primary-navy);
}

.category-follow-btn.following[b-vr7e4u18s3] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

.category-follow-btn.following:hover[b-vr7e4u18s3] {
    background: #2D4A7C;
}

.category-header h1[b-vr7e4u18s3] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.category-description[b-vr7e4u18s3] {
    color: var(--gray-600);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.category-stats[b-vr7e4u18s3] {
    display: flex;
    gap: 0.5rem;
}

.stat-badge[b-vr7e4u18s3] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

/* View Controls */
.view-controls[b-vr7e4u18s3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sort-control[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-control label[b-vr7e4u18s3] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

.sort-select[b-vr7e4u18s3] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-700);
    background: white url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.5rem center;
    background-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.sort-select:focus[b-vr7e4u18s3] {
    outline: none;
    border-color: var(--primary-navy);
}

.sort-select:hover[b-vr7e4u18s3] {
    border-color: var(--gray-400);
}

.view-toggle[b-vr7e4u18s3] {
    display: flex;
    gap: 0.25rem;
}

.view-btn[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-vr7e4u18s3] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.view-btn.active[b-vr7e4u18s3] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

/* Report Grid */
.report-grid[b-vr7e4u18s3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Report List */
.report-list[b-vr7e4u18s3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.report-list .report-card[b-vr7e4u18s3] {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.report-list .report-card:hover[b-vr7e4u18s3] {
    transform: translateX(4px);
}

.report-list .card-thumbnail[b-vr7e4u18s3] {
    width: 200px;
    height: 130px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.report-list .card-content[b-vr7e4u18s3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 1rem 1rem 1rem 0;
}

.report-list .card-content h3[b-vr7e4u18s3] {
    font-size: 1.125rem;
    -webkit-line-clamp: 1;
}

.report-list .card-summary[b-vr7e4u18s3] {
    -webkit-line-clamp: 2;
}

.no-reports[b-vr7e4u18s3] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    color: var(--gray-500);
}

.report-card[b-vr7e4u18s3] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.report-card:hover[b-vr7e4u18s3] {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-thumbnail[b-vr7e4u18s3] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100);
}

.card-thumbnail img[b-vr7e4u18s3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.report-card:hover .card-thumbnail img[b-vr7e4u18s3] {
    transform: scale(1.05);
}

.placeholder-thumb[b-vr7e4u18s3] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}

.placeholder-thumb :deep(svg)[b-vr7e4u18s3] {
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.card-content[b-vr7e4u18s3] {
    padding: 1.25rem;
}

.card-content h3[b-vr7e4u18s3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-summary[b-vr7e4u18s3] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-vr7e4u18s3] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Pagination */
.pagination[b-vr7e4u18s3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.page-btn[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover[b-vr7e4u18s3] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
    color: var(--primary-navy);
}

.page-numbers[b-vr7e4u18s3] {
    display: flex;
    gap: 0.25rem;
}

.page-num[b-vr7e4u18s3] {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover[b-vr7e4u18s3] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
}

.page-num.active[b-vr7e4u18s3] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

/* Responsive */
@media (max-width: 992px) {
    .report-grid[b-vr7e4u18s3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .category-header[b-vr7e4u18s3] {
        padding: 1.5rem;
    }

    .category-title-row[b-vr7e4u18s3] {
        flex-wrap: wrap;
    }

    .category-follow-btn[b-vr7e4u18s3] {
        margin-left: 0;
        margin-top: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .category-header h1[b-vr7e4u18s3] {
        font-size: 1.5rem;
    }

    .view-controls[b-vr7e4u18s3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sort-control[b-vr7e4u18s3] {
        width: 100%;
    }

    .sort-control label[b-vr7e4u18s3] {
        display: none;
    }

    .sort-select[b-vr7e4u18s3] {
        width: 100%;
    }

    .view-toggle[b-vr7e4u18s3] {
        justify-content: flex-end;
    }

    .report-grid[b-vr7e4u18s3] {
        grid-template-columns: 1fr;
    }

    .report-list .report-card[b-vr7e4u18s3] {
        flex-direction: column;
    }

    .report-list .card-thumbnail[b-vr7e4u18s3] {
        width: 100%;
        height: 180px;
    }

    .report-list .card-content[b-vr7e4u18s3] {
        padding: 1rem;
    }

    .pagination[b-vr7e4u18s3] {
        flex-wrap: wrap;
    }
}

/* Infinite Scroll */
.infinite-scroll-sentinel[b-vr7e4u18s3] {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-more[b-vr7e4u18s3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.loading-spinner[b-vr7e4u18s3] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary-navy);
    border-radius: 50%;
    animation: spin-b-vr7e4u18s3 0.8s linear infinite;
}

@keyframes spin-b-vr7e4u18s3 {
    to {
        transform: rotate(360deg);
    }
}

.scroll-hint[b-vr7e4u18s3] {
    text-align: center;
    padding: 1rem;
    color: var(--gray-400);
    font-size: 0.8125rem;
}

.end-of-list[b-vr7e4u18s3] {
    text-align: center;
    padding: 1.5rem;
    color: var(--gray-400);
    font-size: 0.875rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 1rem;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-container[b-k9czb0ti6w] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 2rem;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.error-content[b-k9czb0ti6w] {
    text-align: center;
    max-width: 500px;
    background: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.error-icon[b-k9czb0ti6w] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: var(--primary-navy);
}

.error-icon svg[b-k9czb0ti6w] {
    width: 100%;
    height: 100%;
}

.error-code[b-k9czb0ti6w] {
    font-size: 6rem;
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title[b-k9czb0ti6w] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1rem;
}

.error-message[b-k9czb0ti6w] {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.error-actions[b-k9czb0ti6w] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-k9czb0ti6w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-k9czb0ti6w] {
    background: var(--primary-navy);
    color: white;
}

.btn-primary:hover[b-k9czb0ti6w] {
    background: var(--secondary-blue);
    transform: translateY(-1px);
}

.btn-secondary[b-k9czb0ti6w] {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover[b-k9czb0ti6w] {
    background: var(--gray-200);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
    .error-container[b-k9czb0ti6w] {
        padding: 1rem;
    }

    .error-content[b-k9czb0ti6w] {
        padding: 2rem 1.5rem;
    }

    .error-code[b-k9czb0ti6w] {
        font-size: 4rem;
    }

    .error-title[b-k9czb0ti6w] {
        font-size: 1.25rem;
    }

    .error-icon[b-k9czb0ti6w] {
        width: 60px;
        height: 60px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-container[b-gxcp797ycm] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
}

.main-content-area[b-gxcp797ycm] {
    min-width: 0;
}

/* Section Title */
.section-title[b-gxcp797ycm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-navy);
}

/* Featured Section - 2개 카드를 나란히 표시 */
.featured-grid[b-gxcp797ycm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.report-card[b-gxcp797ycm] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.report-card:hover[b-gxcp797ycm] {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border-color: rgba(26, 54, 93, 0.1);
}

.report-card:hover .card-thumbnail img[b-gxcp797ycm] {
    transform: scale(1.08);
}

.report-card:hover .card-title[b-gxcp797ycm] {
    color: var(--primary-navy, #1A365D);
}

.card-thumbnail[b-gxcp797ycm] {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card-thumbnail img[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.placeholder-thumb[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
}

.placeholder-thumb svg[b-gxcp797ycm] {
    opacity: 0.8;
}

.placeholder-text[b-gxcp797ycm] {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
}

.category-badge[b-gxcp797ycm] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-content[b-gxcp797ycm] {
    padding: 16px;
}

.card-title[b-gxcp797ycm] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.card-summary[b-gxcp797ycm] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-gxcp797ycm] {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Personalized Recommendations Section */
.personalized-section[b-gxcp797ycm] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    border: 1px solid #bae6fd;
}

.section-header[b-gxcp797ycm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.personalized-section .section-title[b-gxcp797ycm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    color: #0369a1;
}

.personalized-section .section-title svg[b-gxcp797ycm] {
    color: #f59e0b;
}

.settings-link[b-gxcp797ycm] {
    font-size: 0.875rem;
    color: #0369a1;
    text-decoration: none;
    font-weight: 500;
}

.settings-link:hover[b-gxcp797ycm] {
    text-decoration: underline;
}

.personalized-grid[b-gxcp797ycm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.personalized-card[b-gxcp797ycm] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.personalized-card:hover[b-gxcp797ycm] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.personalized-card .card-thumbnail[b-gxcp797ycm] {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.personalized-card .card-thumbnail img[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.personalized-card:hover .card-thumbnail img[b-gxcp797ycm] {
    transform: scale(1.05);
}

.personalized-card .card-content[b-gxcp797ycm] {
    padding: 0.875rem;
}

.personalized-card .card-title[b-gxcp797ycm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.personalized-card .card-meta[b-gxcp797ycm] {
    font-size: 0.75rem;
    color: #6b7280;
}

@media (max-width: 768px) {
    .personalized-grid[b-gxcp797ycm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .personalized-grid[b-gxcp797ycm] {
        grid-template-columns: 1fr;
    }

    .section-header[b-gxcp797ycm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Series Section */
.series-section[b-gxcp797ycm] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 16px;
    border: 1px solid #ddd6fe;
}

.series-section .section-header[b-gxcp797ycm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.series-section .section-title[b-gxcp797ycm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    color: #6d28d9;
}

.series-section .section-title svg[b-gxcp797ycm] {
    color: #8b5cf6;
}

.view-all-link[b-gxcp797ycm] {
    font-size: 0.875rem;
    color: #6d28d9;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.view-all-link:hover[b-gxcp797ycm] {
    color: #5b21b6;
    text-decoration: underline;
}

.series-grid[b-gxcp797ycm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.series-card[b-gxcp797ycm] {
    background: var(--bg-primary);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.series-card:hover[b-gxcp797ycm] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.series-thumbnail[b-gxcp797ycm] {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.series-thumbnail img[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.series-card:hover .series-thumbnail img[b-gxcp797ycm] {
    transform: scale(1.05);
}

.series-placeholder[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
}

.series-badge[b-gxcp797ycm] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.series-badge.ongoing[b-gxcp797ycm] {
    background: #92400e; /* Dark amber for better contrast with white */
    color: var(--bg-primary);
}

.series-badge.completed[b-gxcp797ycm] {
    background: #047857; /* Dark green for better contrast with white */
    color: var(--bg-primary);
}

.series-content[b-gxcp797ycm] {
    padding: 0.875rem;
}

.series-category[b-gxcp797ycm] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.series-title[b-gxcp797ycm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.25rem 0 0.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-meta[b-gxcp797ycm] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .series-grid[b-gxcp797ycm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .series-grid[b-gxcp797ycm] {
        grid-template-columns: 1fr;
    }

    .series-section .section-header[b-gxcp797ycm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Category Tabs */
.category-tabs[b-gxcp797ycm] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab-btn[b-gxcp797ycm] {
    padding: 8px 20px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover[b-gxcp797ycm] {
    border-color: var(--gray-300);
    color: var(--text-tertiary);
}

.tab-btn.active[b-gxcp797ycm] {
    border-color: var(--primary-navy);
    color: var(--primary-navy);
    background: #F0F4F8;
}

/* Report List */
.report-list[b-gxcp797ycm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-item[b-gxcp797ycm] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.report-item:hover[b-gxcp797ycm] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
    border-color: rgba(26, 54, 93, 0.08);
}

.report-item:hover .item-thumbnail img[b-gxcp797ycm] {
    transform: scale(1.05);
}

.report-item:hover .item-title[b-gxcp797ycm] {
    color: var(--primary-navy, #1A365D);
}

.item-thumbnail[b-gxcp797ycm] {
    width: 180px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.item-thumbnail img[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Ensure thumbnails always show, even without image */
.item-thumbnail:empty[b-gxcp797ycm]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
}

.placeholder-thumb-sm[b-gxcp797ycm] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.item-content[b-gxcp797ycm] {
    flex: 1;
    min-width: 0;
}

.item-category[b-gxcp797ycm] {
    font-size: 0.75rem;
    font-weight: 600;
}

.item-title[b-gxcp797ycm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 8px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.item-summary[b-gxcp797ycm] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-meta[b-gxcp797ycm] {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Pagination */
.pagination[b-gxcp797ycm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.page-btn[b-gxcp797ycm] {
    padding: 8px 20px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-gxcp797ycm] {
    background: var(--bg-subtle);
    border-color: var(--gray-300);
}

.page-btn:disabled[b-gxcp797ycm],
.page-btn.disabled[b-gxcp797ycm] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-subtle);
}

.page-info[b-gxcp797ycm] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Load More */
.load-more-container[b-gxcp797ycm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.load-more-btn[b-gxcp797ycm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--primary-navy, #1A365D);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-btn:hover:not(:disabled)[b-gxcp797ycm] {
    background: #2D4A7C;
    transform: translateY(-1px);
}

.load-more-btn:disabled[b-gxcp797ycm] {
    opacity: 0.7;
    cursor: not-allowed;
}

.load-more-info[b-gxcp797ycm] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.loading-spinner[b-gxcp797ycm] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-gxcp797ycm 0.8s linear infinite;
}

@keyframes spin-b-gxcp797ycm {
    to {
        transform: rotate(360deg);
    }
}

/* Sidebar */
.sidebar[b-gxcp797ycm] {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-section[b-gxcp797ycm] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.sidebar-title[b-gxcp797ycm] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent-gold);
}

/* Popular List */
.popular-list[b-gxcp797ycm] {
    display: flex;
    flex-direction: column;
}

.popular-item[b-gxcp797ycm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-default);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.popular-item:last-child[b-gxcp797ycm] {
    border-bottom: none;
}

.popular-item:hover[b-gxcp797ycm] {
    background: var(--gray-50, #F9FAFB);
}

.popular-item:hover .popular-title[b-gxcp797ycm] {
    color: var(--primary-navy, #1A365D);
}

.rank[b-gxcp797ycm] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--border-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rank.top[b-gxcp797ycm] {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.popular-title[b-gxcp797ycm] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

/* Category List */
.category-list[b-gxcp797ycm] {
    display: flex;
    flex-direction: column;
}

.category-item[b-gxcp797ycm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-default);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.category-item:last-child[b-gxcp797ycm] {
    border-bottom: none;
}

.category-item:hover[b-gxcp797ycm] {
    background: var(--gray-50, #F9FAFB);
}

.category-item:hover .category-name[b-gxcp797ycm] {
    color: var(--primary-navy, #1A365D);
}

.category-dot[b-gxcp797ycm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-name[b-gxcp797ycm] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.category-count[b-gxcp797ycm] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 10px;
}

/* InFeed Ad */
.infeed-ad[b-gxcp797ycm] {
    padding: 16px 0;
    margin: 8px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    border-radius: 8px;
}

/* Loading & Empty */
.loading[b-gxcp797ycm], .empty-state[b-gxcp797ycm] {
    text-align: center;
    padding: 48px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 992px) {
    .home-container[b-gxcp797ycm] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-gxcp797ycm] {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .sidebar-section[b-gxcp797ycm] {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .item-thumbnail[b-gxcp797ycm] {
        width: 140px;
        height: 90px;
    }
}

@media (max-width: 640px) {
    .featured-grid[b-gxcp797ycm] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-gxcp797ycm] {
        grid-template-columns: 1fr;
    }

    .report-item[b-gxcp797ycm] {
        flex-direction: column;
    }

    .item-thumbnail[b-gxcp797ycm] {
        width: 100%;
        height: 180px;
    }
}
/* /Components/Pages/MyFeed.razor.rz.scp.css */
.feed-page[b-l24ls07k11] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.feed-header[b-l24ls07k11] {
    text-align: center;
    margin-bottom: 2rem;
}

.feed-header h1[b-l24ls07k11] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}

.feed-description[b-l24ls07k11] {
    color: var(--gray-600);
    font-size: 1rem;
}

/* Login Prompt */
.login-prompt[b-l24ls07k11] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.login-prompt svg[b-l24ls07k11] {
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.login-prompt h2[b-l24ls07k11] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.login-prompt p[b-l24ls07k11] {
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

.login-btn[b-l24ls07k11] {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--primary-navy);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover[b-l24ls07k11] {
    background: #2D4A7C;
}

/* Loading */
.loading[b-l24ls07k11] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
    color: var(--gray-500);
}

/* Feed Content */
.feed-content[b-l24ls07k11] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

/* Sidebar */
.feed-sidebar[b-l24ls07k11] {
    position: sticky;
    top: 1rem;
    align-self: start;
}

.sidebar-section[b-l24ls07k11] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-section h3[b-l24ls07k11] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-100);
}

.no-tags[b-l24ls07k11] {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.followed-tags-list[b-l24ls07k11] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.followed-tag-item[b-l24ls07k11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tag-link[b-l24ls07k11] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid var(--tag-color, var(--gray-400));
    transition: all 0.2s;
}

.tag-link:hover[b-l24ls07k11] {
    background: var(--gray-100);
    color: var(--primary-navy);
}

.unfollow-btn[b-l24ls07k11] {
    padding: 0.375rem;
    background: transparent;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.unfollow-btn:hover[b-l24ls07k11] {
    background: var(--gray-100);
    color: var(--gray-600);
}

.browse-tags-btn[b-l24ls07k11],
.browse-more-btn[b-l24ls07k11] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    text-align: center;
    background: var(--primary-navy);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s;
}

.browse-tags-btn:hover[b-l24ls07k11],
.browse-more-btn:hover[b-l24ls07k11] {
    background: #2D4A7C;
}

.browse-more-btn[b-l24ls07k11] {
    background: transparent;
    color: var(--primary-navy);
    border: 1px dashed var(--gray-300);
}

.browse-more-btn:hover[b-l24ls07k11] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
}

/* Main Feed */
.feed-main[b-l24ls07k11] {
    min-height: 400px;
}

.empty-feed[b-l24ls07k11] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-feed svg[b-l24ls07k11] {
    color: var(--gray-400);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-feed h2[b-l24ls07k11] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-feed p[b-l24ls07k11] {
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

/* Results Header */
.results-header[b-l24ls07k11] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
}

.results-header p[b-l24ls07k11] {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

.results-header strong[b-l24ls07k11] {
    color: var(--primary-navy);
}

/* Reports List */
.reports-list[b-l24ls07k11] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-card[b-l24ls07k11] {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.report-card:hover[b-l24ls07k11] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.report-thumbnail[b-l24ls07k11] {
    width: 180px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.report-thumbnail img[b-l24ls07k11] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-content[b-l24ls07k11] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.report-category[b-l24ls07k11] {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.report-title[b-l24ls07k11] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.report-summary[b-l24ls07k11] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.report-tags[b-l24ls07k11] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.report-tags .tag[b-l24ls07k11] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    color: white;
}

.report-meta[b-l24ls07k11] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: auto;
}

/* Pagination */
.pagination[b-l24ls07k11] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
}

.page-btn[b-l24ls07k11] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-l24ls07k11] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
}

.page-btn:disabled[b-l24ls07k11] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info[b-l24ls07k11] {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Responsive */
@media (max-width: 900px) {
    .feed-content[b-l24ls07k11] {
        grid-template-columns: 1fr;
    }

    .feed-sidebar[b-l24ls07k11] {
        position: static;
        order: -1;
    }

    .followed-tags-list[b-l24ls07k11] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .followed-tag-item[b-l24ls07k11] {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .report-card[b-l24ls07k11] {
        flex-direction: column;
    }

    .report-thumbnail[b-l24ls07k11] {
        width: 100%;
        height: 160px;
    }

    .feed-header h1[b-l24ls07k11] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/MyPage.razor.rz.scp.css */
/* Login Required State */
.mypage-login-required[b-e2zpjyso9f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
}

.mypage-login-required svg[b-e2zpjyso9f] {
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.mypage-login-required h2[b-e2zpjyso9f] {
    font-size: 1.5rem;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.mypage-login-required p[b-e2zpjyso9f] {
    margin-bottom: 1.5rem;
}

/* Main Layout */
.mypage[b-e2zpjyso9f] {
    min-height: 80vh;
    background: var(--gray-50);
    padding: 2rem 0;
}

.mypage-container[b-e2zpjyso9f] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.mypage-header[b-e2zpjyso9f] {
    text-align: center;
    margin-bottom: 2rem;
}

.mypage-header h1[b-e2zpjyso9f] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.user-info[b-e2zpjyso9f] {
    color: var(--gray-600);
    font-size: 1rem;
}

/* Tabs */
.mypage-tabs[b-e2zpjyso9f] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: white;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-btn[b-e2zpjyso9f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover[b-e2zpjyso9f] {
    background: var(--gray-100);
    color: var(--gray-800);
}

.tab-btn.active[b-e2zpjyso9f] {
    background: var(--primary-navy);
    color: white;
}

.tab-btn .count[b-e2zpjyso9f] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.tab-btn:not(.active) .count[b-e2zpjyso9f] {
    background: var(--gray-200);
}

/* Content */
.mypage-content[b-e2zpjyso9f] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

/* Loading */
.loading[b-e2zpjyso9f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
}

.spinner-large[b-e2zpjyso9f] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-navy);
    border-radius: 50%;
    animation: spin-b-e2zpjyso9f 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-e2zpjyso9f {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-e2zpjyso9f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-400);
    text-align: center;
}

.empty-state svg[b-e2zpjyso9f] {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-e2zpjyso9f] {
    font-size: 1rem;
}

/* Report List */
.report-list[b-e2zpjyso9f] {
    display: flex;
    flex-direction: column;
}

.report-card[b-e2zpjyso9f] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s;
    position: relative;
}

.report-card:last-child[b-e2zpjyso9f] {
    border-bottom: none;
}

.report-card:hover[b-e2zpjyso9f] {
    background: var(--gray-50);
}

.report-thumbnail[b-e2zpjyso9f] {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.report-thumbnail img[b-e2zpjyso9f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-info[b-e2zpjyso9f] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.report-title[b-e2zpjyso9f] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.report-summary[b-e2zpjyso9f] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.report-meta[b-e2zpjyso9f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.report-date[b-e2zpjyso9f] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Reading Progress */
.reading-progress[b-e2zpjyso9f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.progress-bar[b-e2zpjyso9f] {
    width: 60px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-e2zpjyso9f] {
    height: 100%;
    background: var(--accent-gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Remove Button */
.btn-remove[b-e2zpjyso9f] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    color: var(--gray-400);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.report-card:hover .btn-remove[b-e2zpjyso9f] {
    opacity: 1;
}

.btn-remove:hover[b-e2zpjyso9f] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #EF4444;
}

/* Settings Section */
.settings-section[b-e2zpjyso9f] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.settings-card[b-e2zpjyso9f] {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
}

.settings-card h3[b-e2zpjyso9f] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 1.25rem 0;
}

.form-group[b-e2zpjyso9f] {
    margin-bottom: 1rem;
}

.form-group label[b-e2zpjyso9f] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-control[b-e2zpjyso9f] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-e2zpjyso9f] {
    outline: none;
    border-color: var(--primary-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.btn[b-e2zpjyso9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-e2zpjyso9f] {
    background: var(--primary-navy);
    color: white;
}

.btn-primary:hover[b-e2zpjyso9f] {
    background: #1e3a5f;
}

.btn-primary:disabled[b-e2zpjyso9f] {
    background: var(--gray-400);
    cursor: not-allowed;
}

.success-message[b-e2zpjyso9f] {
    color: #059669;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.error-message[b-e2zpjyso9f] {
    color: #DC2626;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.spinner-small[b-e2zpjyso9f] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-e2zpjyso9f 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 640px) {
    .mypage-header h1[b-e2zpjyso9f] {
        font-size: 1.5rem;
    }

    .mypage-tabs[b-e2zpjyso9f] {
        width: 100%;
    }

    .tab-btn[b-e2zpjyso9f] {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .tab-btn svg[b-e2zpjyso9f] {
        display: none;
    }

    .report-card[b-e2zpjyso9f] {
        flex-direction: column;
    }

    .report-thumbnail[b-e2zpjyso9f] {
        width: 100%;
        height: 160px;
    }

    .btn-remove[b-e2zpjyso9f] {
        opacity: 1;
    }

    .settings-section[b-e2zpjyso9f] {
        padding: 1rem;
    }

    .settings-card[b-e2zpjyso9f] {
        padding: 1rem;
    }

    .interests-grid[b-e2zpjyso9f] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Interests Section */
.interests-section[b-e2zpjyso9f] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.interests-card[b-e2zpjyso9f] {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
}

.interests-card h3[b-e2zpjyso9f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
}

.interests-desc[b-e2zpjyso9f] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0 0 1.25rem 0;
}

.interests-grid[b-e2zpjyso9f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.interest-chip[b-e2zpjyso9f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.interest-chip:hover[b-e2zpjyso9f] {
    border-color: var(--primary-navy);
    color: var(--primary-navy);
}

.interest-chip.followed[b-e2zpjyso9f] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

.interest-chip.followed:hover[b-e2zpjyso9f] {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: white;
}

.interests-summary[b-e2zpjyso9f] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #bae6fd;
}

.interests-summary h4[b-e2zpjyso9f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 1rem 0;
}

.followed-items[b-e2zpjyso9f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.followed-chip[b-e2zpjyso9f] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.followed-chip.category[b-e2zpjyso9f] {
    background: #dbeafe;
    color: #1e40af;
}

.followed-chip.tag[b-e2zpjyso9f] {
    background: #dcfce7;
    color: #166534;
}

/* Danger Zone (Delete Account) */
.settings-card.danger-zone[b-e2zpjyso9f] {
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.settings-card.danger-zone h3[b-e2zpjyso9f] {
    color: #dc2626;
}

.danger-warning[b-e2zpjyso9f] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #fecaca;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #991b1b;
    line-height: 1.5;
}

.danger-warning svg[b-e2zpjyso9f] {
    flex-shrink: 0;
    color: #dc2626;
    margin-top: 0.125rem;
}

.delete-confirm[b-e2zpjyso9f] {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #fecaca;
}

.delete-confirm p[b-e2zpjyso9f] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: #991b1b;
    font-weight: 500;
}

.confirm-buttons[b-e2zpjyso9f] {
    display: flex;
    gap: 0.75rem;
}

.btn-danger[b-e2zpjyso9f] {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover[b-e2zpjyso9f] {
    background: #b91c1c;
}

.btn-danger:disabled[b-e2zpjyso9f] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger-outline[b-e2zpjyso9f] {
    background: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger-outline:hover[b-e2zpjyso9f] {
    background: #dc2626;
    color: white;
}

.btn-secondary[b-e2zpjyso9f] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover[b-e2zpjyso9f] {
    background: #e5e7eb;
}
/* /Components/Pages/ReportDetail.razor.rz.scp.css */
/* Reading Progress Bar */
.reading-progress-bar[b-1eu2nrgjjw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gray-200);
    z-index: 1000;
}

.reading-progress-fill[b-1eu2nrgjjw] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-navy), var(--accent-gold));
    transition: width 0.1s ease-out;
}

.loading[b-1eu2nrgjjw] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    color: var(--gray-500);
}

.report-detail[b-1eu2nrgjjw] {
    padding: 2rem 0;
}

.report-container[b-1eu2nrgjjw] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.report-content[b-1eu2nrgjjw] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Prevent content from overflowing */
    overflow-x: hidden;
    min-width: 0; /* Important for grid child overflow */
    max-width: 100%;
}

/* Breadcrumb */
.breadcrumb[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

.breadcrumb a[b-1eu2nrgjjw] {
    color: var(--gray-600);
    text-decoration: none;
}

.breadcrumb a:hover[b-1eu2nrgjjw] {
    color: var(--primary-navy);
}

/* Header */
.report-header[b-1eu2nrgjjw] {
    margin-bottom: 2rem;
}

.category-badge[b-1eu2nrgjjw] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.report-header h1[b-1eu2nrgjjw] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.report-meta[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.report-meta .divider[b-1eu2nrgjjw] {
    color: var(--gray-300);
}

.report-meta .author[b-1eu2nrgjjw] {
    font-weight: 500;
    color: var(--gray-700);
}

.report-meta .reading-time[b-1eu2nrgjjw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.report-meta .reading-time svg[b-1eu2nrgjjw] {
    flex-shrink: 0;
}

/* Bookmark Button */
.bookmark-btn[b-1eu2nrgjjw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 1px solid var(--gray-300);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    /* Touch-friendly minimum height */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.bookmark-btn:hover[b-1eu2nrgjjw] {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(255, 193, 7, 0.08);
}

.bookmark-btn:active[b-1eu2nrgjjw] {
    background: rgba(255, 193, 7, 0.15);
}

.bookmark-btn.bookmarked[b-1eu2nrgjjw] {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(255, 193, 7, 0.1);
}

.bookmark-btn svg[b-1eu2nrgjjw] {
    flex-shrink: 0;
}

/* Hero Image */
.report-hero[b-1eu2nrgjjw] {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.report-hero img[b-1eu2nrgjjw] {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

/* Summary */
.report-summary[b-1eu2nrgjjw] {
    background: var(--gray-50);
    border-left: 4px solid var(--accent-gold);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 8px 8px 0;
}

.report-summary p[b-1eu2nrgjjw] {
    font-size: 1.125rem;
    color: var(--gray-700);
}

/* Tags */
.report-tags[b-1eu2nrgjjw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tag-badge[b-1eu2nrgjjw] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: color-mix(in srgb, var(--tag-color, #6B7280) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, #6B7280) 30%, transparent);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tag-color, #6B7280);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tag-badge:hover[b-1eu2nrgjjw] {
    background: color-mix(in srgb, var(--tag-color, #6B7280) 20%, transparent);
    border-color: var(--tag-color, #6B7280);
    transform: translateY(-1px);
}

.tag-hash[b-1eu2nrgjjw] {
    opacity: 0.6;
    margin-right: 0.125rem;
}

/* Reading Toolbar */
.reading-toolbar[b-1eu2nrgjjw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.print-btn[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-600);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
    /* Touch-friendly minimum size */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.print-btn:hover[b-1eu2nrgjjw] {
    border-color: var(--primary-navy);
    color: var(--primary-navy);
    background: rgba(62, 89, 137, 0.05);
}

.print-btn:active[b-1eu2nrgjjw] {
    background: rgba(62, 89, 137, 0.1);
}

.print-label[b-1eu2nrgjjw] {
    display: none;
}

@media (min-width: 640px) {
    .print-label[b-1eu2nrgjjw] {
        display: inline;
    }
}

.pdf-btn[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-600);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
    /* Touch-friendly minimum size */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.pdf-btn:hover:not(:disabled)[b-1eu2nrgjjw] {
    border-color: #dc2626;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

.pdf-btn:active:not(:disabled)[b-1eu2nrgjjw] {
    background: rgba(220, 38, 38, 0.1);
}

.pdf-btn:disabled[b-1eu2nrgjjw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pdf-label[b-1eu2nrgjjw] {
    display: none;
}

@media (min-width: 640px) {
    .pdf-label[b-1eu2nrgjjw] {
        display: inline;
    }
}

.spinner-small[b-1eu2nrgjjw] {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-top-color: #dc2626;
    border-radius: 50%;
    animation: spin-b-1eu2nrgjjw 0.8s linear infinite;
}

@keyframes spin-b-1eu2nrgjjw {
    to {
        transform: rotate(360deg);
    }
}

.font-size-control[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-label[b-1eu2nrgjjw] {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-right: 0.25rem;
}

.font-btn[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Touch-friendly minimum size */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.font-btn:hover[b-1eu2nrgjjw] {
    border-color: var(--primary-navy);
    color: var(--primary-navy);
}

.font-btn:active[b-1eu2nrgjjw] {
    background: var(--gray-100);
}

.font-btn.active[b-1eu2nrgjjw] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

.font-icon[b-1eu2nrgjjw] {
    font-size: 0.75rem;
    font-weight: 600;
}

.font-icon.medium[b-1eu2nrgjjw] {
    font-size: 0.9375rem;
}

.font-icon.large[b-1eu2nrgjjw] {
    font-size: 1.125rem;
}

/* Table of Contents - New Collapsible Design */
.toc-container[b-1eu2nrgjjw] {
    background: var(--gray-50);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.toc-toggle[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gray-700);
    transition: all 0.2s;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
}

.toc-toggle:hover[b-1eu2nrgjjw] {
    background: var(--gray-50);
}

.toc-toggle:active[b-1eu2nrgjjw] {
    background: var(--gray-100);
}

.toc-toggle svg:first-child[b-1eu2nrgjjw] {
    flex-shrink: 0;
    color: var(--primary-navy);
}

.toc-toggle span:first-of-type[b-1eu2nrgjjw] {
    flex: 1;
    text-align: left;
}

.toc-count[b-1eu2nrgjjw] {
    padding: 0.125rem 0.5rem;
    background: var(--primary-navy);
    color: white;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.toc-arrow[b-1eu2nrgjjw] {
    transition: transform 0.3s ease;
    color: var(--gray-400);
}

.toc-container.open .toc-arrow[b-1eu2nrgjjw] {
    transform: rotate(180deg);
}

.toc-nav[b-1eu2nrgjjw] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.toc-container.open .toc-nav[b-1eu2nrgjjw] {
    max-height: 400px;
    overflow-y: auto;
}

.toc-nav ul[b-1eu2nrgjjw] {
    list-style: none;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 0;
    border-top: 1px solid var(--gray-200);
}

.toc-item[b-1eu2nrgjjw] {
    padding: 0;
}

.toc-item a[b-1eu2nrgjjw] {
    display: block;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: all 0.2s;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}

.toc-item a:hover[b-1eu2nrgjjw] {
    color: var(--primary-navy);
    background: var(--gray-100);
}

.toc-item.active a[b-1eu2nrgjjw] {
    color: var(--primary-navy);
    background: rgba(26, 54, 93, 0.08);
    font-weight: 500;
}

.toc-item.level-2[b-1eu2nrgjjw] {
    padding-left: 0;
}

.toc-item.level-2 a[b-1eu2nrgjjw] {
    font-weight: 500;
}

.toc-item.level-3[b-1eu2nrgjjw] {
    padding-left: 1rem;
}

.toc-item.level-3 a[b-1eu2nrgjjw] {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.toc-item.level-3.active a[b-1eu2nrgjjw] {
    color: var(--primary-navy);
}

/* Font Size Variations */
.report-body.font-size-small[b-1eu2nrgjjw] {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.report-body.font-size-small h2[b-1eu2nrgjjw] {
    font-size: 1.375rem;
    padding: 0.75rem 0.875rem;
}

.report-body.font-size-small h3[b-1eu2nrgjjw] {
    font-size: 1.125rem;
    padding: 0.5rem 0.75rem;
}

.report-body.font-size-medium[b-1eu2nrgjjw] {
    font-size: 1rem;
    line-height: 1.8;
}

.report-body.font-size-large[b-1eu2nrgjjw] {
    font-size: 1.125rem;
    line-height: 1.9;
}

.report-body.font-size-large h2[b-1eu2nrgjjw] {
    font-size: 1.625rem;
    padding: 1rem 1.125rem;
}

.report-body.font-size-large h3[b-1eu2nrgjjw] {
    font-size: 1.375rem;
    padding: 0.75rem 1rem;
}

/* Content */
.report-body[b-1eu2nrgjjw] {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gray-800);
    /* Prevent horizontal overflow */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Ensure all images are responsive */
.report-body img[b-1eu2nrgjjw] {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive table wrapper */
.report-body .table-wrapper[b-1eu2nrgjjw],
.report-body > div:has(> table)[b-1eu2nrgjjw] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

/* Banner Style (배너형) - 소제목 스타일 */
.report-body h2[b-1eu2nrgjjw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 2rem 0 1rem;
    padding: 0.875rem 1rem;
    background: var(--gray-50);
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 6px 6px 0;
}

.report-body h3[b-1eu2nrgjjw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 1.5rem 0 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(248, 250, 252, 0.8);
    border-left: 3px solid var(--primary-navy);
    border-radius: 0 4px 4px 0;
}

.report-body p[b-1eu2nrgjjw] {
    margin-bottom: 1rem;
}

.report-body ul[b-1eu2nrgjjw], .report-body ol[b-1eu2nrgjjw] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.report-body li[b-1eu2nrgjjw] {
    margin-bottom: 0.5rem;
}

.report-body table[b-1eu2nrgjjw] {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.report-body th[b-1eu2nrgjjw], .report-body td[b-1eu2nrgjjw] {
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    text-align: left;
    white-space: nowrap;
}

/* Allow text wrapping on mobile for specific columns */
@media (max-width: 640px) {
    .report-body th[b-1eu2nrgjjw], .report-body td[b-1eu2nrgjjw] {
        white-space: normal;
        min-width: 80px;
    }

    .report-body th:first-child[b-1eu2nrgjjw],
    .report-body td:first-child[b-1eu2nrgjjw] {
        min-width: 100px;
    }
}

.report-body th[b-1eu2nrgjjw] {
    background: var(--gray-50);
    font-weight: 600;
}

/* Code blocks - responsive */
.report-body pre[b-1eu2nrgjjw],
.report-body code[b-1eu2nrgjjw] {
    overflow-x: auto;
    max-width: 100%;
}

.report-body pre[b-1eu2nrgjjw] {
    padding: 1rem;
    background: var(--gray-100);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 1rem 0;
    -webkit-overflow-scrolling: touch;
}

.report-body code[b-1eu2nrgjjw] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    background: var(--gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.report-body pre code[b-1eu2nrgjjw] {
    padding: 0;
    background: transparent;
}

/* Embedded content (iframes, videos) - responsive */
.report-body iframe[b-1eu2nrgjjw],
.report-body video[b-1eu2nrgjjw],
.report-body embed[b-1eu2nrgjjw],
.report-body object[b-1eu2nrgjjw] {
    max-width: 100%;
    height: auto;
}

/* Responsive video wrapper */
.report-body .video-wrapper[b-1eu2nrgjjw] {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 1.5rem 0;
}

.report-body .video-wrapper iframe[b-1eu2nrgjjw],
.report-body .video-wrapper video[b-1eu2nrgjjw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Long URLs and text - prevent overflow */
.report-body a[b-1eu2nrgjjw] {
    word-break: break-all;
}

/* Blockquotes - responsive */
.report-body blockquote[b-1eu2nrgjjw] {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--gray-700);
}

/* Actions */
.report-actions[b-1eu2nrgjjw] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin: 2rem 0;
}

.action-btn[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    /* Touch-friendly minimum height */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover[b-1eu2nrgjjw] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.action-btn:active[b-1eu2nrgjjw] {
    background: var(--gray-100);
}

/* Comments */
.comments-section[b-1eu2nrgjjw] {
    margin-top: 2rem;
}

.comments-section h3[b-1eu2nrgjjw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

.comments-section h3 .count[b-1eu2nrgjjw] {
    color: var(--primary-navy);
}

.comment-form[b-1eu2nrgjjw] {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.comment-error[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.comment-form .form-row[b-1eu2nrgjjw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-form .form-field[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.comment-form .form-field label[b-1eu2nrgjjw] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.comment-form .form-field .required[b-1eu2nrgjjw] {
    color: #dc2626;
    margin-left: 0.125rem;
}

.comment-form textarea[b-1eu2nrgjjw] {
    resize: vertical;
    min-height: 80px;
    margin-bottom: 1rem;
}

.comments-list[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-comments[b-1eu2nrgjjw] {
    text-align: center;
    color: var(--gray-500);
    padding: 2rem;
}

.comment-item[b-1eu2nrgjjw] {
    padding: 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.comment-header[b-1eu2nrgjjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-author[b-1eu2nrgjjw] {
    font-weight: 600;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.comment-author.member[b-1eu2nrgjjw] {
    color: var(--primary-navy);
}

.comment-author.member svg[b-1eu2nrgjjw] {
    color: #22c55e;
    flex-shrink: 0;
}

.member-comment-info[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: #0369a1;
}

.member-comment-info svg[b-1eu2nrgjjw] {
    flex-shrink: 0;
    color: var(--primary-navy);
}

.member-comment-info span[b-1eu2nrgjjw] {
    font-weight: 600;
}

.comment-date[b-1eu2nrgjjw] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.comment-content[b-1eu2nrgjjw] {
    color: var(--gray-700);
    line-height: 1.6;
}

/* Sidebar */
.report-sidebar[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
    height: fit-content;
    align-self: start;
}

.sidebar-section[b-1eu2nrgjjw] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-100);
}

.sidebar-section h4[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-100);
}

.sidebar-section h4[b-1eu2nrgjjw]::before {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--accent-gold);
    border-radius: 2px;
}

.no-data[b-1eu2nrgjjw] {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.related-list[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-item[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
    background: var(--gray-50);
}

.related-item:hover[b-1eu2nrgjjw] {
    background: white;
    border-color: var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateX(4px);
}

.related-category[b-1eu2nrgjjw] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.related-title[b-1eu2nrgjjw] {
    font-size: 0.875rem;
    color: var(--gray-800);
    line-height: 1.5;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 992px) {
    .report-container[b-1eu2nrgjjw] {
        grid-template-columns: 1fr;
    }

    /* Sidebar at BOTTOM on tablet/mobile, not top */
    .report-sidebar[b-1eu2nrgjjw] {
        order: 1;
        position: static;
    }

    .sidebar-section[b-1eu2nrgjjw] {
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
    }

    .sidebar-section h4[b-1eu2nrgjjw] {
        font-size: 0.9375rem;
    }

    .related-list[b-1eu2nrgjjw] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .related-item[b-1eu2nrgjjw] {
        padding: 0.75rem;
    }
}

@media (max-width: 640px) {
    .report-detail[b-1eu2nrgjjw] {
        padding: 1rem 0;
    }

    .report-container[b-1eu2nrgjjw] {
        padding: 0 0.75rem;
    }

    .report-content[b-1eu2nrgjjw] {
        padding: 1rem;
        border-radius: 0;
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
    }

    .report-header h1[b-1eu2nrgjjw] {
        font-size: 1.375rem;
        line-height: 1.4;
    }

    .report-meta[b-1eu2nrgjjw] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .report-meta .divider[b-1eu2nrgjjw] {
        display: none;
    }

    .report-meta > span:not(.divider)[b-1eu2nrgjjw] {
        background: var(--gray-100);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
    }

    /* Summary */
    .report-summary[b-1eu2nrgjjw] {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .report-summary p[b-1eu2nrgjjw] {
        font-size: 1rem;
    }

    /* Reading toolbar - horizontal scroll on mobile */
    .reading-toolbar[b-1eu2nrgjjw] {
        gap: 0.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        margin: 0 -1rem 1rem -1rem;
        padding: 0.75rem 1rem;
    }

    .toolbar-label[b-1eu2nrgjjw] {
        display: none;
    }

    .font-size-control[b-1eu2nrgjjw] {
        gap: 0.25rem;
    }

    .font-btn[b-1eu2nrgjjw] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    /* Report body font adjustments */
    .report-body[b-1eu2nrgjjw] {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    .report-body h2[b-1eu2nrgjjw] {
        font-size: 1.25rem;
        padding: 0.75rem;
        margin: 1.5rem -1rem 1rem -1rem;
        width: calc(100% + 2rem);
        border-radius: 0;
    }

    .report-body h3[b-1eu2nrgjjw] {
        font-size: 1.0625rem;
        padding: 0.5rem 0.75rem;
        margin: 1.25rem 0 0.75rem 0;
    }

    .report-body p[b-1eu2nrgjjw] {
        margin-bottom: 0.875rem;
    }

    .report-body ul[b-1eu2nrgjjw], .report-body ol[b-1eu2nrgjjw] {
        padding-left: 1.25rem;
    }

    /* Tags on mobile */
    .report-tags[b-1eu2nrgjjw] {
        margin-bottom: 1rem;
    }

    .tag-badge[b-1eu2nrgjjw] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* TOC on mobile */
    .toc-container[b-1eu2nrgjjw] {
        margin-bottom: 1rem;
    }

    .toc-toggle[b-1eu2nrgjjw] {
        padding: 0.75rem 1rem;
    }

    .toc-nav ul[b-1eu2nrgjjw] {
        padding: 0.5rem 1rem 1rem;
    }

    .toc-item a[b-1eu2nrgjjw] {
        font-size: 0.875rem;
        min-height: 36px;
        padding: 0.375rem 0.5rem;
    }

    .comment-form .form-row[b-1eu2nrgjjw] {
        grid-template-columns: 1fr;
    }

    .comment-form[b-1eu2nrgjjw] {
        padding: 1rem;
    }

    .related-list[b-1eu2nrgjjw] {
        grid-template-columns: 1fr;
    }

    .sidebar-section[b-1eu2nrgjjw] {
        padding: 1rem;
    }

    /* Navigation cards */
    .nav-card[b-1eu2nrgjjw] {
        padding: 1rem;
    }

    .nav-title[b-1eu2nrgjjw] {
        font-size: 0.9375rem;
    }
}

/* Comment Delete UI */
.btn-delete-comment[b-1eu2nrgjjw] {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-delete-comment:hover[b-1eu2nrgjjw] {
    color: #EF4444;
    background: #FEE2E2;
}

.comment-header[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.deleted-comment[b-1eu2nrgjjw] {
    color: var(--gray-400);
    font-style: italic;
}

.delete-form[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.form-input-sm[b-1eu2nrgjjw] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    width: 150px;
}

.form-input-sm:focus[b-1eu2nrgjjw] {
    outline: none;
    border-color: var(--primary-navy);
}

.btn-danger-sm[b-1eu2nrgjjw] {
    background: #EF4444;
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger-sm:hover[b-1eu2nrgjjw] {
    background: #DC2626;
}

.btn-cancel-sm[b-1eu2nrgjjw] {
    background: var(--gray-200);
    color: var(--gray-700);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cancel-sm:hover[b-1eu2nrgjjw] {
    background: var(--gray-300);
}

.error-message[b-1eu2nrgjjw] {
    color: #EF4444;
    font-size: 0.75rem;
    width: 100%;
    margin-top: 0.25rem;
}

/* Delete Modal */
.modal-overlay[b-1eu2nrgjjw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-1eu2nrgjjw 0.2s ease-out;
}

@keyframes fadeIn-b-1eu2nrgjjw {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-1eu2nrgjjw] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    margin: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-1eu2nrgjjw 0.2s ease-out;
}

@keyframes slideUp-b-1eu2nrgjjw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-1eu2nrgjjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h4[b-1eu2nrgjjw] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.modal-close[b-1eu2nrgjjw] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover[b-1eu2nrgjjw] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.modal-body[b-1eu2nrgjjw] {
    padding: 1.5rem;
    text-align: center;
}

.modal-icon[b-1eu2nrgjjw] {
    margin-bottom: 1rem;
    color: #F59E0B;
}

.modal-message[b-1eu2nrgjjw] {
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-input-group[b-1eu2nrgjjw] {
    text-align: left;
}

.modal-input-group label[b-1eu2nrgjjw] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.modal-input[b-1eu2nrgjjw] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.modal-input:focus[b-1eu2nrgjjw] {
    outline: none;
    border-color: var(--primary-navy);
    box-shadow: 0 0 0 3px rgba(62, 89, 137, 0.1);
}

.modal-error[b-1eu2nrgjjw] {
    display: block;
    color: #EF4444;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.modal-footer[b-1eu2nrgjjw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 12px 12px;
}

.btn-modal-cancel[b-1eu2nrgjjw] {
    padding: 0.625rem 1.25rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover[b-1eu2nrgjjw] {
    background: var(--gray-100);
}

.btn-modal-danger[b-1eu2nrgjjw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #EF4444;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.btn-modal-danger:hover:not(:disabled)[b-1eu2nrgjjw] {
    background: #DC2626;
}

.btn-modal-danger:disabled[b-1eu2nrgjjw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner[b-1eu2nrgjjw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1eu2nrgjjw 0.8s linear infinite;
}

@keyframes spin-b-1eu2nrgjjw {
    to { transform: rotate(360deg); }
}

/* Print Styles */
@media print {
    .reading-progress-bar[b-1eu2nrgjjw],
    .reading-toolbar[b-1eu2nrgjjw],
    .table-of-contents[b-1eu2nrgjjw],
    .report-sidebar[b-1eu2nrgjjw],
    .comments-section[b-1eu2nrgjjw],
    .modal-overlay[b-1eu2nrgjjw],
    .breadcrumb[b-1eu2nrgjjw],
    .btn-remove[b-1eu2nrgjjw],
    .bookmark-btn[b-1eu2nrgjjw],
    .report-tags[b-1eu2nrgjjw] {
        display: none !important;
    }

    .report-container[b-1eu2nrgjjw] {
        display: block;
        max-width: 100%;
    }

    .report-content[b-1eu2nrgjjw] {
        box-shadow: none;
        padding: 0;
    }

    .report-header h1[b-1eu2nrgjjw] {
        font-size: 1.5rem;
    }

    .report-body[b-1eu2nrgjjw] {
        font-size: 11pt;
        line-height: 1.6;
    }

    .report-hero img[b-1eu2nrgjjw] {
        max-height: 300px;
    }

    a[b-1eu2nrgjjw] {
        color: inherit;
        text-decoration: none;
    }

    @page {
        margin: 2cm;
    }
}

/* Glossary Term Highlight - Moved to app.css (global) for proper application to JS-injected elements */

/* Keyboard Help Button */
.keyboard-help-btn[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.keyboard-help-btn:hover[b-1eu2nrgjjw] {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--primary-navy);
}

.keyboard-help-label[b-1eu2nrgjjw] {
    font-weight: 600;
    font-family: monospace;
}

@media (max-width: 768px) {
    .keyboard-help-btn[b-1eu2nrgjjw] {
        display: none;
    }
}

/* Report Navigation */
.report-navigation[b-1eu2nrgjjw] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.nav-grid[b-1eu2nrgjjw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.nav-card[b-1eu2nrgjjw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-card:hover[b-1eu2nrgjjw] {
    background: white;
    border-color: var(--primary-navy);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-prev[b-1eu2nrgjjw] {
    text-align: left;
}

.nav-next[b-1eu2nrgjjw] {
    text-align: right;
}

.nav-label[b-1eu2nrgjjw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.nav-next .nav-label[b-1eu2nrgjjw] {
    justify-content: flex-end;
}

.nav-label svg[b-1eu2nrgjjw] {
    flex-shrink: 0;
}

.nav-title[b-1eu2nrgjjw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-card:hover .nav-title[b-1eu2nrgjjw] {
    color: var(--primary-navy);
}

.nav-placeholder[b-1eu2nrgjjw] {
    display: none;
}

@media (max-width: 768px) {
    .nav-grid[b-1eu2nrgjjw] {
        grid-template-columns: 1fr;
    }

    .nav-next[b-1eu2nrgjjw] {
        text-align: left;
    }

    .nav-next .nav-label[b-1eu2nrgjjw] {
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

    .nav-placeholder[b-1eu2nrgjjw] {
        display: none;
    }
}
/* /Components/Pages/Search.razor.rz.scp.css */
.search-page[b-utcqj0w0nq] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Search Header */
.search-header[b-utcqj0w0nq] {
    text-align: center;
    margin-bottom: 2rem;
}

.search-header h1[b-utcqj0w0nq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
}

.search-box[b-utcqj0w0nq] {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.search-input[b-utcqj0w0nq] {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 2px solid transparent;
    font-size: 1rem;
    outline: none;
}

.search-input:focus[b-utcqj0w0nq] {
    border-color: var(--primary-navy);
}

.search-btn[b-utcqj0w0nq] {
    padding: 1rem 1.5rem;
    background: var(--primary-navy);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover[b-utcqj0w0nq] {
    background: #2D4A7C;
}

/* Quick Filter Presets */
.quick-filters[b-utcqj0w0nq] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.quick-filter-btn[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.quick-filter-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
    color: var(--primary-navy);
}

.quick-filter-btn.active[b-utcqj0w0nq] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

.quick-filter-btn svg[b-utcqj0w0nq] {
    opacity: 0.7;
}

.quick-filter-btn:hover svg[b-utcqj0w0nq],
.quick-filter-btn.active svg[b-utcqj0w0nq] {
    opacity: 1;
}

/* Active Filter Chips */
.active-filters[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(26, 54, 93, 0.05);
    border-radius: 10px;
}

.filter-chip[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--gray-700);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-chip svg[b-utcqj0w0nq] {
    flex-shrink: 0;
    opacity: 0.6;
}

.filter-chip-category[b-utcqj0w0nq] {
    border-color: #3B82F6;
    background: #EFF6FF;
    color: #1E40AF;
}

.filter-chip-category svg[b-utcqj0w0nq] {
    color: #3B82F6;
    opacity: 1;
}

.filter-chip-date[b-utcqj0w0nq] {
    border-color: #10B981;
    background: #ECFDF5;
    color: #065F46;
}

.filter-chip-date svg[b-utcqj0w0nq] {
    color: #10B981;
    opacity: 1;
}

.filter-chip-author[b-utcqj0w0nq] {
    border-color: #8B5CF6;
    background: #F5F3FF;
    color: #5B21B6;
}

.filter-chip-author svg[b-utcqj0w0nq] {
    color: #8B5CF6;
    opacity: 1;
}

.filter-chip-sort[b-utcqj0w0nq] {
    border-color: #F59E0B;
    background: #FFFBEB;
    color: #92400E;
}

.filter-chip-sort svg[b-utcqj0w0nq] {
    color: #F59E0B;
    opacity: 1;
}

.filter-chip-tag[b-utcqj0w0nq] {
    border-color: var(--chip-color, var(--gray-400));
    background: color-mix(in srgb, var(--chip-color, var(--gray-400)) 10%, white);
    color: var(--chip-color, var(--gray-700));
}

.filter-chip-tag svg[b-utcqj0w0nq] {
    color: var(--chip-color, var(--gray-500));
    opacity: 1;
}

.chip-remove[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.125rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.15s;
}

.chip-remove:hover[b-utcqj0w0nq] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.clear-all-filters[b-utcqj0w0nq] {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px dashed var(--gray-400);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
}

.clear-all-filters:hover[b-utcqj0w0nq] {
    background: var(--gray-100);
    border-color: var(--gray-500);
    color: var(--gray-700);
}

/* Search Filters */
.search-filters[b-utcqj0w0nq] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-row[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group[b-utcqj0w0nq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 140px;
}

.filter-group label[b-utcqj0w0nq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
}

.filter-select[b-utcqj0w0nq],
.filter-input[b-utcqj0w0nq] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    color: var(--gray-700);
    outline: none;
    transition: border-color 0.2s;
}

.filter-select:focus[b-utcqj0w0nq],
.filter-input:focus[b-utcqj0w0nq] {
    border-color: var(--primary-navy);
}

.filter-actions[b-utcqj0w0nq] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.filter-apply-btn[b-utcqj0w0nq] {
    padding: 0.5rem 1rem;
    background: var(--primary-navy);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.filter-apply-btn:hover[b-utcqj0w0nq] {
    background: #2D4A7C;
}

.filter-reset-btn[b-utcqj0w0nq] {
    padding: 0.5rem 1rem;
    background: white;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-reset-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Tag Filters */
.tag-filters[b-utcqj0w0nq] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.tag-filters > label[b-utcqj0w0nq] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
}

.tag-categories[b-utcqj0w0nq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tag-category-group[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tag-category-label[b-utcqj0w0nq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    min-width: 3.5rem;
    padding-right: 0.5rem;
    border-right: 2px solid var(--gray-200);
}

.tag-list[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag-chip-wrapper[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.tag-follow-btn[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: -6px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 50%;
    color: var(--gray-400);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
}

.tag-follow-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: #ef4444;
}

.tag-follow-btn.following[b-utcqj0w0nq] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

.tag-follow-btn.following:hover[b-utcqj0w0nq] {
    background: #fee2e2;
}

.tag-chip[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: 16px;
    font-size: 0.8125rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.tag-chip:hover[b-utcqj0w0nq] {
    background: var(--gray-200);
    border-color: var(--tag-color, var(--gray-400));
}

.tag-chip.selected[b-utcqj0w0nq] {
    background: var(--tag-color, var(--primary-navy));
    border-color: var(--tag-color, var(--primary-navy));
    color: white;
}

.tag-chip .tag-count[b-utcqj0w0nq] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.tag-chip.selected .tag-count[b-utcqj0w0nq] {
    background: rgba(255, 255, 255, 0.25);
}

.clear-tags-btn[b-utcqj0w0nq] {
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--gray-400);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.clear-tags-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-100);
    border-color: var(--gray-500);
}

/* Advanced Search Toggle */
.advanced-search-toggle[b-utcqj0w0nq] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.toggle-advanced-btn[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-advanced-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.toggle-advanced-btn svg[b-utcqj0w0nq] {
    color: var(--gray-500);
}

.toggle-advanced-btn .chevron-icon[b-utcqj0w0nq] {
    transition: transform 0.2s;
}

.toggle-advanced-btn .chevron-icon.expanded[b-utcqj0w0nq] {
    transform: rotate(180deg);
}

/* Advanced Search Options */
.advanced-search-options[b-utcqj0w0nq] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.filter-group-checkbox[b-utcqj0w0nq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-label[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
}

.checkbox-label input[type="checkbox"][b-utcqj0w0nq] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-navy);
    cursor: pointer;
}

.checkbox-text[b-utcqj0w0nq] {
    font-size: 0.875rem;
}

.filter-hint[b-utcqj0w0nq] {
    display: block;
    font-size: 0.6875rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.filter-group-wide[b-utcqj0w0nq] {
    flex: 1;
    min-width: 200px;
}

/* Search Results */
.search-results[b-utcqj0w0nq] {
    min-height: 400px;
}

.loading[b-utcqj0w0nq] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
    color: var(--gray-500);
}

/* No Results */
.no-results[b-utcqj0w0nq] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
}

.no-results svg[b-utcqj0w0nq] {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results h2[b-utcqj0w0nq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.no-results p[b-utcqj0w0nq] {
    font-size: 0.9375rem;
}

/* Recent Searches */
.recent-searches[b-utcqj0w0nq] {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recent-searches-header[b-utcqj0w0nq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.recent-searches-header h3[b-utcqj0w0nq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.recent-searches-header h3 svg[b-utcqj0w0nq] {
    color: var(--gray-400);
}

.clear-history-btn[b-utcqj0w0nq] {
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
}

.clear-history-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-600);
}

.recent-searches-list[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.recent-search-item[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.recent-search-item:hover[b-utcqj0w0nq] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: white;
}

.recent-search-item svg[b-utcqj0w0nq] {
    opacity: 0.5;
}

.recent-search-item:hover svg[b-utcqj0w0nq] {
    opacity: 1;
}

/* Search Welcome */
.search-welcome[b-utcqj0w0nq] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px dashed var(--gray-300);
}

.search-welcome svg[b-utcqj0w0nq] {
    margin-bottom: 1rem;
    opacity: 0.6;
    color: var(--primary-navy);
}

.search-welcome h2[b-utcqj0w0nq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.search-welcome p[b-utcqj0w0nq] {
    font-size: 0.9375rem;
}

/* Results Header */
.results-header[b-utcqj0w0nq] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
}

.results-header p[b-utcqj0w0nq] {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

.results-header strong[b-utcqj0w0nq] {
    color: var(--primary-navy);
}

/* Results List */
.results-list[b-utcqj0w0nq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.result-card[b-utcqj0w0nq] {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.result-card:hover[b-utcqj0w0nq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-thumbnail[b-utcqj0w0nq] {
    width: 180px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.result-thumbnail img[b-utcqj0w0nq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-content[b-utcqj0w0nq] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.result-category[b-utcqj0w0nq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-gold);
    margin-bottom: 0.375rem;
}

.result-title[b-utcqj0w0nq] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.result-summary[b-utcqj0w0nq] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-meta[b-utcqj0w0nq] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: auto;
}

/* Search Tips */
.search-tips[b-utcqj0w0nq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.tips-section[b-utcqj0w0nq] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tips-section h2[b-utcqj0w0nq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-100);
}

.tips-section h2 svg[b-utcqj0w0nq] {
    color: var(--accent-gold);
}

/* Loading Skeleton */
.loading-skeleton[b-utcqj0w0nq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-item[b-utcqj0w0nq] {
    height: 20px;
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-utcqj0w0nq 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading-b-utcqj0w0nq {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Popular List */
.popular-list[b-utcqj0w0nq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-list li[b-utcqj0w0nq] {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.popular-list li:last-child[b-utcqj0w0nq] {
    border-bottom: none;
}

.popular-list a[b-utcqj0w0nq] {
    display: block;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s;
    line-height: 1.4;
}

.popular-list a:hover[b-utcqj0w0nq] {
    color: var(--primary-navy);
}

/* Recent List */
.recent-list[b-utcqj0w0nq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-list li[b-utcqj0w0nq] {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.recent-list li:last-child[b-utcqj0w0nq] {
    border-bottom: none;
}

.recent-list a[b-utcqj0w0nq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
}

.recent-list .title[b-utcqj0w0nq] {
    flex: 1;
    color: var(--gray-700);
    font-size: 0.9375rem;
    transition: color 0.2s;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-list a:hover .title[b-utcqj0w0nq] {
    color: var(--primary-navy);
}

.recent-list .date[b-utcqj0w0nq] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Category Tags */
.category-tags[b-utcqj0w0nq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-tag[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.category-tag:hover[b-utcqj0w0nq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.category-tag .count[b-utcqj0w0nq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 0.75rem;
}

/* Pagination */
.pagination[b-utcqj0w0nq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
}

.page-btn[b-utcqj0w0nq] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover[b-utcqj0w0nq] {
    background: var(--gray-50);
    border-color: var(--primary-navy);
}

.page-info[b-utcqj0w0nq] {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Responsive */
@media (max-width: 768px) {
    .filter-row[b-utcqj0w0nq] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-utcqj0w0nq] {
        width: 100%;
    }

    .filter-actions[b-utcqj0w0nq] {
        margin-left: 0;
        justify-content: stretch;
    }

    .filter-apply-btn[b-utcqj0w0nq],
    .filter-reset-btn[b-utcqj0w0nq] {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .result-card[b-utcqj0w0nq] {
        flex-direction: column;
    }

    .result-thumbnail[b-utcqj0w0nq] {
        width: 100%;
        height: 160px;
    }

    .search-header h1[b-utcqj0w0nq] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/SeriesDetail.razor.rz.scp.css */
.series-detail[b-v5zu5o8o5f] {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.series-header[b-v5zu5o8o5f] {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

.header-overlay[b-v5zu5o8o5f] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.breadcrumb[b-v5zu5o8o5f] {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    font-size: 0.875rem;
    opacity: 0.9;
}

.breadcrumb a[b-v5zu5o8o5f] {
    color: white;
    text-decoration: none;
}

.breadcrumb a:hover[b-v5zu5o8o5f] {
    text-decoration: underline;
}

.breadcrumb span[b-v5zu5o8o5f] {
    margin: 0 0.5rem;
}

.header-content[b-v5zu5o8o5f] {
    max-width: 700px;
}

.series-meta[b-v5zu5o8o5f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.category-link[b-v5zu5o8o5f] {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8125rem;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.category-link:hover[b-v5zu5o8o5f] {
    background: rgba(255, 255, 255, 0.3);
}

.completed-badge[b-v5zu5o8o5f],
.ongoing-badge[b-v5zu5o8o5f] {
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
}

.completed-badge[b-v5zu5o8o5f] {
    background: var(--success);
}

.ongoing-badge[b-v5zu5o8o5f] {
    background: var(--primary);
}

.header-content h1[b-v5zu5o8o5f] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.series-description[b-v5zu5o8o5f] {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0 0 1rem;
}

.series-stats[b-v5zu5o8o5f] {
    display: flex;
    gap: 1.5rem;
}

.stat[b-v5zu5o8o5f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

/* Episode Section */
.episode-section[b-v5zu5o8o5f] {
    padding: 2rem 1rem;
}

.episode-section h2[b-v5zu5o8o5f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}

.episode-section h2 svg[b-v5zu5o8o5f] {
    color: var(--primary);
}

.episode-list[b-v5zu5o8o5f] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.episode-item[b-v5zu5o8o5f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.episode-item:hover[b-v5zu5o8o5f] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(4px);
}

.episode-order[b-v5zu5o8o5f] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 10px;
}

.episode-thumbnail[b-v5zu5o8o5f] {
    flex-shrink: 0;
    width: 80px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.episode-thumbnail img[b-v5zu5o8o5f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-thumb[b-v5zu5o8o5f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
}

.episode-content[b-v5zu5o8o5f] {
    flex: 1;
    min-width: 0;
}

.episode-content h3[b-v5zu5o8o5f] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episode-date[b-v5zu5o8o5f] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.episode-arrow[b-v5zu5o8o5f] {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.2s, transform 0.2s;
}

.episode-item:hover .episode-arrow[b-v5zu5o8o5f] {
    color: var(--primary);
    transform: translateX(4px);
}

/* No Episodes */
.no-episodes[b-v5zu5o8o5f] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 12px;
}

/* Back Link */
.back-link[b-v5zu5o8o5f] {
    padding: 1rem;
    text-align: center;
}

.back-link a[b-v5zu5o8o5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s;
}

.back-link a:hover[b-v5zu5o8o5f] {
    color: var(--primary);
}

/* Skeleton */
.series-detail-skeleton[b-v5zu5o8o5f] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.skeleton-header[b-v5zu5o8o5f] {
    height: 300px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-v5zu5o8o5f 1.5s infinite;
    border-radius: 24px;
    margin-bottom: 2rem;
}

.skeleton-list[b-v5zu5o8o5f] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-item[b-v5zu5o8o5f] {
    height: 82px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-v5zu5o8o5f 1.5s infinite;
    border-radius: 12px;
}

@keyframes shimmer-b-v5zu5o8o5f {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .series-header[b-v5zu5o8o5f] {
        min-height: 250px;
        border-radius: 0;
    }

    .header-overlay[b-v5zu5o8o5f] {
        padding: 1.5rem;
    }

    .breadcrumb[b-v5zu5o8o5f] {
        top: 1rem;
        left: 1.5rem;
        font-size: 0.75rem;
    }

    .header-content h1[b-v5zu5o8o5f] {
        font-size: 1.5rem;
    }

    .series-description[b-v5zu5o8o5f] {
        font-size: 0.9375rem;
    }

    .episode-section[b-v5zu5o8o5f] {
        padding: 1.5rem 1rem;
    }

    .episode-item[b-v5zu5o8o5f] {
        padding: 0.75rem;
    }

    .episode-thumbnail[b-v5zu5o8o5f] {
        width: 60px;
        height: 40px;
    }

    .episode-order[b-v5zu5o8o5f] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .episode-content h3[b-v5zu5o8o5f] {
        font-size: 0.9375rem;
    }
}
/* /Components/Pages/SeriesList.razor.rz.scp.css */
.series-page[b-lougrjeqvq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.series-header[b-lougrjeqvq] {
    margin-bottom: 2rem;
    text-align: center;
}

.breadcrumb[b-lougrjeqvq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.breadcrumb a[b-lougrjeqvq] {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover[b-lougrjeqvq] {
    text-decoration: underline;
}

.breadcrumb span[b-lougrjeqvq] {
    margin: 0 0.5rem;
}

.series-header h1[b-lougrjeqvq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.series-header h1 svg[b-lougrjeqvq] {
    color: var(--primary);
}

.series-subtitle[b-lougrjeqvq] {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* Category Filter */
.filter-section[b-lougrjeqvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.filter-btn[b-lougrjeqvq] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover[b-lougrjeqvq] {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.active[b-lougrjeqvq] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Series Grid */
.series-grid[b-lougrjeqvq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.series-card[b-lougrjeqvq] {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
}

.series-card:hover[b-lougrjeqvq] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-thumbnail[b-lougrjeqvq] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.card-thumbnail img[b-lougrjeqvq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-thumb[b-lougrjeqvq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.completed-badge[b-lougrjeqvq] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--success);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
}

.card-content[b-lougrjeqvq] {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-tag[b-lougrjeqvq] {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.card-content h3[b-lougrjeqvq] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-lougrjeqvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.report-count[b-lougrjeqvq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.report-count svg[b-lougrjeqvq] {
    color: var(--primary);
}

/* No Series */
.no-series[b-lougrjeqvq] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    text-align: center;
}

.no-series svg[b-lougrjeqvq] {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-series p[b-lougrjeqvq] {
    font-size: 1.125rem;
    margin: 0;
}

/* Skeleton Loading */
.series-card.skeleton[b-lougrjeqvq] {
    pointer-events: none;
}

.skeleton-thumbnail[b-lougrjeqvq] {
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-lougrjeqvq 1.5s infinite;
}

.skeleton-content[b-lougrjeqvq] {
    padding: 1.25rem;
}

.skeleton-line[b-lougrjeqvq] {
    height: 1rem;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-lougrjeqvq 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.skeleton-line.short[b-lougrjeqvq] {
    width: 60%;
}

@keyframes shimmer-b-lougrjeqvq {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .series-page[b-lougrjeqvq] {
        padding: 1rem;
    }

    .series-header h1[b-lougrjeqvq] {
        font-size: 1.5rem;
    }

    .series-grid[b-lougrjeqvq] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-section[b-lougrjeqvq] {
        padding: 0.75rem;
    }

    .filter-btn[b-lougrjeqvq] {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
}
/* /Components/Shared/BackToTop.razor.rz.scp.css */
.back-to-top[b-o7yd79fj44] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a5f 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.back-to-top.visible[b-o7yd79fj44] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover[b-o7yd79fj44] {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #1e3a5f 0%, var(--primary-color) 100%);
}

.back-to-top:active[b-o7yd79fj44] {
    transform: translateY(-2px);
}

.back-to-top svg[b-o7yd79fj44] {
    transition: transform 0.2s ease;
}

.back-to-top:hover svg[b-o7yd79fj44] {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .back-to-top[b-o7yd79fj44] {
        /* Safe area support for notched devices */
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: calc(1.5rem + env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
}
/* /Components/Shared/CategoryPageSkeleton.razor.rz.scp.css */
.category-page-skeleton[b-froeml0wrb] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.skeleton-header[b-froeml0wrb] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #E5E7EB;
}

.skeleton-breadcrumb[b-froeml0wrb] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.breadcrumb-item[b-froeml0wrb] {
    height: 14px;
    width: 60px;
}

.skeleton-line[b-froeml0wrb] {
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-froeml0wrb 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-page-title[b-froeml0wrb] {
    height: 36px;
    width: 200px;
    margin-bottom: 12px;
}

.skeleton-description[b-froeml0wrb] {
    height: 16px;
    width: 60%;
}

.skeleton-grid[b-froeml0wrb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@keyframes skeleton-shimmer-b-froeml0wrb {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .skeleton-grid[b-froeml0wrb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .skeleton-grid[b-froeml0wrb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/NewsletterForm.razor.rz.scp.css */
.newsletter-form[b-d12iecvs1n] {
    background: linear-gradient(135deg, #1A365D 0%, #2D4A6F 100%);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: white;
}

.newsletter-icon[b-d12iecvs1n] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #D69E2E;
}

.newsletter-title[b-d12iecvs1n] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.newsletter-desc[b-d12iecvs1n] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    line-height: 1.5;
}

.newsletter-input-group[b-d12iecvs1n] {
    display: flex;
    gap: 8px;
}

.newsletter-input[b-d12iecvs1n] {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.95);
    color: #1F2937;
}

.newsletter-input[b-d12iecvs1n]::placeholder {
    color: #6B7280;
}

.newsletter-input:focus[b-d12iecvs1n] {
    outline: 2px solid #D69E2E;
    outline-offset: 2px;
}

.newsletter-btn[b-d12iecvs1n] {
    padding: 12px 16px;
    background: #92400e; /* Dark amber for better contrast with white text */
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-btn:hover:not(:disabled)[b-d12iecvs1n] {
    background: #78350f; /* Darker amber on hover */
    transform: translateY(-1px);
}

.newsletter-btn:disabled[b-d12iecvs1n] {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-error[b-d12iecvs1n] {
    font-size: 0.75rem;
    color: #FCA5A5;
    margin-top: 8px;
    text-align: left;
}

.newsletter-success[b-d12iecvs1n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    color: #10B981;
    font-size: 0.875rem;
    font-weight: 500;
}

.spinner-small[b-d12iecvs1n] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-d12iecvs1n 0.8s linear infinite;
}

@keyframes spin-b-d12iecvs1n {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
.notification-bell-container[b-mi1zm7n8u5] {
    position: relative;
}

.notification-bell[b-mi1zm7n8u5] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.notification-bell:hover[b-mi1zm7n8u5] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.notification-badge[b-mi1zm7n8u5] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-dropdown[b-mi1zm7n8u5] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    overflow: hidden;
    animation: dropdownSlide-b-mi1zm7n8u5 0.2s ease-out;
}

@keyframes dropdownSlide-b-mi1zm7n8u5 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-header[b-mi1zm7n8u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.notification-header h4[b-mi1zm7n8u5] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-navy);
}

.mark-all-read[b-mi1zm7n8u5] {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--accent-blue);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.mark-all-read:hover[b-mi1zm7n8u5] {
    background: var(--bg-hover);
}

.notification-list[b-mi1zm7n8u5] {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item[b-mi1zm7n8u5] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

.notification-item:hover[b-mi1zm7n8u5] {
    background: var(--bg-hover);
}

.notification-item.unread[b-mi1zm7n8u5] {
    background: #f0f9ff;
}

.notification-item.unread:hover[b-mi1zm7n8u5] {
    background: #e0f2fe;
}

.notification-icon[b-mi1zm7n8u5] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 50%;
    color: var(--primary-navy);
}

.notification-item.unread .notification-icon[b-mi1zm7n8u5] {
    background: var(--primary-navy);
    color: white;
}

.notification-content[b-mi1zm7n8u5] {
    flex: 1;
    min-width: 0;
}

.notification-message[b-mi1zm7n8u5] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-mi1zm7n8u5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.notification-empty[b-mi1zm7n8u5] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.notification-empty svg[b-mi1zm7n8u5] {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.notification-empty p[b-mi1zm7n8u5] {
    margin: 0;
    font-size: 0.9rem;
}

.notification-loading[b-mi1zm7n8u5] {
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
}

.loading-spinner[b-mi1zm7n8u5] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary-navy);
    border-radius: 50%;
    animation: spin-b-mi1zm7n8u5 1s linear infinite;
}

@keyframes spin-b-mi1zm7n8u5 {
    to {
        transform: rotate(360deg);
    }
}

.notification-backdrop[b-mi1zm7n8u5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .notification-dropdown[b-mi1zm7n8u5] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        animation: slideUp-b-mi1zm7n8u5 0.3s ease-out;
    }

    @keyframes slideUp-b-mi1zm7n8u5 {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* /Components/Shared/ReportCardSkeleton.razor.rz.scp.css */
.report-card-skeleton[b-3l5t5sa80b] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.skeleton-thumbnail[b-3l5t5sa80b] {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-3l5t5sa80b 1.5s ease-in-out infinite;
}

.skeleton-content[b-3l5t5sa80b] {
    padding: 16px;
}

.skeleton-line[b-3l5t5sa80b] {
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-3l5t5sa80b 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-title[b-3l5t5sa80b] {
    height: 24px;
    width: 85%;
    margin-bottom: 12px;
}

.skeleton-text[b-3l5t5sa80b] {
    height: 16px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text.short[b-3l5t5sa80b] {
    width: 70%;
}

.skeleton-meta[b-3l5t5sa80b] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.skeleton-meta-item[b-3l5t5sa80b] {
    height: 12px;
    width: 60px;
}

@keyframes skeleton-shimmer-b-3l5t5sa80b {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
/* /Components/Shared/ReportDetailSkeleton.razor.rz.scp.css */
.report-detail-skeleton[b-nsu2geqsul] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.skeleton-main[b-nsu2geqsul] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skeleton-line[b-nsu2geqsul] {
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-nsu2geqsul 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Header */
.skeleton-header[b-nsu2geqsul] {
    margin-bottom: 2rem;
}

.skeleton-breadcrumb[b-nsu2geqsul] {
    display: flex;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.breadcrumb-item[b-nsu2geqsul] {
    height: 14px;
    width: 50px;
}

.skeleton-badge[b-nsu2geqsul] {
    height: 24px;
    width: 80px;
    margin-bottom: 1rem;
}

.skeleton-title[b-nsu2geqsul] {
    height: 32px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-title.short[b-nsu2geqsul] {
    width: 70%;
}

.skeleton-meta-line[b-nsu2geqsul] {
    display: flex;
    gap: 16px;
    margin-top: 1rem;
}

.meta-item[b-nsu2geqsul] {
    height: 14px;
    width: 80px;
}

/* Hero Image */
.skeleton-hero[b-nsu2geqsul] {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    margin-bottom: 2rem;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-nsu2geqsul 1.5s ease-in-out infinite;
}

/* Summary */
.skeleton-summary[b-nsu2geqsul] {
    background: #F9FAFB;
    border-left: 4px solid #E5E7EB;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 8px 8px 0;
}

.skeleton-summary .full[b-nsu2geqsul] {
    height: 18px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-summary .full:last-child[b-nsu2geqsul] {
    width: 85%;
    margin-bottom: 0;
}

/* Content */
.skeleton-content[b-nsu2geqsul] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paragraph[b-nsu2geqsul] {
    height: 16px;
    width: 100%;
}

.paragraph.short[b-nsu2geqsul] {
    width: 80%;
    margin-bottom: 16px;
}

/* Sidebar */
.skeleton-sidebar[b-nsu2geqsul] {
    height: fit-content;
}

.skeleton-sidebar-section[b-nsu2geqsul] {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title[b-nsu2geqsul] {
    height: 20px;
    width: 120px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E5E7EB;
}

.skeleton-related-item[b-nsu2geqsul] {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.related-category[b-nsu2geqsul] {
    height: 12px;
    width: 60px;
    margin-bottom: 8px;
}

.related-title[b-nsu2geqsul] {
    height: 14px;
    width: 100%;
}

@keyframes skeleton-shimmer-b-nsu2geqsul {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .report-detail-skeleton[b-nsu2geqsul] {
        grid-template-columns: 1fr;
    }

    .skeleton-sidebar[b-nsu2geqsul] {
        order: -1;
    }
}

@media (max-width: 640px) {
    .skeleton-main[b-nsu2geqsul] {
        padding: 1rem;
    }

    .skeleton-title[b-nsu2geqsul] {
        height: 24px;
    }
}
/* /Components/Shared/ReportListSkeleton.razor.rz.scp.css */
.report-list-skeleton[b-vzckt09j8j] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 12px;
}

.skeleton-item-thumbnail[b-vzckt09j8j] {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-vzckt09j8j 1.5s ease-in-out infinite;
}

.skeleton-item-content[b-vzckt09j8j] {
    flex: 1;
    min-width: 0;
}

.skeleton-line[b-vzckt09j8j] {
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-vzckt09j8j 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-category[b-vzckt09j8j] {
    height: 12px;
    width: 80px;
    margin-bottom: 8px;
}

.skeleton-item-title[b-vzckt09j8j] {
    height: 20px;
    width: 90%;
    margin-bottom: 12px;
}

.skeleton-item-meta[b-vzckt09j8j] {
    display: flex;
    gap: 16px;
}

.skeleton-item-meta-item[b-vzckt09j8j] {
    height: 12px;
    width: 50px;
}

@keyframes skeleton-shimmer-b-vzckt09j8j {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .report-list-skeleton[b-vzckt09j8j] {
        flex-direction: column;
    }

    .skeleton-item-thumbnail[b-vzckt09j8j] {
        width: 100%;
        height: 160px;
    }
}
/* /Components/Shared/ShareButtons.razor.rz.scp.css */
.share-buttons[b-qpfx2oua16] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    margin: 24px 0;
}

.share-label[b-qpfx2oua16] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
}

.share-icons[b-qpfx2oua16] {
    display: flex;
    gap: 8px;
}

.share-btn[b-qpfx2oua16] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.share-btn:hover[b-qpfx2oua16] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-btn:active[b-qpfx2oua16] {
    transform: translateY(0);
}

.share-btn.kakao[b-qpfx2oua16] {
    background: #FEE500;
    color: #3C1E1E;
}

.share-btn.kakao:hover[b-qpfx2oua16] {
    background: #F5DC00;
}

.share-btn.facebook[b-qpfx2oua16] {
    background: #1877F2;
}

.share-btn.facebook:hover[b-qpfx2oua16] {
    background: #166FE5;
}

.share-btn.x-share[b-qpfx2oua16] {
    background: #000000;
}

.share-btn.x-share:hover[b-qpfx2oua16] {
    background: #333333;
}

.share-btn.linkedin[b-qpfx2oua16] {
    background: #0A66C2;
}

.share-btn.linkedin:hover[b-qpfx2oua16] {
    background: #0958A8;
}

.share-btn.copy[b-qpfx2oua16] {
    background: #6B7280;
}

.share-btn.copy:hover[b-qpfx2oua16] {
    background: #4B5563;
}

@media (max-width: 480px) {
    .share-buttons[b-qpfx2oua16] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .share-btn[b-qpfx2oua16] {
        width: 36px;
        height: 36px;
    }

    .share-btn svg[b-qpfx2oua16] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Shared/SidebarSkeleton.razor.rz.scp.css */
.sidebar-skeleton[b-oqpiujsemp] {
    display: flex;
    flex-direction: column;
}

.sidebar-skeleton-item[b-oqpiujsemp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
}

.sidebar-skeleton-item:last-child[b-oqpiujsemp] {
    border-bottom: none;
}

.skeleton-rank[b-oqpiujsemp] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-oqpiujsemp 1.5s ease-in-out infinite;
}

.skeleton-dot[b-oqpiujsemp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-oqpiujsemp 1.5s ease-in-out infinite;
}

.skeleton-line[b-oqpiujsemp] {
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-oqpiujsemp 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-sidebar-title[b-oqpiujsemp] {
    flex: 1;
    height: 14px;
}

.skeleton-count[b-oqpiujsemp] {
    width: 28px;
    height: 18px;
    border-radius: 10px;
    background: linear-gradient(90deg,
        #E5E7EB 25%,
        #F3F4F6 50%,
        #E5E7EB 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-oqpiujsemp 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-oqpiujsemp {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
/* /Components/Shared/Skeleton.razor.rz.scp.css */
.skeleton[b-g20qik3x34] {
    background: linear-gradient(90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-g20qik3x34 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer-b-g20qik3x34 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton Variants */
.skeleton.skeleton-text[b-g20qik3x34] {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton.skeleton-title[b-g20qik3x34] {
    height: 1.5em;
    width: 60%;
    margin-bottom: 0.75em;
}

.skeleton.skeleton-paragraph[b-g20qik3x34] {
    height: 1em;
    width: 100%;
    margin-bottom: 0.5em;
}

.skeleton.skeleton-paragraph:last-child[b-g20qik3x34] {
    width: 80%;
}

.skeleton.skeleton-circle[b-g20qik3x34] {
    border-radius: 50%;
}

.skeleton.skeleton-avatar[b-g20qik3x34] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton.skeleton-thumbnail[b-g20qik3x34] {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
}

.skeleton.skeleton-thumbnail-sm[b-g20qik3x34] {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
}

.skeleton.skeleton-badge[b-g20qik3x34] {
    width: 60px;
    height: 20px;
    border-radius: 4px;
}

.skeleton.skeleton-button[b-g20qik3x34] {
    width: 100px;
    height: 36px;
    border-radius: 8px;
}
/* /Components/Shared/TagFollowButton.razor.rz.scp.css */
.tag-follow-btn[b-cqodoblis6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid var(--tag-color, var(--gray-400));
    background: transparent;
    color: var(--tag-color, var(--gray-600));
}

.tag-follow-btn:hover[b-cqodoblis6] {
    background: var(--tag-color, var(--primary-navy));
    color: white;
}

.tag-follow-btn.following[b-cqodoblis6] {
    background: var(--tag-color, var(--primary-navy));
    border-color: var(--tag-color, var(--primary-navy));
    color: white;
}

.tag-follow-btn.following:hover[b-cqodoblis6] {
    background: transparent;
    color: var(--tag-color, var(--gray-600));
}

.tag-follow-btn:disabled[b-cqodoblis6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tag-follow-btn svg[b-cqodoblis6] {
    flex-shrink: 0;
}

.spinner[b-cqodoblis6] {
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-cqodoblis6 0.8s linear infinite;
}

@keyframes spin-b-cqodoblis6 {
    to {
        transform: rotate(360deg);
    }
}

.follower-count[b-cqodoblis6] {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}